Variable기능으로 다크모드 더하기(1)
디자인 시스템 시멘틱 컬러로 업그레이드하기
최근 몇 년 동안 우리는 스마트폰, 태블릿, 컴퓨터 등 다양한 디지털 기기를 사용하면서 보내는 시간이 급격히 늘어났다. 이러한 변화는 우리의 생활방식에 큰 영향을 미쳤고, 이에 따라 더 나은 사용자 경험을 제공하기 위한 다양한 기능들이 등장하고 있다. 그중에서도 다크모드는 특히 많은 사람들의 관심을 받고 있는 기능 중 하나이다.
우리 회사 또한 제품에 다크모드를 적용하고자 했고 오늘은 다크모드를 적용하기 위해 디자인 시스템을 개편한 이야기를 해보려고 한다.
왜 다크모드를 만드려고 했나?
회사에서 진행되는 모든 업무에는 누군가의 시간과 비용이 들기 마련이다. 그렇기 때문에 이 일이 '비용대비 임팩트가 있는가?'를 항상 생각하지 않을 수 없다.
그렇다면 다크모드는 어떠한 임팩트를 가져올 수 있는가?
다크모드를 사용할 경우 이러한 효과를 가져올 수 있다.
전력소모가 줄어든다.
사용자의 눈의 피로도를 줄일 수 있다.
어두운 화면에서의 콘텐츠 몰입도를 높일 수 있다.
사용자 경험을 향상할 수 있다.
이러한 장점들도 있었지만, 그보다 빠르게 다크모드를 적용했어야 해야 하는 이유는 제품 특성상 다크모드가 꼭 필요한 뷰들이 있었고 전혀 대응이 되지 않고 있어 디자인 시스템을 적용하지도 못하는 상황이었다.
Hex 코드로 적용되어 있는 레거시들로 이루어진 이 공간이 제품의 핵심이었기에 다크모드 대응이 꼭 필요했다.
어떻게 적용할 것인가?
처음 시도해 보는 것이기에 레퍼런스 조사가 필요했다. 다크모드에 대한 많은 자료들이 있었지만 이 자료가 다크모드를 만드는데 많은 도움이 되었다.
https://tech.socarcorp.kr/design/2020/07/22/dark-mode-02.html
이후 레퍼런스를 참고해 현재 우리의 상황에 맞게 Phase 1,2,3로 계획을 세웠다.
Phase 1. 컬러 시스템 개편하기
다크모드를 대응하기 위해서는 시멘틱 컬러를 도입하지 않을 수 없는데, 시멘틱 컬러 팔레트를 만드는 작업을 진행했다. 제품에 적용해 사용하는 것이 목표였기 때문에 개발자와 함께 네이밍을 정하고 구조를 어떻게 만들 것인가에 대해 논의하는 작업을 거쳤다. 이 과정을 거쳐 팔레트를 만들고 피그마 variables과 스토리북에 등록하였다.
Phase 2. 디자인 시스템 컴포넌트에 입히기
적용된 컬러 팔레트를 기존에 만들어진 컴포넌트에 입히는 작업을 진행하며 기초 작업 때 놓쳤던 컬러들을 추가하는 작업을 진행했다. 입힌 컬러값들을 개발자분에게 전달해 개발상 디자인시스템에 입히는 작업을 진행했다.
Phase 3. 제품에 적용하기
이미 디자인 시스템이 있었고, 라이브러리에서 variables로 사용 방식을 변경하다 보니 시안과 제품 개발에 추가 변경이 필요했다. 디자이너들은 기존에 있던 시안을 전부 새로운 버전의 컬러 시스템을 사용하도록 연결시켜주는 작업을 진행했다.
Phase1. 컬러 시스템 개편하기
시멘틱 컬러를 추가하자
이전의 팔레트는 채도와 명도만을 고려해, 1:1로 light컬러와 dark 컬러를 만들어져 있었다.
1:1로 대응된 팔레트 ( 예시이미지로 실제로 사용되고 있지 않음 )이미 만들어둔 컬러를 거꾸로 나열한 다음 1:1로 페어링 해서 짜잔 하고 완성되었으면 정말 좋았겠지만, 1:1로 페어링 했을 때 위계가 잘 보이지 않거나 글자와 배경색의 대비가 거의 없어 가독성이 떨어지는 등의 문제 컴포넌트들을 발견할 수 있다.
이때 이러한 문제들을 해결하기 위해 시멘틱 컬러라는 것을 추가하게 되었다.
시멘틱 컬러란 '사용되는 목적에 따라 네이밍 하는 컬러'를 의미한다. 기존에 hex코드로 지정되어 있던 basic color를 사용하되, 사용되는 목적에 따라 컬러 지정이 필요한 경우 색상의 역할에 따라 이름을 한번 더 부여했다. (ex. primary-hover)
시멘틱 컬러가 필요한 경우를 추려 새로운 컬러 팔레트를 만들었는데 이때 무분별하게 시멘틱 컬러가 추가되지 않도록 내부적으로 규칙을 세우는 것이 중요했다.
Variables에 적용하자
컬러 팔레트를 다 만들었다면 적용하는 단계가 필요하다. 우리는 컬러 팔레트를 만든 후 라이트모드와 다크모드 전환을 쉽게 할 수 있다는 플러그인을 이용해 사용을 하기로 결정했으나 플러그인에는 시안을 제작할 때 사소한 몇 가지 불편한 점들이 있었다.
그때 갓그마가 variables이라는 기능을 내놓았고 좋은 타이밍에 이를 적용해 컬러 팔레트를 완성할 수 있었다. 우리는 다음과 같은 방법으로 variables를 사용했다.
막 출시된 지 얼마 되지 않은 기능이라 레퍼런스가 없었고, 튜토리얼 가이드를 보며 어떻게 만들지 구조를 잡아나갔다.
1. 원조가 되는 컬러 팔레트를 하나의 Collection에 추가한다.
2. 시멘틱 컬러 팔레트를 Collection을 만든다.
이때, Value 값을 2개로 만들어 하나는 light 모드로 하나는 dark모드로 세팅한다.
3. 시멘틱 컬러 팔레트에 원조가되는 컬러를 연결한다.
참고가 되었던 가이드 영상 링크를 첨부한다.
https://youtu.be/1 ONxxlJnvdM? si=Ki2 VDtsMP3 n4 dK_5
이렇게 다크모드를 대응하기 위한 뼈대 작업이 완료되었다. 다음 편에는 이 컬러를 가지고 어떻게 제품에 적용했는지, 적용하면서 발생한 문제점들과 해결했던 방법에 대해서 이야기해보려고 한다.
읽어주셔서 감사합니다:)
