블로그 모아보기 - 인프런

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

네번째 발자국 이번주는 스터디가 끝나는 주간이지만 지난주에 미션 진도를 많이 못했던 터라 못 다한 미션을 다 하도록 시간을 많이 할애했다. 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 SyncDay 21 Q&A 온라인 세션 - 디자인 시스템 문서화 (Feat. Chat GPT)디자인 시스템을 문서화 하는 이유에 대해서 배웠다. 디자인 시스템을 문서화 하는 이유는 서로 생각하고 있는 UI가 다르기 때문에 일관성, 효율성을 위해 디자인 시스템 문서화가 필요하다. 이는 곧 디자인 시스템은 혼자 하는 작업이 아니고 협업을 위해서 필요한 작업인 만큼 문서화가 얼마나 중요한 지 알게 해주는 부분이었다. 그리고 디자인 시스템에도 성공 지표가 있다고 하는데 디자인 파일 전체에서 디자인 시스템을 얼마나 사용하고 있는지 디자인 시스템을 채택해서 디자인 했는지가 중요하다고 알려주셨다.그리고 피그잼을 통해서 디자인 시스템 문서화에 필요한 필수 요소를 투표해봤는데 대부분 생각이 비슷한 지 투표 결과가 몰리는 것을 확인 할 수 있었다. 내가 투표한 디자인 시스템 문서화에 필요한 필수 요소는 스펙, 스테이트, 반응형 디자인 이렇게 세 가지를 투표했었다.온라인 세션 시작 전에 ChatGPT를 활용하는 시간이 있다고 해서 어떤 강의를 하는지 기대했었는데, 이 날 진행된 온라인 세션은 정말 최고였다. 수 많은 국내/해외 디자인 시스템 문서를 보면서 이런 문서들에 들어갈 내용을 모두 작성하려면 어떻게 작성해야되는지 궁금했었다.그런데 ChatGPT에게 프롬프트를 입력하면 컴포넌트의 사양, 상태, 사용법 등 디자인 시스템 문서화 하는데에 밑바탕이 되는 글을 작성해주는 점이 정말 편리하고 신기했다. 이런식으로 ChatGPT를 활용하는 방법을 알려주신 볼드 멘토님께 감사하고, 알려주신 프롬프트는 잘 저장해두고 훗날 디자인 시스템 문서화를 현업에서 진행 할 때 적용해봐야겠다.물론 ChatGPT가 완벽한 건 아니고 결과 값이 나오면 꼭 읽어보고 사람이 검토를 해야 할 점이 있다. 그리고 영문과 국문이 결과가 다르고 ChatGPT가 3.5ver인지 4.0ver 인지에 따라서 결과 값이 다르다고 하니까 다양한 방법으로 활용해봐야겠다. 피그잼에 모여서 프롬프트를 사용해서 컴포넌트 별 결과물을 검토해본 온라인 세션 스터디를 마무리하며강의를 결제해두고 시간이 부족하다는 이유로 안 듣고 있었는데 인프런 워밍업 클럽 스터디 덕분에 커리큘럼에 따라 미션을 수행하면서 완주 할 수 있었다. 스터디를 하며 가장 좋았던 점은 아무래도 세 번이나 진행된 라이브 온라인 세션이었다. 사수가 없는 회사에서 고군분투하는 내게 볼드님이라는 든든한 사수가 생긴 기분이었다. 그 중에서 피그잼으로 진행되는 온라인 세션들은 다른 사람들의 마우스 커서들을 보면서 이 과정을 함께하고 있는 이들이 있다는 점이 큰 위안이 되었다.그리고 온라인 세션을 통해서 질의응답도 상세히 해주신 덕분에 미션을 하면서 많이 배울 수 있었고 성장했다고 느꼈다. 특히 온라인 세션 중에서 앤트맨 작전과 ChatGPT와 함께하는 디자인 시스템 문서화는 나중에 온라인으로 강의가 따로 올라오거나 세션 때 녹화한 부분을 풀어줬으면 하는 작은 소망이 있다. 인프런 여러분... 볼드님... 부탁드립니다... 🙏그리고 디스코드 채널 안에서 다른 이들의 미션을 확인 할 수 있었던 점도 좋았다. 강의를 보면서 미션을 진행했지만 혼자서 미션을 수행하며 이게 맞나 고민하는 시간만 길게 갖는 것보다 다른 사람들은 어떻게 작업하고 있는지 참고해가면서 할 수 있어서 큰 도움이 되었다. 사람들마다 피그마 파일에서 각자 강의를 수강하는 다양한 방식도 엿볼 수 있어서 좋았다. 강의 메모를 피그마에 하시는 분도 계시고, 강의의 스크린샷 캡쳐를 하시는 분들도 있어서 나도 그걸 보고 배웠다. 초반에는 인프런 강의를 수강하면서 강의 화면에 있는 노트 기능을 많이 썼는데 피그마 파일에 직접 실습하면서 메모하는 방법이 더 좋다고 느꼈다.비록 처음 OT때 결심과 달리 날짜를 맞춰 미션을 수행하는 것은 실패했지만 그래도 이 과정을 통해 강의를 완강 할 수 있게 되어 무척 감사하다. 이런 기회를 만들어주신 인프런 측에 감사의 인사와 한 달 동안 스터디를 위해 시간을 할애해주신 볼드님께도 무한한 감사를 드립니다.

