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

드디어 오늘 저녁에 있을 온라인 특강을 제외하고 어찌보면 길고 어찌보면 짧은 워밍업 클럽 프로그램이 마무리되었다! 확실히 온라인 강의만 결제해서 혼자 공부할 때보다는 스터디 프로그램이 함께 진행되다보니 열심히 듣고자 하는 의지도 더 활활 타올랐던 것 같고, 매일 기한에 맞춰서 미션을 진행해야 되기 때문에 미루지 않고(사실 못하고..) 들었던 것 같다 ㅎㅎ퇴사를 하고나서 세웠던 계획 중에 하나인 피그마 공부와 디자인 시스템 공부를 한번에 해결할 수 있어서 뿌듯하면서도 알찬 시간이였고, 이제부터는 지금까지 배운 내용을 계속해서 반복하고 작업해보면서 내 것으로 만드는 시간을 가져봐야 할 것 같다. 이렇게 좋은 강의를 만들어주신 볼드님께도 다시 한번 감사하다는 말씀을 드리고 싶다! [4주차 강의 요약]4주차에도 지난주에 이어서 지금까지 열심히 만들어놨던 파운데이션과 컴포넌트를 이리저리 조합해서 새로운 페이지로 만들어보는 시간을 가졌다. 강의 초반에 볼드님께서 이 부분을 수강생분들이 제일 좋아하셨다는 말을 하셨었는데 실제로 나도 이 부분 강의가 제일 재미있고 흥미로웠다. 잘 다져놓은 기반으로 튼튼한 건물을 짓는 기분이랄까.. B2C E-Learning 페이지 제작모바일 OTT 서비스 페이지 제작 확실히 배리어블 모드를 잘 만들어놓으니까 디바이스별 반응형 디자인, 다크모드 전환을 이렇게 쉽게 할 수 있는 것에 다시 한번 박수를 보낸다..👍 그리고 실제 데이터를 'Google Sheet Sync' 플러그인으로 바로 적용할 수 있는 것도 앞으로 디자인할 때 편하게 사용할 수 있는 기능인 것 같다. [이번주 회고]스스로 칭찬하고 싶은 점프로그램이 끝날 때까지 강의랑 미션을 기한에 맞춰서 다 완수했다!기존에 XD로 작업했던 작업물을 다시 피그마로 제작해보면서 배웠던 내용을 적용하고 있다퇴사를 하고 '나는 어떤 디자이너가 되고 싶은가'라는 의문과 함께 내가 부족한 부분 중 어떤 점을 먼저 채워야 할지 고민만 하다가 시간이 흘렀는데 프로그램을 열심히 참여하면서 다시 한번 디자인에 대한 열정을 가질 수 있었고 더 많이 공부하고 싶다는 생각이 들었다. 아쉬웠던 점, 보완하고 싶은 점조금 더 피그마, 디자인 시스템에 익숙해져서 작업 시간을 줄이고 싶고 앞으로 실무에서 활용할 수 있는 효과적인 디자인 방법을 고안해보고 싶다.내 디자인을 보다 효과적으로 전달하기 위해 프로토타이핑 관련 공부도 더 해보고싶다.

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

