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

배운 것베리어블 모드다크, 라이트 모드 색상 테마언어가 바뀌는 웹사이트 번역멀티 브랜드반응형 디자인다크모드의 장점다크모드는 빛을 덜 발산다크모드는 배터리가 덜 듦저시력자의 경우 다크모드를 선호 반면 라이트모드에서는 퍼포먼스가 좋음이커머스, 푸드 앱의 경우 영구적으로 라이트 모드를 사용.미디어 콘텐츠 앱의 경우 영구적으로 다크모드를 사용. 모드를 활용한 다중언어 지원 화면 만들기L필요성비즈니스 측면: 시장 개척 및 점유율 확대사용자 측면 : 컨텐츠, 서비스를 접근하기 쉬움글로벌 진출 성공사례넷플릭스: 글로벌 콘텐츠 및 UI가 여러 언어로 로컬화.스포티파이: 음성 제어 지원, 지역 특화된 플레이스트 제공회고칭찬할 점: 특별 강의까지 수강할 수 있었다!아쉬웠던 점 + 보완하고 싶은 점: 매일 미션하는데 실패했다. 아침에 강의 듣고, 미션 수행하는 루틴을 만들어 보완해보면 좋을 것 같다!미션미션, 강의 끝까지 완강해보자!

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

배운 것복습!컴포넌트를 만드는 순서Step 1. 기본 싱글 컴포넌트 만들고 아래 프로퍼티 등록하기Step 2. 복제한 후 테스트해 보기Step 3. 베리언츠 프로퍼티 만들기Step 4. 마지막 테스트하기step 5. 내부 인스턴스를 디자인 패널에서 관리하기피드백 컴포넌트AlertToastSkeleton LoaderLoading SpinnerProgress BarModal & Slot 네비게이션 컴포넌트LinkBreadcrumbsTabsBottom NavigationPaginationSide NavigationHeaderCarousel회고칭찬할 점: 특별 강의까지 수강할 수 있었다!아쉬웠던 점 + 보완하고 싶은 점: 매일 미션하는데 실패했다. 아침에 강의 듣고, 미션 수행하는 루틴을 만들어 보완해보면 좋을 것 같다!미션Day12 / 14 피드백 컴포넌트와 네비게이션 컴포넌트 만들고 마지막 점검하기좀 더 다듬어야 할 부분이 있다! 이 부분들 찾아서 보완하도록 하자.

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

배운 것Day 8 피그마 컴포넌트 기초 배우고 입력 컴포넌트 만들어보기컴포넌트 생성 시 흔히 사용하는 용어1. 컴포넌트 세트(Component set)2. 베리언트(Variants)3. 프로퍼티(Property)4. 값(Value) 프로퍼티 종류불린(Boolean): 레이어를 껐다가 켜기텍스트(Text): 텍스트를 마음대로 수정이 가능인스턴스 스왑(Instance swap): 인스턴스를 다른 인스턴스로 바꾸기베리언츠(Variants): 위 세가지 유형이 아닌 카테고리로 구분하고 싶은 경우컴포넌트를 만드는 순서Step 1. 기본 싱글 컴포넌트 만들고 아래 프로퍼티 등록하기Step 2. 복제한 후 테스트해 보기Step 3. 베리언츠 프로퍼티 만들기Step 4. 마지막 테스트하기step 5. 내부 인스턴스를 디자인 패널에서 관리하기 회고칭찬할 점: 주말까지 이번주 강의를 모두 수강했다!아쉬웠던 점 + 보완하고 싶은 점: 매일 미션하는데 실패했다. 아침에 강의 듣고, 미션 수행하는 루틴을 만들어 보완해보면 좋을 것 같다!미션Day 9 / 11 입력 컴포넌트와 디스플레이 컴포넌트 만들고 마지막 점검하기리사이징하는 부분에서 좀 더 다듬어야 할 부분이 있다! 이 부분들 찾아서 보완하도록 하자.

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

배운 것Day 2 피그마 베리어블과 디자인 토큰/디자인 시스템 개념 이해하기디자인 토큰 정의모든 UI 요소의 기본 구성요소진실의 근원(Source of truth)작고 반복 가능한 디자인 결정디자인 토큰의 특징참조 기능: 서로 다른 단계의 색상이 서로 참조할 수 있고 이는 시스템을 더 확장 가능디자인 시스템이란?재사용 할 수 있는 컴포넌트, 패턴, 그리고 가이드의 집합체베리어블, 스타일 활용 예시다양한 모드에서 달라지는 재사용 가능한 색상을 사용하고 싶다면 베리어블그라디언트, 혼합 모드, 다수의 디자인 요소를 결합하여 사용해야 할 경우에는 스타일디자인 토큰(피그마 베리어블)의 계층 구조원시값: 본래의 값글로벌: 사용 맥락에 상관없는 기본 디자인 언어별칭: 특정 사용 맥락을 전달할 때 쓰이는 값컴포넌트: 컴포넌트와 관련한 모든 디자인 속성을 가진 값 Day 3 색상 스타일 등록 및 베리어블 등록하기로컬 베리어블 내 색상 컬랙션(Collection) 살펴보기기본(Primitive): 디자인 언어의 기본값을 나타내는 컬랙션으로, 색의 원시값(Raw value)을 포함테마(Theme): 멀티 브랜드를 적용할 시맨틱 색상을 담은 컬랙션시맨틱(Semantic): 라이트/다크 모드를 적용할 시맨틱 색상을 담은 컬랙션Day 4 간격 베리어블, 타이포그래피, 아이콘 등록하기간격 베리어블 기본 단위(Base Unit) 정하기4, 8배수 사용의 이유 중 하나는 홀수의 경우 1.5배수에서 깨지는 현상이 발생하기 때문아이콘 만드는 전체 순서선으로 아이콘 만들기선을 면으로 바꾸기면을 Flatten으로 펴기Day 5 그림자 효과, 반응형 기준점, 기타 베리어블 등록하기피그마에서 사용하는 그리드 용어 정리칼럼(Column): 수직으로 정렬된 열의 집합거터(Gutter): 칼럼 사이의 간격마진(Margin): 요소의 외부 여백그리드 종류 살펴보기고정 그리드(Fixed Grid): 요소들의 크기, 위치가 고정가변 그리드(Fluid Grid): 화면 크기에 따라 요소들의 크기, 위치가 유동적으로 조정하이브리드 그리드(Hybrid Grid): 고정 그리드와 가변 그리드의 특징을 결합회고칭찬할 점: 매일 미션 제출을 하는데 성공했다!아쉬웠던 점 + 보완하고 싶은 점: 한번 강의를 수강해서는 모든 내용을 파악하기 어려울 것이라는 생각이 들었다. 어려운 부분을 중심으로 반복적으로 강의 들어보고 이해하고 내 것으로 만드는 과정이 필요할 것 같다.미션Day 6 스타일 파운데이션 최종적으로 다듬어서 일관되게 문서화해보기볼드 쌤의 파운데이션 파일을 참고해서 미션 보드를 만들어 보았다. 생각보다 플러그인으로 자동화해서 문서화 가능한 부분이 많아서 나름대로 수월하게 진행할 수 있었던 것 같다. 코멘트로 남겨 주신 "시맨틱, Theme 색상 베리어블이 어떻게 alising이 되었는지" 내용에 대한 부분도 고민해서 추가해 보자!