디자인 시스템의 실전: Figma Variables 실무 가이드
단순히 색을 고르는 단계를 넘어, 개발자와 협업 가능한 디자인 토큰(Design Tokens)을 설계합니다.
실제 핀테크/증권 프로젝트에서 바로 복사해서 쓸 수 있는 핵심 컬러 팔레트와 네이밍 컨벤션을 공개합니다.
안녕하세요! 지난 포스팅에서 다크모드의 전략적 중요성을 다뤘다면, 오늘은 그 전략을 실제 Figma에서 어떻게 구현하는지 알아보겠습니다. Figma의 Variables(변수) 기능은 라이트/다크 모드 전환을 1초 만에 가능하게 할 뿐만 아니라, 개발자와의 소통 비용을 획기적으로 줄여줍니다.
1. 핵심은 네이밍: 역할(Role) 중심의 토큰 설계
많은 디자이너가 실수하는 부분이 `Color/Grey-100`처럼 색상 이름으로 변수를 만드는 것입니다. 하지만 다크모드 대응을 위해서는 반드시 '역할(Semantic)' 중심의 이름을 써야 합니다.
- ❌ Bad:
Color/White(다크모드에서는 검은색이 되어야 하므로 이름이 모순됨) - ✅ Good:
Bg/Base,Text/Primary,Border/Default
2. [실무 데이터] 라이트/다크 모드 매핑 테이블
아래는 제가 실제 금융 프로젝트에서 사용하는 핵심 토큰 리스트입니다. Figma Variables의 'Mode' 기능을 활용해 아래 값들을 입력해 보세요.
| Token Name (Role) | Light Mode (Value) | Dark Mode (Value) | Description |
|---|---|---|---|
| sys-bg-base | #FFFFFF | #121212 | 가장 바닥에 깔리는 배경색 |
| sys-bg-surface | #FFFFFF | #1E1E1E | 카드, 섹션 등 위로 뜨는 면 |
| sys-text-primary | #191F28 | #FFFFFF (90%) | 타이틀, 주요 정보 텍스트 |
| sys-text-secondary | #4E5968 | #B0B8C1 | 설명 문구, 본문 텍스트 |
| sys-border-default | #E5E8EB | #333D4B | 디바이더, 컴포넌트 보더 |
3. 금융의 핵심: 차트(Chart) 컬러의 이원화
금융 앱에서 상승(Red)과 하락(Blue)은 시각적 신호입니다. 두 모드에서 동일한 색을 쓰면 안 되는 이유와 최적의 Hex 값을 공유합니다.
📈 상승 (Bullish)
라이트 모드: #E72E3D (명확한 대비)
다크 모드: #FF6B6B (부드러운 고채도)
다크모드에서는 배경과의 진동 효과를 줄이기 위해 채도를 살짝 낮춘 파스텔 톤 레드를 사용합니다.
📉 하락 (Bearish)
라이트 모드: #2D65F0 (신뢰감 있는 블루)
다크 모드: #5289FF (가독성 높은 연블루)
어두운 배경에서 파란색은 묻히기 쉽습니다. 명도를 높여 시인성을 확보하는 것이 포인트입니다.
4. Elevation: 다크모드에서 깊이감을 만드는 법
라이트 모드에서는 '그림자'로 계층을 나누지만, 다크 모드에서는 '면의 밝기'로 나눕니다. 사용자와 가까운 요소일수록 더 밝은 회색을 사용해야 합니다.
Dark Mode Elevation Logic
- Level 0 (Background): #121212
- Level 1 (Card/Surface): #1E1E1E (배경보다 5~7% 밝게)
- Level 2 (Modal/Dialog): #2C2C2C (카드보다 더 밝게)
※ 이렇게 설정하면 그림자 없이도 레이어 간의 상하 관계가 명확해집니다.
마치며: 시스템이 디자인을 자유롭게 합니다
처음에는 Variables를 세팅하는 과정이 번거롭게 느껴질 수 있습니다. 하지만 한 번 정립된 시스템은 수백 개의 화면을 1초 만에 다크모드로 변환시키고, 개발자와의 소통에서 "이거 무슨 색인가요?"라는 질문을 사라지게 합니다.
오늘 공유해 드린 수치와 토큰 구조를 여러분의 프로젝트에 맞춰 커스텀해 보세요. 디자인의 효율성이 차원이 달라질 것입니다.
다음 글(Step 4)에서는 이러한 모든 디자인 작업을 혁신적으로 바꿔줄 'Figma AI의 진화와 우리 디자이너들의 생존 전략'에 대해 심도 있게 다뤄보겠습니다.
본 포스팅의 수치는 실제 금융권 디자인 가이드를 참고하여 재구성되었습니다.
인사이트가 도움되셨다면 따뜻한 공감 부탁드립니다!
