[번역] 다크테마 디자인을 위한 8가지 팁
이번에는 서비스의 첫인상과 정체성 결정에 큰 영향을 미치는 UI의 '컬러테마'에 대한 글을 준비했습니다. 만약 블랙 톤의 다크테마를 적용하기로 했다면 꼭 읽어보시기 바랍니다. 디테일한 꿀팁들이 분명 도움이 될거라 생각합니다. 그럼 즐독하세요!
다크테마 디자인을 위한
8가지 팁
[원문] 8 Tips for Dark Theme Design
다크테마는 지난 몇 년간 두드러진 특징 중 하나입니다. 애플과 구글도 UI의 기본구성으로 다크테마를 마련해두었습니다. 다크테마의 줄어든 루미넌스(휘도)는 어두운 환경에서도 안정성을 제공하여 눈의 피로를 최소화합니다.
이제 다크테마를 디자인할 때, 당신의 프러덕트를 위해 기억해야할 8가지 팁을 알려드릴까 합니다.
1. 순수한 검정색을 사용하지 마세요.
다크테마라고 해서 무조건 순수한 검정 바탕에 순수한 흰색만 사용해야하는 건 아닙니다. 높은 대비를 주면 보기에 피로할 수 있습니다. 완전한 검정색(#000000)을 사용하는 것보다 짙은 회색을 바탕색으로 사용하는 것이 더 안전합니다. 짙은 회색 바탕 위의 얇은 글자는 검정바탕 위의 글자보다 덜 대비되어 눈의 피로를 줄여줍니다.
짙은 회색 배경은 더 다양한 컬러, 엘레베이션(높낮이), 깊이를 표현할 수 있습니다. 순수한 검정색 바탕보다 회색 바탕에서 그림자를 보는 게 더 쉽기 때문입니다.
머터리얼 디자인은 다크테마의 배경으로 #121212 컬러를 권장하고 있습니다.
다크테마 추천 배경컬러 #1212122. 다크테마에서 채도가 높은 컬러는 사용하지 마세요.
밝은 화면은 채도 높은 컬러가 보기 편하지만, 다크테마에선 시각적으로 부딪히기 때문에 읽기 어려울 수 있습니다. 어두운 배경에서도 충분한 대비를 만들 수 있도록 주요 컬러들의 채도를 다양하게 나누어야 합니다.
다크테마에선 가독성이 좋은 밝은 톤의 컬러(200-50 범위 내)를 사용하세요. 작은 변화가 UI의 표현력을 떨어뜨리지 않고 눈의 피로 없이 적절한 대비를 유지하도록 도와줄 것입니다.
채도가 낮은 컬러는 가독성을 높이고 시각적 혼동을 줄입니다.
다크테마에서 채도 높은 컬러 사용은 피하세요. 어두운 배경에 부딪혀 시각적 혼란을 줄 수 있습니다. 200-50 범위 내의 밝은 톤을 사용해야 다크테마 배경에서 가독성을 높일 수 있습니다. (모든 엘레베이션에 해당됨)
3. 컬러의 표준 대비값을 준수하세요.
다크모드에서도 컴포넌트를 편하게 읽을 수 있도록 만들어주세요. 다크테마의 화면은 흰색 글씨가 잘 보일 수 있도록 충분히 어두워야 합니다. 구글 머터리얼 디자인은 글자와 배경 간에 적어도 15.8 : 1 비율의 대비를 적용하도록 권장하고 있습니다. 대비율을 테스트하려면 아래 'Contrast Tools'라는 툴을 사용해보세요.
4. 'On' 컬러를 사용하세요.
'On' 컬러는 컴포넌트의 최상단이나 메인화면에 'On'으로 나타는 컬러를 말합니다. 그 컬러들은 일반적으로 텍스트에 적용됩니다. 다크테마를 위한 기본 'On' 컬러는 순수한 흰색(#FFFFFF)입니다. 하지만 #FFFFFF는 밝은 색이라서 어두운 배경에 시각적으로 '진동'할 것입니다. 그래서 구글 머터리얼 디자인은 조금 더 어두운 흰색을 쓰도록 권장합니다.
고대비 텍스트 : 투명도 87% 적용
중대비 텍스트 : 투명도 60% 적용
저대비 텍스트 : 투명도 38% 적용
[꿀팁] 어두운 배경 위의 얇은 글자는 밝은 배경 위의 얇을 글자보다 더 두껍게 보일 수 있습니다. 그래서 다크모드에서는 원하는 폰트두께보다 조금 더 얇은 두께를 적용해야 합니다.
내용이 배경의 영향을 받지 않도록 조금 더 어두운 흰색을 선택하세요.5. 디자인의 감성적인 측면을 고려하세요.
이미 상용화된 앱의 다크테마를 디자인할 때, 아마 여러분은 다크모드에서도 동일한 느낌을 전달하고 싶을 것입니다. 하지만 그러지 않는 게 좋습니다. 왜일까요?
컬러는 배경에 의해 서로 다르게 인식됩니다.
다시 말해, 다크테마는 라이트테마처럼 느껴질 수 없습니다. 결국 다크테마와 라이트테마는 서로 다른 느낌을 불러옵니다. 이를 고쳐서 맞추는 것보다 여러분 디자인의 아이덴티티를 위해 각 테마의 장점을 활용하는 것이 훨씬 낫습니다.
Shift Dashboard — Dark Mode by Sergey Zolotnikov6. 깊이를 전달하세요.
라이트테마와 마찬가지로 다크테마 UI를 제작할 때도 레이아웃의 위계를 만들고 중요한 요소를 강조하는 것은 매우 중요합니다.
'높낮이'는 요소의 위계를 나타내는 도구입니다.
라이트 모드에서는 그림자를 이용해 높이를 나타냅니다. 높이가 높아질수록 그림자는 더 넓어집니다. 다크 테마는 배경이 어두워 그림자가 잘 보이지 않기 때문에 이러한 원리로 접근할 수 없습니다. 그래서 각 면에 레벨을 적용하는 것이 좋습니다. 머티리얼로 제작된 다크테마에서는 높이를 가진 면과 요소들이 오버레이 되어 색이 지정됩니다. 고도가 높을수록 그 면은 더 밝아지게 됩니다.
높이가 높을수록, 컬러는 밝아집니다.
높이 있는 면일수록 오버레이는 더 밝고 강해집니다.
Martin Mroč의 뮤직플레이어 UI7. 사용자가 직접 다크모드로 전환할 수 있게 해주세요.
다크테마를 켜고 끌 때 시스템이 결정하도록 할 수 있습니다. 하지만 이런 결정은 좋지 않은 UX를 불러오기도 합니다. 사용자가 직접 조절하게 하고 시스템이 그들을 위해 결정하도록 하세요.
다크테마에 자동 전환을 사용하지 않는 게 더 낫습니다. 사용자가 다크테마를 켜고 끌 수 있는 UI컨트롤을 조작하게 해주세요. 본인의 필요에 따라 매뉴얼대로 모드를 조정할 수 있어야 합니다. 당신은 모드 스위치의 위치와 디자인만 결정해주면 됩니다.
'다크테마' 로 전환하는 UI 컨트롤8. 라이트테마와 다크테마 모두 테스트를 거치세요.
당신의 UI가 두가지 모드에서 어떻게 보이는지 확인하고, 각 경우에 맞게 디자인을 수정하세요.
해가 진 후 백열등과 함께 제품을 테스트 해보세요.
+ References
Dark Mode (Human Interface Guidelines)