UX/UI･피그마･figma･design･productdesign･프로덕트디자인･uiux･uxui･디자인시스템

1

0

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

4주 차 - 학습했던 내용 요약피드백 컴포넌트와 네비게이션인 토스트, 스켈레통, 프로그레스바, 모달, 네비게이션, 페이지네이션, 헤더, 캐러셀 등의 컴포넌트를 만들었습니다.베리어블을 통해 다크 모드, 멀티 브랜드, 다언어 케이스에 적용할 수 있도록 설정하고 실습했습니다.Shop, Learn, OTT의 예시 페이지를 만들었습니다.라이브에서는 여러 브랜드의 디자인 시스템을 둘러보고 도큐먼트 요소들을 분석해 보고 chatGPT를 이용하여 디자인 시스템을 만들어보는 시간을 가졌습니다. 4주 차 - 회고4주간의 스터디를 통해 두 번째 완강을 빠른 시간에 할 수 있었습니다.개인 일정으로 1주 차에 학습을 많이 하지 못했습니다. 그래서 남은 3주 동안 미션을 한다고 마지막 날까지 부랴부랴 했는데 정말 시간이 정신없이 빠르게 지나간 것 같습니다.또 최근 AI를 활용한 프로덕트 디자인에 관한 콘텐츠가 많이 보였는데 디자인 시스템 설계에 chatGPT를 활용하여 실습을 해보니 색다른 경험이었습니다. 인프런 워밍업 클럽 스터디 - 후기볼드님께서 QnA도 열심히 해주시고 라이브 강의도 정말 하나라도 더 알려주시려고 꼼꼼히 준비하셔서 배우는 입장에서 너무 감사하고 자극도 많이 되었습니다!함께 스터디하는 수강생들도 열심히 해주어 저도 더 열심히 참여한 것 같아요 :)처음 볼드님 강의를 들었을 때는 처음 듣는 부분이 많아 50~60% 정도 이해가 되었는데, 이번 스터디를 통해 더 깊게 익히는 계기가 되었습니다.강의에서 볼드님도 수정에 대하여 여러 번 말씀하셨지만, 정말 디자인 시스템은 어떻게 더 효율적인 시스템이 될지 끝없이 고민하고 수정해 나가는 과정인 것 같습니다.스터디는 끝났지만 배웠던 것을 바탕으로 실무에서 베리어블 모드를 잘 사용하는 디자이너가 될 수 있도록 노력해 보겠습니다!

UX/UI･인프런워밍업클럽스터디･figma･uiux

0

[인프런 워밍업 스터디 1기 디자인] 4주차 발자국

4주차 강의 후기드디어 4주차가 마지막으로 스터디가 끝났다. 한 번 밀린 과제는 수업 목표에 맞춰서 끝내기가 너무 오래 걸렸다ㅠ 원래 이번주는 베리어블을 활용하여 컴포넌트 조합해서 페이지 만들기/반응형 만들기/모드 적용하기인데 나는 미션 11인 네비게이션 카테고리에 해당하는 나머지 컴포넌트 만들기까지 끝냈다!그래도 강의 보면서 하니까 몰랐던 단축키도 알게되고 점점 빠르게 하는 방법을 알게되는 거 같다스터디는 끝났지만 아직 못한 미션 12 ~ 16은 부지런히 혼자 공부하며 따라가야겠다!!

UX/UI･워밍업･스터디･프로덕트디자인･uiux

0

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

