블로그 모아보기 - 인프런

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

학습 내용복습을 위해 이번 주에 필기한 강의 내용을 갈무리했습니다 브랜드 구조 유형 (Brand Architecture Type)하우스 오브 브랜드 (House of Brands)엔돌슨 브랜드 (Endorsed Brands)서브 브랜드 (Sub Brands)브랜디드 하우스(통합 브랜드) (Branded House) 반응형 디자인 / 적응형 디자인반응형 디자인 디바이스 너비에 따라 디자인이 자동으로 변경개발 효율이 큼(관리 포인트 관점)적응형 디자인 디바이스 너비에 따라 디자인이 수동으로 변경모든 브레이크 포인트마다 디자인 적용(애플이 대표적) 글로벌라이제이션 / 로컬라이제이션글로벌라이제이션국제 시장에 표준화하여 전세계 시장에 적용될 수 있도록 만드는 것 → 일관성, 표준화, 중앙집중화로컬라이제이션특정 지역 국가의 문화, 언어 습관에 맞게 조정하는 것을 의미 → 다양성, 분산화 발견한 설계 꿀팁베리어블 불린 프로퍼티의 경우 레이어 눈(view) 아이콘에서 우측 버튼 클릭해 적용해야함 베리어블 적용된 상태에서 타 베리어블로 중복 적용 가능 컴포넌트 인스턴스에도 베리어블 적용 가능 (스트링할 때 필요) 구글 시트 플러그인으로 더미 텍스트들 한번에 적용 가능1) 레이어 이름과 시트 이름이 동일해야함2) 변경하고자 하는 레이어 이름 앞에 ‘#’을 붙여줘야함 미션 내용회고를 위해 이번 주에 진행한 미션 내용을 톺아봤습니다미션 #13 - 멀티 브랜드을 베리어블 모드를 활용하여 구현해보기미션 #14 - B2B 이커머스 어드민 페이지 만들기미션 #15 - B2C 이러닝 페이지 만들기미션 #16 - 모바일 OTT 서비스 페이지 만들기 모든 강의를 완주했으며 모든 미션을 끝냈다🥳🎉🎊이번 #13~16미션은 그동안의 미션 중 가장 재밌는 미션이었다ㅎㅎ베리어블의 임팩트를 가장 크게 느낄 수 있는 미션들이었고 충격의 연속이었다.특히나 멀티 브랜드일 경우 모드를 변경할 때마다 짜릿했다ㅎㅎ(패딩에 베리어블을 설정 가능한 것과, 베리어블의 불린 기능도 매우 유용하게 느껴졌다)너무 재밌게 진행한 마지막 주 미션이었다.이제 앞으로 배운 기능들을 잘 사용할 일만 남았다.섬세하게 잘 가르쳐주신 볼드님께 감사의 말씀을 전한다!감사합니다 볼드님~!🙏🏻🙇🏻‍♂️ 스스로 칭찬하고 싶은 점 : 강의 & 미션 모두 완주한 점! ㅎㅎ아쉬웠던 점 : 없.다. 후회 없!보완하고 싶은 점 : 혼자 배운 것들을 실무에 적용해보기...!다음주 목표 : 보너스 미션 도전해보기😎

UX/UI･디자인시스템･피그마･베리어블

1주차 [피그마 배리어블을 활용한 디자인 시스템 구축하기] 발자국😱

일주일 동안의 나의 게으름 타파 작전!!bold님의 강의 [피그마 배리어블을 활용한 디자인 시스템 구축하기]수강 1주차(베리어블 등록하기) 이번주 나의 강의 ☑디자인 토큰과 베리어블 장점 비교디자인 시스템에 대해 알아보기 (디자인의 일관성, 브랜드 강화, 효율적인 개발, 시간 단축, 팀 간 협업 강화, 빠른 온보딩, 유지보수 용이, 높은 품질의 경험) 디자인 시스템은 혼자 만드는 것이 아니라 디자이너, 개발자는 물론 다양한 이해관계자들과 함께 만들어야 한다.) 베리어블의 구조(토큰계층) / 베리어블의 네이밍 구성요소 (개발자와 디자이너 사이의 공통된 이름 짓기, 미리 계획하에 만들기(엑셀시트))Primitive / Theme / Semantic으로 나누어서 사용에 맞게 베리어블 등록하기 (단계별로 어떤 베리어블을 참조 해야하는지 확실한 구분이 필요)등록한 베리어블을 공유할 수 있도록 문서화하기 (알아보기 쉽게 일관된 스타일로 문서화 하는 것이 중요(컬러의 경우 참조 베리어블 등록하는 것이 생각보다 시간이 오래 걸림 ㅠㅠ)) 강의를 들은 나의 회고 😭😭솔직히 처음에는 강의를 듣는 시간이 얼마 안걸릴거라고 생각했는데 실습을 직접하면서 배우는거라 생각보다 시간이 많이 걸렸다. 하지만 실습을 하면서 배우는게 몸으로 익히면서 배우는 거라 더 기억에 남는거 같아 좋았다. 그리고 강의의 퀄리티가 너무 좋아서❤ (실무에서 유용하게 사용할 수 있을 정도) 하루 하루 배울 수록 힘들었지만 기분이 좋아졌다. 게으른 나 다음주도 조금만 더 힘냈으면 좋겠다. 미션 컴플리트 중미션은 생각보다 어렵지 않았다. 강의를 들으면서 누구나 해결할 수 있을 정도의 수준이어서 처음엔 좋았는데 베리어블을 문서화 하는데 시간이 생각보다 많이 들었지만(아직도 하는 중😱) 나중에 회사에서 배운걸 적용하고 문서화를 할거를 미리 연습한다는 생각으로 하고 있다. (플러그인이 모든걸 해결해 주지는 않는다.😌) 볼드님이 1주차 온라인 강의를 해주셨는데 실무적으로 사용할 수 있는 것들을 자세하게 설명해 주셔서 너무 좋았습니다. 강의가 정말 필요하고 그동안 궁금했던 것들이 담겨있어 너무 좋았습니다. 다들 이 강의 꼭 들으세요.👍👍

