컬러를 효율적으로 사용하는 방법
Sketch 파헤치기 / 컬러편
Color Picker혼자 일했을 때 시간적인 여유가 없어서... 꽤 오랫동안 Picker로 컬러를 적용했었다.
픽커로 작업하는게 단기간으로 봤을 때는 업무를 빠르게 쳐낼 수 있다는 장점(?)이 있을 수 있으나, 서비스가 고도화되어 갈수록 픽커를 쓰는게 오히려 작업 능률을 떨어뜨리는 것 같았다.
서비스가 확장되기 전에 디자인 작업 환경을 개선해야겠다는 생각이 들어서 스케치로 여러 테스트를 해보았고 컬러를 효율적으로 사용할 수 있는 방법에 대해 아래와 같은 해결책을 찾게 되었다.
- 컬러 관련 플러그인
- 스케치 라이브러리(Appearance)
첫번째 방법. 컬러 관련 플러그인 사용하기
컬러 팔레트 플러그인컬러 팔레트 플러그인은 도큐먼트에 저장된 단색/그라디언트 컬러들을 .colorpalettes라는 파일로 저장해두고 새 스케치 파일을 열 때 저장한 팔레트 파일을 로드하면 컬러들이 자동으로 불러와진다. 빠른 시간에 시스템 컬러를 가지고 올 수 있다는 장점이 있으며, 컬러 팔레트 파일을 공용 폴더에 올리면 다른 사람들도 쉽게 로드해서 사용할 수 있다.
하지만 어느정도 서비스가 운영되고 있고 디자인 시스템을 만들 생각이라면 플러그인 사용하는 것을 추천하지 않는다. 왜냐하면 컬러 팔레트는 나중에 시스템 컬러가 수정될 경우, 해당 컬러가 사용된 UI들을 하나하나 찾아가면서 바꿔야하기 때문이다. (역대급 똥 노가다 업무 예상됨...)
플러그인 링크 : https://github.com/andrewfiorillo/sketch-palettes
두번째 방법. 스케치 라이브러리에 시스템 컬러 저장해서 사용하기
이 방법은 플러그인을 사용하는 것보다 초반에 시간적인 비용이 더 많이 든다는 단점이 있다.
시간을 들여서 라이브러리 관리를 하는게 좋은지에 대해 진지하게 고민해보았는데 현재 담당하고 있는 서비스가 어느정도 안정화에 접어들기도 했고 디자인 조직도 형성되고 있기 때문에 여러모로 이 방법이 낫다고 생각했다.
컬러를 라이브러리로 관리&사용하기 위해서 나는 아래와 같은 프로세스로 진행을 했다.
시스템 컬러 정리 → 컬러 그룹핑 → 컬러명 설정 → 라이브러리 등록 → 적용
1단계 : 시스템 컬러 정리 & 2단계 : 컬러 그룹핑
우선 서비스에 쓰이는 컬러들을 모두 나열한 다음, 배경이나 라인에만 쓰이는 컬러들을 추가로 그룹핑해준다. 컬러가 많을수록 디테일하게 그룹핑해주는걸 추천한다. 그래야 디자인 작업 시 컬러를 더 빠르게 찾아 사용할 수 있기 때문이다.
컬러를 분류할 때 추가로 알아두면 좋은 것은 Fill Color와 Border Color를 별도로 나누는 점인데 라이브러리에 등록할 때도 위의 이미지처럼 각 스타일에 맞게 구분해놓는 것이 좋다. 왜냐하면 Fill로 등록된 컬러 스타일은 라인 타입의 아이콘이나 버튼 같은 컴포넌트를 표현하지 못하기 때문이다.
시스템 컬러 정리 & 그룹핑3단계 : 컬러명 설정
정리된 컬러들을 바탕으로 컬러 이름을 지어야 하는데 이는 리소스에 네이밍 규칙을 적용하는 것처럼 어떤 컬러이고 어디에 쓰이는지를 네이밍에 넣어주는 것이 좋다. 그리고 스케치는 /로 네이밍을 하면 자동으로 폴더링을 해주기 때문에 이름 지을 때 _(언더라인) 대신 /를 쓰도록 한다.
네이밍 규칙 : 서비스 이름 혹은 컬러/그룹(공통인지, 배경에 쓰이는지 등)/컬러
컬러 네이밍4단계 : Appearance 등록
컬러 이름을 모두 지었다면 이 컬러들을 Appearance에 등록한다.
5단계 : 적용해보기
아이콘이나 버튼 같은 컴포넌트들에 라이브러리 컬러를 적용해보고 이상없는지 확인한다.
텍스트를 제외한 모든 UI는 라이브러리에 등록된 컬러로 적용할 수 있다. (텍스트는 별도로 관리를 해야되기 때문에 이 글에서 제외했다)
스케치 라이브러리로 컬러 적용한 예시이렇게 정리를 해두면 시스템 컬러가 변경되었을 경우 Appearance에서 해당 값만 바꿔주면 그 컬러에 적용된 UI도 자동으로 수정되기 때문에 일일이 바꿀 필요가 없다.
이번에 컬러 라이브러리를 만들면서 느낀 점은 스케치 이해도에 따라 작업 효율성이 커지는 것 같다. (대부분의 프로그램이 그렇겠지만, 스케치는 좀 더 크게 느껴진다...)
앞으로 텍스트, 심볼, 작업에 도움이 되는 플러그인 등에 대한 글을 써보려고 하는데 이를 통해 스케치를 조금 더 이해할 수 있는 시간이 되었으면 좋겠다.
