멜 로빈스 🍀
I’m allowed to be a work in progress.
나는 아직 완성형이 아니고, 여전히 만들어지는 중인 사람이다.
하나의 문제에 과하게 매달려 자신을 몰아세우는 대신,
"아, 지금 나는 성장 중이구나" 하고 인정해주는 태도.
디자이너로서도, 사람으로서도 이 마인드셋을 가지고 살아가야 한다.
자신감, 자존감 채워넣기...~~!!! 부정적 생각 그만하기 !!
🎨 아토믹 디자인
: UI를 분해하고 다시 조립하는 방식
아토믹 디자인은 마치 레고처럼, 작은 UI 조각들을 체계적으로 쌓아 올려 최종 화면을 완성하는 개념 구조다.
한 번 구조를 잡아두면 디자인 시스템의 재사용성과 일관성이 극적으로 올라간다.
0️⃣ Design Token — UI 언어의 "단위"
: 디자인에서 변수처럼 쓰는 값들
- 색상 변수 : Primary/Primary-100, Text/Disabled
- 폰트 변수 : Heading/H1, Body/Default
- 간격 스케일 : 8px Grid 시스템
💡 핵심 포인트
값을 직접 쓰지 않고, 항상 토큰 이름으로 호출한다.
→ 나중에 스타일 변경이 있을 때 토큰만 수정하면 전체 UI가 한 번에 업데이트됨
1️⃣ Atoms — 쪼갤 수 없는 최소 단위
: 버튼 / 라벨 / 아이콘처럼 더 이상 나누면 의미가 사라지는 요소
➡️ 피그마에선 Component로 저장 + Naming 시스템 적용하여 사용할 수 있다.
Atoms는 "기본 부품" 역할을 한다.
👉 웹 개발에서 HTML 태그 하나 같은 느낌?
2️⃣ Molecules — 원자들이 모여 기능을 가진 단위
: 여러개의 원자(UI요소)가 모여 구성한 독립적인 UI 구성요소
ex)
- 검색 바 = 입력 필드 + 버튼
- 로그인 폼 = 라벨 + 입력 필드 + 버튼
➡️ 피그마에서는 Nested Component 구조로 만들기
컴포넌트 안에 컴포넌트를 넣어 “조합형 컴포넌트”로 만들어 관리할 수 있다.
3️⃣ Organisms — 화면에서 독립적인 ‘섹션’ 단위
: 비교적 복잡한 UI 구성 요소로, 여러 분자, 원자, 또 다른 유기체들이 모여 만들 수 있음.
ex)
- Header 영역 = 로고 + 메뉴 + 프로필 버튼 + 검색폼
- 카드 리스트 = 이미지 + 텍스트 + CTA 버튼
디자인 시스템에서는 이 단계부터 브랜드 아이덴티티가 눈에 띄기 시작한다.
4️⃣ Templates — 레이아웃 구조
: 페이지의 뼈대 구조. 페이지 수준에서 UI 요소들을 어떻게 배치할 지 정의한 툴
즉, 아직 내용은 없지만, 자리 배치는 확정된 상태이다.
대시보드 레이아웃
- Header / Sidebar / Content / Footer
➡️ 피그마에서는 Frame 단위로 템플릿을 만들고, 내부에 Organism을 배치할 수 있다.
5️⃣ Pages — 콘텐츠까지 채운 완성형
: 실제 콘텐츠가 들어간 최종 화면
ex)
- 온보딩 페이지
- 상품 상세 페이지
➡️ 피그마에서는 템플릿에 텍스트·이미지 등 실제 데이터 넣기로 구현할 수 있다.
Design Token 네이밍 규칙도 시스템적으로
Category - Property - Surface - Variant - State
ex)
Color / Button / Primary / Default / Enabled
Spacing / Layout / Global / Medium
Font / Heading / H1 / Bold
한눈에 역할이 보이는 이름으로 설정하고, 코드/디자인 언어를 동일한 톤으로 맞추는 것이 중요하다.
실습이자 과제
오늘의 과제는 배웠던 아토믹 디자인 개념을 복습하고, 실습에서 진행했던 에어비엔비 디자인 시스템을 완성해보는 것이었다.
배운 아토믹 디자인 개념과, 예시를 참고하여 만들어보기!
텍스트는 텍스트 스타일을 적용해준 뒤,
해당 플러그인을 통해 디자인 토큰을 뽑아냈다.
컬러는 피커를 통해 헥스코드를 뽑아 스타일을 지정하고,
색상과 헥스코드를 적는 방식으로 디자인 토큰을 만들어보았다
만든 디자인 토큰을 활용하여 컴포넌트들을 제작하고,
간단하게 클론 디자인 해보았다.
확실히 만들면서 디자인 시스템이 구축되어 있다면
디자인을 할 때도, 수정을 할 때도 용이할 것이라고 생각이 들었다!
또 정해진 컬러들을 사용하기 때문에 실제 개발에도 좋고,
브랜드 이미지 구축에도 좋을 것 같다 👍
회고
“디자인 시스템”이 단순 스타일 정리가 아니라 "의도를 설계하는 구조"이다.
템플릿과 페이지까지 디자인 시스템에 포함된다.
또 내가 만든 UI 하나가 Atoms로 쪼개진다는 관점이 생기니까,
앞으로는 막 그리지 않고 재사용/시스템을 계속 생각하게 될 것 같다.
‘디자이너도 코드처럼 사고해야 한다’ 는 말을 또 이해한 하루😝
#작은 토큰부터 시작된다
