블로그

rhrud0412

[인프런 워밍업 클럽 스터디 3기] 프로덕트 디자인 1주차 발자국

[1주차 학습]디자인 토큰과 베리어블 구조 이해베리어블 등록 : color, typography, spacing, elevation, border(radius, width),  반응형 기준점 : breakpoint, grid  [회고] 강의를 복습하면서, 이전에는 단순히 따라가기만 했던 개념과 구조에 대한 이해가 더 명확해진 것 같다.  또한, 타이포그래피와 그림자의 경우 기존에는 스타일만 등록해봤는데, 이번에 베리어블로 등록하는 과정을 경험하면서 신기하면서도 어떻게 활용할 수 있을지 생각해보게 된 것 같다. 그리고 그리드 시스템의 Fixed와 Fluid 개념을 알게 되어 좋았다. 이번 주는 시간이 날 때마다 조금씩 강의를 들으며 과제를 진행했는데, 앞으로도 꾸준히해서 스터디를 끝까지 완주하는 것을 목표로 하고 싶다. 💪

UX/UI･인프런워밍업클럽･디자인시스템･피그마･볼드UX

김예원

[인프런 워밍업 클럽 스터디 3기] 프로덕트 디자인 4주 차 발자국

4주 차 학습 내용B2B 이커머스 어드민 페이지 디자인B2C 이러닝 페이지 모바일 OTT 서비스 페이지4주 차 학습 회고이번에 도메인별로 페이지를 만들어보면서 모드가 어떻게 동작하는지 명확하게 이해할 수 있었습니다. 덕분에 이제는 제가 원하는 대로 헤더, 내부 콘텐츠, 패딩, 갭 등 반응형 구성 요소들을 더 자유롭게 제어할 수 있을 것 같아요. 특히, 반응형 작업을 하면서 어떤 요소는 감추고 어떤 건 보이게 하는 제어까지도 모드로 관리할 수 있다는 게 정말 신기하고 재미있었습니다.스터디 이전에 완강을 했었지만 앞부분만 따라 만들어보고 뒷부분은 듣기만 했었는데, 이번 스터디를 통해 직접 끝까지 만들어보니 훨씬 이해가 잘 됐어요. 좋은 강의 만들어주셔서 감사합니다! 기본이 되는 디자인 시스템을 잘 학습했고, 이제 다음 단계로 나아갈 준비가 된 것 같습니다. 🙌🙌🙌

UX/UI･UX/UI･디자인･배리어블･피그마･디자인시스템･UXUI･워밍업클럽･인프런워밍업클럽스터디･볼드UX･figma

aabb

4-29 | 피그마 베리어블과 디자인 토큰/ 디자인 시스템 개념이해하기

● 배리어블 과 스타일 배리어블은 하나의 변수만 저장 가능하며 참조할 수 있다. 따라서 기본 디자인 요소를 적용할 때 주로 사용된다.스타일은 다수의 변수까지도 저장이 가능하며 참조할 순 없다. 따라서 다수의 디자인 요소를 적용할 때 사용된다. ● 배리어블의 역할 배리어블은 디자인 토큰 및 프로토타이핑 기능을 한다. *디자인 토큰이란?디자인 시스템의 기본 구성 요소로서, 전자(Electrons)에 해당한다. /디자인 토큰이 필요한 이유많은 디자이너와 함께 작업할 때 일관성을 유지 할 수 있음다양한 플랫폼 환경(IOS, ANDROID등)에 공통된 디자인을 적용할 수 있음라이트 모드, 다크 모드 등 명확하게 색상을 구분해야 할 때 용이함 많은 하위 브랜드들이 존재할 때 디자인 에셋을 관리하기 용이함*디자인 시스템이란?재사용 가능한 컴포넌트와 패턴 등을 말하며,1) 디자인 원칙/철학 2) 스타일 가이드 3) 컴포넌트 라이브러리 4) 패턴라이브러리 5) 문서화 6) 시스템 관리 운영 으로 구성된다. *Atomic Design이란?디자인 시스템 방법론으로, 전자(Electorns) → 원자(Atom) → 분자(Molecules) → 유기체(Organisms) → 템플릿(Templates) → 페이지(pages)로 UI 시스템을 구성한다는 개념 이다. /전자(Electrons) ex. 색상, 타이포그래피, 테두리 , 그림자효과원자(Atom) ex. 라벨, 텍스트 필드, 버튼

UX/UI･볼드UX･워밍업클럽

한석환

[인프런 워밍업 클럽 스터디 3기] 프로덕트 디자인 4주차 발자국

📖4주차 학습내용디자인시스템과 배리어블 모드를 활용한 디자인 페이지 만들기1. B2B 어드민 페이지이커머스 회원계정 관리 페이지반응형 환경을 고려하여 Side Navigation과 Content 영역 레이아웃 설계배리어블 모드: Width, Spacing, Navigation Type, Boolean이 자동으로 변경되도록 설정 2. B2C 이러닝 페이지이러닝 홈페이지 디자인콘텐츠 썸네일 프로토타이핑을 고려하여 프레임/오토레이아웃 크기 설정 방법플러그인을 활용하여 데이터를 피그마에 바로 입력하는 방법반응형 환경을 고려하여 콘텐츠 영역 내 카드 썸네일 형태, 크기, 패딩 등 값을 배리어블에 설정 3. OTT 모바일OTT 모바일 홈 화면, 콘텐츠 상세 페이지 디자인(이하 이러닝 페이지와 동일함)☺좋았던 점디자인시스템, 배리어블 모드, 반응형 디자인 모두 활용해야 되서 처음에는 오래 걸렸지만, 반복적으로 만들면서 중복된 요소들이 보이게 되어 익숙해질 수 있었습니다.프로덕트 디자인을 보는 눈이 넓어지고, 디자인할 때 눈에 보이는 것 뿐 아니라 보이지 않는 것도 고려해야 함을 배울 수 있었습니다. 😁잘한 점강의를 따라 디자인하는 것도 힘든 일인데, 새로운 문제를 발견해서 스스로 고민하고 해결하려고 노력해본 것.어드민페이지를 배리어블 모드로 다른 디바이스로 전환할 때 Side Navigation의 Width가 의도와 다르게 변하는 문제가 있었습니다. 이 문제를 해결하는 과정에서 배리어블 모드를 사용할 때 발생하는 이슈에 대해 인지하게 되었고, 이를 대비해서 디자인시스템을 관리하는 것이 중요함을 배울 수 있었습니다. 😅아쉬운 점OTT 페이지에서 반응형과 프로토타이핑을 모두 고려해서 디자인하는 것에 저 스스로 한계를 느꼈습니다. 넷플릭스처럼 콘텐츠 크기 비율을 일정하게 유지하는 반응형을 만들 수 있었지만, 프로토타이핑을 적용하기 어려워서 만족스러운 결과물은 아니었습니다. 추후 계획강의 복습하기: 처음에 배웠던 내용들이 잘 기억나지 않아서 그 부분부터 복습하기 다른 서비스 디자인시스템 찾아보기(특히 볼드님이 알려주신 디자인시스템들)프로토타이핑, 인터렉션 학습하기 

