저는 삼성 청년 소프트웨어 아카데미(이하 싸피)에서 총 3번의 팀프로젝트를 경험하며 두 번의 프로젝트에서 디자인시스템을 직접 구축하고 다크모드를 구현한 경험이 있습니다. 이에 대한 배경 설명을 해드리자면, 싸피의 특성상 디자이너를 담당하는 직군이 없기 때문에 자연스레 UI/UX 디자인을 프론트엔드 개발을 담당한 교육생이 하게 되는 분위기인데요. 저는 디자인전공을 했고 실무 경험도 있기 때문에 모든 프로젝트에서 UI/UX와 프론트엔드 개발을 동시에 담당했습니다.

디자이너 출신이다보니 아무래도 디자인과 관련한 프론트엔드 개발 세계에 관심이 많았습니다. 다크 모드를 구현하는 것이 개인적인 프로젝트 목표 중 하나였기 때문에, 프로젝트를 시작하며 다크모드를 구현하기 위해 어떻게 디자인시스템을 세팅해둬야하고, 그것을 어떻게 개발적으로 반영해야 하는지 학습했습니다. 그리고 직접 피그마로 디자인시스템을 만들고 코드로 구현했죠!

그래서 이번 시리즈의 글은 저처럼 UI/UX에 관심이 많거나 직접 디자인시스템을 디자인해야하는 상황에 있는 (ex. 싸피에서 프론트엔드 개발을 담당하는) 프론트엔드 개발자 분들께 도움이 되고자 작성하게 되었습니다.

시리즈는 총 세 파트로 나눠 작성될 예정입니다.

1. 다크모드를 구현하기 위해 필요한 디자인시스템 이론
2. 다크모드를 구현하기 위한 디자인시스템 만들기
3. 디자인시스템을 반영하여 다크모드 구현하기

1. https://story.pxd.co.kr/1434

혹시 디자인시스템을 처음 들어보셨다면 위 글들을 먼저 읽어보시는 것을 추천드립니다. 이 글을 읽고 디자인시스템이 무엇인지, 디자인시스템이 왜 필요한지 알 수 있습니다.

2. https://www.designsystemsforfigma.com/

디자인시스템의 실제 예시들을 보고 싶으시다면 위 링크를 통해 피그마로 공개되어 있는 여러 브랜드들의 디자인시스템을 엿볼 수 있습니다. (구경하는 재미가 있습니다)

Uber의 디자인시스템

다크모드의 장점은 여러가지가 있겠지만, 가장 두드러지는 장점은 아래 세 가지 정도입니다.

1. 눈의 피로 감소
2. 가시성 및 가독성 향상
3. 에너지 절약

이러한 장점 뿐만아니라 사용자 경험을 향상시킬 수 있다는 점도 다크모드를 도입하며 얻는 이점 중 하나겠죠! 사용자가 원하는 테마를 골라 어플리케이션에 적용할 수 있으니까요.

이 부분은 쏘카의 다크 모드 받고 디자인 시스템 더블로 가! (1탄) 포스팅이 많은 도움이 됐습니다!

먼저 다크모드를 구현하기 위해 알아야하는 지식은 디자인시스템 가이드의 양대산맥으로 ‘애플’과 ‘구글’의 가이드를 참고할 수 있습니다. 애플은 Human Interface Guidlines(일명 HIG)란 이름으로, 구글은 Meterial Design이란 이름의 디자인가이드라인을 제공하고 있습니다. (아실분들은 아시겠지만 UI/UX 분야에서는 너무나도 유명합니다)

다크모드에 대해선 애플의 가이드라인보다 구글의 Material Design이 훨씬 정교하니 자세히 알고 싶은 분들은 아래 링크를 참고해주세요.

https://m2.material.io/design/color/dark-theme.html

이 글을 읽는 분들의 시간을 아껴드리기 위해 핵심 이론 몇 가지만 추려 정리해보겠습니다.

