디자인 시스템

디자인 시스템

- 재사용 가능한 UI 구성 요소의 모음
- 파운데이션: 색상, 아이콘의 모양 등
- 컴포넌트: 파운데이션의 조합

 

사용 이유
- 일관성 보장(브랜딩으로 이어짐)
- 디자인과 개발이 용이해짐

 

아토믹 디자인 시스템

- UI를 더 작은 단위로 분해하여 재사용성과 일관성을 높이고, 효율적인 협업을 가능하게 하는 것
- 계층적 구조 차용: 원자 - 분자 - 조직체 - 템플릿 - 페이지


UI 컴포넌트
- 버튼, 폼, 카드 등의 재사용이 가능한 디자인 요소

 

스타일 가이드
- 타이포 그래피, 컬러 팔레트, 아이콘, 여백 등의 시각적 요소 규칙 정의

 

디자인 패턴
- 로그인 양식, 검색창 등의 기능에 대한 패턴 정의

디자인 원칙
- 사용자 경험 제공을 위한 철학이나 기본 규칙


피그마 토큰을 이용하는 이유?

- 다크 모드와 라이트 모드 구현 용이
- 개발 프로세스의 효율성 향상: 등록된 스타일과 값을 사용해 디자인이 깔끔하게 개발환경으로 전달

- 컬러, 타이포 등 체계적 관리: 디자인 요소를 시스템화하여 일관성 있는 관리를 가능하게 함.

Spacing

Color

global	light	dark
black	primary	secondary
white	secondary

 

 

 

Typography

Heading

폰트는 일정 배수만큼 증가(1.3배수로 증가)

 

Medium - 16px

Heading (Bold) Label (SemiBold) Paragraph (Regular)

ToggleHeading (Bold) Label (SemiBold) Paragraph (Regular)

 

	Heading (Bold)	Label (SemiBold)	Paragraph (Regular)
	XXXL
	XXL	XXL
	XL	XL	XL
	Large	Large	Large
	Medium	Medium	Medium
		Small	Small

 

 

 

피그마 토큰을 활용해서 타이포를 지정하면, 추후 Default 텍스트 크기값 역시 변화할 수 있다.