UX/UI･베리어블･디자인시스템･피그마

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

학습 내용복습을 위해 이번 주에 필기한 강의 내용을 갈무리했습니다 베리어블 모드를 사용하는 경우라이트 모드 / 다크 모드로 설정이 나눠져 있을 경우다중 언어 지원이 필요할 경우디바이스별 대응이 필요할 경우멀티브랜드 대응이 필요할 경우 라이트 모드 / 다크 모드→ 빛, 배터리, 인지 능력과 관련되어 있음라이트 모드평범한 사람들은 훨씬 퍼포먼스가 좋음긴시간 노출될 경우 근시 확률이 높아짐다크 모드빛이 덜 발산해서 배터리가 덜 듦저시력자의 경우 다크 모드를 선호함단, 서비스에 따라 다름상품 또는 콘텐츠가 돋보여야 하는 경우(ex. 이커머스, F&B 서비스)에는 라이트 모드 지향몰입형 미디어를 제공해야하는 경우(ex. OTT 서비스)에는 다크 모드 지향플랫폼 마다 다크 모드 디폴트 배경색이 다름 (→ 그림자 등 디자인 에셋에 영향을 끼침)AOS → 짙은 회색 (#121212)iOS → 완전한 검은색 (#000000) 다크 모드 설정 시 주의할 점브랜드 아이덴티티 고려접근성 고려특히나 명암 대비디자인 요소 - 3:1일반 텍스트 - 4.5:1작은 텍스트 - 7:1지속적인 테스트로 수정 가능성 고려 발견한 설계 꿀팁기존 컴포넌트 사용해서 새로운 컴포넌트 만들 시 오토 레이아웃이 아닌 그룹으로 만들어주면 불린을 적용할 때 영역을 차지하지 않음 사이즈 조절할 때 백터 에셋도 같이 조절하려면 백터 컨스트레인을 Scale로 변경해주면 됌 Command+R로 레이어 라벨링할 때 숫자의 경우 ’nn’ 앞에 ‘n’ 지워주면 1자리 수로 적용할 수 있음 네스트 인스턴스 적용할 때 스페이스바 사용해서 한번에 검색해 여러개를 동시에 적용할 수 있음 그룹을 먼저 적용하고 오토 레이아웃을 하면 자동으로 잡히는 영역없이 오토레이 아웃을 할 수 있음 미션 내용회고를 위해 이번 주에 진행한 미션 내용을 톺아봤습니다미션 #9 - 피드백 컴포넌트 전체 만들어보고 색상 대비 점검을 하기미션 #10 - 네비게이션 카테고리에 해당하는 컴포넌트를 만들어 보기미션 #11 - 네비게이션 카테고리에 해당하는 나머지 컴포넌트를 만들어 보기미션 #12 - 베리어블 다크모드 개념을 익히고 활용해보기 이번 주 드디어 모든 컴포넌트 작업을 마치고 다크 모드 적용에 들어갔다!컴포넌트 만드는 과정을 돌이켜보면 프로그레스바 만드는 미션이 가장 재밌었다.1도 예상치 못한 기발한 방법으로 프로그레스바를 만들며 피그마가 얼마나 잘 되어있는 툴인지 새삼 깨달았다.다른 컴포넌트를 만들 때도 적용할 수 있을 것 같아 절대 까먹지 않고 기억해두려 한다.다크 모드 적용은 컬러 콘트라스트를 체크해 시멘틱 컬러 베리어블을 다듬는 과정이 꽤나 어려웠다.라이트 모드에서 하나의 모드가 더 생겼을 뿐인데 관리할 포인트가 무진장 많아진 느낌이다...나중에 고생하지 않으려면 시스템은 초반부터 잘 만들어야 함을 다시금 깨닫는 순간이었다...!다크 모드는 실제로 처음으로 적용해 보는데 계획하는 단계가 잘 이해가지 않는다.(나중에 혼자 할 수 있을까 걱정이다...ㅠ)다음 주면 막 주다!드디어 기다리고 기다렸던 실제 화면 만들기에 들어간다.지금껏 꽤나 오랜 시간 공들여 만들어온 컴포넌트를 신나게 사용할 때가 다가온 것이다...이 말이다...막주까지 잘 달려서 모든 미션 완수하자! 화이태ㅐ애애애앵~!! 스스로 칭찬하고 싶은 점 : 1) 아이콘 시스템 수정 필요한 부분들 수정한 점2) 타이포 그래피 시스템 행간 수정해서 스타일 가이드까지 적용해 놓은 점아쉬웠던 점 : 1) 컬러 콘트라스트를 체크해 최대한 모든 부분을 수용할 수 있도록 수정했지만, 어쩔 수 없이 대비가 미미한 부분이 존재하는 점2) 다크 모드에서 눈물을 머금고 넘어가야하는 디자인 에셋(ex. 스켈레톤 UI)이 존재하는 점보완하고 싶은 점 : 프리미티브 컬러를 수정해보고 싶다...!다음주 목표 : 지금 처럼 킵 고잉해서 모든 미션 완료하기~!~!!

UX/UI･피그마･디자인시스템･베리어블

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

학습 내용복습을 위해 이번 주에 필기한 강의 내용을 갈무리했습니다프로퍼티의 종류들Text 프로퍼티 → 디폴트 텍스트 설정instance swap → 변경할 수 있는 에셋 설정이때 Value 에서 디폴트 에셋 설정 가능Preferred values에서 변경할 수 있는 에셋들 설정 가능프로퍼티의 위치를 바꿔주는 것도 중요Leading icon 의 Boolean 프로퍼티 아래 → Leading icon 의 instance swap 프로퍼티를 위치시켜 디자인 시스템 사용성을 증진시키는 구성을 만들어 줌에셋의 높이를 통일시켜주는 것도 중요모 컴포넌트에 min, max 하이트 값을 넣어주면 자 컴포넌트에도 적용 볼드님 질의 응답 답변Storke가 살이있는 아이콘은 Union을 먼저 한 다음 Outline Stroke로 깨야함 → Storke 값이 살아있으면 리사이징 시 값이 유지 됌 (리사이징 되지 않음) 발견한 설계 꿀팁인스턴스가 조합된 최종 상태의 컴포넌트는 한번 더 묶어주기디자인 시스템 사용성 챙기기이 때 기준이 되는 모 컴포넌트는 ‘part/’ 라벨링을 붙여 검색 시 노출 안되게 해주기 ex)컴포넌트 베리언트에서 절대 위치(앱솔루트 포지션) 적용할 수 있음 그리고 절대 위치 적용한 디자인 에셋에 컨스트레인 적용해서 반응형으로 설정 가능함ex)컴포넌트 베리언트 정의한 영역 안에서 일괄 적용되지 않게 하려면 각 개별 컴포넌트 안에서 에셋을 정의하면 됌Boolean으로 적용하면 안되는 부분, 적용하지 않으려는 목적으로 작용ex)작업 이후 디자인 에셋들 Contrast 체크해서 접근성 갖추기몰랐던 점들이미지 삽입 관련이미지도 스타일 등록이 가능하니 자주 쓰는 이미지는 등록해놓으면 좋을 것 같다 이미지 삽입할 때 ‘프레임 배경 컬러 선택 → 이미지 선택’해서 넣어주는게 좋을 것 같다( 1. 이미지 자유롭게 리사이징 가능 / 2. 이미지 다른 에셋으로 곧바로 변경 가능 )오토 레이아웃 설정 관련오토 레이아웃 설정에서 스트로크 같이 면으로 처리 안되는 친구들의 ‘Included / Excluded’를 설정할 수 있다오토 레이아웃 설정에서 에셋들의 스택 순서를 ‘Last on top / First on top’으로 변경할 수 있다 미션 내용회고를 위해 이번 주에 진행한 미션 내용을 톺아봤습니다미션 #5 - 피그마 컴포넌트 기초 배우고 입력 컴포넌트 만들어보기미션 #6 - 입력 컴포넌트 나머지 만들고 마지막 점검하기미션 #7 - 디스플레이 컴포넌트 만들어보기미션 #8 - 디스플레이 컴포넌트 나머지 만들고 마지막 점검하기 이번 주 미션도 저번 주와 마찬가지로 총 4개의 미션이었다.미션 #5, #6, #7, #8 과정 모두 컴포넌트를 만드는 미션으로 UX 경험적으로 꼭 필요한 공통 에셋들을 만들어보는 과정이었다.실무에서 공통 에셋들을 만들어본 적은 있지만, 수업처럼 모든 에셋들을 만들어본 적은 없어서 본격적인 과정들이 쉽진 않았다. (생각보다 시간이 오래걸리는 점도 꽤나 힘들었다)그래도 미션 #5, #6, #7, #8 과정을 거치며 베리어블 사용하는 것에 어느정도 익숙해진 것 같다. (조금 속도가 붙었다)중간중간 적용을 까먹고 빼먹는 친구들이 종종 있는데 좀 더 꼼꼼히 살피면서 설계할 필요가 있는 것 같다.다음 주도 공통 컴포넌트 에셋을 만드는 작업을 이어서 진행한다.빨리 페이지에 만들어놓은 컴포넌트 에셋들을 적용시켜보고 싶다...!완주까지 기대가 되는 요즘이다. 굿! 스스로 칭찬하고 싶은 점 : 월요일, 화요일 매우 몰입해서 미션 #5, #6, #7, #8을 모두 완주한 점아쉬웠던 점 : 아이콘 시스템, 타이포 그래피 시스템을 다듬어야 하는데 다듬지 못한 점보완하고 싶은 점 : 타이포 그래피 시스템도 베리어블을 적용해보고 싶은 점다음주 목표 : 3주차 들어가기 전 아이콘 시스템, 타이포 그래피 시스템 다듬어야할 친구들 무조건 손보고 들어가기!