UX/UI･인프런워밍업클럽･Figma･배리어블･디자인시스템･볼드UX

junghlee234

[인프런 워밍업 클럽 스터디 3기 - 프로덕트 디자인 (Figma)] 4주차 발자국

진행 기간: 4주차(20250323-20250330)진행 강의:[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기 학습 내용네비게이션 컴포넌트, 모드 활용(다크모드, 통합 브랜드 구현, 반응형 디자인, 다중언어)컴포넌트 부분에서는 마지막인 네비게이션 관련 부분을 학습하였습니다.링크, 탭, 바텀 네비게이션, 사이드 네비게이션, 글로벌 네비게이션, 페이지네이션, 케러셀네비게이션 컴포넌트는 어떻게 보면 제일 많이 쓰이는 중요한 요소일 수 있는데, 개발자 입장에서는 제일 구현을 안하는 요소이기도 한 것 같습니다. 전부 라이브러리로 가져다 쓰는 부분이 많아서, 원리만 생각하고 많이 사용했던 것 같습니다. 이번에 네비게이션 컴포넌트를 배우면서 개발 원리를 배우지는 않았지만 "실제로 구현을 할 수 있겠다"는 생각과 라이브러리에만 의존하는 것이 아니라 "차별화 된 디자인적 요소"를 반영 할 수 있다는 생각이 들었습니다.모드 활용 부분을 진행하면서 실제로 개발을 해보지 않고도 많은 시나리오를 미리 계획할 수 있고, 테스트 해 볼 수 생각이 들었습니다.브랜드 통합 부분에서는 기본 UX 요소를 배리어블과 모드를 통해서 쉽게 전환이 가능했습니다.모드를 활용하면 개발 전에 여러 디바이스 들을 대응하기가 매우 용이하였습니다.언어의 경우에도 아직은 많이 부족하지만, 어느 정도는 시나리오를 테스트 할 수 있었습니다.B2B 어드민, B2C 이러닝, 모바일 OTT 앱이 부분은 앞에서 왜 열심히 컴포넌트를 만들고 모드를 활용하는 법을 배웠는지에 대해서 알 수 있는 실습 위주의 파트였습니다. 또한, 실제 피그마를 사용하는 시나리오와 제일 유사한 환경이기도 하였습니다.이 파트는 워밍업 클럽을 하지 않더라도 꼭 진행을 스스로 해봐야 한다는 생각이 드는 파트였습니다.컴포넌트, 파운데이션 등을 미리 정확히 준비해 놓고 화면을 구성하는 것과 아닌 것이 엄청나게 많이 차이났기 때문입니다.강의를 듣기 전에 앱 디자인을 했을 때, 딱 이 강의의 반대로 했기 때문에 UX 구현시에 많은 시간을 소모했었습니다.강의 수강 이후로는 앱을 빠르게 디자인 하고, 다른 부분에 시간을 더 투자할 수 있을 것 같습니다.개인적으로 이 파트는 뒤로 갈수록 개인적으로 난이도가 쉬워졌습니다.여러 페이지를 만들면서 중복된 요소들이 등장하고 만드는 법이나 스스로의 노하우가 늘어난다는 생각이 들었습니다. 4주차 및 강의와 활동을 마치며중간 점검 미팅에서 선생님은 디자이너로서 개발을 해보면 내 프로덕트에서 더 디자인이 나아질 부분이 있다는 것을 발견하신다고 하셨는데, 저는 반대로 UX구현을 좀 더 체계적으로 진행하면서 개발자로서는 부족하지 않지만, 사용자로서는 부족했을 요소들, 실제로는 그렇게 개발하면 안되는 요소들을 많이 찾아 볼 수 있게 되었습니다.모든지 쉽게 할 수 있는 AI 시대에 스스로의 생각으로는 개발자, 기획, 디자인의 끝은 만류귀종으로 "개인의 경쟁력" 하나로 귀결된다는 생각이 들었습니다.미팅에서 말씀하셨던 것처럼 개개인의 주요 전공과 더불어, 노하우와 제품을 보는 눈과 같은 "개인의 경쟁력"을 지속적으로 발전시켜야 한다는 생각이 들었습니다.또한 앱이나 웹 등을 개발하거나 디자인을 하더라도, 나만의 요소(디자인 시스템, 기술적인 구현, 참신한 아이디어 등)에 AI를 적극적으로 도입하여서 스스로의 작은 기획과 테스트를 여러 번 진행 하고 실제 출시 시에는 완성도가 높고 성장성이 높은 프로덕트를 낼 수 있겠다는 생각이 들었고 실제로 그렇게 해보려고 합니다.워밍업 클럽을 하기 전에는 사실 이 많은 부분을 다 할 수 있을까 생각이 많이 들었지만 2가지 요소 덕분에 완강 및 미션을 모두 진행할 수 있었습니다. 강의에서 처음 피그마를 하는 사람도 들을 수 있을 정도로 자세하고 친절하게, 또 실제 구현시에 노하우를 숨김 없이 알려주십니다.워밍업 특성상 타임 리밋이 있다는 점이 집중도를 매우 높일 수 있는 부분이 있습니다.강의를 듣기 전과 들은 후가 스스로에게 있어 많은 차이가 있다고 생각이 듭니다. 특히 전체적인 프로덕트를 보는 눈이 넓어졌고, 개발자지만 막상 앱을 구현하라고 하면 막막한데, 이제는 구현이 가능하다고 자신있게 말할 수 있을 것 같습니다. 특히 개발자의 경우에는 지엽적으로 개발하는 경우가 많고, 전체적인 맥락을 모르고 개발하는 경우가 많은데, 이 강의를 듣고 실습을 실제로 진행한다면 전체 프로세스를 보는 눈이 생길 것이라고 생각하며 꼭 강의를 들어 보시고 실습도 해보시기를 추천 합니다! 

UX/UI･인프런_워밍업_클럽･UX/UI･Figma･디자인시스템･볼드UX

rhrud0412

[인프런 워밍업 클럽 3기] 프로덕트 디자이너 4주차 발자국

[4주차 학습]B2B 이커머스 어드민 페이지B2C 이러닝 페이지모바일 OTT 서비스 페이지→3개의 페이지를 통해 그동안 만들어온 컴포넌트를 재활용해 페이지를 구성하고, 베리어블을 활용해 브랜드 모드, 다크모드, 반응형을 반복적으로 적용해볼 수 있어 좋았다.  [전체 회고]예전에는 단순히 따라가기만 했던 내용을 이번에는 이해하며 따라갈 수 있어 만족스러웠다.특히, 이번 워밍업 클럽을 통해 업데이트된 내용을 과제를 통해 하나하나 실습하며 익힐 수 있었던 점이 큰 도움이 되었다.마지막 주에는 꾸준히 진행하지 못하고 벼락치기 식으로 과제를 제출한 점이 아쉽지만, 끝까지 완주했다는 점에서 뿌듯함을 느낀다. 

UX/UI･볼드UX･디자인시스템･피그마･워밍업클럽

윤기숙

[인프런 워밍업 클럽 스터디 3기] 프로덕트 디자인 4주차 발자국

4주차 - 학습 내용 정리1. B2B 이커머스 어드민 페이지 디자인2. B2C 이러닝 페이지3. 모바일 OTT 서비스 페이지  4주차 - 회고 및 느낀 점 😆좋았던 점사실 작년에 시작한 강의를 초반에 보다가 미루고 있었는데, 완강을 할 수 있었던 점이 진짜 최고로 좋았다. (완벽히 다 따라간 강의는 이 강의가 처음이다. 워밍업클럽 덕분이다.)작년에 이 강의를 시작할 때 UI3가 워낙 많이 변경된 부분이 많아서 어려운 부분이 있었는데, 이렇게 강의 업데이트를 해주신 것이 너무 좋았다. 처음에 UI3가 상당히 불편하다고 느꼈는데, 이번 강의 들으면서 베리어블을 이해하면서 왜 피그마에서 이렇게까지 많이 변경하면서 UI업데이트를 강행했는지 이해할 수 있었던 부분도 좋았다.그동안 실습해 본 모든 것을 토대로, 어드민 페이지, 이러닝 페이지, 모바일 페이지에 반응형과 모드를 적용해가면서 실제 사이트 연습하면서 마무리한 것도 좋았다.😅아쉬웠던 점한달동안 매일 조금씩이라도 강의를 들으면서 실습하는 습관이 들었었는데, 이번주에 먼 여행으로 참여하지 못해서 가기 전과 다녀와서 몰아치기로 마무리 했던 것이 아쉽다. 그래도 완강과 미션에 부담이 많았는데, 무사히 끝낼 수 있어서 다행이었다.😍 앞으로 바라는 점이전에 만들었던 디자인 시스템을 이번에 배운 내용을 적용해서 다시 적용해보는 작업을 진행할 수 있으면 좋겠다.피그마에서 처음 다크모드와 함께 베리어블 기능을 선보였을 때 그때 느꼈던 감정이 생각난다. 상당히 놀랍고 신기했지만 저걸 언제 배워서 실무에 쓸 수 있을까? 그런 마음도 있었던 것 같다. 상당히 바쁘게 진행되는 프로젝트에 무언가 새로운 것을 적용하기가 쉽지 않았기 때문이다. 디자이너로서 뭔가 더 개발을 이해해야할 것만 같은 부담감을 느꼈던 것도 같고, 아무튼 시간이 나면 배워보자 하면서 미뤄왔다가 이제서야 이해하게 된 것이 뭔가 좀 후회스러운 마음이 들기도 한다. 이번 일을 계기로 많은 생각을 해보게 된다. 모든 강의를 다시 UI3로 업데이트를 하신 볼드님을 보면서, 디자인 시스템도 마찬가지라는 생각이 든다. 기존 것을 다시 세우는 일은 분명 엄청난 시간과 노력, 그리고 리스크가 있다. 하지만 앞으로 미래를 바라본다면 분명 가치있는 투자가 된다. 다음번 서비스를 구축할 때는 이점을 기억하며서 디자인을 하려고 한다.

UX/UI･볼드UX･디자인시스템･피그마･워밍업클럽

junghlee234

[인프런 워밍업 클럽 스터디 3기 - 프로덕트 디자인 (Figma)] 3주차 발자국

학습 내용저번 주에 처리하지 못한 입력 및 디스플레이 컴포넌트 관련 내용을 학습하였습니다.  이번 주와 관련하여 피드백 컴포넌트 관련 내용을 학습하였습니다.이번 주 발자국을 작성하고 난 후 네비게이션 컴포넌트와 모드 관련 내용을 학습할 예정입니다.미션 및 실습특히, 이번 주 컴포넌트 실습에 있어서 '티끌 모아 태산'이라는 말이 많이 생각이 났습니다. 여러 컴포넌트를 불러와 인스턴스로 또 하나의 컴포넌트를 조합하는 일이 매우 많았기 때문에, 하나의 컴포넌트가 잘 완성이 되어 있지 않으면 연쇄적으로 영향을 주는 경우가 많았습니다.프로토타입을 피그마에서 사용시 스피너, 스켈레톤을 움직이게 만드는데 활용한 경우는 없었고, 터치로 인한 스크린 전환 같은 UI/UX 흐름에만 활용을 했었는데 관련하여 많은 배움을 얻을 수 있었습니다.사실 개발시에도 라이브러리를 import 하는 식으로 구현하는 경우가 많아서 이번 구현이 처음이었습니다.회고이번 주는 아직 전체 진도를 따라가진 못했지만, 정말 많은 것들을 배울 수 있었던 주였습니다.오늘 밤과 내일 사이에 남은 진도를 따라 잡아 다음 주부터는 여유롭게 지금까지 했었던 것들을 차근차근 확인하며 마무리 할 수 있는 시간을 가지도록 노력할 것입니다.

UX/UI･인프런_워밍업_클럽･UX/UI･Figma･디자인시스템･볼드UX

김예원

[인프런 워밍업 클럽 스터디 3기] 프로덕트 디자인 3주 차 발자국

3주 차 학습 내용네비게이션 컴포넌트링크, 브레드크럼네비게이션 탭모바일 하단 네비게이션사이드 네비게이션글로벌 네비게이션페이지네이션이미지 캐러셀베리어블 모드다크모드브랜드 모드반응형 모드다중언어 모드3주 차 학습 회고스스로 칭찬하고 싶은 점포기하지 않고 기한 내에 미션 제출!아쉬웠던 점 / 보완하고 싶은 점 / 다음 주에는 어떻게 학습할지모드는 실무에서 아직 사용하고 있지 않아 재학습하는데 시간이 좀 더 걸렸던 것 같다. 더 여러번 반복해서 봐야할 것 같다!!! 🔥

UX/UI･디자인･배리어블･피그마･디자인시스템･UXUI･워밍업클럽･인프런워밍업클럽스터디･figma･볼드UX･피그마배리어블을활용한디자인시스템구축

윤기숙

[인프런 워밍업 클럽 스터디 3기] 프로덕트 디자인 3주차 발자국

📖 3주차 - 학습 내용 정리1. 피드백 컴포넌트 Alert, Toast, Progress bar, Spinner loader, Skeleton loader, Slot, ModalProgress bar의 길이가 적용되기 위해 Constraints → Scale을 적용Spinner loader를 위해 Ark 조정 및 프로토타입을 통해 적용해보는 것이 좋았다. 2. 네비게이션 컴포넌트 Link, Tabs, Breadcrumbs, Navigation, Pagination, Carousel 3. 베리어블 모드모드가 필요한 때는 언제인가?라이트모드, 다크모드멀티브랜드 지원디바이스별 대응다중언어 지원시다크 모드는 왜 필요할까?- 빛이 덜 발산해서 배터리가 덜 듦, 저시력자의 경우 다크 모드를 선호, 몰입형 미디어 경우.다크모드는 단순히 색상을 반전시키는 것이 아니다. 반전 후 접근성을 반드시 체크해야한다. 기타 베리어블 모드 활용 - 브랜드 모드, 반응형, 멀티 언어 전환하기.반응형 모드를 만들 때, 반드시 오토레이아웃을 만들어야 Min-width, Max-width 설정 가능. 💡 3주차 - 회고 및 느낀 점 😆 좋았던 점나에게 베리어블도 생소한 편이였는데 모드 전환은 진짜 신세계였다. 4가지 모드별로 직접 변환하고 실습할 수 있었던 점이 진짜 도움이 많이 되었다고 생각한다. 지난주까지는 그저 따라가기 바빴는데, 이번 주차 부터는 조금 더 왜 이런것이 필요한지, 어떤 경우에 쓰면 좋은지 이해하면서 진행할 수 있게 된 점이 좋았다. 체계적으로 강의가 진행되면서, 처음에는 익숙하지 않았던 부분들도 3주차되면서는 자연스럽게 적응 되는 그런 학습 진도가 너무 좋았던 것 같다. 😅 아쉬웠던 점분명 순서대로 모든 강의 내용대로 따라갔다고 생각했는데, 모드 전환이나 여러가지를 통해서, 보다보면 빠진 부분들을 발견하게 되었다. 그런 부분들을 다시 돌아가서 추가하고, 변경하고 그런부분들에 생각보다 시간 소요가 많이 있었다. 가끔 모드를 전환시 어떤 부분들은 가끔 변경되지 않는 부분들을 발견한다. 😍 앞으로 바라는 점다음주는 가족 여행 계획이 있어서 얼마나 미션을 할 수 있을지 모르겠는데 끝까지 최선을 다하자. 

UX/UI･볼드UX･디자인시스템･피그마･워밍업클럽

rhrud0412

[인프런 워밍업 클럽 3기] 프로덕트 디자이너 3주차 발자국

[3주차 학습]피드백 컴포넌트 : alert, toast, progress bar, spinner loader, skeleton loader, slot, modal2. 네비게이션 컴포넌트 : link, tabs, breadcrumbs, navigation, pagination, carousel3. 베리어블 모드 : 라이트/다크 모드, 브랜드 모드, 반응형 설정, 멀티 언어 전환하기[회고]기존에 베리어블로 적용했던 타이포그래피를 모드를 활용해서 반응형 화면에 적용해 볼 수 있어서 좋았다. 또한, 모드를 이용해 멀티 언어 전환을 시도해 볼 수 있어서 유익했다. 처음에 언어 전환은 되는데 컴포넌트화된 이미지가 전환되지 않아서 어디서 연결이 안된건지 뚫어져라 본 것 같다..ㅎㅎ이번 주는 모드를 이용해 다양한 시도를 해볼 수 있어서 재미있었고, 완주에 한 걸음 더 다가간 것 같아서 기분이 좋다.

UX/UI･볼드UX･디자인시스템･피그마･워밍업클럽

한석환

[인프런 워밍업 클럽 스터디 3기] 프로덕트 디자인 3주차 발자국

📖3주차 학습내용1. Feedback 컴포넌트알림, 토스트는 Information, success, warning, error 등 시스템 상태를 고려한 컴포넌트 set를 만들어습니다.Spinner loader, Skeleton는 화면 대기 중에 나타나는 프로토타입을 고려한 컴포넌트 set을 만들었습니다.Modal은 사용 목적에 따라 다양하게 쓰이기 때문에 Slot 컴포넌트를 알게 되었으며, 하나의 모달 컴포넌트를 가지고 여러 형태를 만들 수 있었습니다.2. Navigation 컴포넌트Bottom, Side, Global 네비게이션을 만들 때 포함되는 메뉴 Item 컴포넌트를 Default, Hovered, Pressed, Selected 등 인터렉션된 상태를 고려하여 만들었습니다. 특히 Side는 다양한 디바이스 환경을 고려하여 여러 Type을 만들어야 했으며, Global은 선택했을 때 공개되는 하위 메뉴부터 알림, 프로필 같은 Utility적인 기능까지 고려해야 했죠.3. 배리어블 모드라이트/다크, 멀티 브랜드, 디바이스 별 반응형, 다중 언어 지원 등에서 apply variable mode만 변경하여 적용하는 방법에 대해 배웠습니다. 멀티 브랜드: 브랜드에 따른 컬러 및 타이포는 Primitive를 가지고 Theme 배리어블을 추가로 만들고, Semantic에 Theme 배리어블을 등록하여 컴포넌트나 디자인 요소에 적용시키기반응형디바이스에 따른 컴포넌트 set을 만들고, 각 이름을 가진 String 배리어블을 만들고 인스턴스 배리언트 프로퍼티에 연결시키기.컨텐츠 영역에선 Min Width와 constraints를 L+R을 적용해서 디바이스 크기 별로 바로 대응할 수 있게 설정하기.다중 언어:기존 컴포넌트를 가지고 새로운 컴포넌트 set 및 목적에 따른 배리언트 프로퍼티 만들기 -> String 배리어블 -> 인스턴스의 배리언트 프로퍼티에 배리어블 연결 -> 배리어블 모드 지정국가별 문화 및 언어습관을 고려하여 좌측 정렬, 우측 정렬, 이미지 및 텍스트 컨텐츠 등 변경이 가능함. ☺좋았던 점배리어블 모드 기능을 사용하려면 어떻게 Setting해야 하는지 배울 수 있었습니다.컴포넌트를 구성하는 Part 요소의 인터렉션을 고려하여 만들면서 컴포넌트 체계에 대해 자세히 알 수 있었습니다.😁잘한 점커리큘럼에 맞춰서 미루지 않고 정해진 할당량을 채우려고 노력했어요.특별히 잘한 점이 뭐가 있는지 기억이 안 납니다... 이번 주는 배울 게 많아서 특별히 더 잘하려고 노력하지 못했어요.😅아쉬운 점Responsive 파트에서 강의를 따라 만들었는데 잘 되지 않았습니다. 컴포넌트 내부에 fill, hug, min width 등 고려할 변수가 많은데 익숙하지 않아 자꾸 헷갈리더라구요. 컴포넌트의 구성 요소가 복잡해질수록 따라 만들기 버거웠습니다. 특히 네비게이션 컴포넌트는 내부에 들어갈 컴포넌트가 다양해서 영상을 여러 번 돌려봤어요.

UX/UI･인프런워밍업클럽･디자인시스템･배리어블･Figma･볼드UX

rockoil

[인프런 워밍업 클럽 스터디 3기] 프로덕트 디자인 2주 차 발자국

2주 차 학습 내용색상 베리어블 타이포그래피 배리어블기타스타일2주 차 학습 회고스스로 칭찬하고 싶은 점회사 업무에 완강하려니 너무나 힘들었습니다. 그래도 해내고 있다니 뿌듯합니다.아쉬웠던 점 / 보완하고 싶은 점 / 다음 주에는 어떻게 학습할지남들보다 진도가 늦춰지긴 했으나 나만의 진도가 있으니 꾸준히 하자2주 차 미션 해결 과정어떤 관점에서 접근했는지 / 문제를 해결하는 과정은 무엇이었는지 /왜 그런 식으로 해결했는지 / 미션 해결에 대한 회고디자이너가 아니지만 그래도 진도를 나가고 있고 강의를 다시금 복습하고 있다.

UX/UI･디자인･배리어블･피그마･디자인시스템･UIUX･위밍업클럽･인프런워밍업클럽스터디･figma･볼드UX･피그마배리어블을활요한디자인시스템구축

김예원

[인프런 워밍업 클럽 스터디 3기] 프로덕트 디자인 2주 차 발자국

2주 차 학습 내용컴포넌트 만들기 준비라이브러리 세팅컴포넌트 기본 레시피아이콘 등록 및 팁입력 컴포넌트버튼, 아이콘 버튼, 버튼 스택컨트롤체크박스라디오스위치라벨과 컨트롤 그룹텍스트 필드, 텍스트 상자셀렉트/드롭다운디스플레이 컴포넌트아바타아코디언뱃지툴팁디바이더칩, 상태 칩카드테이블2주 차 학습 회고스스로 칭찬하고 싶은 점주말 이전에 퇴근하고 꾸준히 시간을 내서 미션을 완료했다.아쉬웠던 점 / 보완하고 싶은 점 / 다음 주에는 어떻게 학습할지아쉬웠거나 보완하고 싶은 점은 없고, 다음 주에도 똑같이 열심히!!! 할 것이다. 🚀2주 차 미션 해결 과정어떤 관점에서 접근했는지 / 문제를 해결하는 과정은 무엇이었는지 / 왜 그런 식으로 해결했는지 / 미션 해결에 대한 회고이전과 마찬가지로 강의 내용 자체에서 실습을 같이 해주셔서 어려움 없었다. 이미 실무에 쓰고 있지만, 더 반복 학습해서 완전히 이해하고 쓰는 그 날까지... 💪🏻

UX/UI･디자인･배리어블･피그마･디자인시스템･UIUX･워밍업클럽･인프런워밍업클럽스터디･figma･볼드UX･피그마배리어블을활용한디자인시스템구축

한석환

[인프런 워밍업 클럽 스터디 3기] 프로덕트 디자인 2주차 발자국

📖2주차 학습내용1. 컴포넌트 구조 및 만드는 방법컴포넌트 배리언츠, 프로퍼티 / 프로퍼티 기능 / Nested instance 사용 방법2. Icon 컴포넌트아이콘 플러그인 사용 / 컴포넌트 등록 전 레이어 정리[앤트맨 전략] / 아이콘 플레이스홀더3. Input / Display 컴포넌트Type, State 등 배리언츠, 프로퍼티(불린, 스왑, 텍스트, Nested)를 활용한 컴포넌트 만들기단일 컴포넌트(버튼, 라디오 버튼, 라벨 등)으로 복합 컴포넌트(버튼 스택, 컨트롤 그룹 등) 만들 ☺좋았던 점강의 중간에 사소한 꿀팁들을 알게 되면서 잘 몰랐던 기능들을 배울 수 있었다.(ignore auto layout으로 스크롤바나 드랍다운 넣는 것, 오토레이아웃 내 Stroke 여백 적용 설정 방법, Tooltips에 Shadow가 이상할 때 해결방법 등)컴포넌트를 만들 때 사용 목적과 사용했을 때를 고려하여 여러가지 Type과 Style을 만드는 것의 중요성을 배웠습니다.라이브 세션에서 배리어블로 프로토타이핑 다루는거 완전 대박이었다. 한 가지를 클릭할 때 다양한 요소가 전환되는게 신기하였다. 잘 활용하면 프레임끼리 다이렉트로 연결하여 프로토타이핑할 때 경로가 복잡해지고 알아보기 어려운 문제를 해결할 수 있지 않을까 싶었다.   😁잘한 점컴포넌트를 만드는 과정에서 디테일적인 요소는 나중에 다시 보기 위해 메모로 남긴 것미션4에서 Input 컴포넌트를 가지고 간단한 설문조사나 회원가입을 페이지를 만들어보았고, 같은 컴포넌트라고 해도 적용하는 프로덕트에 맞춰서 보완이 필요함을 느낄 수 있었다.- 설문조사) 텍스트필드 Label 내용이 길어지면 프레임 밖으로 나오게 되서 오토레이아웃 W를 Fill 로 변경😅아쉬운 점날씨가 따뜻해지면서 식곤증이 심해져서 졸음이 쏟아지는 것😂 카페인으로 버티고 있는데 커피 가격이 오르고 있어 부담이 커진다(ಥ_ಥ)중간에 모르는 개념이 나오면 이해될 때까지 계속 봐야 다음으로 넘어갈 수 있다고 안심하는 나...특정 구간에 오래 있으니까 피로가 쌓여서 다음 내용에서 집중력이 떨어지곤 했다.정말 사소할 수 있는건데, 강의 순서와 스터디 커리큘럼이 서로 상이한 것. 아직 컴포넌트 파트를 못들으신 분들은 꼭 참고하시길 바라며 메모남겨요.(강의에 Input 컴포넌트 파트 -> Feedback 파트인데, 스터디 커리큘럼은 Input -> Display) 

