배운 것

Day 2 피그마 베리어블과 디자인 토큰/디자인 시스템 개념 이해하기

디자인 토큰 정의

• 모든 UI 요소의 기본 구성요소

• 진실의 근원(Source of truth)

• 작고 반복 가능한 디자인 결정

디자인 토큰의 특징

• 참조 기능: 서로 다른 단계의 색상이 서로 참조할 수 있고 이는 시스템을 더 확장 가능

디자인 시스템이란?

• 재사용 할 수 있는 컴포넌트, 패턴, 그리고 가이드의 집합체

베리어블, 스타일 활용 예시

• 다양한 모드에서 달라지는 재사용 가능한 색상을 사용하고 싶다면 베리어블

• 그라디언트, 혼합 모드, 다수의 디자인 요소를 결합하여 사용해야 할 경우에는 스타일

디자인 토큰(피그마 베리어블)의 계층 구조

• 원시값: 본래의 값

• 글로벌: 사용 맥락에 상관없는 기본 디자인 언어

• 별칭: 특정 사용 맥락을 전달할 때 쓰이는 값

• 컴포넌트: 컴포넌트와 관련한 모든 디자인 속성을 가진 값

   

Day 3 색상 스타일 등록 및 베리어블 등록하기

로컬 베리어블 내 색상 컬랙션(Collection) 살펴보기

• 기본(Primitive): 디자인 언어의 기본값을 나타내는 컬랙션으로, 색의 원시값(Raw value)을 포함

• 테마(Theme): 멀티 브랜드를 적용할 시맨틱 색상을 담은 컬랙션

• 시맨틱(Semantic): 라이트/다크 모드를 적용할 시맨틱 색상을 담은 컬랙션

Day 4 간격 베리어블, 타이포그래피, 아이콘 등록하기

간격 베리어블 기본 단위(Base Unit) 정하기

• 4, 8배수 사용의 이유 중 하나는 홀수의 경우 1.5배수에서 깨지는 현상이 발생하기 때문

아이콘 만드는 전체 순서

1. 선으로 아이콘 만들기

2. 선을 면으로 바꾸기

3. 면을 Flatten으로 펴기

Day 5 그림자 효과, 반응형 기준점, 기타 베리어블 등록하기

피그마에서 사용하는 그리드 용어 정리

• 칼럼(Column): 수직으로 정렬된 열의 집합

• 거터(Gutter): 칼럼 사이의 간격

• 마진(Margin): 요소의 외부 여백

그리드 종류 살펴보기

• 고정 그리드(Fixed Grid): 요소들의 크기, 위치가 고정

• 가변 그리드(Fluid Grid): 화면 크기에 따라 요소들의 크기, 위치가 유동적으로 조정

• 하이브리드 그리드(Hybrid Grid): 고정 그리드와 가변 그리드의 특징을 결합

회고

칭찬할 점: 매일 미션 제출을 하는데 성공했다!

아쉬웠던 점 + 보완하고 싶은 점: 한번 강의를 수강해서는 모든 내용을 파악하기 어려울 것이라는 생각이 들었다. 어려운 부분을 중심으로 반복적으로 강의 들어보고 이해하고 내 것으로 만드는 과정이 필요할 것 같다.

미션

Day 6 스타일 파운데이션 최종적으로 다듬어서 일관되게 문서화해보기

볼드 쌤의 파운데이션 파일을 참고해서 미션 보드를 만들어 보았다. 생각보다 플러그인으로 자동화해서 문서화 가능한 부분이 많아서 나름대로 수월하게 진행할 수 있었던 것 같다. 코멘트로 남겨 주신 "시맨틱, Theme 색상 베리어블이 어떻게 alising이 되었는지" 내용에 대한 부분도 고민해서 추가해 보자!