#14 색상 레벨 설계 [3/3] — Primary부터 Tertiary까지 미리 구상해야 하는 이유

디자인 일관성 시리즈 마지막 편이에요.

Padding 기준을 잡았고, Typography 시스템도 만들었어요.

이제 마지막으로 색상 레벨 설계를 이야기해볼게요.

앞에서 네이비 + 민트 컬러 팔레트를 정했다고 했어요.

그런데 컬러 팔레트를 정하는 것과 색상 레벨을 설계하는 건 달라요.

컬러 팔레트는 어떤 색을 쓸지 정하는 거예요. 색상 레벨 설계는 그 색을 어떤 상황에서 어떤 역할로 쓸지 정하는 거예요.

이 차이가 처음엔 와닿지 않았어요. 만들다 보니 비로소 이해가 됐어요.

---

색상에도 위계가 있어요

사람이 화면을 볼 때 눈이 가는 순서가 있어요.

가장 먼저 가장 강한 색에 눈이 가요. 그다음 중간 강도, 그다음 약한 색 순서로 눈이 이동해요.

이 순서를 의도적으로 설계하는 게 색상 레벨 설계예요.

앱에서 중요한 정보는 강한 색으로, 보조 정보는 약한 색으로, 배경은 가장 약한 색으로 표현하면 사용자가 자연스럽게 중요한 정보부터 읽게 돼요.

---

FlutterFlow의 색상 레벨 구조

FlutterFlow Theme Settings에는 색상을 이렇게 나눠서 설정해요.

레벨	역할
Primary	가장 중요한 강조색. 메인 버튼, 활성 탭, 중요 아이콘
Secondary	두 번째 강조색. 포인트 색상, 포커스 테두리
Tertiary	세 번째 강조색. 배경 틴트, 태그 배경
Alternate	대체 색상. 구분이 필요할 때
Primary Text	가장 중요한 텍스트 색
Secondary Text	보조 텍스트 색
Primary Background	페이지 배경색
Secondary Background	카드, 입력 필드 배경색

처음에 이 구조를 보고 왜 이렇게 많이 나눠놨나 싶었어요. 그냥 색 몇 개 정해서 쓰면 되는 거 아닌가.

그런데 막상 써보니 이 구조가 얼마나 편한지 알게 됐어요.

---

QuickLog에서 색상 레벨을 어떻게 썼냐고요?

제가 실제로 적용한 색상 레벨이에요.

Light Mode

레벨	색상	HEX	실제 쓴 곳
Primary	딥 네이비	#1A2E4A	AppBar 배경, 메인 버튼, Hero 영역
Secondary	민트	#00C9A7	활성 탭 아이콘, 포커스 테두리, 포인트 강조
Tertiary	라이트 민트	#E0F7F4	태그 배경, 코멘트 박스 배경
Primary Text	진한 검정	#14181B	업체명, 카드 제목 등 중요 텍스트
Secondary Text	중간 회색	#57636C	날짜, 장소 등 보조 텍스트
Primary Background	연한 회색	#F1F4F8	페이지 전체 배경
Secondary Background	흰색	#FFFFFF	카드 배경, 입력 필드 배경

Dark Mode

레벨	색상	HEX	실제 쓴 곳
Primary	민트	#00C9A7	활성 탭, 포인트 강조
Secondary	어두운 민트	#00A389	보조 강조
Tertiary	다크 민트	#1A3D38	태그 배경
Primary Text	흰색	#FFFFFF	모든 중요 텍스트
Secondary Text	연한 회색	#8A9BB0	보조 텍스트
Primary Background	딥 다크 네이비	#0D1B2A	페이지 전체 배경
Secondary Background	네이비	#1A2E4A	카드 배경

---

색상 레벨 설계의 핵심 원칙

설계하면서 지킨 원칙이 있어요.

첫째, Primary는 아껴 써요. Primary 색상을 너무 많이 쓰면 강조 효과가 사라져요.

가장 중요한 한두 곳에만 써야 눈에 확 들어와요.

둘째, 배경색은 두 단계로 나눠요. Primary Background는 페이지 전체 배경, Secondary Background는 카드나 입력 필드 배경이에요. 이 두 색을 살짝 다르게 하면 카드가 배경에서 자연스럽게 떠올라 보여요.

셋째, 텍스트 색도 두 단계로 나눠요. Primary Text와 Secondary Text를 구분하면 중요한 정보와 보조 정보가 색상만으로 구별돼요. 사용자가 텍스트를 다 읽지 않아도 눈이 자연스럽게 중요한 정보로 가요.

넷째, 다크 모드에서는 역할이 바뀌어요. 라이트 모드에서 배경색이었던 네이비가 다크 모드에서는 카드 배경색이 돼요. 라이트 모드에서 포인트 색이었던 민트가 다크 모드에서는 메인 강조색으로 올라와요. 단순히 색을 반전시키는 게 아니라 역할이 재배치되는 거예요.

---

색상을 이름으로 부르는 습관

FlutterFlow에서 색상을 설정할 때 HEX 값 대신 레벨 이름으로 부르는 습관을 들이면 좋아요.

버튼 배경색을 설정할 때 #1A2E4A라고 생각하는 게 아니라 Primary라고 생각하는 거예요. 포커스 테두리 색은 #00C9A7이 아니라 Secondary라고 생각해요.

이렇게 이름으로 부르면 나중에 색상을 바꾸고 싶을 때 Theme Settings에서 Primary 색상 하나만 바꾸면 그 색을 쓰는 모든 곳이 한번에 바뀌어요. HEX 값을 직접 입력한 곳은 하나씩 다 찾아서 바꿔야 해요.

저도 초반에 이걸 몰라서 직접 HEX 값을 입력한 곳이 꽤 있었어요. 나중에 색상을 조금 바꾸고 싶었을 때 정말 고생했어요.

---

색상 레벨 설계 체크리스트

앱을 만들기 전에 이것만 정해두세요.

항목	정해야 할 것
Primary	메인 버튼, AppBar 배경에 쓸 색
Secondary	포인트 강조, 활성 탭에 쓸 색
Tertiary	태그 배경, 연한 배경 틴트에 쓸 색
Primary Text	가장 중요한 텍스트 색
Secondary Text	보조 텍스트 색
Primary Background	페이지 전체 배경색
Secondary Background	카드, 입력 필드 배경색
Dark Mode 색상	각 레벨의 다크 모드 버전

이 여덟 가지만 처음에 정해두면 앱 전체를 일관된 색상으로 만들 수 있어요.

---

3편을 마치며

Padding, Typography, 색상 레벨. 이 세 가지 시스템을 처음부터 잡아두는 게 얼마나 중요한지 강조해도 지나치지 않아요.

처음엔 귀찮게 느껴질 수 있어요. 빨리 화면을 만들고 싶은데 이런 것들을 먼저 정해야 한다니 답답할 수도 있어요.

그런데 이 시간이 나중에 열 배로 돌아와요.

기준이 없으면 만들수록 고쳐야 할 게 쌓여요. 기준이 있으면 만들수록 앱이 완성돼가는 게 느껴져요.

앱을 만들기 전에 딱 30분만 투자해서 이 세 가지를 정해두세요. 그 30분이 개발 시간을 몇 배로 줄여줄 거예요.