UX/UI･인프런워밍업클럽･디자인시스템･배리어블･Figma･볼드UX

rhrud0412

[인프런 워밍업 클럽 3기] 프로덕트 디자인 2주차 발자국

[2주차 학습]아이콘 컴포넌트화 : Union, Flatten selection 인풋 컴포넌트 버튼 : button, icon button, button stack체크박스(check), 라디오(radio), 스위치(switch)텍스트 그룹 : label, control group, text field, text area 셀렉트(select), 드롭다운(drop down) 디스플레이 컴포넌트 아바타(avatar), 아코디언(accordion), 구분선(divider)뱃지(badge), 칩(chips, status chips),툴팁(tooltips)카드(basic cards), 테이블(table)[회고]UI3 업데이트 이후 체계적으로 강의를 들으며 컴포넌트를 만들어보면서 실습할 수 있어 좋았다. 초반에는 작은 요소부터 하나하나 직접 만들어야 해서 시간이 걸렸지만, 후반부로 갈수록 이전에 만들어둔 요소들을 재활용하면서 작업이 훨씬 수월해졌다.이번 주는 지난주보다 과제량이 많아진 느낌이라... 체력적으로 힘들었지만, 모든 과제를 마무리할 수 있어서 만족한다.앞으로 남은 기간 동안도 모든 과제를 빠짐없이 제출할 수 있으면 좋겠다.🔥

