오즈코딩스쿨 14, 15일차 리뷰
디자인의 4단계 피라미드에 대해 배우고, foundation / variables를 피그마에 직접 적용해보며,
마지막으로는 브랜드들의 디자인 시스템마다의 특징을 스스로 분석해보는 시간을 가졌다.
14일차 : 디자인 Foundation, Variables
디자인 파운데이션
Design Foundation
디자인 파운데이션은 MVP project 과정 중 UXUI 설계에 해당한다.
I. 문제정의
- 시장조사
- 사용자 리서치
- 페인 포인트 도출
II. 아이디어 도출
- 브레인스토밍
- 개발 우선순위 선정 (mvp 기능 도출)
III. UXUI 설계
- DESIGN FOUNDATION
- 프로토타입 설계
IV. 개발 / QA
V. 배포
VI. 데이터 검증, 개선
Design Foundation 이란?
디자인 시스템의 기초가 되는 시각적 원칙을 정리한 기본 설계 기반
색상, 폰트, 그리드, 간격, 라운드값, (그림자) 등 UI의 최소단위 속성을 정의한 기준
장점
1. 일관성 유지 -- 시각적 정체성, 통일된 UX와 신뢰 제공
2. 접근성 유지 -- W3C 웹 콘텐츠 접근성 지침 기반
** W3C : World Wide Web Consortium, 웹을 구성하는 모든 기술이 같은 규칙 아래에서 동작하도록 정의하는 단체
3. 효율성 유지 -- 다양한 개발 환경 고려한 표준 규칙 / 규격 제공
디자인 시스템
Design System
설계구조
일반적인 구조는 위와 같다.
피그마에서의 Primitive 과 Semantic
Figma에서 Variable 탭에 들어갔을 때, 폴더를 만들 수 있다. 일반적으로 primitive 과 semantic으로 폴더를 나눈 뒤, 그 안에 세부적인 그룹으로 값을 나누어 관리한다. (color/number 등의 값 종류가 있다.)
Primitive Token (프리미티브 토큰)
- 모든 토큰 값의 시작 (raw value)
- 지정하는 것: 컬러, 타이포, 간격, Radius
- 디자인 founndation은 primitive token
- primary / secondary / gray 의 색상 팔레트, 타이포의 서체/굵기/사이즈, 간격 등의 수치를 지정한다.
Semantic Token (시멘틱 토큰)
- 프리미티브 토큰을 참조하여 사용 역할을 정의한 토큰
- 지정하는 것: 디자인에 실제 사용할 본품
- primary / secondary / gray 의 색상 팔레트, 타이포의 서체/굵기/사이즈, 간격 등의 수치를 지정한다.
Component (컴포넌트)
- 시멘틱 토큰을 참조하여 매우 구체적인 역할을 정리
- 시멘틱 토큰을 UI 컴포넌트에 적용 시 지정하게 되는 버튼 / 카드 ...
- 실제 컴포넌트 토큰은 개발에서 정의하는 경우가 많다.
Foundation 실습
- 타이포그라피
- 컬러
- 간격
- 레디우스
Typography의 primitive 요소
타이포그라피의 기본 속성값과 스타일 세팅 진행
플러그인 Text Styles Generator를 실행해 입력해두었던 텍스트를 자동으로 스타일로 등록할 수도 있다.
| font-family | 어떤 폰트를 쓸지 | font-weight | 굵기 (light ~ regular, 숫자값) |
| font-size | 사이즈 (caption ~ heading) | line-height | 줄간 |
| font-style | normal / italic / oblique | letter spacing | 자간 |
색상의 기본 속성값과 베리어블 세팅
컬러의 기본 속성값과 스타일 세팅 진행
간격의 기본 속성값과 스타일 세팅 진행
| 단계 | 이름 | 설명 |
| Base Grid point (기본 그리드값) | 4배수 | |
| primitive | unit | 숫자로 나타내며, unit 내부의 그룹에 숫자 값으로 등록한다. |
| sementic | spacing(padding, gap) | 간격들 마다 종류를 폴더로 구분하여 세팅한다. ex) padding 폴더 / gap 폴더 (semantic variable 내부에) |
| radius | 둥글기 |
타이포그라피 실습을 진행한 이미지이다.
- Bold와 Regular 사이에 Semibold를 추가해서 스타일로 사용할 수도 있다.
컬러 실습을 진행한 이미지이다.
- 직접 Variable에 등록하려면 Primitive 폴더를 만들고, 그 안에 컬러 그룹을 만들어 넣는다.
그외 플러그인을 사용할 수도 있다.
- 플러그인 Color style Guide / Color Palette Generator
- 플러그인 Styles to Variable
Radius / Spacing도 실습을 진행했다. 아래는 실습에 참고했던 이미지이다.
- Primitive에는 Number를 등록하고,
- Semantic에 '값'을 등록한다. 이때 semantic 내부에는 두 개의 폴더를 만든다. -> Radius / Spacing
- Scope를 이용해 편집시 보이는 Value의 종류 수정 등을 해볼 수 있다.
Variable을 반영한 클론 디자인 실습
15일차(1) : 디자인 시스템
디자인 시스템
Design System
구조
Design 시스템은 일반적으로 보였던 피라미드의 4단계 구조가 모두 보이도록 설계하지만, 브랜드에 따라 달라진다.
디자인 피라미드에서 가장 스탠다드한 구조는 아래와 같다.
(- raw value)
- primitive
- sementic
- component
여기에서 브랜드가 중요하다고 생각하면 브랜드 그래픽을(Gmarket), 시각적 일관성이나 그래픽적인 통일감이 중요하다고 생각하면 그래픽(Line)을 추가하기도 한다.
수업에서는 4가지 예시의 디자인 시스템을 비교 분석하는 시간을 짧게 가져보았다.
유의미한 인사이트를 도출하기에는 많이 짧은 시간이었지만, 목차라도 훑어보고 내가 느꼈던 차이점에 대한 걸 이미지로 정리했다.
|| 디자인 시스템의 간략한 케이스 스터디 : Gmarket / Line / Toss
Case1. Gmarket -- 브랜드 정체성과 커머스 서비스로서의 사용성
큰 구조는 브랜드 / 파운데이션 / 컴포넌트로 나뉘어져 있었다. '브랜드' 탭이 있다는 것부터 벌써 차이가 느껴지긴 하지만,
Gmarket 특유의 브랜드 정체성을 살리기 위해 노력한 점이 보인다.
또한 구체적인 케이스 분류를 통해 편리한 사용 경험을 제공하고자 각별히 유의한 것으로 느껴졌다.
이는 커머스 앱 자체가 익숙한 서비스이기 때문에 가능할 수도 있겠다는 생각이 들었다.
Case2. Line Design System (Messanger) -- 그래픽과 UX라이팅의 "일관성" 강조
UX 가이드라인이 있는 것이 인상깊었다. 어떤 어떤 식으로 라이팅을 작성해달라는 지침이 구체적으로 정해져 있었다. 예로 Modal 가이드라인에 들어가면, normal view와 modal 창에서의 인터랙션 요소를 기능별로 정의해두었다.
똑같이 닫는 기능을 하는 인터랙션 요소라고 해도, normal view에서는 어떤 버튼으로 나타내야하는지 / modal view에서는 어떤 버튼으로 나타내야 하는지를 모두 일일히 정의해두었다.
또한 한 가지 더 인상깊었던 점은 Foundation 단계에서 Graphic을 정의하고 들어간다는 것이었는데, 이는 디자인 일관성을 기반에서부터 중요히 하고 있다는 인상을 주었다.
Case3. Toss Design System -- 개발팀과의 협업성
토스는 첫창에서부터 디자인 시스템이 '왜' 존재하는지를 명확히 설명하고 있었다. 제품 제작의 효율성, 개발과의 연결성을 강조한다고 느꼈다. 디자인 시스템 자체의 항목을 많이 만들어 두기보다 만들어둔 시스템은 업무에 매우 실용적으로 이용될 것 같다고 느꼈다.
Toss의 강수영 디자이너 님께서 진행하신 강연을 본 적이 있는데, 토스가 세월에 걸쳐 UX나 그래픽, 개발에 관한 많은 기술들을 내재화 한 과정을 말씀해주셨다. 그래서 TDS를 서비스 사후에 구축했다고 말씀하셨던 것이 이해되는 구조였다. 업무상 필요하기 때문에 만들었고, 그렇기에 업무에 가장 효율적인 방안으로 채택하지 않았을까 막연한 추측을 해본다.
'공부' 카테고리의 다른 글
| Figma 챕터를 마무리하며 (~Day21 까지) (0) | 2026.06.29 |
|---|---|
| 컴포넌트와 프로퍼티, 인스턴스 스왑 (0) | 2026.06.23 |
| Figma로 반응형 디자인 만들기 - Constraints, Auto Layout (0) | 2026.06.16 |
| 더블다이아몬드에 기반한 UX 이론과, Figma 사용 기초 (0) | 2026.06.15 |
| UI 화면 요소 종류와 이름 (0) | 2026.06.11 |