최근 몇 년간 다크 모드가 대세로 자리 잡고 있는데요.
스마트폰부터 웹사이트까지 다양한 플랫폼에서 다크 모드를 지원한다죠.
사용자들에게는 하나의 필수적인 요소로 느껴지고 있답니다.
특히, 눈의 피로를 줄여주고 배터리 소모를 줄여준다는 장점 때문에
많은 서비스가 다크 모드를 기본 설정으로 제공하고 있어요!
디자이너 입장에서는 라이트 모드와 다크 모드를 모두 고려해서
디자인을 제작해야 하는 부담이 있는데요.
하지만 Figma를 활용하면 다크 모드 디자인도 체계적으로 관리할 수 있습니다.
오늘은 Figma에서 다크 모드 디자인을 효율적으로 구현하는 방법을 알아보겠습니다.
다크 모드 디자인을 시작하기 전에
먼저, 다크 모드 디자인의 기본 원칙을 알아야 합니다!
다크 모드는 단순히 배경색을 어둡게 바꾸는 것만으로 끝나지 않습니다.
다음과 같은 사항을 고려해야 해요.
- 명암 대비 다크 모드에서는 대비가 매우 중요한 요소입니다. 밝은 텍스트와 어두운 배경의 조화가 시각적으로 편안해야 하는데요. 특히 텍스트의 가독성을 확보하기 위해서는 밝은 회색이나 흰색보다는 약간 누런 톤의 흰색(#E0E0E0)을 사용하면 눈의 피로를 줄일 수 있어요.
- 색상 사용 다크 모드에서는 강렬한 색이 부담스러울 수 있습니다. 따라서 색상의 채도를 줄이거나 약간 어두운 톤을 사용하는 것이 좋아요. 특히 강조 색상은 눈이 피로하지 않도록 신중하게 선택해야 합니다.
- 시각적 계층 구조 배경이 어두운 만큼 시각적 요소 간의 계층 구조가 잘 드러나지 않을 수 있는데요. 그림자, 테두리 등을 활용해서 명확한 구조를 보여주는 것이 중요합니다.
Figma에서 다크 모드 디자인 준비하기
이제 Figma에서 다크 모드 디자인을 시작해야 하는데요.
효율적인 작업을 위해 디자인 시스템부터 설정하는 것이 좋습니다.
1. 색상 스타일 설정하기
먼저, 컬러 스타일을 먼저 지정해야 한다죠.
다크 모드 전용 색상 팔레트를 미리 구성해서 관리하는 것이 좋은데요.
다음과 같은 기준으로 정리할 수 있습니다.
- 기본 배경색: #121212 또는 #1E1E1E
- 텍스트 기본 색상: #E0E0E0
- 보조 텍스트 색상: #B3B3B3
- 강조 색상: #3B82F6 (약간 채도를 줄여서 사용)
이렇게 컬러 스타일을 미리 설정해 두면
디자인 중에 색상 관리가 훨씬 쉬워집니다.
2. 컴포넌트 관리하기
다크 모드와 라이트 모드를 동시에 관리하려면 컴포넌트가 필수인데요.
Figma에서는 Variants 기능을 활용하여 상태를 관리할 수 있습니다.
예를 들어 버튼 컴포넌트를 만든다면
- Light/Primary
- Dark/Primary 이렇게 변형을 만들어두고 스타일을 적용하면 다크 모드와 라이트 모드를 한 번에 관리할 수 있어요.
다크 모드 디자인 시 유의할 점
1. 배경색 선택
너무 어두운 검정(#000000)은 눈이 쉽게 피로해지는데요.
약간의 채도가 들어간 짙은 회색(#121212)을 사용하면 자연스럽게 보입니다.
2. 강조 색상 관리
라이트 모드에서 강렬하게 보이던 색상이
다크 모드에서는 부담스럽게 느껴질 수 있습니다.
따라서 색상 자체를 약간 어둡게 만들거나,
투명도를 활용해서 눈에 거슬리지 않도록 해야 합니다.
3. 그림자 활용
다크 모드에서는 그림자 효과가 거의 보이지 않는데요.
이를 보완하기 위해 어두운 배경에 약간 밝은 회색(#2A2A2A)을 사용하여
미세한 그림자 효과를 주면 시각적 구분이 더 명확해집니다.
다크 모드 디자인 테스트
다크 모드로 디자인을 마쳤다면 테스트가 중요합니다.
디바이스별로, 그리고 해상도별로 색상이 어떻게 보이는지 꼼꼼히 확인해야 해요.
특히 모바일 환경에서는 OLED 디스플레이가 많기 때문에
색상 표현이 더 강렬하게 보일 수 있습니다.
테스트 시에는 다음을 확인해야 합니다.
- 다양한 디바이스에서 텍스트 가독성
- 색상 왜곡 여부
- 눈부심이나 피로감이 없는지
마무리할게요!
다크 모드 디자인은 단순히 어두운 색상을 사용하는 것이 아니라
사용자가 편안하게 콘텐츠를 볼 수 있도록
다양한 시각적 요소를 조정하는 작업입니다.
Figma를 활용하면 다크 모드 디자인을 체계적으로 관리할 수 있는데요.
디자인 시스템을 잘 설정하고, 컴포넌트와 Variants 기능을 적극 활용하면
효율적으로 라이트 모드와 다크 모드를 동시에 관리할 수 있습니다.
디자인 트렌드가 빠르게 변화하는 만큼
다크 모드도 꾸준히 개선하면서
사용자 경험을 고려하는 것이 중요합니다.
앞으로도 다크 모드 디자인을 할 때 오늘 배운 내용을 참고해서
더 나은 결과물을 만들어보세요.