의미론적 컬러 시스템이란 각 컬러가 사용되는 목적에 따라 네이밍하여 시스템화한 것을 말합니다. 위의 예시 사진을 보면 ‘Primary’, ‘Secondary’, ‘Background’와 같이 각 색상의 역할에 따라 네이밍한 것을 알 수 있습니다. 위의 사진과 달리 그 색상의 절대적인 HEX 값으로 네이밍한다면 의미론적이지 않은 컬러 시스템이라고 할 수 있겠죠.

이렇게 의미론적인 색상 시스템을 통해 하나의 역할(ex. 배경)에 각 테마별로 상응하는 색상값을(ex. 라이트 모드에서는 화이트, 다크모드에서는 블랙) 바꿔 적용시키는 것이죠. UI 디자인에서는 각 색상들이 단순히 심미적인 목적으로 사용되는 것이 아니라 정보의 위계와 의미를 표현하고 있다는 점도 알아두시면 좋을 것 같아요.

Default theme, 즉 라이트 모드에서는 그림자를 통해 레이어의 고도(elevation)를 표현하고, 다크 모드에서는 표면 색상을 통해 표현합니다. 그도 그럴것이, 다크모드에서는 배경색이 어둡기 때문에 그림자를 적용해도 눈에 띄지 않기 때문입니다.

Material Design에서는 구체적인 수치까지 제시하고 있습니다.

위의 사진을 보면 10개의 각기 다른 높이를 가지고 있는 표면들에 대해 각 고도에 따라 몇%의 투명도를 주어 표현할 지 제시하고 있습니다. 크게 고민할 필요없이 Material Design에서 제공한대로 배경색을 level에 따라 시스템화하여 사용해도 되겠네요.

Material Design과 HIG 두 가이드라인에서 배경색에 대한 가이드를 다르게 정의하고 있습니다.

Material은 기본 배경색으로 검은색이 아닌 짙은 회색을 사용하라고 합니다. 그림자를 표현할 수 있기 때문에 더 넓은 범위의 색상, 깊이를 표현할 수 있고 밝은 텍스트와 배경의 대비를 줄여 눈의 피로를 줄일 수 있기 때문입니다.

반면에 HIG는 텍스트와 배경 위에 올라가는 요소들과의 명확한 대비를 위해 완전한 블랙 색상을 배경색으로 사용하라고 합니다. 그 이유는 아이폰의 베젤과 경계를 없애 디바이스와 UI의 통합된 경험을 위해서입니다. (HIG는 애플에서 만든 가이드라인이었죠)

이제 디자인시스템을 구축하기 위한 중요한 이론들은 다 공부를 한 것 같은데 마지막으로 알아둬야할 것이 있습니다.

다크모드는 단순히 라이트모드의 색상 체계를 반전시킨 것이 아닙니다!

사실 저는 라이트모드의 색상을 반전시켜 사용하긴 했습니다. 다크 모드의 색상을 일일이 디테일하게 잡기에는 개발할 시간도 부족했기 때문입니다… 하지만 단순히 라이트 모드의 색상 시스템 반전시킨다고 해서 라이트 모드일 때의 가독성이 그대로 유지되는 건 아니라는 걸 알아주세요!

쏘카의 예시

다크모드 화면에서 본문의 가독성이 떨어진 것을 확인할 수 있다.

이 색상 시스템을 정교하게 다듬기에는 디자인에 투자할 시간이 충분치 않기 때문에 개발 편의상 라이트 모드 색상을 반전하여 사용했지만, 만약 본인이 UI/UX 디자이너이거나 디자인시스템의 완성도를 더더더 높이고 싶다면 다크 모드의 색상을 섬세하게 다듬는 것을 추천드립니다!

이제 디자인시스템을 구축하고 다크모드를 구현할 이론적인 준비는 완료되었습니다!

다음 포스팅에서는 실제 제가 프로젝트에서 적용한 디자인시스템의 예시와 함께 어떻게 디자인 시스템을 만들었는지 자세히 다뤄보도록 하겠습니다.

참고

https://tech.socarcorp.kr/design/2020/07/10/dark-mode-01.html

https://blog.wishket.com/다크모드-ui-디자인의-원칙/

https://m2.material.io/design/color/dark-theme.html#behavior

https://developer.apple.com/design/human-interface-guidelines/dark-mode