UX/UI･디자인시스템･볼드UX･피그마･인프런워밍업클럽

rockoil

[인프런 워밍업 클럽 스터디 3기] 프로덕트 디자인 1주차 발자국

진행 기간: 1주차(20250303 ~ 20250309) 1주차 학습내용디자인 시스템의 필요성, 디자인 토큰, 배리어블 구조 다른 회사의 디자인 시스템 구조 및 이름 파악 Primitive, Theme, Semantic 그룹으로 나누어 작성  좋았던 점디자인 시스템들의 구조를 파악과 이해가 용이 했음.개발자의 관점이 아닌 디자이너의 관점으로 바라봐서 좋았음.디자인 토큰/시스템이 점진적으로 개발환경과 비슷해진다는 느낌을 받았음.피그마를 처음 써보는 입장에서 좋았음. 아쉬운 점아무래도 개발자다 보니 습관적으로 프로그램적 관점으로 바라보게 됨색상이나 스타일이 익숙하지 않다보니 자꾸 이름과 숫자로만 접근 경향을 가지게 됨피그마를 처음 접하는 개발자다 보니 툴이 익숙하지가 않음. 강의는 나름 찬찬히 설명하고 있어서 따라하기는 좋은데 이해를 못하고 따라만 감.

UX/UI･figma･볼드UX

