티스토리

최근 피그마 Config 행사 이후로 기능이 많이 추가되면서 개인적인 회고 및 추가 기능을 파악하는 시간을 가져보았다. 그러다가 피그마 공식 유튜브에서 디자인 시스템의 컬러 관련 디자인 토큰 운영에 관한 영상을 보면서 상황이 된다면 시도해보고 싶은 방법이 있었다. 그래서 이번에는 디자이너가 속한 프로덕트 및 조직의 상황에 맞춰 적합한 컬러 관리 방법을 정리해보려고 한다.

1. 그냥 스타일이나 변수 지정 없이 Hex, HSL 코드로만 사용하기

이건 절대 비추천이다. 혹여나 이렇게 하는 디자이너분이 계시다면 본인도 괴로울 것이고 개발자 분들은 분명히 괴롭다.

2. 컬러 목적 별로 스타일 및 변수 지정하기

개인적으로는 TailwindCSS 스타일을 선호하는데 주로 Surface, Primary 컬러를 변수로 지정하고 사용한다. 가장 간편하긴 한데 위의 이미지를 보면 라이트 모드, 다크 모드의 컬러값이 서로 반전되어 있다. White의 라이트 모드값은 #FFFFFF, 다크 모드값은 #000000인데 이건 Surface, Primary 값들도 마찬가지이다.

여기서 단점이 발생하는데 라이트 모드, 다크 모드를 작업해 본 디자이너라면 공감을 하겠지만 이렇게 단순히 반전만 시켜놓으면 다크 모드에서 분명히 어색한 부분이 발생하게 된다. 그렇다고 예외를 준다고 컬러 변수를 깨버리고 Hex, HSL 코드로 입력하면 디자인 시스템을 사용하는 의미가 사라진다. 아래와 같은 상황에서는 추천한다.

• 디자인하는 프로덕트가 라이트 모드, 다크 모드 전환없이 무조건 하나만 사용하는 경우
• 모드 전환을 지원하더라고 디자인 요소가 단순하고 굉장히 높은 퀄리티의 디자인이 요구되지 않는 경우
• 다크 모드 구현 시 퍼블리셔가 재량으로 컬러를 임의로 조절이 가능한 경우

3. 컴포넌트에서 라이트 모드, 다크 모드 구분하기

2번의 방식에서 변형을 주었는데 이렇게 관리할 때의 장점은 일단 컴포넌트를 만들고 컬러를 지정하는 게 빠르고 간편하다. 단점은 컴포넌트를 이미지처럼 묶었을 때 라이트 모드는 흰 배경, 다크 모드는 어두운 배경에서 보고 확인하는 게 좋은데 여기서는 그렇게 하지는 못한다. 게다가 피그마에서 제공하는 섹션 및 프레임 별로 제공하는 변수 모드를 중복해서 사용해야 하는 등 억지로 가능은 한데 추천하지는 않는다. 아래와 같은 상황에서는 추천한다.

• 디자이너가 컴포넌트 관리 및 구조적 디자인에 어느 정도 능숙하고 프로덕트에서 라이트 모드, 다크 모드 지원이 필요한 경우
• 조직에서 디자이너 리소스가 부족하여 디자인 시스템 자체에 많은 시간 투자가 어려운 경우

4. 컴포넌트 별로 컬러 변수 구성 하기

이 방식은 피그마 공식 유튜브에서 소개된 UI 디자이너가 컬러를 설정한 방식이다. 일단 피그마 기능도 이렇게 작업하는게 효율적으로 구성되어 있다. 이렇게 하면 위의 2, 3번의 단점이 없어지는데 라이트 모드, 다크 모드에 따라 컴포넌트 개별적으로 컬러 구성이 가능하다.

장점은 체계적이고 라이트 모드, 다크 모드 변경 시에도 디자인 퀄리티나 일관성을 유지하는데 유리하다. 그리고 피그마에서 제공하는 섹션 및 프레임에서 모드 변경 클릭 한 번으로 라이트 모드, 다크 모드 변경이 쉽게 가능하다.

단점은 굉장히 명확한데 리소스가 많이 들어간다. 변수 설정부터 지정, 명세까지 간단한 컴포넌트도 꽤 많은 작업이 들어간다. 게다가 퍼블리셔 입장에서도 변수 자체가 너무 다양해서 작업하기가 어려울 것이다. 하지만 체계적이고 장기적인 관점에서 디자인 시스템을 유지하려고 한다면 가장 좋은 방식이라고 생각한다. 아래와 같은 상황에서는 추천한다.

• 디자인 시스템 관리에 필요한 인적, 시간 리소스가 충분한 경우
• 라이트 모드, 다크 모드 지원이 완벽해야하고 디자인 퀄리티가 프로덕트에서 중요한 경우
• 조직의 디자인에 대한 관점이 후진적이지 않은 경우
• 피그마를 활용한 디자인 시스템 관리가 지속적으로 가능한 시니어 디자이너가 있는 경우

마무리

가장 마지막에 소개된 내용이 무조건 좋거나 최고의 선택은 아니다. 앞서 말했듯이 조직 및 디자인을 하는 환경에 맞춰 디자이너가 결정해야 한다. 이번에 다룬 컬러는 디자인 시스템 내에서 작은 부분이라고 생각한다. 사이즈 및 간격 정책, 타이포그래피 같은 기본적인 부분은 튜토리얼 수준이며, 컴포넌트 관리가 본격적인 부분이다. 다만 컬러, 사이즈, 간격, 타이포그래피 같은 디자인 토큰은 디자인 시스템의 토대이기 때문에 탄탄해야 한다고 생각한다.