다크 모드 적용기(2)
다크 모드 적용기 2탄 : 컬러 시스템을 구축하자
지난 글에서는, 다크 모드의 당위성에 대한 이야기를 다루었다. 나아가, 여러 가지 레퍼런스들을 통해 다크 모드를 위한 최소한의 의사결정 과정들에 대한 내용을 기술했다.
이번에는 컬러 시스템에 대한 이야기를 하고자 한다. 다크 모드를 위한 환경을 갖추고자 하니 단순히 컬러를 정의하고 변수화시켜 사용하는 것 외에 추가적으로 고려해야 할 부분이 많이 생겼다. 프로젝트를 진행하면서 시멘틱 컬러라는 개념의 필요성을 몸소 느끼며 시도해본 여러 가지 것들을 글로서 정리해보려 한다.
문제 인식
여태까지는 보통 한 컬러는 한 변수명을 가졌고, 디자이너가 컬러를 식별하기 쉬운 이름으로 컬러명을 지었다. 개발자도 디자이너와 협의한 변수명을 Zeplin이나 Figma에서 참고해서 작업을 진행하면 되었었다.
하지만 다크 모드를 고려하기 시작하면서 문제가 생겼다. UI에서의 한 역할을 하는 컬러에 대해서 라이트 모드와 다크 모드 컬러를 짝을 맞춰야 하기 때문이었다. 즉, 컬러 페어링을 하는 작업이 필요해졌다.
처음에는 단순히 컬러에 대한 페어링 작업을 진행하면 된다고 생각했다. 아래 사진처럼 말이다.
라이트/다크 컬러를 1대 1 페어링을 진행하였다.그런데, 라이트 모드로 디자인 후 페어링 된 컬러로 스위칭해보니 무언가 이상함을 느꼈다. 라이트와 다크 모드의 컬러가 무조건적으로 1대 1 매칭이 되지 않는다는 점이었다. 라이트 모드에서는 한 컬러가 두 가지 역할을 수행했는데, 다크 모드에서는 각각 다른 컬러를 사용해야 하는 상황이 생기는 것이다. 예를 들면 아래와 같은 상황이다.
바텀 시트의 레이어 구분이 전혀 되지 않는 상황 발생위 사진은 처음에 페어링한 색 그대로 다크 모드를 적용한 모습이다. 이처럼 바텀 시트가 올라오는 상황에서 라이트 모드에서는 명확히 레이어가 구분되는 반면 다크 모드에서는 거의 구분되지 않는다. 구분감을 주려면 조금 더 밝은 회색을 사용해야 한다. 그러려면 아래처럼 #ffffff는 #121214와 페어링 되어있으면서, 조금 더 밝은 회색인 #202027과도 페어링 되어 있어야 한다.
기존 1대 1 매칭 된 컬러 이외의 새로운 페어링이 필요해졌다.
background_elevated로 페어링된 컬러를 사용하면 구분 감을 줄 수 있다.이로서 단순한 컬러 팔레트 개념을 넘어서 추가적인 시맨틱 컬러(Semantic Color)라고 하는 개념의 필요성을 느낀 것이다. 그렇다면 시맨틱 컬러는 정확히 어떤 개념이고, 우리가 툴로서 어떻게 두 컬러 개념을 잘 활용할 수 있는지 정리해보자.
시맨틱 컬러(Semantic Color)란?
시맨틱 컬러는 사용되는 목적과 UI에 적용되는 상황에 따라 네이밍하는 컬러이다. UI에 적용되는 상황에 맞게 의미론적인 이름을 부여(ex. background, divider, txt_primary)하며, 여러 상황에 대해서 컬러 팔레트와 치환되도록 사용하면 다크 모드에 대응하기 편하게 만들어 준다.
컬러 팔레트와 치환? 그게 무슨 소리지?
이번 프로젝트의 컬러 팔레트의 모습컬러 팔레트는 말 그대로 색 모음이다. 단순히 어떤 한 Hex 코드를 식별하기 쉬운 이름(ex. grey200, red50 등)으로 네이밍하고 라이트 모드와 다크 모드를 페어링한 거라고 보면 된다. 굳이 의미를 부여하지 않아도 충분히 컬러 팔레트 선에서 다크모드 대응이 어렵지 않은 컬러들도 있다. 그래서 무작정 다 시멘틱 컬러를 사용하는 게 아닌, 컬러 팔레트와 시맨틱 컬러를 혼용하여 사용하려고 했다.
2단 치환을 통해서 시맨틱 컬러를 적용하자!다시 말하면, 1대 1 매칭 시켜 둔 컬러 팔레트도 사용하되 그 위에 추가적으로 시멘틱 컬러가 필요하다고 판단되는 고리만 한번 더 엮어주는 방식을 택했다. 컬러 팔레트만으로도 사용할 수 있고, 의미론적인 이름 혹은 페어링이 필요한 상황에서만 시멘틱 컬러를 얹는 형태이다.
그래서 나는 시멘틱 컬러를 활용할 것들을 추려 내야 했다. 이번 프로젝트에서는 아래 6가지 정도만 정의되면 충분하다고 생각했다
6가지 시맨틱 컬러를 정의했다.이렇게, 컬러 팔레트의 컬러들을 목적/사용에 다시 한 번 페어링하여 시맨틱 컬러를 정의하고 나면 컬러 팔레트만으로는 커버되지 않았던 라이트/다크 모드 스위칭이 완전히 커버되기 시작했다. 아직 UI 자체가 매우 간단하기 때문에 저 정도면 충분하지만 앞으로 추가적으로 시맨틱 컬러를 정의하는 일이 생길 것이다. 시맨틱 컬러는 컬러 팔레트와 독립적으로 정의하면 되기 때문에 이후 확장성에도 전혀 문제가 없다.
디자인 툴에서의 사용
이번 프로젝트에서는 나는 디자인 툴로 Figma를 사용했다. 막상 컬러들을 규칙에 따라 정의하고 나니 실제 디자인 작업은 어떻게 진행하고 툴안에서 컬러를 어떻게 저장/관리해야 하는지 고민하기 시작했다.
파일 분리우선 위처럼 실제 시안을 관리하는 파일과 스타일을 관리하는 파일을 분리했다. 그리고 스타일을 관리하는 파일은 한번 더 다크 모드와 라이트 모드를 분리했다.
라이트/다크 스타일들을 관리하는 각각의 파일(왼쪽은 light, 오늘쪽은 dark)Figma는 같은 Hex코드를 두 가지 이름으로 저장할 수 있다. 그래서 위의 이미지처럼 한 파일에 컬러 팔레트와 시맨틱 컬러를 모두 저장할 수있다. 두 파일에 각각의 테마 기준으로 컬러를 모두 저장했다.
스케치(sketch)나 제플린(Zeplin)에서는 아직 한 Hex 코드에 두 이름을 지정할 수 없다. 그렇기 때문에 컬러 팔레트와 시멘틱 컬러를 동시에 관리하기 매우 까다롭다. 참조한 글 중 스케치와 제플린에서 다크 모드를 대응하는 글 중 잘 정리된 글이 있어서 공유한다.
[SOCAR FRAME 만들기 #2] 다크 모드 받고 디자인 시스템 더블로 가! (2탄)
https://tech.socarcorp.kr/design/2020/07/22/dark-mode-02.html
그럼 작업을 할 때 라이트/다크 모드 두 번 작업을 해야 할까?
페어링을 정확히 지정했다면 굳이 라이트 모드와 다크 모드를 따로 작업할 필요가 없다. 둘 중 한쪽 테마로만 작업을 하고 페어링된 컬러로 스위칭만 하면 되기 때문이다. 그래서 한쪽으로 작업하고 한 번에 스위칭할 수 있는 플러그인을 찾았다. Themer라는 플러그인이다.
테마 스위칭을 해주는 Themer라는 플러그인이다.디자인 파일에는 라이트 테마 컬러만 불러와서 작업을 진행하고, Themer로 다크 모드로 한 번에 스위칭할 수 있도록 했다. 그쪽이 디자인 시에 추후 혼선을 줄이기도 편했다. 개발자도 페어링만 그대로 잘해두면 디자인파일의 컬러 변수명을 그대로 참조하면 되고, 마찬가지로 한 쪽 기준으로만 작업하고 한 번씩 스위칭하면서 모니터링하면 된다. 뭔가 디자이너 혹은 개발자가 부자연스러운 부분이 있다고 판단되면 상의하여 시맨틱 컬러를 추가하면 된다.
gif를 클릭해서 확인하세요.Themer 사용에 대한 가이드는 아래와 링크를 참조하면 되겠다.
https://www.youtube.com/watch?v=aM8SkksBy3Y&feature=youtu.be
마무리하며,
두 번의 글로서 다크 모드에 대한 글을 정리했다. 처음 적용해보는 부분이라 이번 글을 작성하면서 나 스스로도 많이 정리가 된 듯한 느낌이다. 디자인 영역 또한 개발 영역의 발전 속도 못지않게 빠르게 발전하고 있다. 변화에 니즈에 맞춰서 대응할 수 있는 대비를 하는 것은 매우 중요하다. 그래서 더욱 보다 체계적이고 기술적으로 UI를 접근하려는 시각의 필요성을 느낀다. 그래야 다양한 환경에서 다양한 디바이스를 사용하는 유저들에게 유연하게 대응할 수 있기 때문이다.
최근의 관심사가 그렇다 보니 그 관련한 글(그리드 시스템, 다크 모드 등) 위주로 글을 썼던 것 같다. 너무 기술적인 부분에 집중한 것 같아 앞으로는 조금 UX 관점에서 디자인에 대한 의사결정이나 설계를 하는 내용(User Testing, UX 방법론 등등)에 대해서 글을 써보려고 한다.
아직 공부할게 많아서 다행이다.