UX/UI･피그마･베리어블･디자인시스템

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

인프런 워밍업클럽 2기를 시작하며슬픈이유로 회사를 퇴사하고 면접 준비하고 나를 계속 증명하고 정신없는 나날을 보내다가 인프런 워밍업 클럽 공지를 보았다.개인 포트폴리오도 있어빌리티하게 가꾸고 겸사겸사 IT계의 진정한 조각의 꽃인 플랫폼 디자인 직군에 지원해 보고 싶었는데 작업 동기부여가 필요해서 워밍업 클럽을 신청하게되었다. (도깨비 방망이 하나를 냅다 파고 조각하는걸 좋아하는 강박 성향이 있어서 플랫폼 디자이너 이전부터 너무 해보고 싶은 직무였었다.) 1주차때 배운 것배리어블 등록 (색상, 간격, 타이포그래피, 아이콘, 그림자 그리드) 이전에도 강의를 듣긴 했는데 퇴사하고 오랜만에 복기하려니 또 새로웠다. 그래도 전에는 다시 뒤돌아가고 다시듣고 백버튼을 무한대로 누르면서 보는 엉금엉금 속도였는데 이제는 이해가 훨씬 빠르게 되었었다. 아쉬웠던 점내 개인 프로젝트에 적용해보지 않은 나의 습관반복 복습하는 자세도 중요하지만 개발환경이나 내 서비스에 맞게 고민해보고 베리어블을 짜볼 수 있는 경험으로 이어져야 진정한 내것이 될 것 같았다. 너무 그간 수동적이였던 건 아니였을까? 그러면서도... 맘 한켠으론 모르는데 어캄? 이해될 때까지 반복해보는것도 중요한디? 혼란스러웠다. 다음에 시도해보기포폴용 DS 개인 파일 만들어보기전에 다닌 회사에서 베리어블 나오기 전에 작업한 컴포넌트 라이브러리? 가이드라인? 정도 볼륨의 피그마 작업 파일이 있었는데 해당파일에 베리어블과 토큰 개념을 추가해서 업데이트 해보려한다. 이걸 가지고 플랫폼 디자이너 채용 공고에도 지원을 할 것이다. 경기가 너무어려워서 PD취업도 쉽지 않고 아직도 뭐해 먹고 살지 고민이지만, 절대 포기하지 않고 나만의 무기를 계속 연마해서 좋은 동료들이 있는 회사에 꼭 붙고 말것이다.

