안녕하세요! 별 헤는 밤의 디자이너 S입니다.
이번 포스팅에서는 다크모드 제작기에 대해 이야기 해보려고 해요.
별 헤는 밤 앱은 v1에서도 ‘다크’ 모드이긴 했었지만, 사전 공부 없이 그냥 예뻐 보이는 앱을 만드는 바람에 사용성이 망한 채로 출시하게 되었더랬죠🥲 이전 포스팅에서 내용을 확인하실 수 있어요(링크)
이번에는 초보 디자이너가 제대로 된 다크모드를 만들기 위해 신경썼던 포인트들을 짚어볼게요!
1️⃣ 완전한 블랙과 화이트는 지양하기
가장 기본적인 다크모드 가이드로 많이 돌아다니는 내용이에요.
완전한 블랙 #000000과 화이트 #ffffff를 사용할 경우, 명도 대비가 높아져 화면을 볼 때 눈에 피로감을 줄 수 있기 때문이랍니다.
사실, 다크모드의 배경 컬러를 완전한 블랙으로 하는 게 좋은지, 어두운 그레이 계열로 하는 게 좋은지에 대해서는 상황마다 의견이 분분해요.
UI 디자이너들의 백과사전이나 다름없는 구글 Material Design Guide와 애플 HIG의 다크모드 가이드라인에서 서로 다른 배경 컬러를 지향하고 있기 때문이죠.
Material의 경우 눈의 피로감을 덜어주는 방향을, HIG의 경우 강한 대비로 가독성을 높이는 방향을 추구하는 것으로 보이네요.
🌟 그래서 별 헤는 밤은 어떻게 했을까?
→ 유저들이 앱을 밤에 사용할 경우가 많아 눈의 피로감을 더는 것이 별밤 다크모드의 목적이었기 때문에, 둘 중 Material 가이드를 따르기로 했어요.
→ 단, 천체관측지처럼 특별할 정도로 어두운 환경에서 앱을 사용할 경우, ‘어두운 그레이’도 충분히 눈부실 수 있기 때문에 pure black에 가까우나 pure plack은 아닌 컬러가 최종 선정되었답니다.
또한, 텍스트 컬러에도 white보다 gray50~gray500을 사용해 다양한 명도를 내용의 중요도에 맞게 사용하며 눈이 부시지 않게 신경 썼어요.
2️⃣ 그레이 컬러 시스템에 채도 한 방울 섞기
위에서 언급했듯, 별밤은 명도 차이를 줄여 눈의 피로를 덜기 위해 배경을 어두운 그레이로 택했어요.
gray 컬러 시스템을 만들 때에는 한 가지 요소를 더 신경 썼는데요. 명도 차이에 이어 채도 차이도 고려한 것입니다.
별 헤는 밤의 Primary blue(=브랜드 컬러)를 썼을 때, 채도가 들어간 요소들만 따로 놀지 않도록 그레이 컬러에도 아주 조금의 채도를 넣어주는 쪽이 눈이 편안하게 느껴졌어요. (오른쪽)
그래서 별헤는밤의 gray color 팔레트는 아래와 같은 쿨그레이 계열로 결정되었습니다!
만약 프라이머리 컬러가 빨강, 주황, 노랑 등 따뜻한 계열인 서비스라면 gray color 팔레트도 웜그레이 컬러로 만드는 게 좋겠죠?
3️⃣ UI Elevation 표현은 그림자 대신 배경 컬러로
3번은, 라이트 모드만 만들어본 디자이너가 처음 다크모드 화면을 만들려고 하면 정말 당황스러울 수 있는 부분이에요.
❓ UI Elevation이란? (한글로는 주로 ‘높이차’라고 해요)
쉽게 말해 팝업 / 바텀시트 / 플로팅 버튼처럼 화면 내에서 위아래 레이어가 겹겹이 쌓인 화면들이 있을 때, 각 요소들의 상하 계층을 뜻해요.
이러한 디자인이 필요한 경우, 라이트 모드에서는 주로 각 요소의 배경색은 동일하게 white로 하되 그림자를 활용해 상하 계층을 나누는데요.
다크모드는 배경이 이미 어두워서 shadow를 활용해도 상위 요소가 돋보이지 않아요😥
그래서 다크모드에서는 상위에 있는 ui일수록 배경색을 밝게 하는 방법을 채택하면 된답니다!
팝업이나 바텀시트가 아니더라도, 라이트 모드 기준 그림자가 활용되는 모든 컴포넌트에 이 원리를 적용하실 수 있어요.
4️⃣ 암적응이 필요한 상황에서는 빨간색 사용하기
마지막으로, ‘천체 관측’이라는 앱 사용 환경 상 특별한 고려가 필요했던 부분인데요.
보편적인 다크모드 이론은 아니지만, 고민 후 앱에 적용한 사항이라 기록을 남겨보아요!
유저들은 크게 아래 2가지 상황에서 별밤 앱을 사용해요.
🌟 1. 별을 보러 가기 전, 관측 관련 정보를 얻고 싶을 때 (=밝을 수도, 어두울 수도 있는 환경)
🌟2. 별을 보러 간 뒤, 하늘에서 내가 원하는 별을 찾고 싶을 때 (=무조건적으로 어두운 환경)
→ 1번의 경우, 밝은 곳에서 앱을 사용할 수도 있기 때문에 기존 브랜드 컬러인 Primary Blue를 포인트 컬러로 사용하여 화면을 디자인해도 괜찮겠지만
→ 2번의 경우 암적응이 무조건적으로 필요한 환경이고, 암적응에 가장 적합한 색은 빨강*이기 때문에
무조건 2번 환경에서 사용될 것 같은 기능의 화면은 포인트 컬러를 줄 때 기존 브랜드 컬러 대신 빨강을 사용하는 게 더 낫겠다고 판단했어요.
(*사진을 인화하는 암실에서 빨간 조명만 사용하는 것과 같은 원리)
그래서, v1.4 신기능인 ‘카메라로 별 찾기’를 사용해 보면
어두운 밤하늘에 카메라를 비춰 내가 원하는 별자리를 찾을 때, 눈이 방해받지 않도록 빨간색이 사용된 것을 보실 수 있어요. 👀
오늘은 이렇게 별 헤는 밤 앱의 다크모드를 리뉴얼하면서 신경 썼던 부분들에 대해 짚어보았어요.
누군가에게 도움이 될 수 있었으면 좋겠네요. ‘ v ‘
다음에는 새로운 디자인 주제로 돌아올게요! 그럼 안녕~
확 바뀐 다크모드 확인하기! 별 헤는 밤 앱 다운로드👇
별 헤는 밤: 밤하늘, 별자리, 여행정보와 날씨예보까지 - Apps on Google Play
별 헤는 밤: 밤하늘, 별자리, 여행정보와 날씨예보까지 - Google Play 앱
오늘부터 별잘알! 오늘밤 별자리 정보, 날씨·광공해·월령까지 고려한 '관측적합도', 주변 관측지 검색으로 누구나 쉽게 밤하늘을 즐겨보세요.
play.google.com
'별밤 일지 > 디자인' 카테고리의 다른 글
| 프레이머로 돈 없이 서비스 홍보 웹 만들기 (0) | 2024.09.09 |
|---|---|
| [좋은 UI란 무엇일까?] (1) - 브랜딩과 경험 사이 (0) | 2023.11.08 |
