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

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

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

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

[인프런 워밍업 클럽 스터디 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주 차 - 다짐 및 계획파운데이션 설정과 문서화를 빨리 끝내고 다음주에는 컴포넌트들을 모두 만들겠습니다.

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

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