네번째 발자국

이번주는 스터디가 끝나는 주간이지만 지난주에 미션 진도를 많이 못했던 터라 못 다한 미션을 다 하도록 시간을 많이 할애했다. 1배속으로 듣던 강의를 1.25배속으로 들으며 완주를 위해 막판 스퍼트를 달린 주간이었다. 그리고 컴포넌트를 만들고 브랜드별 색상과 다크모드를 적용하는 부분이 너무 재밌었다. 이 작업을 하기 위해 그동안 스터디를 달려왔구나 싶었다. 그리고 인프런 러닝 클럽 스터디가 없었다면 아마 이 강의를 완주하지 못 했을 것 같다. 

Day13 네비게이션 컴포넌트 만들어보기

Breadcrumb, Tabs, NavBar, Pagination, SideNavBar, Header, Carousel을 만드는 과정을 배웠다. 앞에 말한 컴포넌트들을 모두 네비게이션 컴포넌트라는 종류로 묶어서 명명할 수 있다는 점을 배웠다. 그전에 실무에서 해당 컴포넌트들을 만들었을 때는 이러한 지식이 전무한 상태에서 만들고 머터리얼 디자인이나 플루언트 디자인 시스템만 참고하다보니 모두 컴포넌트가 낱개로 흩어져 있었다. 앞으로 컴포넌트들을 만들더라도 크게 카테고리라이징을 할 수 있는 것을 강의를 통해 배웠다.

특히 Pagenation, SNB, Header 이 세 가지를 만드는 법이 그동안 만든 컴포넌트들을 이용하여 레고 블럭을 쌓듯이 만들 수 있다는 점이 즐거웠다. SNB는 반응형을 고려하여 데스크탑 — 타블렛 — 모바일 버전으로 만드는 점도 무척 재밌었고 도움이 되었다. 오토 레이아웃을 이용하여 상단 메뉴들과 하위 메뉴를 구분하고 앱 세팅 부분은 위치를 고정 할 수 있다는 점을 배울 수 있었다.

반응형을 고려하여 3가지 타입으로 만든 SideNavBar

Day14 네비게이션 컴포넌트 나머지 만들고 마지막 점검하기

컴포넌트를 만들고 항상 Contrast 플러그인으로 접근성을 체크하는 작업을 반복하다보니까 디자인 할 때 접근성이 얼마나 중요한지 몸소 깨닫게 되었다. 사실 접근성이 중요하다고 하지만 실무에서는 바쁘거나 브랜드 아이덴티티를 더 중시한다는 이유로 접근성 체크를 하지 못한 채 넘어가는 일이 많기 때문이다. 그런데 말만 중요하다고 하는 것보다 강의를 들으면서 매번 체크를 하고 그렇게 컴포넌트를 접근성 기준에 맞추기 위해 수정하는 작업을 하다 보니까 앞으로 내가 하는 작업도 접근성을 꼭 놓치면 안되겠다는 생각이 들었다.

접근성을 체크 필수 플러그인 Contrast

Day15 베리어블 다크모드 개념을 익히고 활용해보기

강의 화면대로 따라하며 다크모드를 적용하는데 처음에 모드가 제대로 적용되지 않아서 많이 당황한 미션이었다. 알고보니 내가 색상을 제대로 지정하지 않아서 생긴 문제였다. 그래서 다시 메인 컴포넌트로 돌아가서 색상을 다시 지정해주고, 색상 배리어블도 매치가 제대로 되지 않은 부분이 있어서 강의에 나온대로 작업 → 테스트 → 확인을 계속 반복하며 시간이 많이 소요되었다.

볼드님이 작업하신 완성본도 보니 이전에 컴포넌트 강의와 색상 부분이 다른 경우가 여러군데 있어서 참고해서 변경했다. 그동안 다크모드는 버튼 하나로 쉽게 바꿀 수 있는 기능이 피그마에 생겼다고 알고 있었지만 그렇게 보여지기 위해서 뒤에서는 많은 손길이 필요하다는 점도 알게 되었다.

아이콘도 중간에 문제가 생긴 아이콘들은 Phoshor Icon으로 변경해서 진행했다. 온라인 세션에서 아이콘 문제를 해결하는 법을 알려주셨지만 그게 모두 적용되진 않아서 시간 관계상 이렇게 하는 것이 더 빨랐다.

 다크모드로 변환되었을 때 짜릿한 순간도 잠시, 생각보다 수정해야 할 부분이 많았다.

Day 17 기타 베리어블 모드 활용 개념 익히고 실습해보기

브랜드 컬러 배리어블을 적용하는데 강의 화면에 있는 색상이 나에게는 없어서 다시 프리미티브 배리어블에 색상을 추가해서 진행했다. 처음 색상 배리어블을 추가할 때는 시간이 많이 걸렸는데 한 번 해본 작업을 다시 하려고 하니까 생각보다 금방 했다. 이렇게 또 중간에 색상 배리어블을 추가하는 작업을 복습하는 기회가 되었다.

