🌑다크 모드를 만들 때 가장 어려운 점은 사람들이 쉽다고 생각하는 점이다. (The hardest part about building dark mode Config 2022에서 Figma팀이

🌑다크 모드를 만들 때 가장 어려운 점은 사람들이 쉽다고 생각하는 점이다. (The hardest part about building dark mode Config 2022에서 Figma팀이 발표한 내용입니다. 처음에 제목만 보고 '그렇지, 다크 모드 만드는 거 어렵지..' 생각하며 다크 모드 어떻게 만들었나 봤는데 알고 보니 컬러 시스템의 기반을 만들고 재정의 하는 내용이었어요. 너무 좋은 내용이라 세션에 나온 내용을 요약해 글로 작성해보았습니다. 📌요약 처음에는 다크 모드 만드는 거 굉장히 쉬운 줄 알았습니다. 대부분의 디자이너들은 다크 모드를 만들 시 가장 기본적인 접근으로 hue를 전환하고, 다크 모드에 맞게 컬러를 변경하는 방식을 생각합니다. 하지만 이런 방식으로 디자인을 하면, 다크 모드의 5% 정도만 만든 것입니다. 왜냐면 라이트 모드에서의 컬러를 전환해 다크 모드로 만드는 것은 지속 가능한 방법이 아니기 때문입니다. 이렇게 만들 경우 어떤 기능이 추가될 때마다 일일이 하나하나 만들어 줘야 하기 때문인데요. 그 외 hue를 전환하는 방식으로 다크 모드를 만들면 크고 작은 문제점들이 있습니다. 예를 들면 카드 컴포넌트에 그림자가 있다고 할 경우, 다크 모드에서의 카드 그림자 값이 glow 되어 보이는 현상이 있을 수도 있고, 컬러 대비 또한 동일한 hue의 컬러라고 하더래도, 라이트 모드와 다크 모드에서의 시각적 대비가 다르기 때문에 사용자가 느끼는 맥락이 달라 보입니다. 즉, 다크 모드를 만들기 위해선 파운데이션 레벨(기초)부터 다시 시작해야 하는 부분인데요. 때문에 저희(피그마팀)는 컬러부터 다시 작업했습니다. 1️⃣ Color ramps 컬러를 재정의하기 전, 우리는 기존 컬러에서 갖고 있는 문제도 같이 해결하기 위해 가장 본질적인 질문을 했습니다. 첫 번째로는 'What hue do you need?'로 기존 컬러 시스템의 Core hue를 정리하려 했고, 두 번째로는 'how relatively light or dark do you need that hue to be?'로 라이트 모드와 다크 모드에 시각적 대비가 맞는 컬러를 제작하려 했습니다. 이 두 가지 질문에 답할 수 있는 컬러를 제작하다 보니 컬러의 개수가 많아졌고, (기존 35개의 컬러칩에서 190개의 컬러칩으로 늘어남) 그러다 보니 디자이너가 어떤 상황에 어떤 컬러를 써야 하는지 모르는 이슈가 생겼는데요. 우리는 이 문제를 해결하면서 동시에 더 많은 컬러도 제공할 수 있는 방법을 위해 다음 방법을 진행했습니다. 2️⃣Semantic Colors 바로 시멘틱 컬러를 사용하는 것인데요. 네이밍을 정의하는 데 있어 크게 Semantic과 Atomic 방식이 있습니다. Atomic 방식이란 'red-600', 'gray-100'처럼 컬러의 hue와 shade, 즉 컬러 그 자체를 이름에 표기하는 것이고, Semantic 방식이란 'bg-danger', 'text-brand'처럼 그 컬러가 사용되는 상황을 이름에 표기하는 방식입니다. Semantic 방식으로 컬러를 정의하는 건 예외 케이스를 없애는데 굉장히 좋은데요. 예를 들어 피그마(Figma)에서는 블루 컬러가, 피그잼(Figjam)에서는 보라 컬러가 브랜드 컬러입니다. 만약 블루 컬러를 'color-blue'로 표기한다면, 피그잼(Figjam)에서는 이 'color-blue'를 일일이 'color-purple'로 바꿔줘야겠죠. 그래서 이를 시멘틱한 방식으로 'color-brand'로 두 컬러의 이름을 정의한다면 색상이 다르더래도 각 제품의 브랜드 컬러로 사용되는 컬러를 그대로 사용할 수 있습니다. 즉, color 그 자체로의 네이밍을 짓는 게 아닌 역할로 짓는 거죠. 3️⃣Implementation 자 그럼 컬러 팔레트도 있고 역할에 대한 네이밍 정의도 했고 이제 제품에 적용하기만 하면 됩니다! 하지만 적용하려고 하니 피그마에는 너무나도 많은 컬러가 쓰이고 있었습니다. (5000개 넘는 컬러를 업데이트가 필요) 이처럼 업무의 범위가 크기에 우리는 'Dark Mode Week'를 만들어서 다양한 이해관계자들이 해당 업무를 진행했는데요. 이 분들이 업무를 빠르게 작업할 수 있게 첫 번째로는 우리가 작업한 내용을 문서로 정리하고, 두 번째로는 컬러의 레거시 토큰(Hex code)을 입력했을 시, 어떤 토큰(semantic color name)을 쓰면 되는지 제안해주는 피그마 플러그인을 만들었습니다. 이렇게 새로 만든 컬러를 제품에 적용하는 과정에서 발생하는 버그를 고치며 더욱 견고한 Color ramps와 Semantic colors로 정의할 수 있었습니다. 이 방식으로 다크 모드를 위한 컬러를 정의하면, 어떤 모드를 추가한다고 하더래도 지원 가능한 형태로 컬러가 만들어집니다🎉