UX/UI･디자인시스템･DS･베리어블･워밍업클럽･볼드님강의･2기

4주차 [피그마 배리어블을 활용한 디자인 시스템 구축하기] 발자국 😘

일주일 동안의 나의 게으름 타파 작전!!bold님의 강의 [피그마 베리어블을 활용한 디자인 시스템 구축하기]수강 4주차(베리어블을 활용한 컴포넌트 조합해서 페이지 만들기/반응형 만들기/모드 적용하기👍) 이번주 나의 강의 ☑모드를 활용한 반응형 디자인/ 다중언어 화면 만들기 / 다크모드✅ 로컬 베리어블에 멀티 브랜드 모드를 등록하기 ✅ 각 브랜드마다 브랜드 고유 색을 나타내기✅ 각 브랜드마다 브랜드 다크모드 만들기-> 브랜드의 구조에 대한 설명과 앞으로 만들어 나갈 브랜드들에 대한 설명을 듣고 실습을 하게 돼서 이해가 빠르게 된 것 같다. 그리고 멀티 브랜드용 다크모드를 간단한 조작으로 만들 수 있어서 너무 감동이었다. 모드를 활용한 반응형 적용이나 다중어 화면 만들기도 실제로 배울 수 있어서 좋았던 것 같다. 베리어블의 활용이 얼마나 중요한지 깨닫게 되는 한 주였다.😋😋😋힘들게 만든 컴포넌트 적극 활용✅ 컴포넌트를 활용하여 어드민 페이지 만들기✅ 다크모드 버전 만들기-> 그동안 만들어 놨었던 컴포넌트들을 활용해서 어드민 페이지를 만들었는데 확실히 컴포넌트를 미리 만들어 두고 조합하는 단계라 시간이 많이 절약되는 것 같았다. 이래서 컴포넌트를 만들어 두는구나 ㅋㅋ🤩다 만들어진 페이지에 클릭 한번으로 다크모드 전환 멋졌다❤ 베리어블 등록할 때는 헷갈리기도 했는데 이렇게 한꺼번에 자동으로 적용하려고 그랬나 보다. 다크모드와 반응형 반복 실습✅ 컴포넌트를 활용하여 이러닝 페이지 만들기✅ 다크모드 버전 만들기✅ 반응형 모드 버전 만들기-> 다크 모드와 반응형 만들기를 반복해서 실습할 수 있었다. 한 번만으로는 부족한 것이 사실이라 나는 반복해서 나오는 게 도움이 되었다. 그리고 실무에서 사용할 수 있는 꿀팁!!으로 플러그인을 알려주셔서 너무 좋았던 거 같다. 노가다의 시간이 확실히 줄었다. 😁😁😁대망의 마지막 강의 모바일 OTT✅ 모바일 OTT 서비스 페이지 만들기✅ 다크모드 버전 만들기-> 그동안 반응형을 이용한 웹페이지만 만들었는데 마지막을 앱 화면을 구성하는 강의였다. 여기도 만들어둔 컴포넌트를 적극 활용하여 만들었는데 완성도가 꽤 괜찮은 거 같았다. 😀😀😀 여러 번 실습을 거쳐서인지 적응이 되어서 만드는데 힘든 것은 없었던 거 같다. 강의를 들은 나의 회고 🙄이번 주가 마지막이라서 기쁜 마음과 마지막이라고 늘어지려고 하는 나를 강제로 일으켜 강의를 들은 거 같다. 마지막이라고 하니까 뭔가 아쉬움이 많이 남는 거 같기도 하고... 이번 강의를 들어서 나는 한 단계 나아진 거 같은 느낌이 들었고 이 강의를 선택하기 잘했던 것 같다. 추천추천 👍👍👍앞으로 좋은 강의 기대할게요 볼드님!!!!

