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

벌써 스터디 2주차가 끝나다니 시간이 정말 빠른 것 같다. 2주차가 되니 피그마 사용하는 것도 그렇고 강의 듣고 실습하는 것도 적응해가면서 시간이 조금은 덜 걸릴 줄 알았는데 여전히 미션을 진행하는데 꽤 오랜 시간이 걸렸다 ㅠㅠ

이번주는 지난주의 입력 컴포넌트에 이어서 계속해서 여러 종류의 컴포넌트를 만들어 가는 과정이였는데 오랜만에 디자인 작업을 하는 것 자체가 너무 재미있었던 것 같다. 특히 예전에 회사를 다니면서 UI디자인 작업을 했을 때, 이런 식으로 컴포넌트에 배리어블을 활용해서 디자인 했으면 얼마나 더 효율적이였을까 하는 생각이 계속해서 들었던 것 같다.

[2주차 강의 내용 요약]

1) 컴포넌트에 대한 기본 개념 다시 한번 정리

• 컴포넌트 = 붕어빵 틀, 인스턴스 = 붕어빵 재료 (재료에 따라 다양한 붕어빵을 만들 수 있다)

• 컴포넌트 만드는 순서

  • 싱글 컴포넌트 만들기 - 인스턴스(복제본)으로 테스트 - 베리언트 프로퍼티 - 테스트

    • Property 먼저 적용 : 불린 프로퍼티, 텍스트 프로퍼티, 인스턴스 스왑

       

    • 배리언트 프로퍼티는 보통 state별 -> Type(Style)별 -> Size별

2) 여러 컴포넌트 만들기

• 입력 컴포넌트 나머지 만들기

  • Label & Control Group, Text Field, Text Area, Select & Dropdown Menu

     

• 디스플레이 컴포넌트 만들기

  • Avata, Accordion, Badge, Tooltips, Divider, Chips, Basic card, Table

• 피드백 컴포넌트 만들기

  • Alert, Toast, Skeleton Loader & Loading Spinner, Progress bar, Modal & Slot

이번주에 다양한 컴포넌트 실습을 진행하면서 가장 크게 느낀 것은 이전 단계에 진행했었던 배리어블과 파운데이션이 잘 정리되어야 컴포넌트를 만들때도 문제없이 만들 수 있다는 것을 느꼈고, 새로운 컴포넌트를 제작할 때도 모든 부분을 하나하나 새로 만들기보다 만들어뒀던 기존의 컴포넌트를 또 활용해서 제작하는 것을 보고 이런 부분에서 디자인 시스템이 잘 만들어진다면 디자인 작업하는데 있어서 훨씬 많은 시간을 줄일 수 있고 효율적으로 일할 수 있을 것 같다는 생각이 들었다.

특히 슬롯 컴포넌트를 활용해서 모달을 만드는 파트는 기존에 생각해보지 못한 방식으로 컴포넌트를 만들면서 놀라우면서도 실제로 활용하기 좋은 방법이라고 생각했다.

3) 온라인 특강 : chatGPT를 활용한 디자인 시스템 문서화

이번주 주말에는 특강으로 디자인시스템 문서화에 대한 부분을 설명해주셨다. 디자인 시스템을 문서화해야 하는 이유부터 디자인 시스템 문서에 들어가야 하는 요소들(그 중에서도 꼭 필요하다고 생각하는 요소), gpt를 활용한 디자인 시스템 구축 방법을 배웠는데 내가 생각했던 부분보다 구체적인 내용으로 정리를 해줘서 아예 디자인 시스템 문서에 대한 개념이 부족할 때 길잡이로 많이 참고할 수 있을 것 같았다. 요즘에는 디자인 프로세스에 다양한 AI기술을 적용하는 방법들이 많던데 해당 부분에 대해서도 많은 공부가 필요해보인다!

[이번주에 대한 회고]

스스로 칭찬하고 싶은 점

• 이번주에도 밀리지 않고 2주차 강의와 실습을 잘 끝냈다.

• 아직은 강의를 듣고 실습 따라하기에 급하긴 했지만 지난주보다는 컴포넌트 제작 프로세스를 잘 따라가면서 만들었던 것 같다.

   

• 강의를 들으면서 최근에는 잘 사용하던 어플 화면을 볼 때도 '이 부분은 컴포넌트를 이렇게 나눠서 제작하지 않았을까?' '이 서비스의 디자인 시스템은 어떻게 작업되어 있지?'하고 화면을 분석하면서 보게 되는 게 예전보다 디자인 시스템에 대한 넓은 시야를 가질 수 있는 계기가 되는 것 같아 조금은 뿌듯했다.

아쉬웠던 점, 보완하고 싶은 점

• 이번주에 알려주신 디자인 시스템 플러그인을 사용해서 기존에 만들었던 컴포넌트들도 문서화 해봐야겠다.

• 실습 미션 중에 수정 보완 사항이 생겼었는데 다음주는 보다 꼼꼼하게 잘 따라서 미션을 진행해봐야겠다.

• 현재 이직준비랑 피그마 스터디를 같이 진행하고 있어서 포트폴리오 준비랑 디자인 시스템 공부에 대한 시간을 효율적으로 잘 계획해서 진행해야 할 것 같다.