공유가 쉬운 컬러 시스템 만들기
유연한 컬러 체계를 만들고 효율적으로 협업하기
컬러는 디자이너의 가장 강력한 무기 중 하나입니다. 브랜드의 고유한 개성을 드러내는 중요한 수단이며, 인터페이스 디자인이 점점 플랫해지면서 컬러의 중요성은 더욱 커지고 있습니다.
서비스 안에서 제한된 숫자의 컬러만 사용하면 브랜드 인지에 더욱 효과적이며 작업 효율성도 극대화됩니다. 사실 대부분의 디자이너는 이러한 사실을 이미 잘 알고 있어서 수십 가지의 컬러셋을 만들어 사용하고 있을 것입니다.
그런데 정해진 컬러값을 다른 디자이너에게 전달하고, 디자이너와 개발자가 같은 컬러 이름으로 소통하고, 개발자가 컬러를 어려움 없이 코드에 적용하려면 약간의 노력이 필요합니다. Sketch와 Zeplin이 모든 역할을 해주는 것은 아니기 때문입니다.
컬러셋을 만들어서 디자이너들과 개발자들이 쉽게 컬러를 공유할 수 있는 체계를 만들려면 어떻게 해야 할까요? 마이리얼트립 팀에서 이러한 체계를 만들었던 사례를 공유하려고 합니다.
Step 1. 유연한 컬러 네이밍 룰 만들기
먼저 컬러를 체계적으로 관리할 수 있는 네이밍 룰을 정의해야 했습니다. 디자이너들의 가장 큰 니즈 중 하나는 한 컬러 안에서 다양한 중간 단계를 사용하고 싶다는 것이었습니다. 컬러 수가 너무 적으면 표현의 제약이 커지므로 회색 한가지 색 안에서도 배경과 선 등에 불편함 없이 사용할 수 있도록 많은 단계의 컬러를 사용하고 싶은 것이었죠.
타사의 디자인 시스템을 찾아보니 생각보다 다양한 체계가 있었습니다.
- brand-01, text-01, hover-primary
앞에 요소의 이름을 붙이는 경우, text-01을 배경에 사용하고 싶다면 이름과 사용처가 맞지 않는 문제가 있습니다. - Light Purple, Lighter Purple, Dark Blue, Darker Blue
인간적인 이름을 붙이는 경우는 이해가 쉬운 대신, 컬러의 단계를 많이 확보하려고 한다면 이름을 짓기가 너무 어렵습니다. - Gray 1, Gray 2, Gray 3
컬러 뒤에 1자리 숫자를 붙이는 경우는 이름이 짧은 장점이 있지만 추후 컬러를 추가하는 경우까지 고려하면 유연한 구조는 아니었습니다.
Material Design은 주요 컬러 이름 뒤에 세 자리 숫자를 붙이는데, 100~900으로 컬러별로 9단계를 확보할 수 있고, UI 디자인 시 자주 사용되는 밝은 계통의 10~50단위 컬러를 추가할 수 있으므로 유연한 구조라는 생각이 들었습니다. 이에 저희는 Material Design과 비슷한 방식으로 컬러를 관리하기로 했습니다. 주요 컬러로 Blue, Gray, Green, Yellow, Red 다섯 가지를 정하여 각각 뒤에 50~900 숫자를 붙여서 컬러셋을 만들었습니다. 이후에 UI 디자인을 하면서 60, 80 등 중간단계를 추가하였습니다.
Step 2. Sketch Palette 파일 만들기
Sketch 사용자끼리 컬러를 공유하려면 어떻게 해야 할까요? Sketch Library는 디자인 시스템 구축 시 매우 유용한 기능이지만 심볼 컴포넌트만 공유할 수 있는 단점이 있습니다. (Sketch 51부터 Text Style, Layer Style도 공유할 수 있게 된다고 합니다) Photoshop, Illustrator 등 Adobe 계열의 프로그램은 ASE 파일로 컬러칩을 공유할 수 있지만, Sketch는 그러한 컬러칩 공유 기능이 없습니다. 대신 Sketch Palettes라는 플러그인을 사용하면 .sketchpalette 파일로 디자이너들끼리 컬러칩을 공유할 수 있습니다.
Sketch Palettes를 사용하여 .sketchpalette 파일을 만드는 절차는 다음과 같습니다.
- 컬러칩을 Global Preset에 하나씩 등록한 후, Plugins > Sketch Palettes > Save Palettes…를 선택하여 .sketchpalette 파일을 생성합니다.
- 다른 디자이너는 생성된 파일을 Plugins > Sketch Palettes > Load Palettes…를 눌러서 Global Preset을 선택하면 손쉽게 컬러칩을 등록할 수 있습니다.
- 이 컬러 파일을 팀 클라우드 또는 Git에 올리면 모두가 똑같은 파일을 사용할 수 있습니다. 컬러를 변경, 추가하는 경우에는 파일을 수정한 후 팀원에게 알려주면 됩니다. 만약 Slack을 사용한다면 자동으로 알림이 가게 할 수도 있겠죠.
Step 3. Zeplin용 JSON 파일 만들기
아무리 컬러칩을 잘 정의해두었더라도 개발자가 Zeplin을 통해 컬러값을 확인할 때 blue-500이 아닌 #2b96ed과 같은 Hex 값으로 코드에 반영해둔다면 코드 작성과 유지보수 비용이 다시 늘어나게 될 것입니다. 물론 Zeplin Styleguide에서 컬러 하나하나 이름을 지정하면서 등록하면 제대로 된 컬러 이름을 확인할 수 있지만, 모든 컬러 이름과 값을 하나씩 대조해보면서 각 컬러를 등록하는 일은 굉장히 번거롭습니다. 프로젝트를 자주 새로 만든다면 그 번거로움은 배가됩니다.
여기가 약간 재밌는 부분입니다. Zeplin에서 컬러를 등록하면 자동으로 적절한 이름을 지어주는데요, 이 기능을 반대로 활용하면 우리가 정한 이름으로 자동으로 등록되게끔 할 수 있습니다. Zeplin이 자동으로 이름을 지어주는 원리는, 내부의 colors.json에 미리 정의된 Hex코드와 컬러 이름이 들어있어서 해당 Hex코드를 등록할 때 그 이름을 가져오는 것입니다. 따라서 이 파일을 Hex코드와 우리 컬러 이름으로 바꿔두면 컬러값을 등록할 때 자동으로 우리가 정한 이름으로 가져오게 됩니다!
디자이너들은 약간 번거롭지만 새로운 프로젝트를 만들 때 컬러를 한 번만 등록해주면 자동으로 우리가 정한 컬러 이름으로 지정되고, 개발자들은 편리하게 컬러값을 확인할 수 있습니다.
아, 그리고 Zeplin이 업데이트될 때마다 colors.json 파일이 원상복구되므로 이것을 다시 교체해줘야하는 귀찮음도 약간 있습니다.
저희는 Design System이라는 프로젝트에 모든 컬러를 등록해두고, 새로운 프로젝트를 만들 때마다 이 컬러값을 한번에 가져옵니다. 그러면 컬러셋을 하나씩 등록하는 노력도 딱 한 번만 하면 됩니다!
colors.json 파일의 위치는 응용 프로그램 > Zeplin.app > 마우스 오른쪽 클릭하여 ‘패키지 내용 보기’ 선택 > Contents > Resources 입니다.
Step 4. Web/iOS/Android 컬러 변수 파일 만들기
개발자가 실제로 코드에서 컬러를 활용하려면 컬러 변수를 모아놓은 파일이 필요합니다. 플랫폼별로 아래와 같은 파일 형식을 사용합니다.
- Web: SCSS 또는 Less, Stylus
- iOS: CLR (iOS 11 이상), Objective-C 또는 Swift (iOS 9 이상)
- Android: XML
Web
CSS를 그대로 사용하신다면 Variable을 이용하는 방법도 있지만, IE가 아직 지원하지 않아서 사실상 사용하기 어렵습니다. 따라서 Sass, Less, Stylus 등의 CSS Preprocessor를 사용해야만 컬러를 변수로 활용할 수 있습니다. 저희는 Sass를 사용하고 있는데요, 아래와 같이 SCSS 파일을 만들어서 개발자에게 전달해주시면 컬러를 이름으로 쉽게 사용할 수 있습니다. JSON 파일과 비슷하게 생겨서 만들기 쉽습니다. 다른 CSS Preprocessor를 사용하더라도 거의 문법이 유사하므로 환경에 맞게 파일을 만드시면 됩니다.
iOS/Android
만약 작업하고 있는 iOS Application에서 iOS 11 이상을 지원한다면 macOS의 기본 컬러 팔레트 파일인 CLR파일을 만들어서 전달하면 되지만, iOS 9 이상을 지원한다면 개발환경에 따라 Objective-C 또는 Swift 파일로 만들어서 전달해야 합니다. CLR 파일은 직접 Apple 기본 컬러팔레트에서 만들거나, Adobe 계열 프로그램에서 ASE파일을 만든 후 CLR파일로 변환하는 방법도 있습니다. Objective-C, Swift 파일은 SCSS와 마찬가지로 헤더/푸터를 제외하고는 컬러 변수를 나열한 형태입니다.
Android의 경우 SCSS와 유사한 형태로 XML파일을 만들어주시면 됩니다.
컬러 시스템을 만든 이후
이러한 과정을 거치고 난 뒤 디자이너와 개발자가 컬러를 지칭할 때 쓰는 언어가 같아졌습니다. Zeplin과 개발 툴 모두에서 같은 컬러 이름을 사용하니 컬러를 잘못 적용하거나 조금 다른 컬러값 때문에 되묻는 경우가 없어졌습니다. 물론 디자이너들도 의식적으로 컬러칩에 없는 컬러는 사용하지 않게 되었습니다. 이로써 브랜드 인지는 강화되고 작업 효율성은 높아졌습니다.
처음 시스템을 만들려면 조금 번거롭지만, 컬러는 변화가 그리 많지 않으므로 한 번 작업해두면 추후 별다른 노력이 들지 않습니다. 만약 컬러 파일 하나만 만들어서 다른 파일로 쉽게 변환이 가능하면 좋겠지만 아직 그런 툴이 없어서 아쉽습니다.
마지막으로 저희가 사용하고 있는 각 컬러 파일들을 올려두었으니 참고가 되었으면 좋겠습니다.