UX/UI･피그마･베리어블･디자인시스템

2주차 [피그마 배리어블을 활용한 디자인 시스템 구축하기] 발자국 😎

일주일 동안의 나의 게으름 타파 작전!!bold님의 강의 [피그마 배리어블을 활용한 디자인 시스템 구축하기]수강 2주차(베리어블을 활용한 UI Component 만들기) 이번주 나의 강의 ☑컴포넌트를 만들기 위해 구조 이해하기 프로퍼티 종류 이해하기 컴포넌트 만들기 인풋 컴넌트☑버튼(button) 컴포넌트☑컨트롤 컴포넌트(체크박스(check), 라디오(radio), 스위치(switch)) ☑라벨(label)을 만들고 컨트롤 그룹 컴포넌트 만들기☑ 텍스트 필드(text_field) 컴포넌트 ☑ 텍스트 박스(textarea) 컴포넌트☑ 셀렉트(select) 컴포넌트☑ 접근성 포트를 생성하고 접근성이 위배된 것을 수정-> 프로퍼티와 값을 정하는 게 나에게는 매우 어렵게 느껴졌다. 영어를 못해서 그런 건지😭 모르겠지만 처음엔 많이 어려웠는데 컴포넌트를 하나씩 만들어 가면서 어느정도의 룰이 있다는걸 알게 되면서는 조금씩 나아지는것 같았다. 디스플레이 컴포넌트✅ 아바타(avatar) 컴포넌트✅ 아코디언(accordion) 컴포넌트✅ 뱃지(badge) 컴포넌트✅ 툴팁(Tooltips) 컴포넌트✅ 구분선(divider) 컴포넌트✅ 인터랙티브 칩(chips) & 상태칩(chips) 컴포넌트✅ 기본 카드(Basic Cards)✅ 테이블(table) 컴포넌트✅ 접근성 레포트를 생성하고 접근성이 위배된 것을 찾아 수정하기-> 인풋 컴넌트를 만들고 나서인지 프로퍼티를 사용하는데 익숙해진 느낌이었다. 여러 가지 케이스를 만들면서 디자인 시스템의 위대함🤣을 조금 알게 된것 같기도 하다. 강의를 들은 나의 회고 😭😭한 컴넌트를 만들 때도 여러 케이스를 많이 만들어 볼 수 있어서 약간 힘들긴 했지만 확실히 도움이 된다는 생각이 들었다. 그리고 힘들게 등록했던 베리어블을 적용하면서 만들었기 때문에 쓰임새를 잘 알 수 있었던 한주였다. 프로퍼티와 값을 이해하는데 시간이 걸리기는 했지만 그걸 자세하게 배울 수 있어서 더 좋았던 거 같다🔥🔥🔥다음 주도 기대가 많이 된다. 미션 컴플리트내가 고생해서 만든 컴포넌트들을 조합해 보는 미션이 주를 이루었다. 컴넌트가 어떻게 쓰이는지를 생각하고 만들어 볼 수 있어서 도움이 되었다. 어떤 디자인에서 어떤 컴퍼넌트를 적절하게 사용하느냐도 근무 시간을 줄이는 것 중 하나이기 때문에 중요하게 생각하고 미션을 클리어했다.

UX/UI･피그마･베리어블･디자인시스템

[인프런 워밍업 클럽 2기 디자인] 4주차 발자국 및 회고

일주일간의 학습에 대한 회고이번 주에는 배리어블을 활용하여 B2B 이커머스 이러닝 페이지, 모바일 OTT 서비스 페이지 등을 만들었습니다. 만드는 과정에서 화이트 백그라운드 기반으로 컴포넌트 만들었고, 메인 페이지와 콘텐츠 페이지에 베리어블 모드를 설정한 후, asset에서 드래그 앤 드롭으로 가져오니 모든 것이 자동으로 변경되는 점이 정말 신기하고 멋있었습니다. 이렇게 작업함으로써 디자인하는 데 있어 시간적으로 효율성을 크게 느낄 수 있었습니다. 또한, 어떤 페이지를 만들어도 일관된 디자인을 유지할 수 있다는 점이 베리어블의 큰 장점이라고 생각합니다. 조립하는 느낌이라서 매우 좋았습니다. 마지막 주에는 특강도 있어서 베리어블 프로토타이밍의 끝판왕을 경험했습니다. 항상 느끼는 건데 특강 넘 재미있습니다. 일주일 동안 잘한 점강의를 완강하고 미션을 클리어했습니다!아쉬웠던 점벌써 마지막 주라니… 더 배우고 미션을 해보고 싶은 마음뿐입니다.보완하고 싶은 점배운 내용을 자기화하고 실무에 적용하고 싶습니다.