김예원

[인프런 워밍업 클럽 스터디 3기] 프로덕트 디자인 1주 차 발자국

1주 차 학습 내용피그마 배리어블과 디자인 토큰디자인 토큰과 배리어블이 무엇인지스타일과는 어떤 차이점이 있고 어떤 상황에서 무엇을 사용해야 하는지배리어블 구조 파악하기 (네이밍)배리어블과 스타일 파운데이션색상 배리어블타이포 배리어블간격 배리어블그림자 배리어블1주 차 학습 회고스스로 칭찬하고 싶은 점계획을 짜고 시간 내 미션을 완수했다.아쉬웠던 점 / 보완하고 싶은 점 / 다음 주에는 어떻게 학습할지시간이 부족해 플러그인으로만 문서를 만들었는데 문서 자체도 컴포넌트화시켜서 개발자분들이 실질적으로 참고할 수 있을 만한 문서를 만들고 싶다. 1주 차 미션 해결 과정어떤 관점에서 접근했는지 / 문제를 해결하는 과정은 무엇이었는지 / 왜 그런 식으로 해결했는지 / 미션 해결에 대한 회고강의 내용 자체에서 실습을 하나하나 같이 해주셔서 큰 어려움 없이 미션을 잘 수행했다. 이해하고 체화시키는 건 또 다른 영역이지만 반복해서 학습하고 꼭 내 거로 만들어 세세한 부분까지 실무에 적용하고 싶다. 수강 평볼드님께서 강의에 대해 애정을 많이 갖고 계신 게 느껴졌습니다. 업데이트도 자주 해주시고, 어떻게 하면 수강생들이 잘 따라올 수 있을지 고민한 흔적이 보여서 더 열심히 하고 싶은 강의입니다! 같은 직종 지인에게 꼭 추천하고 싶은 강의예요.

