본문 바로가기

UX UI design

(12)
코멘토 실무PT 후기 챌린지_ 제품을 이해하는 디자인 시스템 설계로 시니어 프로덕트 디자이너로 성장하기 강의 6주차 후기 마지막 수업인 6주차엔 디자인 시스템의 꽃 중에 꽃인 핸드오프에 대해 배웠다. (사실 핸드오프는 일부분일 뿐이고, 정말 하나도 놓칠 수 없는 꿀팁들이 가득했다!) 수업을 통해 핸드오프가 정말 디자인 시스템에서 결정적인 기능을 한다는 것을 깨달았다. 비율로 치자면, 단순히 컴포넌트를 만드는 것은 디자인 시스템에서 차지하는 중요도는 5% 정도이고 나머지 95%는 이렇게 만든 디자인 시스템이 시스템화 되어서 작동하기 위한 핸드오프가 훨씬훨씬 중요한 것이었다. 첫주 수업 때 멘토님이 디자인 시스템을 왜 용법/문법으로 비유하셨는지 깊이 이해하게 됐다. 이 수업을 통해서 디자인 시스템의 원리와 숲을 보게 되니, 이전 직장에서 디자인 시스템에서 말했던 토큰, 베리어블, 파운데이션 등등 눈치껏 대충 이런 뜻이겠거니 하..
코멘토 실무PT 후기 챌린지_ 제품을 이해하는 디자인 시스템 설계로 시니어 프로덕트 디자이너로 성장하기 강의 5주차 후기 5주차에서는 모달과 논모달, 바텀시트, 다이얼로그, 리스트, 카드, 탭, 바텀 네비게이션, 앱바, 사이드바, 체크박스, 라디오, 스위치, 칩 등 앱 uxui 디자인을 한다면 꼭 알아야 할 컴포넌트 UI에 대해 쭉 훑어주셨다. 배운 것들 중 중요한 것 메모해두기! *카드와 리스트의 차이는 컨텐츠 쌓는 방향이 상하인지, 좌우인지 차이가 있음. *라디오와 스위치(토글)의 차이를 결과반영이 즉각적인지 아닌지에 따라 차이가 있음. 어떻게 보면 당연한 개념인데, 인지하지 못하고 있었다가 멘토님의 설명을 듣고 이제서야 그 둘의 차이를 완벽하게 구분할 수 있게 됐다. 이런 것들을 배우지 못했다면 라디오를 써야하는 곳에 스위치를 사용해서 사용성에 문제를 일으켰을수도… 이렇게 각 컴포넌트들의 속성과 기능, 내부 구조를 정..
코멘토 실무PT 후기 챌린지_ 제품을 이해하는 디자인 시스템 설계로 시니어 프로덕트 디자이너로 성장하기 강의 4주차 후기 4주차부터는 본격적으로 컴포넌트에 대해 하나하나 배웠다. 그냥 ‘느낌’으로 알고있던 각 컴포넌트의 개념에 대해 정확히 알게된 시간이었다. 특히 모달의 개념도 이번 기회에 정확히 짚고 넘어가게 되었는데, 나는 단지 모달이 비주얼 적으로 어떻게 보이는지 생김새만 알고있었다. 모달의 기능적인 측면에서 정확히 배우게 됐고, 더불어 라이트박스란 개념도 배웠다. 배운 것들 중 중요한 것 메모해두기! *의사 클래스 = 컴포넌트의 상태값. >hover, pressed, focused 등 *컴포넌트 + 아톰 = 합성 컴포넌트 (오가닉스는 사실 거의 없다고 봐야함) *베리언츠 VS 프로퍼티 : 베리언츠는 디자인 토큰(간격, 사이즈, 컬러 등)이 바뀔 때 적용하는 것 / 프로퍼티는 토큰 값은 변하지 않은 것 무엇보다도 제작..
코멘토 실무PT 후기 챌린지_ 제품을 이해하는 디자인 시스템 설계로 시니어 프로덕트 디자이너로 성장하기 강의 3주차 후기 3주차는 지난 시간에 배운 디자인 시스템의 파운데이션 요소 중 폰트와 아이콘, 레이아웃에 대해 배웠다. 이렇게 파운데이션에 대해 다 배운 후, 컴포넌트에 대해서도 배웠다. 파운데이션에서 특히 폰트의 라인헤잇에 대해 깊고 자세하게 배울 수 있는 좋은 시간이었다. 이렇게 단순히 디자인 시스템 자체를 설계하는 것 외에도 디자인에 대한 기초 지식도 함께 쌓을 수 있어서 매우 좋았다! 라인헤잇을 왜 이 값으로 넣는지? 이전엔 그냥 당연하게 생각했왔어서, 통상적으로 다들 이렇게 많이 하니까 습관처럼 해왔던 작업들에 이유를 알게되니, 앞으로 어떤 작업을 하든 스스로 이유를 찾고 논리적인 디자인을 하는데에 큰 도움이 되는 것 같다. 컴포넌트는 레고 블럭이다! 멘토님이 모든 설명마다 비유를 찰떡같이 잘 들어주셔서 이해가..
코멘토 실무PT 후기 챌린지_ 제품을 이해하는 디자인 시스템 설계로 시니어 프로덕트 디자이너로 성장하기 강의 2주차 후기 2주차엔 지난 시간에 이어서 디자인 시스템에 대한 개론으로 DS의 원칙과 UX 가이드 라인에 대해 마저 설명해주시고 본격적으로 디자인 시스템에서 꼭 알아야 할 키포인트와 용어를 배우는 시간이 되었다. 우선 디자인 시스템하면 빼놓을 수 없는 개념인, 디자인 토큰(Token). 내가 전 회사에 다닐때 회사에 만들어진 디자인 시스템에서 내가 매우 매우 궁금했던게 바로 이 토큰이란 개념이었다. 토큰이란 개념이 뭔가 눈에 보이는 개념도 아니고 추상적인 개념이라서, 설명 한번에 바로 와닿기는 어려운 개념이지만 멘토님이 최대한 설명을 매우 쉽게 해주신 덕분에 토큰에 대한 개념이 꽤 잡혔다.ㅎㅎ 토큰 이후로 디자인시스템의 파운데이션 > 컬러에 대해서도 배웠다. 디자인시스템을 이루기 위한 아주 기초적인 원자인 것! 그래..
코멘토 실무PT 후기 챌린지_ 제품을 이해하는 디자인 시스템 설계로 시니어 프로덕트 디자이너로 성장하기 강의 1주차 후기 1주차에는 디자인 시스템에 들어가기 앞서 IT 디자이너로서 알아야 할 기본 지식들을 습득했다. 이미 많이 듣어왔고 스스로 잘 알고있다고 생각했는데, 실제로는 어렴풋이 그저 느낌으로 아는것들이 많았다. 이번 기회에 정확하게 개념을 짚고 넘어갈 수 있어서 좋은 기회였다. 특히 해상도에 대한 개념이 이번에 확실히 잡힌 듯 했다. 해상도는 그동안 디자인 학원이나 디자인 실무책 등에서 수도없이 여러번 배웠었는데 이번처럼 확실하게 이해된적이 없었던 것 같다!(감동..) 기초지식만 들었는데도, 앞으로 멘토님이 설명해주실 디자인 시스템에 대한 기대도도 덩달아 높아졌다! 기초지식 파트가 끝나고, 수업 후반부에서 이제 본격적으로 디자인 시스템 수업이 시작됐다. 나는 수업을 듣기전에는 단순히 테크닉 적인 디자인 시스템을 만..
코멘토 실무PT 후기 챌린지_ 글로벌 기업 수석 디자이너가 알려주는 UI∙UX 디자인 프로세스 A to Z 강의 6주차 후기 마지막 수업인 6주차 수업에서는 아토믹 디자인 시스템, 디자이너 커리어 방향성, 그리고 개발자와 소통하는 방법 등 현직에서 10년이 넘으신 멘토님의 꿀팁들을 대방출 해주셨다! 마지막날이 정말 핵심 날인듯ㅎㅎ 특히 멘토님이 피그마 작업하는데 도움이 되는 사이트와 피그마 플러그인을 몇가지 추천해주셨는데 신기한 플러그인이 매우 많았고, 정말 유용하게 잘 쓰일 것 같다! 6주간의 길면 길고 짧다면 짧은 시간동안 정말 UX/UI의 A-Z까지 모든 것을 배운 것 같다. 피그마를 다루는 UI보다 UX에 조금더 비중이 있는 수업으로 내가 원하는 방향이었다 :) UX/UI라는 분야가 학문의 영역이라기보다 실무적인 측면이 강한 분야여서 어디서 어떻게 배워야 할지 어려웠는데 마쓰84 멘토님의 UXUI 수업은 의 모든것 일주..
코멘토 실무PT 후기 챌린지_ 글로벌 기업 수석 디자이너가 알려주는 UI∙UX 디자인 프로세스 A to Z 강의 5주차 후기 5주차에서는 전반적인 디자인 프로세스 단계를 하나하나 자세히 배웠다. 그동안 1주차부터 4주까지 배웠던 Design Thinking 프로세스를 바탕으로, 프로덕션이 이루어지는 과정 대한 설명을 해주셨다. 그리고 디테일하게 프로덕션 프로덕션에 들어가기 전에 UX 전략과 UI 전략을 세우고, 이 전략들을 세우기 위한 자세한 솔루션 기법들에 어떤 것들이 있는지도 배웠다. 실제 실무에서 요 단계들을 디자이너가 프로덕션에 들어가기 전에 작성해본다면 방향성이 흔들리지 않을 것 같다. 그리고 실무에서 이런 문서화를 해둔다면 자동으로 포트폴리오로도 사용할 수 있을 것 같다 :) 그리고 마지막에 Figma 실습도 큰 도움이 되었다. 그동안 아이콘 on/off 가 조금 헷갈렸었는데, Layer에서 프로퍼티를 생성해야 한다..