미션에는 없었지만 강의를 들으며 반응형 배리어블도 함께 실습하면서 진행했다. 여기에서는 오토레이아웃 기능 중 Warp을 써볼 수 있어서 재밌었다. 디바이스 크기 별로 카드 컨텐츠가 각기 다르게 표현되는 점과 반응형 사이즈도 모드를 적용해서 변경 할 수 있다는 것을 배울 수 있었다.

특히 레이어를 Show/Hide 하는 불린을 배리어블의 모드로 적용하려면 눈 아이콘에서 오른쪽 마우스를 눌러야 배리어블을 사용 할 수 있는데 이 부분은 강의를 통해서 배우지 않았더라면 전혀 몰랐을 것 같다.반응형 모드를 적용하기 위한 배리어블

그동안 만든 컴포넌트의 인스턴스를 모두 가져와서 브랜드 컬러를 입히고 라이트모드/다크모드를 적용하는데 순간 맥북이 커다란 비행기 소리를 내고 피그마의 온라인 상태가 잠시 끊어져 당황했었다. 아무래도 맥북을 바꿀 때가 된 것이 아닐까 하는 생각이 드는 미션이었다.

피그마 온라인 상태가 끊길 때 나타났던 아이콘, 작업 한 내용이 날라갈까 조마조마했다.

Day 18 B2B 이커머스 어드민 페이지 만들기

그동안 열심히 컴포넌트를 만들었던 작업이 빛을 발하는 미션이었다. 정말 재밌었다. 아무래도 실무에서 어드민 페이지와 테이블을 많이 만드는 작업을 하다보니까 이번 강의가 정말 나에게 큰 도움이 되었다. 나와 다른 방식으로 작업하는 볼드님의 작업 순서를 많이 참고하여 실무에 적용 할 수 있도록 해야 겠다. 강의 중간에는 컴포넌트에서 수정해야 할 부분을 볼드님은 report로 남겼지만 나는 즉시 메인 컴포넌트에 들어가서 수정하며 작업을 했다. 이런 부분을 통해서 디자인 시스템 만드는 디자이너와 화면을 만드는 디자이너 사이에서 어떤 식으로 커뮤니케이션을 하는 지 엿볼 수 있는 기회였다.

데스크탑 모드를 먼저 만들고 전체 오토레이아웃을 적용해서 데스크탑 - 랩탑 - 타블렛 - 모바일 이렇게 반응형 배리어블을 적용하는 것도 재미있었고, 브랜드 컬러를 입힌 뒤에 다크모드를 적용하는 것도 재미있었다. 강의에서는 데스크탑 - 타블렛 이렇게 두 가지 반응형 모드만 진행했었지만, 미션의 완성본을 참고하여 데스크탑 - 랩탑 - 타블렛 - 모바일까지 만들어 줬다.

아직 보너스 미션은 해보지 못했는데 이 것도 차차 꼭 해보도록 해야겠다. 

반응형도 적용하고 라이트/다크 모드도 적용해 볼 수 있었던 미션

Day 19 B2C 이러닝 페이지 만들기

마지막 온라인 세션 때 디자인 시스템의 성공 지표가 있다는 것을 배웠다. 디자인 전체에서 디자인 시스템을 얼마나 잘 사용하고 있는지, 페이지를 작업하면서 디자인 시스템 컴포넌트 라이브러리를 사용해서 만들었는지 비스포크를 하지 않는 것이 중요하다고 배웠는데 이번 미션을 통해서 그런 성공지표가 왜 필요한 지 알게 되었다. 그동안 만들었던 컴포넌트를 아예 안 쓴 건 아니고 재활용해서 쓰기도 하고, 이번 작업에 필요한 컴포넌트를 추가로 만들면서 진행했다.

이번 미션에서 구글 스프레드 시트를 이용하여 실제 데이터를 넣는 방법에 대해서도 배웠다. 실 데이터를 넣기 위해 많은 데이터가 필요한데 이럴 때는 Google Sheets Sync 플러그인으로 쉽게 적용할 수 있었다. 사실 이건 실무에서도 써본 적 있는 플러그인이라서 반가웠는데, 나는 다른 시트에 있는 데이터를 넣는 방법을 몰라서 결국 한 번 사용해보고 다방면에 활용해보지 못했었다. 그런데 볼드님이 알려주신 트릭으로 구글 시트의 위치를 변경해서 하나의 구글 시트 파일 안에서 다양한 데이터를 넣는 방법을 배울 수 있었다.

데이터를 넣을 때 효과적으로 사용되는 플러그인 Google Sheets Sync

Day 21 Q&A 온라인 세션 - 디자인 시스템 문서화 (Feat. Chat GPT)