UX/UI･디자인･배리어블･피그마･디자인시스템･UXUI･워밍업클럽･인프런워밍업클럽스터디･figma･볼드UX･피그마배리어블을활용한디자인시스템구축

한석환

[인프런 워밍업 클럽 스터디 3기] 프로덕트 디자인 1주차 발자국

진행 기간: 1주차(20250303 ~ 20250309) 📖1주차 학습내용디자인 토큰, 배리어블, 디자인 시스템에 대한 구조, 이름, 특징Color, Typography, Spacing/Size, Effect에 대한 구성, 네이밍, Scope 설정 방법Primitive/Semantic 배리어블, 스타일 직접 등록해보기Typography와 Shadow를 스타일에 연결하는 이유는 프로퍼티가 다양한 복합 배리어블이어서Spacing/Size 배리어블의 디자인 토큰은 티셔츠 or 숫자 Fixed Grid(Center), Fluid Grid(Stretch)에 대한 차이점은 화면 크기에 따라 그리드 크기를 고정할지 비례하게 만들지 ☺좋았던 점플러그인 활용하여 오래걸리는 단순 작업들을 효율적으로 처리하는 방법을 배울 수 있었다. 배리어블을 등록하고 디자인시스템을 만드는 과정을 여러 step으로 나누어 가르쳐주셔서 실습하는데 큰 어려움을 느끼지 않았다.   😁잘한 점원래 계획했던 시간에 강의를 들으려고 노력한 것. 강의듣는 것으로 하루르 시작하면서 그 동안 엉망이었던 아침 루틴을 조금이나마 개선할 수 있었다. 미션에서 배리어블 항목들을 최대한 보기 편하게 문서화하는데 노력한 것.Color 배리어블 미션에선 Print 플러그인 사용 후, 오토레이아웃 요소를 하나하나 뜯어 고쳐야만 했다.Typography 배리어블 미션에서 강의에서 알려준 플러그인으로 문서화하기엔 적합하지 않아 새로운 플러그인을 찾으려 했고, 이미 등록된 스타일은 pc모드로 되어 있어 mobile모드에 맞춘 스타일을 새로 생성해야 했다. 😅아쉬운 점계획대로 강의 수강과 미션을 다 끝내고 싶었는데 스타일가이드 문서화를 정리하다가 어려움을 겪으면서 오래걸린 것강의를 보며 따라 만드는건 괜찮지만, 다른 방법이나 디자인에 맞춰서 작업하는데에는 어려움을 느끼는 것

UX/UI･인프런_워밍업_클럽･디자인시스템･배리어블･Figma･볼드UX

junghlee234

[인프런 워밍업 클럽 스터디 3기 - 프로덕트 디자인 (Figma)] 1주차 발자국