[3주차 강의 내용 요약]이번주는 마지막 컴포넌트인 네비게이션 컴포넌트를 만들고, 배리어블 모드를 활용하여 기존에 만들었던 컴포넌트에 다크모드를 적용하는 방법과 멀티 브랜드 구현 방법, 반응형 디자인 적용 방법, 다국어 지원 방법에 대해 배워보았다. 또한, 만들어진 컴포넌트와 배리어블 모드를 활용하여 B2B 이커머스 어드민 페이지까지 제작해보는 시간을 가졌다. 1) 네비게이션 컴포넌트(Navigation Component) 만들기텍스트링크(Link), 브레드크럼프(Breadcrumbs), 네비게이션 탭(Tabs), 모바일 하단 네비게이션(Bottom Navigation), 페이지네이션(Pagenation), 사이드 네비게이션(Side Navigation), 헤더(Header), 캐러셀(Carousel) 2) 배리어블 모드 활용 방법[1] 다크모드 전환, 원리 배우기다크모드 : 빛을 덜 발산해서 배터리 절약, 저시력자의 경우 다크모드 선호몰입형 미디어 보기를 지원하는 UI의 경우, 영구적 다크모드 사용(회사에서 다루는 콘텐츠, 상품에 따라 선택!)단순히 라이트 모드 색상 체계를 반전하는 것 XX -> 브랜드 아이덴티티와 접근성을 항상 고려해야 함!!'계획 - 실행 - 테스트 및 무한 수정'의 방식으로 고쳐가는 것이 중요 [2] 브랜드 구조와 모드를 활용한 멀티 브랜드 구현다양한 브랜드 구조가 있고, 유형별로 다른 브랜드 전략을 사용통합 브랜드 형식의 멀티 브랜드 구현을 위한 배리어블 모드 제작동일한 파운데이션으로 브랜드 색상(Theme 색상)만 다르게 제작해보기 [3] 디바이스별 반응형 디자인 구현데스크탑, 태블릿, 모바일 화면에 따라 배리어블 모드 제작Break point, padding, margin 등 다양한 요소 적용 가능헤더나 사이드 네비게이션 등 디바이스에 따라 컴포넌트 타입도 다양하게 변경할 수 있음 ! [4] 다중언어 지원 화면 구현(영어, 한국어, 아랍어 등등)시장 개척 및 점유율 확대, 사용자 적용성 등 글로벌 시장이 목표라면 중요한 부분글로벌라이제이션(웹 접근성 등), 로컬라이제이션(지역, 문화에 따른 다양성) 적용언어별 읽는 방향, 쓰는 방향 변경 가능 우선 배리어블 모드를 활용해서 다크모드, 반응형 디자인 등 웹/앱 디자인에서 중요한 부분을 생각보다 쉽게 해결할 수 있다는 게 놀라웠다. 기존에는 이런 부분을 다 따로 따로 적용할 생각을 했었던 나의 무지함에 지금이라도 이렇게 배워가서 다행이라는 생각도 들었다..😅 그리고 분명 잘 만들었다고 생각했던 컴포넌트들이 모드가 먹히지 않는 부분들이 있어서 로컬 컴포넌트를 찾아가보니 내가 색상을 잘못 설정하는 등등의 실수가 있어서 역시 디자인 시스템을 만들 때는 테스트와 무한 수정의 과정이 꼭! 필요한 부분이구나를 다시 깨닫는 순간이였다..ㅎㅎ 파운데이션부터 시작해서 이제는 내가 만든 컴포넌트로 실제 페이지까지 디자인해보니 신기하면서도 재밌었지만 벌써 강의가 거의 끝나감에 아쉬운 마음이 들기도 했다. 요즘 볼드님의 강의를 들으면서 디자인 시스템에 대한 필요성과 효율성에 대해 크게 느끼고 있어서 계속 공부하고 싶어서 우선은 내가 기존에 작업했던 디자인 작업물을 토대로 디자인 시스템을 제작해보면서 익숙해져봐야겠다! [이번주 회고]스스로 칭찬하고 싶은 점이번주도 계획에 맞게 강의를 듣고 미션을 수행하였다.기존에 디자인했던 작업물들을 피그마로 수정해보면서 강의에서 배웠던 내용도 함께 적용해보고 있다.auto layout에 대해서 기존엔 헷갈리는 부분이 많았는데 작업을 하면서 많이 익숙해진 것 같다! 아쉬웠던 점, 보완하고 싶은 점이제는 강의를 듣고 미션을 따라해보는 것에서 그치지 않고 내 작업물로 디자인 시스템을 구축해보면서 계속해서 경험을 쌓아야겠다고 생각했다.다크모드에 색상 적용하는 부분에서 생각보다 많은 시간을 보냈던 것 같다. 특히 다크모드 반영시에 접근성의 중요하다는 것을 뼈져리게 느꼈다 ㅠㅠ

