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

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

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

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

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

진행 기간: 2주차(20250310-20250316)진행 강의:[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기강의 및 미션이번 주는 입력과 디스플레이 컴포넌트를 만들어보는 주였습니다.강의 내용 및 미션도 저번 주와는 다르게 구현을 많이 하면서 기본 컴포넌트들을 만들어나가는 부분이 많았습니다.특히 컴포넌트의 속성의 조합에 따른 다양한 파생 베리언트들을 만들어 보는 것이 중요했습니다.미션을 수행하기 위해서는 숙련도 부족으로 정확한 확인을 위해 결국 강의 하나하나를 다시 천천히 들어야 하기에, 특히 시간이 필요하였습니다.회고이번 주는 수술과 좋지 않은 몸 상태로 인해 실제로는 2일(하루 4시간 기준) 이상을 낼 수 없었기에 목표하고자 하는 미션의 절반 이하로만 진행이 가능하였습니다.확인 결과 3주차의 경우에는 컴포넌트의 고도화 및 마무리 과정으로, 거의 하루 1개 미션을 진행해야 하는 상황이므로 다음 주 1일 차에 못한 강의와 미션을 마저 처리하고, 남은 4일에 하루 2개 정도로 처리하고, 만약에 부족한 경우 주말에 처리하는 식으로 진행할 예정입니다.또한 미션과 강의를 전부 하지는 못했지만, 좀 더 Figma 인터페이스에 익숙해져서 빠르게 구현을 할 수 있도록 하여 각 구현의 시간을 줄여야 겠다는 생각이 드는 주였습니다.

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

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