3주 차 - 학습했던 내용 요약인풋 컴포넌트인 버튼, 체크박스, 라디오, 스위치, 라벨, 컨트롤 그룹, 텍스트 필드, 텍스트 상자, 셀렉트를 만들었습니다.디스플레이 컴포넌트인 아바타, 아코디언, 뱃지, 툴팁, 디바이더, 칩, 스테이터스 칩, 카드 폼, 테이블 요소들을 만들었습니다.제작한 컴포넌트의 대비를 체크하여 접근성에 부합하는지 체크해 주었습니다.라이브로 타이포그래피 베리어블에 대하여 공부했습니다. 3주 차 - 회고만들어진 컴포넌트를 볼 때는 금방 만들 수 있을 것 같았는데 실제로 하나씩 따라 만들어보니 시간이 생각보다 많이 걸립니다. 이번 주에 내비게이션 컴포넌트까지 만드는 게 목표였는데 디스플레이까지밖에 하지 못했습니다.테이블은 각 잡고 만들면 상당히 복잡해질 것 같네요.특히 만들어진 컴포넌트를 활용하여 또 다른 컴포넌트를 만들 때는 고려해야 할 점들도 많아지는데, 어떻게 더 효율적으로 프로퍼티를 구성하면 될지 고민을 거듭하면서 더 좋은 컴포넌트를 디자인할 수 있게 되는 것 같습니다.타이포그래피 베리어블도 많이 복잡하다고 느껴졌는데 볼드님 라이브를 듣고 쉽게 이해할 수 있었습니다. type face, font, font family도 잘 구분할 수 있게 되었습니다 :)타이포그래피 베리어블은 복잡하지만 잘 적용해 본다면 반응형 작업 시 타이포까지 대응할 수 있어 엄청 좋을 것 같습니다! 4주 차 - 다짐 및 계획다음 주에는 나머지 컴포넌트들을 만들고 예시 페이지들까지 완성하여 커리큘럼을 완주해 보도록 하겠습니다!!

UX/UI･인프런워밍업클럽스터디･figma･uiux

0

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

2주 차 - 학습했던 내용 요약 디자인 시스템과 피그마 배리어블, 디자인 토큰 등에 관한 이론을 공부했습니다.배리어블 계층과 이름을 어떻게 정하는지에 대하여 익혔습니다.color, spacing, radius 등 foundation 스타일과 배리어블 등록을 했습니다. ✔ 디자인 시스템이란재사용 가능한 컴포넌트, 패턴 그리고 가이드 ✔ 디자인 시스템의 6가지 구성1. 디자인 원칙 : 디자인 시스템이 왜 필요한가 (비전, 미션, 가치 설정)2. 스타일 가이드 : 브랜드를 나타내는 스타일 가이드EX) 로고, 칼라, 레이아웃/그리드, 간격, 아이콘, 모션, 일러스트레이션, 사진, 디자인 토큰, 타이포그래피, 톤 오브 보이스3. 컴포넌트 라이브러리 : 재사용이 가능한 UI 기본 요소 (코드 포함)EX) 버튼, 인풋 필드, 체크 박스, 라디오 등4. 패턴 라이브러리 : 자주 반복 사용되는 디자인 템플릿EX) 로그인 폼, 탐색 메뉴, 컨텐츠 카드 배치5. 문서화 : 가이드라인, 컴포넌트, 패턴, 스타일 가이드 등을 문서화 한 자료6. 시스템 관리/운영 : 디자인 시스템을 효과적으로 관리하고 유지하기 위한 프로세스와 규칙EX) 업데이트, 학습 자료, 등 (=가버넌스) ✔ 디자인 시스템이 있으면 좋은 점디자인 일관성 유지, 브랜드 강화, 효율적인 개발, 시간 단축, 팀 간 협업 강화, 빠른 온보딩, 유지 보수 용이, 높은 품질의 경험 ✔ 배리어블 계층Component (=component)Alias (=semantic)Global (=primitive)Raw value 2주 차 - 회고이론을 복습하고 Foundation 만드는데 시간이 많이 걸려 컴포넌트를 아직 만들어보지 못했어요 😭조금 더 부지런히 작업을 해보겠습니다..! 3주 차 - 다짐 및 계획파운데이션 설정과 문서화를 빨리 끝내고 다음주에는 컴포넌트들을 모두 만들겠습니다.

UX/UI･인프런워밍업클럽스터디･figma･uiux

0

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

1주 차 - 학습했던 내용을 요약 및 회고1주 차는 일정이 있어 해외를 다녀오느라 강의를 거의 듣지 못했어요 ㅜㅜ미션을 매일매일 완료하면 좋겠지만 개인 일정에 따라 조정해도 된다기에 다음주부터는 열심히 해볼 예정입니다.한국으로 돌아오는 비행이 토요일 오후여서 집에 도착하자마자 구글밋에 참가했는데요.볼드님과 수강생분들과 함께 소통하며 들으니 궁금한 점들도 바로 해결되고 열정도 느껴져 좋았습니다. 앞으로 만들어야 할 컴포넌트들의 리스트를 보여주셨는데.. 하하하.. 양이 엄청 많더라구요! 쉽진 않겠지만 또 하나하나 하다 보면 또 완성되는 것 아니겠습니까강의가 끝나고 디스코드를 살펴보았는데, 다른 수강생분들 미션 업로드된 것을 보니 저도 좀 더 적극적으로 공부해야겠다는 생각이 드네요. 열심히 해봅시다! 2주 차 - 다짐다행스럽게도 2주 차엔 개인 공부할 시간이 많이 확보될 것 같아요.1주 차의 밀린 진도와 미션와 2주 차 미션까지 완료해 보겠습니다!

UX/UI･인프런워밍업클럽스터디･figma･uiux

0