[SwiftBeam #21] "눈이 편안한 전송" - 다크 모드와 브랜드 컬러를 담은 테마 시스템 설계

SwiftBeam Series #21

"밤에도 부담 없이"
다크 모드와 테마의 조화

Flutter ThemeData로 완성하는 감성 UI

🌙 ✨ 🎨 📱

현대인의 디지털 생활에서 '다크 모드(Dark Mode)'는 이제 선택이 아닌 필수입니다. 늦은 밤, 불 꺼진 방 안에서 침대에 누워 서로의 폰으로 사진을 옮길 때, 하얀색 화면이 눈을 찌르는 불쾌한 경험은 누구나 한 번쯤 있을 것입니다. SwiftBeam은 사용자의 시력 보호는 물론, 취향에 따른 감성적인 만족도를 높이기 위해 정교한 테마 시스템을 구축했습니다. 단순히 배경색만 검게 바꾸는 수준을 넘어, 브랜드의 아이덴티티를 유지하면서도 눈이 편안한 최적의 색 조합을 찾아낸 과정을 소개합니다.

1. Flutter ThemeData: 테마의 중앙 통제실

앱 곳곳에 Colors.blue와 같이 색상을 직접 지정하는 것은 유지보수의 재앙을 부릅니다. 테마를 변경해야 할 때 수백 개의 파일을 뒤져야 하기 때문이죠. SwiftBeam은 Flutter의 ThemeData를 활용해 모든 색상과 폰트 스타일을 중앙에서 관리합니다.

우리는 크게 LightTheme와 DarkTheme라는 두 개의 객체를 정의했습니다. 단순히 '화이트'와 '블랙'이 아닙니다. 라이트 모드에서는 깨끗하고 신뢰감을 주는 퓨어 화이트와 브랜드 블루를, 다크 모드에서는 눈의 피로를 최소화하는 딥 차콜(Deep Charcoal)과 부드러운 파스텔 톤의 포인트 컬러를 매칭했습니다.

2. "리얼 블랙"이 아닌 "다크 그레이"를 쓰는 이유

많은 유저들이 '진정한 검은색(#000000)'이 배터리 절약(OLED 기준)에 좋다고 생각하지만, 시각적으로는 피로감이 큽니다. 검정 바탕에 하얀 글씨는 대비가 너무 강해 잔상이 남기 쉽기 때문이죠.

SwiftBeam의 다크 모드는 다층적 그림자(Layered Shadows)와 깊이감(Elevation)을 표현하기 위해 아주 짙은 회색을 베이스로 사용했습니다. 이렇게 하면 카드가 떠 있는 듯한 입체감을 줄 수 있고, 장시간 사용해도 눈이 훨씬 편안합니다. 또한 포인트 컬러인 브랜드 블루도 다크 모드에서는 명도를 조금 높여 대비를 조절함으로써 가독성을 확보했습니다.

3. 사용자의 습관을 따르는 자동 테마 전환

가장 좋은 UX는 사용자가 조작하지 않아도 알아서 맞춰주는 것입니다. SwiftBeam은 기기의 시스템 설정(OS 테마)과 연동하여 낮에는 라이트 모드로, 밤에는 다크 모드로 자동으로 옷을 갈아입습니다.

하지만 "난 낮에도 다크 모드가 좋아!"라는 확고한 취향을 가진 분들을 위해 설정 화면에서 '테마 수동 고정' 기능도 제공합니다. 이 설정값은 5편에서 다룬 shared_preferences에 저장되어, 앱을 껐다 켜도 사용자의 취향을 잊지 않고 기억합니다.

4. 상단바와 네비게이션 바의 완성

테마의 완성은 앱 화면 안쪽에서 끝나지 않습니다. 화면 상단의 상태표시줄(Status Bar)과 하단의 네비게이션 바 색상까지 테마와 일치시켜야 비로소 '완성된 앱'이라는 느낌이 듭니다.

SwiftBeam은 SystemChrome API를 활용하여 테마가 바뀔 때마다 시스템 오버레이 스타일을 즉시 갱신합니다. 라이트 모드에서는 검은색 아이콘을, 다크 모드에서는 흰색 아이콘을 노출하여 어떤 환경에서도 배터리나 시간 정보가 선명하게 보이도록 배려했습니다.

5. 디자인은 사용자에 대한 '공감'입니다

테마 시스템을 구축하는 과정은 단순히 색상을 고르는 작업이 아니라, 다양한 환경에서 앱을 사용할 유저의 상황을 상상하고 공감하는 과정이었습니다. "눈이 아파서 앱을 못 쓰겠어"라는 말이 나오지 않도록 하는 것, 그것이 SwiftBeam이 추구하는 세심한 기술적 배려입니다.

이제 앱의 기능, 성능, 보안, 그리고 미학까지 모두 완성되었습니다. 남은 것은 이 결과물을 세상에 내놓는 일뿐입니다. 하지만 스토어의 문턱은 생각보다 높습니다. 다음 편에서는 출시 전 마지막 관문, '구글 플레이와 앱스토어 출시 전 체크리스트'에 대해 꼼꼼히 짚어보겠습니다.

다음 편 예고: [SwiftBeam #22] "스토어 출시라는 거대한 산" - 구글 플레이 & 앱스토어 심사 준비 체크리스트

사용자의 눈의 피로도까지 세심하게 관리하는 Team M2Y의 UI/UX 디자인!
아름다움과 실용성을 겸비한 저희의 다양한 앱들을 직접 경험해 보세요.

Team M2Y 프리미엄 앱 라인업 구경하기 →

TAGS: 다크모드, 테마시스템, ThemeData, FlutterUI, 플러터, 앱디자인, UX디자인, SwiftBeam, 디자인시스템, 앱개발, 기술블로그, 개발일지