#08 Light Mode와 Dark Mode 동시에 설정하는 방법

컬러 시스템을 잡고 나서 바로 부딪힌 현실적인 문제가 있었어요.

 

"다크 모드는 어떻게 하지?"

 

요즘 앱들은 라이트 모드와 다크 모드를 둘 다 지원해요.

사용자가 스마트폰 설정에서 다크 모드를 켜면 앱도 자동으로 어두운 테마로 바뀌는 거예요.

FlutterFlow는 이걸 처음부터 지원해요.

Theme Settings에 Light Mode Theme와 Dark Mode Theme가 나란히 있어요.

둘 다 설정해두면 사용자 기기 설정에 따라 자동으로 전환돼요.

---

다크 모드는 단순한 색 반전이 아니에요

처음에 저도 착각했어요.

다크 모드 = 라이트 모드 색상을 반전시키면 되는 거 아닌가?

아니에요. 단순히 흰색을 검정으로, 검정을 흰색으로 바꾸면 어색하고 불편한 화면이 돼요.

다크 모드를 제대로 설정하려면 색상의 역할이 바뀐다는 걸 이해해야 해요.

라이트 모드에서 네이비가 메인 컬러(버튼, 강조)였다면, 다크 모드에서는 네이비가 배경색이 돼요. 그리고 라이트 모드에서 포인트 컬러였던 민트가 다크 모드에서는 메인 강조 컬러로 올라와요.

쉽게 말하면 역할이 바뀌는 거예요.

---

Light Mode vs Dark Mode 컬러 비교

제가 실제로 설정한 컬러를 나란히 비교해볼게요.

Brand Colors

역할	Light Mode	Dark Mode
Primary	#1A2E4A (네이비)	#00C9A7 (민트)
Secondary	#00C9A7 (민트)	#00A389 (어두운 민트)
Tertiary	#E0F7F4 (라이트 민트)	#1A3D38 (다크 민트)

Utility Colors

역할	Light Mode	Dark Mode
Primary Text	#14181B (검정)	#FFFFFF (흰색)
Secondary Text	#57636C (회색)	#8A9BB0 (연한 회색)
Primary Background	#F1F4F8 (연한 회색)	#0D1B2A (딥 다크 네이비)
Secondary Background	#FFFFFF (흰색)	#1A2E4A (네이비)

---

설정할 때 주의할 점

FlutterFlow에서 다크 모드 설정할 때 한 가지 주의할 점이 있어요.

Alternate 색상을 설정할 때 HEX 앞에 알파값이 붙는 경우가 있어요.

예를 들어 #1E2A35를 입력해야 하는데 #B2262D34처럼 앞에 이상한 값이 붙어서 전혀 다른 색이 되는 경우가 있어요.

이럴 때는 색상 피커에서 알파(A) 값을 확인해야 해요. A값이 100%인지 꼭 확인하세요.

투명도가 섞이면 의도하지 않은 색이 나와요.

---

다크 모드 미리보기 확인하는 방법

설정을 다 하고 나서 실제로 어떻게 보이는지 확인하고 싶었어요.

FlutterFlow 캔버스 상단에 태양 아이콘이 있어요. 이걸 클릭하면 라이트 모드와 다크 모드를 번갈아 미리볼 수 있어요.

처음 다크 모드로 전환했을 때 화면을 보고 꽤 만족스러웠어요. 딥 다크 네이비 배경에 민트 포인트가 정말 예뻤거든요.

마치 전문 디자이너가 만든 앱처럼 보였어요.

---

컬러 설정 후 달라진 것들

컬러 시스템을 제대로 잡고 나서 작업 속도가 눈에 띄게 빨라졌어요.

버튼을 만들 때마다 색을 고민할 필요가 없어요. 메인 버튼은 Primary, 포인트 강조는 Secondary, 배경은 Primary Background.

그냥 이 규칙대로 쓰면 돼요.

그리고 나중에 앱 분위기를 바꾸고 싶으면 Theme Settings에서 HEX 값 하나만 바꾸면 앱 전체 색상이 한번에 바뀌어요.

이게 컬러 시스템을 처음부터 제대로 잡아두는 가장 큰 이유예요.

---

팁 하나 더

다크 모드 설정할 때 모든 색을 처음부터 완벽하게 잡으려고 하지 마세요.

저도 처음엔 라이트 모드를 먼저 완성하고, 다크 모드는 나중에 다듬었어요.

개발 초반에는 라이트 모드만 제대로 작동해도 충분해요. 다크 모드는 앱이 어느 정도 완성된 다음에 다듬어도 늦지 않아요.

완벽함을 추구하다가 시작도 못 하는 것보다, 일단 시작하고 점점 다듬어가는 게 훨씬 좋아요.