UX/UI･피그마･베리어블･디자인시스템

[인프런 위밍업 클럽 2기 디자인] 3주차 발자국 및 회고

일주일간의 학습에 대한 회고 2주차의 연장선으로 네비게이션 컴포넌트와 베리어블 다크모드 개념에 대해 익힐 수 있었습니다. 로컬 베리어블에 값을 입력하면 상황에 따라 변경이 되는 점이 정말 흥미로웠고, 이에 따라 피그마 베리어블의 작업 효율성을 칭찬하는 이유를 이해할 수 있게 되었습니다. 이후 반응형, B2B 이커머스 어드민 페이지를 만드는 과정에서 컴포넌트를 조합하는 시간에, 기존에 만들었던 컴포넌트의 문제점을 발견하게 되었고, 당황스럽고 수정은 어떻게 하는지 혼란스러운 시간을 경험했습니다.ㅠㅠ 생각보다 컴포넌트를 만들 때 정교한 기획이 필요하다는 점과 문서화 정리가 얼마나 중요한지 배웠습니다. Assets에서 컴포넌트를 검색할 때, 같은 항목이 왜케 많이 나오는 이유도 저의 실수에서 비롯된 것임을 깨달았습니다. 일주일 동안 잘한 점 시간이 늦어도 매일 강의를 수강한 점 아쉬웠던 점 본업으로 인해 미션을 제출 날짜를 맞추지 못한 점 컴포넌트 문서화를 더 잘하고 싶습니다. 보완하고 싶은 점 강의 중 그룹화하고 오토 레이아웃을 반복적으로 다루는데, 아직 개념으로 잘 이해하지 못하고 있습니다. 이해하지 못한 부분을 복습으로 채워나가고 싶습니다. 컴포넌트 문서화와 함께 variant property 보기 쉽게 순서를 정리 할 것입니다. 다음 주에는 마지막 주에는 그동안 해왔던 것보다 더 열정적으로 작업해 보겠습니다. 아직 제출하지 못한 미션뿐만 아니라 앞으로 있을 미션까지 최선을 다할 것입니다.

UX/UI･디자인시스템･피그마･베리어블

[인프런 위밍업 스터디 2기 디자인] 1주차 발자국 및 회고

1. 강의 수강일주일 동안 학습했던 내용Figma의 베리어블, 색상, 간격, 타이포그래피, 아이콘, 그림자 효과, 반응형 기준점 그리고 입력 컴포넌트를 만드는 과정에 대해 집중적으로 학습했습니다. 스스로 칭찬하고 싶은 점 피그마 베리어블 개념을 습득하는데 많은 시간을 투자하고 매일 디자인 공부한 점 아쉬웠던 점 강의를 듣고 미션까지 수행하는데 생각했던 시간보다 3배 이상 소요되었는데요. 아직 피그마가 익숙하지 않아서 한 단계 진행할 때마다 강의를 보고 또 보고 모르는 부분은 검색하면서 작업했습니다.보완하고 싶은 점하루 진도 맞춰 가면서 미션에만 집중했는데요. 이번엔 디테일한 부분들도 생각하면서 작업해 보고 싶습니다. 그리고 시간도 더 넉넉하게 잡고 매일 디자인 공부하기 다음 주 학습 목표 미션 꼭 제출하기 피그마 부족한 기초 부분을 따로 더 공부하기 회고 이번주 강의를 통해 디자인 시스템의 필요성도 배우고 피그마 베리어블에 대한 좋은 점을 듣는 순간 꼭 완강하고 싶은 생각이 들었는데요. 베리어블 구조, 이름을 만드는 과정에서 같이 협업하는 사람들과 기획적으로 커뮤니케이션을 해야 하는 부분도 새롭게 크다는 걸 느꼈습니다. 그리고 피그마에서 플러그인을 많이 사용해보면서 실용적이고 넘 재미있었습니다. 2. 미션 #1 로컬베리어블 primitive, theme, semantic 색상 베리어블 등록 타이포그래피 스타일 플러그인을 사용해 등록 #2 feather 아이콘 컴포넌트화 그림자 효과 스타일 그리드 등록하기 기타 베리어블(투명도, 간격, 그림자) 등록 미션을 어떤 관점에서 접근했는지? 최대한 미션 목표에 맞춰서 작업을 했습니다. 강의를 튜토리얼 느낌으로 접근하면서 피그마랑 친해진 느낌을 받았습니다. 문제를 해결하는 과정은 무엇이었는지? 타이포그래피에서 생각지도 못하게 폰트가 없어서 폰트를 등록하는 방법을 검색하면서 문제를 해결했습니다. 아이콘 등록 부분도 깨져서 당황했지만, 앤트맨 방법을 계속 도전해 보니 성공해서 좋았습니다. 순간 아이콘을 하나씩 다 만들어버릴까? 라는 생각도 했습니다. 미션 해결에 대한 간단한 회고 피그마를 처음 접하면서 스터디를 시작 전에 기초 부분을 독학으로 공부한다고 했는데요.이번에 피그마가 업데이트가 되면서 인터페이스부 분을 너무 달라서 당황했지만, 쉬운 부분은 검색하면서 해결할 수 있어서 좋았습니다.