디자인 시스템을 문서화 하는 이유에 대해서 배웠다. 디자인 시스템을 문서화 하는 이유는 서로 생각하고 있는 UI가 다르기 때문에 일관성, 효율성을 위해 디자인 시스템 문서화가 필요하다. 이는 곧 디자인 시스템은 혼자 하는 작업이 아니고 협업을 위해서 필요한 작업인 만큼 문서화가 얼마나 중요한 지 알게 해주는 부분이었다. 그리고 디자인 시스템에도 성공 지표가 있다고 하는데 디자인 파일 전체에서 디자인 시스템을 얼마나 사용하고 있는지 디자인 시스템을 채택해서 디자인 했는지가 중요하다고 알려주셨다.

그리고 피그잼을 통해서 디자인 시스템 문서화에 필요한 필수 요소를 투표해봤는데 대부분 생각이 비슷한 지 투표 결과가 몰리는 것을 확인 할 수 있었다. 내가 투표한 디자인 시스템 문서화에 필요한 필수 요소는 스펙, 스테이트, 반응형 디자인 이렇게 세 가지를 투표했었다.

온라인 세션 시작 전에 ChatGPT를 활용하는 시간이 있다고 해서 어떤 강의를 하는지 기대했었는데, 이 날 진행된 온라인 세션은 정말 최고였다. 수 많은 국내/해외 디자인 시스템 문서를 보면서 이런 문서들에 들어갈 내용을 모두 작성하려면 어떻게 작성해야되는지 궁금했었다.

그런데 ChatGPT에게 프롬프트를 입력하면 컴포넌트의 사양, 상태, 사용법 등 디자인 시스템 문서화 하는데에 밑바탕이 되는 글을 작성해주는 점이 정말 편리하고 신기했다. 이런식으로 ChatGPT를 활용하는 방법을 알려주신 볼드 멘토님께 감사하고, 알려주신 프롬프트는 잘 저장해두고 훗날 디자인 시스템 문서화를 현업에서 진행 할 때 적용해봐야겠다.

물론 ChatGPT가 완벽한 건 아니고 결과 값이 나오면 꼭 읽어보고 사람이 검토를 해야 할 점이 있다. 그리고 영문과 국문이 결과가 다르고 ChatGPT가 3.5ver인지 4.0ver 인지에 따라서 결과 값이 다르다고 하니까 다양한 방법으로 활용해봐야겠다. 

피그잼에 모여서 프롬프트를 사용해서 컴포넌트 별 결과물을 검토해본 온라인 세션

스터디를 마무리하며

강의를 결제해두고 시간이 부족하다는 이유로 안 듣고 있었는데 인프런 워밍업 클럽 스터디 덕분에 커리큘럼에 따라 미션을 수행하면서 완주 할 수 있었다. 스터디를 하며 가장 좋았던 점은 아무래도 세 번이나 진행된 라이브 온라인 세션이었다. 사수가 없는 회사에서 고군분투하는 내게 볼드님이라는 든든한 사수가 생긴 기분이었다. 그 중에서 피그잼으로 진행되는 온라인 세션들은 다른 사람들의 마우스 커서들을 보면서 이 과정을 함께하고 있는 이들이 있다는 점이 큰 위안이 되었다.

그리고 온라인 세션을 통해서 질의응답도 상세히 해주신 덕분에 미션을 하면서 많이 배울 수 있었고 성장했다고 느꼈다. 특히 온라인 세션 중에서 앤트맨 작전과 ChatGPT와 함께하는 디자인 시스템 문서화는 나중에 온라인으로 강의가 따로 올라오거나 세션 때 녹화한 부분을 풀어줬으면 하는 작은 소망이 있다. 인프런 여러분... 볼드님... 부탁드립니다... 🙏

그리고 디스코드 채널 안에서 다른 이들의 미션을 확인 할 수 있었던 점도 좋았다. 강의를 보면서 미션을 진행했지만 혼자서 미션을 수행하며 이게 맞나 고민하는 시간만 길게 갖는 것보다 다른 사람들은 어떻게 작업하고 있는지 참고해가면서 할 수 있어서 큰 도움이 되었다. 사람들마다 피그마 파일에서 각자 강의를 수강하는 다양한 방식도 엿볼 수 있어서 좋았다. 강의 메모를 피그마에 하시는 분도 계시고, 강의의 스크린샷 캡쳐를 하시는 분들도 있어서 나도 그걸 보고 배웠다. 초반에는 인프런 강의를 수강하면서 강의 화면에 있는 노트 기능을 많이 썼는데 피그마 파일에 직접 실습하면서 메모하는 방법이 더 좋다고 느꼈다.

비록 처음 OT때 결심과 달리 날짜를 맞춰 미션을 수행하는 것은 실패했지만 그래도 이 과정을 통해 강의를 완강 할 수 있게 되어 무척 감사하다. 이런 기회를 만들어주신 인프런 측에 감사의 인사와 한 달 동안 스터디를 위해 시간을 할애해주신 볼드님께도 무한한 감사를 드립니다.