진행 기간: 1주차(20250303-20250309)진행 강의:[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기 강의이번 주차에는 섹션 3개 분량의 내용을 다뤘습니다.특히 디자인 시스템에 있어서 가장 중요할지도 모르는 스타일 파운데이션을 만드는 부분을 다뤘습니다.크게 개념 소개 및 구조 부분 섹션, 이론 및 실습 두 섹션(색상 및 타이포그래피, 간격, 그림자, 그리드)으로 나누어 학습하였습니다.섹션 1에서는 스타일 파운데이션을 만들기 위해서 디자인 시스템, 디자인 토큰의 개념과 figma에서 도입된 베리어블(variables)에 대해서 알아보았습니다.섹션 2에서는 여러 디자인 시스템에서의 예시를 바탕으로 나만의 색상 베리어블의 이름과 구조을 만들고, 타이포그래피 베리어블과 스타일을 만드는 것과 베리어블 인터페이스와 플러그인을 통해 실제로 정의하고 적용하는 법에 대해 알아보았습니다.섹션 3에서는 간격 베리어블을 정의하는 다양한 방식과 적용 방법, 다양한 효과 및 특히 그림자 효과의 이론적인 적용과 베리어블과 스타일을 활용한 실제 적용 방법, 그리드 시스템의 적용 방법에 대해서 알아보았습니다.​​ 미션진행해야 할 미션은 총 3가지 였습니다.색상 베리어블 인증샷 & 링크 제출타이포그래피 베리어블 & 링크 제출기타 스타일 인증샷 & 링크 제출 이전까지는 디자이너가 아닌 개발자로서 Material Design System 같이 이미 잘 정의되어 있는 디자인 시스템의 요소를 사용하는 것에만 집중하였기 때문에, 강의의 개념과 적용 방법이 익숙하지 않았습니다. 진땀을 흘리면서 여러 번 강의를 반복해 들으며 미션을 진행하였습니다. 회고이전에는 스스로에게 있어 Figma가 아주 단순한 프로토타입 디자인 용도로 활용되었다면, 이제는 App, Web 플랫폼의 디자인의 밑바탕을 직접 그리는 용도로 쓰임이 진화하였다는 느낌이 들었습니다. 또 베리어블을 통해 프로그램처럼 체계적으로 나의 색상, 타이포그래피, 간격 등을 관리하고 적용할 수 있는 실마리를 발견하였던 한 주였습니다. 

UX/UI･디자인시스템･Figma･UX_UI･인프런_워밍업_클럽･베리어블･스타일･스타일_파운데이션･볼드UX

한나

✏️[인프런 워밍업 클럽 2기] 프로덕트 디자인 4주차 🐾

4주간의 프로덕트 디자이너 스터디를 마무리하며, 매주 새로운 도전과 배움의 기회를 마주했던 값진 시간이었습니다. 🥳여러 서비스 디자인을 직접 만들어보면서 실제 프로젝트에 적용할 수 있는 실용적인 팁들을 알 수 있었고, 페이지들을 구현하는 과정에서 컴포넌트를 활용해 효율적으로 서비스를 관리하는 방법에 대해서도 이해할 수 있었습니다. 아직 부족한 점이 많지만 이번 경험을 토대로 계속해서 성장해나가고 싶습니다.특히 마지막 주차까지 완주하면서, 처음에는 낯설게만 느껴졌던 개념들이 조금씩 제 것이 되어가는 과정을 경험할 수 있었습니다.💪📌배움배리어블 다크모드와 멀티 브랜드 모드 등록 후 활용법 B2C 이러닝 페이지 / 모바일 OTT 서비스 프로세스각 페이지 다크모드 버전 / 반응형 모드 제작 프로세스 타이포그래피 베리어블 등록하는 법배리어블을 활용한 프로토타입 만들기 📌미션다양한 서비스 화면들을 직접 구현해보면서 컴포넌트의 실질적인 활용법을 익힐 수 있었습니다. 특히 각 서비스의 핵심 기능에 맞는 UI 설계와 베리어블을 활용해 다크모드와 브랜드모드 전환, 반응형 모드를 구축해보면서 디자인 시스템의 확장성과 일관성을 유지하는 방법을 배울 수 있었습니다. 아직은 베리어블 활용이 완벽하지 않아 더 많은 연습이 필요하지만, 이번 미션을 통해 실무에서 활용할 수 있는 귀중한 경험들을 쌓을 수 있었습니다.❗이건 꼭 알아두자! ꙳꒰ ੭⑅•͈ ·̮ •͈꒱੭컴포넌트를 활용한 효율적인 서비스 구축 및 관리다크모드 및 브랜드모드 적용 및 활용법반응형 모드 적용하는 방법타이포그래피 배리어블 등록하기베리어블을 활용한 프로토타이핑 방법📌회고스스로 칭찬하고 싶은 점미션을 미리 완료하고 특강 전에 실무에서 적용할 부분들을 직접 적용해보았습니다.완전히 이해가 안된 부분은 반복해서 다시 시청하고 회사 디자인시스템 구축 시 놓친 부분들을 다시 수정 적용해보았습니다.사이드프로젝트에도 배리어블을 적극 활용해보기 위해 계속 연습해보았습니다.아쉬웠던 점특강 때 내용을 통해 배리어블을 활용한 프로토타이핑은 한 번에 이해가 되지 않아 미션4부터 어려움이 있어 아쉬움이 있었습니다.강의를 완강하고 디자이너가 왜 꼼꼼해야하는지 체감이 되었고 실무에서 그만큼 놓친 부분이 많았던 것 같아 아쉬움이 남았습니다.보완하고 싶은 점프로토타이핑은 평소에도 재밌어하던 주제였는데 배리어블을 활용한 프로토타이핑은 많이 어려움이 있었다보니 반복 학습을 통해 완전히 내것으로 만들어가고 있습니다. 강의와 미션을 하면서 깨달은 점 중 하나는 반복을 하면 결국 이해가 되고 내 것이 될 수 있구나 였기 때문에 다시 반복해보는 중이고 꼭 실무에 적용하려고 합니다🔥저번 특강 때도 알려주신 여러 디자인시스템을 분석해봐야할 필요성도 많이 느꼈습니다.앞으로의 계획완주를 해서 다음주 계획의 주제를 앞으로의 계획으로 변경 후 작성해보았습니다. 이번 강의들을 통해 배운 디자인 시스템을 기반으로 실무에서 활용할 수 있는 체계적인 컴포넌트 설계와 배리어블 구축 및 문서화 작업을 이어나가려 합니다. 특히 Figma의 다양한 기능들을 더 깊이 학습하여 효율적인 디자인 워크플로우를 구축하고자 합니다. 또한 프로덕트 디자이너로서 개발자와의 원활한 협업과 더 나은 사용자 경험 구현을 위해 HTML, CSS, JavaScript 등 프론트엔드 기술에 대한 학습을 시작하려 합니다. 이를 통해 기술적 제약사항을 이해하고 실현 가능한 디자인을 제안할 수 있는 디자이너로 성장하고 싶습니다.볼드님의 강의를 통해 디자인 시스템의 중요성과 실무에서 활용할 수 있는 다양한 인사이트를 얻을 수 있었습니다. 특히 베리어블 활용법과 같은 실질적인 스킬을 꼼꼼하게 알려주신 덕분에, 한 단계 성장할 수 있는 값진 시간이었습니다.🐾 진심으로 감사드립니다.😊

UX/UI･UXUI･피그마･프로덕트･디자인･볼드UX

예은

[인프런 워밍업 클럽 2기] 프로덕트 디자인 4주차

벌써 마지막주차라니... 매일매일 어렵지만 즐거운 일들을 배워왔다. 배움컴포넌트를 활용하여 스크린 제작다크모드와 반응형 스크린 제작미션B2C 이러닝 페이지 제작모바일 OTT 서비스 페이지 제작 (모바일 OTT는 개인적으로 좋아하는 시리즈 굿플레이스를 넣어 작업해봤다! 뿌듯) 회고그간 만들어온 컴포넌트를 조립해 화면을 만드는 과정이 재미있었다. 특히 베리어블 모드에 따라 다크모드와 등록해둔 다른 서비스 버전으로 휙휙 변경할 수 있는 것이 신기했다. 늘 헷갈리기만 했던 베리어블을 이젠 활용할 수 있게 되어 기쁘다!혼자였다면 학습 과정에 어려움이 많았을 것이다. 멘토님과 스터디 참여자분들과 함께 나아갈 수 있는 기회가 주어져 감사하다. 앞으로 프로젝트를 진행하며 이번 학습 내용을 복습하고 체화할 것이다.완강까지 피드백과 응원으로 도움을 주신 볼드UX 님 감사합니다!

UX/UI･UXUI･피그마･프로덕트･디자인･볼드UX

표수진

[인프런 워밍업 클럽 스터디 2기] 프로덕트 디자인 4주차 발자국

드디어 오늘 저녁에 있을 온라인 특강을 제외하고 어찌보면 길고 어찌보면 짧은 워밍업 클럽 프로그램이 마무리되었다! 확실히 온라인 강의만 결제해서 혼자 공부할 때보다는 스터디 프로그램이 함께 진행되다보니 열심히 듣고자 하는 의지도 더 활활 타올랐던 것 같고, 매일 기한에 맞춰서 미션을 진행해야 되기 때문에 미루지 않고(사실 못하고..) 들었던 것 같다 ㅎㅎ퇴사를 하고나서 세웠던 계획 중에 하나인 피그마 공부와 디자인 시스템 공부를 한번에 해결할 수 있어서 뿌듯하면서도 알찬 시간이였고, 이제부터는 지금까지 배운 내용을 계속해서 반복하고 작업해보면서 내 것으로 만드는 시간을 가져봐야 할 것 같다. 이렇게 좋은 강의를 만들어주신 볼드님께도 다시 한번 감사하다는 말씀을 드리고 싶다! [4주차 강의 요약]4주차에도 지난주에 이어서 지금까지 열심히 만들어놨던 파운데이션과 컴포넌트를 이리저리 조합해서 새로운 페이지로 만들어보는 시간을 가졌다. 강의 초반에 볼드님께서 이 부분을 수강생분들이 제일 좋아하셨다는 말을 하셨었는데 실제로 나도 이 부분 강의가 제일 재미있고 흥미로웠다. 잘 다져놓은 기반으로 튼튼한 건물을 짓는 기분이랄까.. B2C E-Learning 페이지 제작모바일 OTT 서비스 페이지 제작 확실히 배리어블 모드를 잘 만들어놓으니까 디바이스별 반응형 디자인, 다크모드 전환을 이렇게 쉽게 할 수 있는 것에 다시 한번 박수를 보낸다..👍 그리고 실제 데이터를 'Google Sheet Sync' 플러그인으로 바로 적용할 수 있는 것도 앞으로 디자인할 때 편하게 사용할 수 있는 기능인 것 같다.   [이번주 회고]스스로 칭찬하고 싶은 점프로그램이 끝날 때까지 강의랑 미션을 기한에 맞춰서 다 완수했다!기존에 XD로 작업했던 작업물을 다시 피그마로 제작해보면서 배웠던 내용을 적용하고 있다퇴사를 하고 '나는 어떤 디자이너가 되고 싶은가'라는 의문과 함께 내가 부족한 부분 중 어떤 점을 먼저 채워야 할지 고민만 하다가 시간이 흘렀는데 프로그램을 열심히 참여하면서 다시 한번 디자인에 대한 열정을 가질 수 있었고 더 많이 공부하고 싶다는 생각이 들었다. 아쉬웠던 점, 보완하고 싶은 점조금 더 피그마, 디자인 시스템에 익숙해져서 작업 시간을 줄이고 싶고 앞으로 실무에서 활용할 수 있는 효과적인 디자인 방법을 고안해보고 싶다.내 디자인을 보다 효과적으로 전달하기 위해 프로토타이핑 관련 공부도 더 해보고싶다.

UX/UI･UX/UI･프로덕트디자인･디자인시스템･피그마･figma･토큰디자인･볼드UX

한나

✏️[인프런 워밍업 클럽 2기] 프로덕트 디자인 3주차 🐾

이번 3주차는 유독 어렵게 느껴지던 다크모드 구현에 대한 부분을 직접 미션을 통해 구축해보며 많은 이해를 하게 되어 스스로 느끼기에 배리어블에 대한 이해도가 높아졌다고 느껴진 한 주였습니다. 👩‍💻먼저는 다양한 네비게이션 컴포넌트를 만드는 과정을 배웠고 텍스트 링크, 브레드크럼프, 네비게이션 탭, 모바일 하단 네비게이션, 페이지네이션 등 실무에서 자주 사용되는 요소들을 직접 구현해보며 각 컴포넌트의 특성과 사용자 경험에 미치는 영향을 깊이 이해할 수 있었습니다.개인적으로 느끼기에는 다크모드 구현이 3주차의 하이라이트(?) 였던 것 같습니다. 😆 평소에도 다크모드용 색상 변수 설정이 꽤 까다로웠는데, 이번에 웹 접근성 지침(WCAG)의 AA 기준을 고려한 색상 대비 설정 방법을 배우면서 전체적인 프로세스를 명확히 이해할 수 있었습니다. 이 과정에서 배운 내용을 토대로 앞으로 실무에서 다크모드를 구현하는 부분이 자신감이 많이 생길 것 같습니다.이번 주 학습을 통해 사용자 경험을 고려한 네비게이션 설계의 중요성과 접근성을 고려한 디자인 시스템 구축의 가치를 다시 한번 깨달았습니다. 특히 다크모드 구현 과정에서 배운 체계적인 접근 방식은 실무에서 바로 적용해 볼 수 있을 것 같아 매우 기대됩니다. 이런 경험들이 쌓여 더 나은 디자이너로 성장해나가고 싶습니다.📈📌배움네비게이션 컴포넌트 만들기배리어블 다크모드 개념 익히기배리어블 모드 활용과 원리 배우고 구현해보기컴포넌트를 조합해 B2B 이커머스 어드민 페이지 만들기->다크모드, 반응형 멀티브랜드 구현하기📌미션다크모드 배리어블 구현과 B2B 이커머스 어드민 페이지 구현 경험을 통해 색상 대비와 웹 접근성의 중요성을 체감했고, 실제 프로젝트에 적용할 수 있는 실용적인 지식을 얻었습니다. B2B 이커머스 어드민 페이지를 만들면서는 복잡한 정보를 효율적으로 구조화하는 방법과 사용자 편의성을 고려한 UI 설계의 중요성을 깨달았습니다. ❗이건 꼭 알아두자! ꙳꒰ ੭⑅•͈ ·̮ •͈꒱੭다크모드 구현의 핵심 원칙 : 웹 접근성 기준을 고려한 색상 대비 설정 / 배리어블 활용을 통한 효율적인 테마 전환 방법 / 가독성과 사용자 경험을 고려한 생산 선택네비게이션 컴포넌트 설계 시 고려사항들컴포넌트 재사용과 조합의 중요성B2B 이커머스 어드민 페이지 설계📌회고스스로 칭찬하고 싶은 점강의를 반복적으로 시청하며 제대로 이해하고 미션을 진행할 수 있도록 노력했습니다. 특히 다크모드 구현 부분에서 여러 번 복습하여 개념을 확실히 잡을 수 있었습니다.배리어블과 함께 반응형에 대해서도 많이 이해하고 실무에서도 적용해보았습니다. 아쉬웠던 점미션이 당일에 달성하다 놓친 부분이 있어 아쉬움이 있었고 시간관리를 더 효율적으로 관리해야겠다고 느꼈습니다.실무에서 접근성을 많이 고려하지 못했던 것 같아 이번 주차 공부 후 다시 검토를 해나가고 있습니다.보완하고 싶은 점웹접근성을 고려한 디자인을 실무에서도 제대로 적용을 해보고 싶었고 주요 페이지들을 다시 검토해나가고 있습니다.B2B의 특징을 이해하고 기업 니즈나 브랜드에 맞는 인터페이스를 구현해내고 싶습니다. 성공적인 B2B 플랫폼들의 UI/UX 사례를 조사하고 분석하여 다음 주차 미션과제에도 추가적으로 적용해볼 예정입니다.다음 주 계획남은 미션들을 미리 만들어보고 따로 추가적인 구현을 더 해보려고 합니다.그동안의 미션들을 검토하고 놓친 부분이나 이해가 덜 된 부분을 체크하고 추가적으로 공부를 더 해보려고 합니다.

UX/UI･UXUI･피그마･프로덕트･디자인･볼드UX

채널톡 아이콘