스케치, Sementic Color 적용기
안녕하세요! 왓섭에서 디자인 팀장으로 근무하고 있는 이태윤입니다.
정기 지출 관리 플랫폼인 왓섭은 프로덕트 디자인에 스케치를 사용하고 있습니다. 다른 툴도 여러 장점이 있지만 굳이 스케치를 사용하는 이유는, 소규모 인원이 최대한의 결과물을 도출할 수 있도록 사전에 협의된 컴포넌트 라이브러리의 적극적인 활용에 있습니다. 흔히들 디자인 시스템이라 부르는 이 컴포넌트 라이브러리는 왓섭의 전체적인 디자인과 개발에 투입되며 그 역할을 톡톡히 해내고 있습니다.
이번 스케치(사실은 꽤나 지났지마는) 업데이트에서 새로 추가된 컴포넌트 뷰와 컬러 라이브러리가 공개되었는데요, 제가 특히 집중했던 부분은 컬러 라이브러리입니다. 왓섭에서 적용하고자 준비 중이었던 시멘틱 컬러를 적용하기에 무엇보다도 좋은 업데이트였거든요.
시멘틱 컬러가 뭔데요?
시멘틱을 영어로 직역하자면 의미론적이라는 뜻입니다. 여기서 눈치 빠른 분들은 어느 정도 눈치를 채셨을 텐데, 시멘틱 컬러는 바로 기존의 색상에 따른 이름 대신 색상의 역할에 따라 이름을 부여하는 방식을 의미합니다. Blue500 대신 PrimaryColor과 같은 형식으로 말입니다.
시멘틱 컬러를 이용하면 색상 자체가 목적을 기반으로 설정되기에, A/B 테스트를 진행하거나 다크 모드와 같은 별도 테마를 적용하기에 매우 적합한 상태가 됩니다. 그만큼 유지보수가 매우 간단하다는 거죠! 하지만 시멘틱 컬러에는 약간의 단점이 있습니다. 바로 시멘틱 컬러 자체만 활용하기엔 , 서비스의 크기만큼 컬러 종류가 다양해지기에 썼던 색상을 다시 계속해서 선언해야 하는 문제가 발생합니다. 어라…? 이 색상 어디서 썼던 것 같은데…
그래서 왓섭에서는 이러한 단점을 보완하기 위해, 전통적인 색상 기반의 컬러 네이밍과 시멘틱 컬러를 함께 사용하고 있습니다. 우선 서비스에서 사용할 컬러 팔레트를 먼저 선언한 뒤, 이 팔레트의 컬러를 다시 한번 시멘틱 컬러로 선언합니다. 이렇게 하면 매번 새로운 컬러를 선언하지 않아도 통합적인 컬러 관리와 시멘틱 시스템을 제대로 활용할 수 있습니다.
스케치 파일에 시멘틱 컬러 적용하기
사실 저로서 크게 할 일은 없습니다. 기존에 선언되었던 Document Color을 스케치에서 자체적으로 컬러 라이브러리로 이전시켜주었기 때문에 그냥 이름을 정리하는 정도로 마무리되었습니다. 그래도 그 구조가 궁금하신 분들이 계실 수 있으니 조금만 설명을 이어나가 보겠습니다.
컬러 팔레트 선언하기
우선 서비스 전반에서 이용하려 하는 컬러 팔레트를 선언합니다. 어디서나 무난하게 이용할 수 있는 무채색 톤을 10, 20, 30,… , 100 총 10단계에 걸쳐 선언하고, 서비스의 주요 색상인 Dodger Blue 또한 10개의 명도 단계를 통해 선언합니다. 이후로 주요 색상과 함께 사용할 유채 색상을 선언합니다.
왓섭은 자칫 복잡해질 수 있는 구독 정보를 명확하게 전달하기 위해 유채색의 사용을 최대한 배제하고, 동시에 약간의 명도 차이만을 이용해 서비스를 꾸며나가고 있습니다. 그렇기에 무채색의 경우 조금 더 세밀한 조정을 위해 05 단계를 추가하여 총 11단계로 구성하고, 주요 색상인 Dodger Blue와 잘 어울릴 수 있도록 약간 푸른 톤을 띄는 무채색인 Cool Gray를 추가합니다.
왓섭의 경우, 정해진 브랜드 컬러의 활용이 마케팅 팀을 포함한 전사가 함께 논의한지라, 실제 서비스에서 활용할 가능성이 극히 낮은(예를 들자면 브라운…) 색상도 함께 선언되었습니다.
이제 정해진 색상들을 모두 스케치 컬러 라이브러리에 등록합니다. 등록 과정에서 무채색은 Gray, 유채색은 Tint로 별도로 한 번 그룹화를 해 주었습니다. 각 색상을 그룹화하는 과정은 임의로 진행해도 무방하지만, 되도록 컬러의 특성 위주로 진행하는 것이 이후 활용에서 많이 편리하게 이용할 수 있습니다.
시멘틱 컬러 선언하기
이제 방금 선언된 컬러 팔레트를 이용하여 시멘틱 컬러를 선언하면 됩니다. 여기서 조금 다른 점은, 시멘틱 컬러는 컬러 팔레트를 이용하지 않는다는 점입니다.
컬러 라이브러리 기능이 출시하기 전에는 서비스 전반에 활용되는 컬러는 스케치 스타일로 관리되었습니다. 바로 이 스케치 스타일을 컬러 라이브러리와 함께 활용하는 방식으로 시멘틱 컬러와 컬러 팔레트를 동시에 활용할 수 있습니다. 한 번 버튼으로 예를 들어 보겠습니다.
간단한 버튼 컴포넌트를 하나 생성합니다. 백그라운드 레이어를 선택하고, Fill 속성으로 아까 선언한 blue60을 적용합니다.
그리고 방금 Fills에 추가한 색상을 같은 우측 사이드바의 Appearance → Create Style을 통해 별도 스타일로 생성합니다. 이때, 스타일 이름을 Button / Primary / Background / Active와 같이 시멘틱 컬러로 구성합니다. 이름을 붙이는 규칙은 이후 컴포넌트 관련 글에서 다시 설명하겠지만, 살짝 설명드리자면 [컴포넌트 명] / [위계] / [요소] / [상태]로, 아래로 내려갈수록 더욱 자주 변화하는 설정을 하위 폴더로 구성하였습니다.
이러한 구조를 통해서 스케치 자체 라이브러리로 시멘틱 컬러와 컬러 팔레트를 효과적으로 적용할 수 있습니다. 물론 이런 구조는 원본 컬러 팔레트에 수정이 가해질 때마다 일일이 시멘틱 컬러를 업데이트해야 한다는 단점이 있기는 하지만, 이 또한 새로 추가된 컴포넌트 라이브러리에서 한 번에 일괄 업데이트가 가능하기에 큰 문제는 되지 않습니다.
애초에 브랜드 컬러 팔레트를 업데이트하는 일이 그리 흔한 일이 아니기도 합니다. 휴…
마치며
이전부터 글을 발행해보고자 하는 목표가 있어 여러 글을 지우고 쓰기 반복하며 고민하던 중, 새로 업데이트된 스케치 컬러 라이브러리에 대한 글이 흔하지 않은 듯하여 첫 번째 주제로 작성해보았습니다. 앞으로 이렇게 하나씩 주제를 잡아가며 왓섭에서 사용하고 있는 디자인 시스템을 조금씩 소개해보려 합니다. 부디 글이 누군가에게는 도움이 되었기를 바랍니다.
그럼 다음 글에서 뵙겠습니다!
