페이지 구조를 잡고 나서 다음으로 한 일은 컬러 시스템을 만드는 거였어요.
컬러 시스템이라고 하면 거창하게 들리지만, 쉽게 말하면 이 앱에서 쓸 색깔 팔레트를 정하는 거예요.
어떤 색이 메인 컬러고, 어떤 색이 포인트 컬러고, 배경은 무슨 색으로 할지.
이게 왜 중요하냐고요?
앱을 만들다 보면 버튼 색, 아이콘 색, 배경 색을 수십 번 설정하게 돼요.
그때마다 매번 다른 색을 쓰면 앱이 산만해 보여요.
처음부터 팔레트를 정해두면 일관된 디자인을 유지할 수 있어요.
처음에는 FlutterFlow 기본 보라색이었어요
FlutterFlow를 처음 설치하면 기본 테마가 보라색 계열이에요.
솔직히 처음엔 나쁘지 않았어요. 꽤 세련된 느낌이었거든요. 그냥 이걸로 갈까 생각도 했어요.
그런데 조금 더 고민해봤어요.
QuickLog는 비즈니스 미팅 기록 앱이에요.
영업팀, 관리자, 팀장이 쓰는 앱이에요.
이런 앱에는 신뢰감과 전문성이 느껴지는 컬러가 어울려요.
보라색도 나쁘지 않지만, 좀 더 비즈니스 앱답게 다듬고 싶었어요.
컬러 조합 후보 4가지
여러 가지 조합을 고민했어요.
첫 번째는 딥 퍼플이에요. 지금 FlutterFlow 기본 보라색을 조금 더 세련되게 다듬은 버전이에요. 비즈니스 앱에 신뢰감을 주면서도 모던한 느낌이에요.
두 번째는 네이비 + 민트예요. B2B 비즈니스 앱에 가장 많이 쓰이는 조합이에요. 딥한 네이비가 전문성을 주고, 민트 포인트가 경쾌함을 더해요. Notion이나 Linear 같은 업무 툴에서 많이 볼 수 있는 느낌이에요.
세 번째는 차콜 + 코랄이에요. 다크하고 강한 인상이에요. 코랄 포인트가 활성 탭에 붙으면 눈에 확 띄어요. 일반 사용자 확장을 고려한다면 가장 앱스러운 느낌이에요.
네 번째는 화이트 + 인디고예요. iOS 기본 앱 느낌이에요. 흰 배경에 인디고 포인트만 써서 가장 범용적이고 질리지 않는 조합이에요.
네이비 + 민트를 선택한 이유
고민 끝에 네이비 + 민트로 결정했어요.
이유는 세 가지예요.
첫째, 비즈니스 앱에 가장 잘 어울려요. 네이비는 신뢰, 안정감, 전문성을 상징하는 색이에요. 영업팀이 매일 쓰는 앱이니까 이런 느낌이 중요했어요.
둘째, 민트 포인트가 활동적인 느낌을 줘요. 딱딱한 네이비만 쓰면 너무 무거워 보일 수 있는데, 민트가 들어가면 경쾌하고 생동감이 생겨요.
셋째, 다크 모드에서도 예뻐요. 네이비 배경에 민트 포인트는 다크 모드에서 특히 빛나요. 어두운 배경에서 민트가 형광처럼 선명하게 보여요.
FlutterFlow에서 컬러 설정하는 방법
FlutterFlow에서 테마 컬러를 설정하는 곳은 Theme Settings예요.
좌측 사이드바 맨 아래 페인트 팔레트 아이콘을 클릭하면 들어갈 수 있어요.
여기서 Light Mode와 Dark Mode 컬러를 각각 설정할 수 있어요.
제가 설정한 Light Mode 컬러예요.
| 역할 | 색상 | HEX |
| Primary | 딥 네이비 | #1A2E4A |
| Secondary | 민트 | #00C9A7 |
| Tertiary | 라이트 민트 | #E0F7F4 |
| Primary Text | 진한 검정 | #14181B |
| Secondary Text | 중간 회색 | #57636C |
| Primary Background | 연한 회색 | #F1F4F8 |
| Secondary Background | 흰색 | #FFFFFF |
컬러 설정할 때 팁이 있어요.
HEX 값을 직접 입력할 수 있어요.
색상 피커에서 고르는 것보다 훨씬 정확하게 원하는 색을 설정할 수 있어요.
다크 모드 컬러는 어떻게 다를까요?
다크 모드는 단순히 색을 반전시키는 게 아니에요.
Light Mode에서 네이비가 Primary 색이었다면, Dark Mode에서는 배경 자체가 딥 다크 네이비가 되고,
대신 민트가 Primary로 올라와서 강조색 역할을 해요.
제가 설정한 Dark Mode 핵심 컬러예요.
| 역할 | 색상 | HEX |
| Primary | 민트 | #00C9A7 |
| Primary Background | 딥 다크 네이비 | #0D1B2A |
| Secondary Background | 네이비 | #1A2E4A |
| Primary Text | 흰색 | #FFFFFF |
어두운 배경에서 민트가 얼마나 예쁘게 보이는지, 직접 보면 감탄할 거예요.
컬러 하나가 앱의 분위기를 결정해요
컬러 시스템을 설정하고 나서 앱 느낌이 확 달라졌어요.
같은 버튼, 같은 레이아웃인데 색깔 하나가 바뀌니까 전혀 다른 앱처럼 보였어요.
컬러가 얼마나 중요한지 몸으로 느꼈어요.
앱을 만들 때 컬러 시스템을 처음부터 제대로 잡아두면 나중에 일관된 디자인을 유지하는 데 훨씬 편해요.
나중에 바꾸려면 일일이 다 수정해야 하거든요.
'06. 자동화 및 개발' 카테고리의 다른 글
| #09 LogPage 만들기 1 — 미팅 기록 입력 화면 레이아웃 잡기 (0) | 2026.04.10 |
|---|---|
| #08 Light Mode와 Dark Mode 동시에 설정하는 방법 (0) | 2026.04.10 |
| #06 FlutterFlow 시작하기 — 첫 페이지 6개 만들고 Nav Bar 연결하기 (0) | 2026.04.10 |
| #05 앱 이름과 페이지 이름 짓기 — Partners 대신 People을 선택한 이유 (0) | 2026.04.10 |
| #04 앱 페이지 구조 설계하기 — 5개 탭으로 줄인 결정적 이유 (0) | 2026.04.10 |