아티클 스터디 ) 다크 모드 UI 디자인 팁 7가지
[ 참고 문헌 ] 요즘IT, 다크 모드 UI 디자인 팁 7가지, 2024.1.24 참고
개요
- 고채도 색상을 사용말 것
- bg 색상 선택에 대한 고정관념을 흐릴 것
- 여백의 공간을 충분히 확보할 것
- 그림자 효과는 명도 차이로 대체되도록 둘 것
- 시각적 보정을 거칠 것
- 자유로운 모드 전환이 가능하게 할 것
- 해가 진 후, 두 가지 버전 모두에 테스트 할 것
[ 4번 사항 참고 ] 다른 아티클을 추가적으로 참고해보니,
Material design 에서 권장한 다크 그레이 ( #121212 ) 의 경우에는
그림자 표현이 가능하다고 설명하고 있다.
들어가는 글
화면과 마주하는 시간이 하루치 평균만 따져 봐도 대 여섯 시간쯤은 우습게 넘겨버리는 이 일의 숙명을 따르며, 나 또한 다크 테마의 등장에 열렬히 환호할 수 밖에 없었다. 새하얀 ( 따지고 보면 100% 순백색은 아닐테지만.. ) 화면을 장시간 뚫어져라 주시하다 보면 자연스레 따라오는 시각적인 피로도를 덜어주는 대단히 기특한 존재이기 때문이다. 이번 회차에서는 앞서 서술한 개인적인 감사함으로 관심을 두고 있기도 한 다크 모드를 다룬 아티클을 파헤쳐 보았다. 다크 모드로 된 화면을 구성할 때 활용할 만한 팁들이 가득하여 유익했다.
쉽지 않은 길, 그리고 책임감
완성된 다크 모드를 써보기만 해서는 일반적인 화면으로부터 bg 색상만 반전된 게 아닐까, 하는 생각을 갖기 쉽상이나 실상은 그렇지 않다. 명도가 낮은 색상일 수록 오히려 고려해야 할 요소가 늘어나 이를 다루는 데 있어 더 많은 까다로움이 따른다는 점 때문일 것이다. 실제로 주된 색상이 검정이었던 F&B 브랜드의 리디자인 작업을 진행했을 때, 컴포넌트는 물론이거니와 국소적인 텍스트에 사용할 색상의 선택에 있어서 조차도 수도 없는 손품을 들였던 기억들이 떠오른다.
한편, 새삼스럽게도 다크 모드라는 트렌드가 UX의 개선 이라는 제일의 목표 달성이라는 관점에서 본다면 지금보다도 고평가 되어야 하는 업적 중에 하나이리라는 감상이 든다. 이토록이나 근사한 사례가 설정했을 목표를 내 스스로가 저해하지 않고서, 올바르게 구현해야 한다는 책임감을 느끼는 동시에 이러한 책임을 다하는 데에 있어서 위의 아티클이 첫 번째 길잡이의 역할을 톡톡히 해줄 것이라 기대한다.
[ 함께 보기 좋은 글 ]
