컬러 및 스타일 시스템 설계
3일차에서 글자를 스타일로 저장했다면, 오늘은 색도 체계적으로 관리하는 법을 배웠어요.
스타일과 변수가 뭐가 다른지부터 헷갈렸는데, 다크모드까지 보고 나니 이해가 되더라고요.
오늘 배운 네 가지
컬러 스타일
자주 쓰는 색을 저장해두기
3일차 글자 스타일과 같은 원리예요.
자주 쓰는 색을 스타일로 저장해두면, 매번 색상 코드를 다시 입력할 필요가 없어요.
색상 코드를 외워서 매번 타이핑하지 않고, 저장된 스타일 목록에서 골라 쓰면 실수도 줄고 속도도 빨라져요.
컬러 변수
하나의 이름에 여러 값을 담기
스타일이 색 하나를 고정해서 저장하는 거라면, 변수는 같은 이름 안에 여러 모드별 값을 담을 수 있어요.
이 "모드"라는 개념이 다크모드로 바로 이어져요.
스타일은 색 하나만 가리키지만, 변수는 상황(모드)에 따라 다른 색을 자동으로 내보낼 수 있어요.
그래서 변수가 스타일보다 한 단계 더 유연해요.
시맨틱 네이밍
색 이름이 아니라 역할로 이름 붙이기
색을 "코랄", "파랑"처럼 부르지 않고, Primary·Error·Background처럼 역할로 이름 붙여요.
변수 이름이 역할을 담고 있어야 모드가 바뀌어도 의미가 흔들리지 않아요.
"코랄500"이라고 이름 붙이면 다크모드에서 그 색이 다른 값으로 바뀌었을 때
이름과 실제 색이 안 맞아 헷갈려요. "Primary"처럼 역할로 부르면 모드가 바뀌어도 의미는 그대로예요.
다크모드 대응
모드 전환으로 전체 화면 바꾸기
컬러 변수의 모드 기능을 활용하면, 화면을 따로 두 벌 만들지 않고도 라이트·다크를 전환할 수 있어요.
화면마다 다크 버전을 따로 그릴 필요 없이, 변수에 연결된 모드만 전환하면
배경·텍스트 색이 전체 화면에서 한 번에 바뀌어요.
🧭 오늘의 정리
스타일과 변수가 비슷해 보였는데, "모드를 가질 수 있는지"가 가장 큰 차이였어요.
그 모드 기능 덕분에 다크모드까지 자연스럽게 이어지더라고요.
'Figma' 카테고리의 다른 글
| 사용자 행동 기반 디지털 접점 설계 (0) | 2026.10.12 |
|---|---|
| 디자인 시스템 기초 및 확장 (0) | 2026.10.08 |
| 한 번 만들고 계속 쓰는 UI 컴포넌트 (0) | 2026.10.02 |
| 피그마에서 타이포 다루기 (0) | 2026.10.01 |
| 레이아웃 규칙, 오토 레이아웃과 허그 · 필 · 픽스 (0) | 2026.10.01 |