[인프런 워밍업 클럽 스터디 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주차 강의와 실습을 잘 끝냈다.아직은 강의를 듣고 실습 따라하기에 급하긴 했지만 지난주보다는 컴포넌트 제작 프로세스를 잘 따라가면서 만들었던 것 같다. 강의를 들으면서 최근에는 잘 사용하던 어플 화면을 볼 때도 '이 부분은 컴포넌트를 이렇게 나눠서 제작하지 않았을까?' '이 서비스의 디자인 시스템은 어떻게 작업되어 있지?'하고 화면을 분석하면서 보게 되는 게 예전보다 디자인 시스템에 대한 넓은 시야를 가질 수 있는 계기가 되는 것 같아 조금은 뿌듯했다. 아쉬웠던 점, 보완하고 싶은 점이번주에 알려주신 디자인 시스템 플러그인을 사용해서 기존에 만들었던 컴포넌트들도 문서화 해봐야겠다.실습 미션 중에 수정 보완 사항이 생겼었는데 다음주는 보다 꼼꼼하게 잘 따라서 미션을 진행해봐야겠다.현재 이직준비랑 피그마 스터디를 같이 진행하고 있어서 포트폴리오 준비랑 디자인 시스템 공부에 대한 시간을 효율적으로 잘 계획해서 진행해야 할 것 같다.

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

회사를 다니면서도 기본적인 내용만 대충 알고 '퇴근하면 피그마 공부해야지..' 했었는데 퇴사하고나서야 시간이 생겨 이렇게 피그마 공부를 제대로 시작하게 됐다. 혼자 공부하다보면 다른 일때문에 강의를 듣는 게 우선순위에서 밀리는 경우가 종종 있었는데 인프런 워밍업 클럽과 함께 정해진 시간표에 따라 미션을 수행하다보니 강제적인 요소가 있어서 아직 1주차지만 더 열심히 강의를 들으려고 했던 것 같다.그리고 재직중에도 스타일 가이드는 여러번 작성해봤던 적이 있었지만 실제로 디자인 시스템까지 구축해본 경험은 없어서 실무에서는 디자인 시스템을 어떻게 개발하고 어떻게 활용하는지 제대로 알고 싶어서 볼드님의 강의를 듣게 되었는데 기초적인 개념부터 꼼꼼하게 알려주셔서 이번 기회에 피그마 배리어블에 대해 깊게 이해하고 역량을 키워 프로덕트 디자이너로서 원하는 회사로 이직까지 할 수 있었으면 좋겠다. 1주차 강의 내용 요약디자인 토큰과 배리어블, 디자인 시스템에 대한 기본적인 개념 및 구조 알아보기배리어블은 디자인 토큰을 만들기 위한 요소이고, 디자인 토큰은 디자인 시스템의 기본 구성 요소일관성 있는 경험을 제공하기 위해 제작,관리하기도 훨씬 용이한 특징이 있음 디자인시스템 : 재사용 가능한 컴포넌트, 패턴, 가이드디자인시스템은 '큰 목표를 가지되, 작은 성공을 이뤄나가면서 공감대를 형성하며 만들어가야한다'색상, 간격, 타이포그래피, 아이콘, 그림자 효과 등 배리어블 및 스타일로 등록하기배리어블은 오직 하나의 변수만 저장(참조 가능), 스타일은 하나 또는 다수의 변수 저장배리어블은 Raw value - Primitive - Theme - Semantic - Component로 계층을 가지고 있음입력(Input) 컴포넌트 만들기 : 버튼, 체크박스, 라디오버튼, 스위치 버튼컴포넌트와 인스턴스, 프로퍼티에 대한 기본 개념 공부 스스로 칭찬하고 싶은 점스터디 진행 일정에 맞춰서 한주동안 온라인 강의를 열심히 듣고 미션을 수행했다.피그마 공부에 대해 하루 루틴을 만들 수 있었던 좋은 기회가 된 것 같다.모르는 개념을 이해하기 위해 여러번 강의를 들어보면서 조금은 감을 잡으려고 노력했던 것 같다.아쉬웠던 점, 보완하고 싶은 점(다음주 목표)조금 더 일찍 공부를 제대로 시작했으면 어땠을까 하는 아쉬움이 크게 남았지만 1달동안 열심히 해서 꼭 피그마 배리어블을 마스터 할 수 있었으면 좋겠다.이번주는 휴일이 중간에 있었어서 매일 매일 같은 시간대에 공부를 하지는 못했다. 다음주부터는 오전 시간을 활용해서 강의를 듣도록 노력해야겠다.피그마를 제대로 배우는 게 처음이다보니 아직 어려운 부분이 많아서 강의 내용에 따라가기 급급했는데 다음주부터는 왜 이렇게 만드는지에 대해 조금 더 고민해보는 시간을 가져봐야겠다.