UX/UI･피그마･베리어블･디자이시스템･인프런워밍업클럽스터디2기

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

1주차 회고배리어블, 디자인 시스템을 들어만 보고 배워야지 하고 있었는데 마침 인프런 워밍업 클럽 광고를 봤고, 혼자 하면 안 할게 뻔해서 바로 신청했다.강의 시간이 짧아서 금방 할 수 있을 줄 알았는데 이해가 안돼서 자꾸 다시 보니까 생각 외로 오래 걸렸다.나중에 실무에서 이걸 내가 혼자 할 수 있을까?😂배운 점디자인 토큰배리어블 등록 - 컬러, 타이포그래피, 간격, 아이콘, 그림자, 그리드 시스템primitive, theme, semantic문서화로 내보내기입력 컴포너트 만들기 - 버튼, 체크박스, 라디오, 스위치다양한 플러그인 아쉬웠던 점아직 단어도 익숙하지 않고 뭐가 뭔지 헷갈려서 정확하게 이해하지 못했다 계획과는 다르게 쌓여가는 강의와 미션들... 다음 주에는밀리지 않게 시간 분배 잘하기실습하고 복습하기이해되지 않은 부분 다시 강의 듣기

UX/UI･디자인시스템･피그마･베리어블･워밍업클럽

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

피그마 공부를 시작하고 UX/UI 디자인 쪽으로 새 진로를 잡으면서 디자인 시스템에 관해 알게되었다.하지만 배리어블을 어떻게 활용해야 하는지 이해하기 힘들었고, 막연히 이미 나온 서비스에만 적용 할 수 있다고 생각해서취준생인 내가 취직할 때 까지 접할 일이 없다고 생각했으나 최근 사이드프로젝트를 하면서 생각이 달라졌다.시스템이 없으니 프론트엔드 개발자분과 소통이 힘들었기 때문이다. 그래서 배리어블 공부를 하겠다고 마음만 먹었 던 와중에 인프런에서 워밍업 클럽을 한다는 광고를 접해 신청하게 되었다.(취준생(백수!)이라 일정한 수입이 없어서 유료강의는 꿈도 못꾸고 있었는데 국민취업지원제도에서 지원금을 주어서 그걸 쓸수 있게 되었다. 취준생 분들은 한번 신청해보세요. 고용24(정부기관)에서 신청가능.) 강의는 <피그마 배리어블을 활용한 디자인 시스템 구축하기>강사님은 인스타에서 팔로우하고 있었던 bold님 이었고 이분을 통해 토큰이라는 개념을 처음알게 되었었는데 그런점에서 혼자 반갑기도 했다. 하지만...1주차 부터 난항을 거쳤다. 개인 스케쥴이 바빴고 이래저래 계속 일이 생겼다.게다가 강사님이 공유해주신 노션의 스케쥴이 가이드라고 생각했는데 그 스케쥴에 맞춰서 미션 제출을 해야한다는 걸날짜가 다 지나고 디스코드에 들어갔다가 알게되었다. 그때 미션 1이 전부 끝난 상태이긴 했는데 이후 스케쥴을 보아하니 미션 2도 늦어질 것 같아서 그냥 주말에 한꺼번에 제출하기로 결정. 그것도 모자라서 강의 통해서 강사님이 공유해준 미션 카드가 있는 피그마 파일이 아니라 새 파일로 시작했다.이미 배리어블을 꽤 등록해 둔 상태라 (알아챘을 때는 이미 80% 정도 완성한 상태였다ㅠㅠ) 썸네일 등을 복사 붙여넣기하고머리가 나쁘면 몸이 고생한다더니 딱 그꼴이었다. 강의는 핵심 전달과 적절한 예시로 이해하기 쉬웠다. 이전에 알던 개념에서 확장해 여러 예시를 보여주는 점이 제일 좋았다.막연하게 배리어블이 무엇인가 생각할때와는 달리 실무에서 어떻게 적용할수 있는지, 그리고 왜 이걸 요구하는지 알수 있었다.그리고 강의 PPT디자인도 깔끔해서 보기 좋았다. 폰트와 레이아웃이 지나치게 자유분방하면 괴로운게 디자이너들 아니겠습니까. 하지만 내 생각보다 시간이 오래걸렸다. 강의 보면서 따라하느라 시간이 지체되었고 잘 이해 안가면 돌려보고 잠깐 멍때리느라 집중력을 잃어 놓치는 부분 다시보고 하니 10분 짜리를 20분 동안 보게 되었다. 그리고 배리어블을 등록하는 게 끝이 아니라 등록한 배리어블을 협업자와 공유하기 위해 문서형태로 펼쳐놓아야 하니 이부분이 제일 오래걸렸다. 사이드 프로젝트하면서 부족한 점을 제일 많이 느꼈던 부분이라 어떻게 만들어야 하는지 생각을 많이 하게 되었다. 도움이 정말 정말 많이 되었던 부분은 역시나 최근에 업데이트 해주신 아이콘 강의!!이전 경력때 일러스트레이터를 많이 사용했고, 이후 UXUI 포트폴리오를 만들면서 아이콘 제작을 하는데 피그마에서는 아이콘을 깨면 이상하게 깨지는 경우가 많았다(이건 언제 개선이 되려나??). 그럴때마다 일러스트레이터에서 다시 그리거나 처음부터 일러스트레이터에서 작업해서 가져오면서 스케일이나 굵기 때문에 고생한적이 있었는데 이 문제를 해결하는 방법 (앤트맨 방법!)을 알게된 점이 정말 정말 도움이 많이 되었다. 생명의 은인이십니다. 배리어블은 막상 하니 어렵지 않았다. 이해도 쉬웠다. 사용하는 법 자체보다는 팀과 협업해 수치를 지정하고 그걸 지켜가는 과정이 더 중요할거라는 생각이 들었다. 배리어블 생성은 웹페이지 주소를 구성하는 방식과 비슷했고 특정 유닛을 불러와 사용하는 방식이 특히 그렇게 느껴졌다. 아직 컴포넌트 만들기 까지는 강의를 듣지 않았지만 (내일 들을 예정 오늘 6시간 작업했으니 봐주세요) 미션을 끝마친 기념으로 블로그를 적어본다. 잘한점 - 첫 주차에 할당된 미션 완료잘못한점 - 날짜를 맞추지 못했다.반성 - 예상보다 작업이 오래걸리니 좀 더 여유를 가지고 시간을 맞춰 꾸준히 학습해야겠다.

