스케치 레이어 스타일 라이브러리
Sketch Layer Style Library
레이어에 적용하는 색, 선, 그라데이션, 이미지, 필터, 그림자 등을 레이어 스타일로 합친 라이브러리입니다. 스케치에서 레이어 스타일을 적용하는 방법은 Layer Style, Color palette, Symbol가 있으며 여기서는 주로 레이어 스타일과 심볼을 이용합니다. 되도록 Craft와 같이 자체적으로 처리되는 플러그인보다 Json 데이터로 스케치 내부에서 작동하는 방향으로 제작 중입니다.
색, 선, 그림자, 이미지, 그라데이션을 기본으로 나누며 각 스타일에 따라 세부 항목이 나뉘었습니다. 서비스 하나를 설계할 때 필요한 최소한의 스타일을 모았습니다. 필요에 따라 각 항목을 확장해 나갈 수 있습니다.
Color
Primary, Secondary: 색이 필요한 상황에서 사용할 색입니다. 기본적으로 밝은 색(300) 기본색(500) 어두운 색(700)을 사용합니다.
Mono: 색보다 다양한 단계를 사용합니다. 000(검은색) ~ 999(흰색) 단계입니다.
Misc: 주색과 무채색 외에 색으로 성공, 실패와 같은 정보를 전달할 때 쓰입니다.
Border
Rectangle/Round: 다양한 영역에 사용되는 박스 형태로 주로 각진 네모와 둥근 네모를 사용합니다.
Black/Grey/Grey-filled/misc: 선색과 배경 색이 나뉩니다.
Shadow
01/02/03: 카드를 배치할 때 공간감을 표현하기 위한 그림자입니다.
Img
Rectangle/Oval: 이미지가 들어가는 기본형인 각진 네모와 프로필 등에 쓰이는 원형 이미지를 사용합니다.
Dimmed/Blur: 이미지 위에 적용되는 필터입니다.
Gradient
Warm/Cool/Mono: 그라데이션은 다양한 색이 담길 수 있기 때문에 색의 큰 개념인 따뜻함/차가움/무채색으로 나눴습니다.
사용법
1. Sketch - Preferences - Library - Add Library... 에 DesignCompass-Layerstyle을 추가합니다.
2. Automate Sketch 플러그인 설치 (다양한 기능을 모은 스케치 플러그인입니다.)
3. 사용할 문서에서 Plugins - Automate - Library - Import Styles from Library를 실행합니다.
4. DesignCompass-Layerstyle을 불러옵니다.
5. 레이어를 만들고 스타일을 적용하거나 심볼을 불러옵니다.
