다크모드

다크모드? 🌚

우리는 개발을 하기에 앞서, 프로토 타입을 산출해내는 작업을 하였다.

완전히 신선한 레이아웃과 독특한 디자인에 도전하는 것도 좋겠지만,

UX를 잘 고려한 여러 디자인을 레퍼런스 삼아서, 우리의 색깔로 구현하는 것도 좋겠다는 판단을 하였다.

정말 감탄이 절로나오면서, 한편으로는 이런 서비스를 만들어 보고 싶다! 라는 열정을 갖게 해주는 멋진 사이트들을 많이 보았다.

이때, 인사이트를 얻게해주는 대부분의 사이트에서 다크모드를 지원하고 있었는데

우리는 자연스럽게 다크모드를 염두에 두게 되었다.

다크모드의 장점

다크모드는 일반적으로 검은색 또는 회색의 음영 등 어두운 색상을 기본 배경색으로 사용하는 사용자 인터페이스이다.

우리가 잘 알고 있는 구글, 인스타그램, 페이스북, 애플과 같은 세계적인 브랜드들이 서비스 하고 있는 거대한 디자인 트렌드 중 하나이기도 하다.

심지어 어느 순간부터는 OS자체에서 다크모드를 지원하고 있는데, 이것은 단순히 미적인 이유만은 아니라고 한다.

와닿을지는 모르겠지만 다크모드는 아래와 같은 장점들이 존재한다고 한다.

1️⃣ 눈의 피로를 줄여준다.

2️⃣ 주변의 조명이 낮은 상황에서도 잘 보일 수 있게 해준다.

3️⃣ 배터리를 절약해 준다.

이밖에도 다양한 장점이 있지만, 실제로 눈의 피로를 줄여주는 것만큼은 다크모드 애용자로서 자신있게 말할 수 있다.

위 장점에 대한 과학적인 근거는 참고자료 에서 확인할 수 있다!

Default값을 다크모드로?

우리팀은 라이트 모드와 다크모드 두 버전중 Default를 무엇을 할지 고민하게 되었다.

다크모드가 마음에 들지만, 아무래도 라이트 모드가 익숙한 사용자들이 더 많을 것이라는 생각 때문이었다.

결론적으로 말하자면 우리의 Default 디자인은 다크모드가 되었다.

앞선 논의들 중 통계자료를 한눈에 보기 쉽도록 해주는 것이 가계부 서비스의 핵심이라는 결론이 있었는데,

우리조는 특히 애니메이션 또는 트랜지션을 사용할 계획있었으므로 시각적인 요소를 더 잘 나타낼 수 있는 다크모드를 결정한 것이다.

@media prefers-color-scheme을 이용하여, OS에서 다크모드를 사용하는지 여부를 판단한 후 동적으로 모드를 결정해주는 것도 고려해 봐야겠다.

다크모드에 어울리는 색상

다크모드에는 흔히 물빠진(?)색이라 불리는 pastel color가 조화롭게 사용된다고 하여

Pastel Color의 값을 많이 활용하였다.