UX/UI･디자인시스템･베리어블･피그마･워밍업클럽

3주차 [피그마 배리어블을 활용한 디자인 시스템 구축하기] 발자국 🤣

일주일 동안의 나의 게으름 타파 작전!!bold님의 강의 [피그마 베리어블을 활용한 디자인 시스템 구축하기]수강 3주차(베리어블을 활용한 UI Component 만들기/다크모드 만들기👍) 이번주 나의 강의 ☑컴포넌트 만들기의 연속(피드백)☑️ 토스트(Toast) 만들기☑ 로딩 스피너, 스켈레톤 로더 컴포넌트 + 애니메이션☑ 슬롯 컴포넌트☑ 슬롯 컴포넌트를 활용하여 모달만들기☑ 접근성 레포트를 생성하고 접근성이 위배된 것을 수정하기-> 피드백에 필요한 컴포넌트들을 만들어 볼 수 있었다. 지난주에 컴포넌트를 빡세게...만든 효과가 있는지 속도가 그래도 빨라진 것 같은 느낌, 그리고 볼드님이 내가 만든 컴포넌트에 대해서 고쳐야 할 점을 코멘트로 남겨 주셔서 감동이었다. 정말 하나하나 보고 계신 것 같다.👍👍👍 컴포넌트 만들기의 연속(네비게이션)☑ 링크(link) 컴포넌트와 브레드크럼프(Breadcrumbs) 컴포넌트☑ 네비게이션 탭(Tabs) 컴포넌트☑ 모바일 하단 네비게이션(Bottom Navigation) 컴포넌트☑ 페이지네이션(Pagination) 컴포넌트 ☑️ 사이드 네비게이(Side navigation) 컴포넌트를 만들기☑ 헤더(Header) 컴포넌트 만들기☑ 이미지 캐러셀(Image carousel)을 만들기-> 컴포넌트를 만들면서 여러 케이스를 만들어 두는 게 나중에 디자인을 할 때 시간을 절약하는 방법이라는 것을 또 한 번 깨달았다. 또한사이드 네비게이션이나 헤더 같은 부분은 컴포넌트의 조합으로 하나의 완성 컴포넌트를 만들 수 있었기 때문에 페이지 하나를 완성하는데 가까이 왔다는 생각에 성취감이 생기고 기대가 되기 시작했다. 두둥 드디어 등장 다크모드 ☑️ 다크모드의 장점과 앱 특성에 따른 모드 적용 ☑️로컬 베리어블에 다크모드 색상 입력하기☑ 모든 인스턴스를 Dark mode 페이지에 복사하고 난 다음 베리어블 모드를 다코므도로 변경한 후 적용이 잘 되었는지 체크하기-> 베리어블을 이용한 모드 변경을 경험하는 시작이었다. 라이트 모드에 맞게 다크모드 컬러를 정해서 베리어블을 등록하고 테스트를 할 수 있었다. 브랜드에 맞게 일관된 컬러를 사용해 주는 것이 중요했다. 그리고 접근성을 위해 수정과 수정을 거쳐서 완성이라고 만들었지만 아직 완벽하지는 않은 것 같다. 🕵‍♂️ 강의를 들은 나의 회고 🤔🤔베리어블 강의를 들은 이유가 다크모드 변경이나 다음 주에 듣게 될 반응형 적용 등 베리어블의 활용성에 대해서 알고 싶어서였는데 이번 주에 배운 다크모드가 다음에 나올 다양한 베리어블을 이용한 활용에 어떻게 쓰이게 될지 기대가 되는 한주였다. 다음 주도 게으름 피우지 말고 직진해야겠다.😁 미션 컴플리트이번 주 미션은 한 가지였는데 모달 만들기였다. 강의에서 배운 여러 케이스를 바탕으로 또 필요할지도 모를 모달을 몇개 추가해서 만들어 보았다. 오토레이아웃 값을 변경하는게 쉽지가 않아서 좀 헤맸고 결국 변경하기는 했는데 음... 오토레이아웃 값 설정에 대한 공부와 경험이 더 필요다는 생각이 들었다. 다음 주 미션도 기대기대🐣🐥

UX/UI･피그마･베리어블･디자인시스템