다크모드 vs. 라이트모드, UI 디자인의 차이와 제작 과정
기본 테마를 떠올리면 대부분 라이트모드가 먼저 생각날 거예요. 하지만 뤼이도(Riido)는 조금 다른 길을 걸었습니다. 우리는 다크모드를 먼저 출시하고, 이후에 라이트모드를 구현했어요. 일반적으로 UI를 디자인할 때는 라이트모드를 먼저 제작한 후 다크모드를 추가하는 방식이 많지만, 뤼이도는 반대로 접근했죠.
오늘은 라이트 / 다크모드 디자인 시 주의사항과 라이트모드 제작 과정에 대해 설명할게요.
다크모드
라이트모드를 살펴보기 전에, 먼저 다크모드의 특징부터 정리해 볼게요.
1. 배경색과 텍스트 색의 대비
위 두 개의 이미지 중 어떤 글자가 더 읽기 쉬운가요?
대비만 두고 보면 왼쪽이 더 강한 대비로 강조될 것 같지만, 실제로 글을 읽기에는 오른쪽이 더 편하다고 느껴질 거예요. 너무 극명한 대비는 눈의 피로를 유발하기 때문이죠.
실제로 출판 업계에서도 완전히 새하얀 종이를 잘 사용하지 않는 이유가 바로 이 때문이에요. 너무 밝은 배경 위에 짙은 글자를 배치하면 오히려 가독성이 떨어지고, 장시간 읽을 때 눈이 쉽게 피로해지죠.
2. 화면 내 계층(레이어) 구조
UI 디자인에서 화면을 어떻게 계층화할 것인가는 중요한 문제예요. 다크모드에서는 주로 ‘면의 밝기’를 조절해 계층을 나누는 방식을 활용합니다.
다크모드에서의 중요 포인트
다크모드에서는 텍스트 강조를 위해 불투명도를 조절합니다. 가장 중요한 텍스트는 87%, 보조 텍스트는 60%, 비활성화된 요소는 38% 정도의 불투명도를 적용하는 것이 적절해요.
화면 내에서 더 중요한 요소일수록 밝게 표현해야 해요. 배경은 가장 어두운 색을 사용하고, 컨네이너(레이어)가 쌓일수록 점점 밝아지도록 설계했습니다.
어두운 배경에서는 채도가 높은 색상이 번져 보이거나 화면이 깜빡이는 느낌을 줄 수 있어요.
뤼이도의 다크모드는 이러한 원칙을 고려해 디자인했어요.
라이트모드
다크모드를 기반으로 라이트모드를 단순히 반전시키면 될까요?
절대 그렇지 않습니다. 라이트모드는 다크모드와는 또 다른 접근 방식이 필요해요.
1. 배경색과 텍스트 색의 대비
라이트모드에서도 완전한 검정(#000000)과 흰색(#FFFFFF)을 그대로 사용하면 안 됩니다.
하지만 최근 UI 디자인에서는 배경색으로 완전한 흰색을 사용하는 경우도 많아요. 이때 텍스트는 완전한 검정이 아니라 살짝 톤 다운된 색상을 적용하는 것이 일반적이에요.
2. 화면 내 계층(레이어) 구조
다크모드에서는 컨테이너의 색상 변화를 통해 레이어를 구분했다면, 라이트모드에서는 이 방법이 한계가 있어요. 아래의 요소를 고려해 디자인 해야합니다.
전진색과 후퇴색을 활용하되, 컨테이너의 경계선(stroke)이나 그림자(shadow)로 구분해야 합니다. 면의 밝기만으로 계층을 나누면, 배경과 비슷한 색상일 때 구분이 어렵고, 너무 어두워지면 부자연스럽게 보일 수 있어요.
이런 방식은 뤼이도의 다양한 UI 요소에서도 확인할 수 있어요. 예를 들어, 아래와 같은 요소들이 있어요.
이처럼 텍스트 인풋, 컨테이너, 모달 창 등의 UI 요소는 레이어 구분이 중요한 영역이에요.
라이트모드 제작 과정
1. 색상 반전
뤼이도의 컬러 시스템에서는 흰색부터 가장 어두운 회색까지 총 11단계의 grayscale 색상을 사용합니다.
예외적인 경우를 제외하고, 기본적으로 다크모드의 색상을 반전시켜 적용했어요.
처음 다크모드의 요소들을 반전시켜 라이트모드에 적용하려니 헷갈려서, 이를 정리한 색상 표를 제작해 책상 위에 두고 작업하면서 참고했답니다.
2. 배경색과 컨테이너 색의 기준
뤼이도에서는 초기 UI 컨셉을 고려하여 단색(solid) 배경이 아니라 그라데이션(gradient) 배경 위에 불투명한(opacity) 컨테이너를 배치하는 방식을 사용하고 있어요.
이 방식을 라이트모드에서도 유지하기 위해, 컨테이너 색상과 불투명도 조절에 신경을 많이 썼어요.
3. 에셋 조정
UI에서 아이콘, 버튼 등의 에셋(asset)은 중요한 요소예요.
기존 다크모드에서는 배경과 조화를 이루도록 채도와 명도를 낮춘 컬러를 적용했어요. 하지만 이걸 그대로 라이트모드에서 사용하니 색감이 너무 어둡고 부자연스러웠어요.
그래서 채도는 낮추되, 명도를 높여 배경과의 조화를 맞추는 방식으로 수정했어요.
이렇게 전체적인 틀을 잡고, 세부적인 요소를 다듬어가면서 자연스럽게 다크모드에서 라이트모드로 전환할 수 있도록 제작했어요.
이제 막 출시된 라이트모드는 앞으로도 계속 개선될 예정이에요. 보다 정교한 디자인과 최적의 사용자 경험을 위해 지속적으로 업데이트해 나갈 계획입니다.
뤼이도의 다크모드와 라이트모드를 직접 확인해 보세요! 🚀
Riido Product Designer 안혜진
