스케치 아이콘 라이브러리
Sketch Icon Library
8pt-Grid기반의 레이아웃에 적용할 24pt 그리드 기반의 아이콘 디자인 시스템입니다. 스케치로 제작하며 최종 산출물은 outline으로 구성된 단일 path로 .png 혹은 .svg 포맷으로 픽셀 퍼펙션을 지향합니다. 아이콘을 제작할 때 필요한 일반적인 규칙을 지키며 다양한 상황에 쓰일 굵기,색,형태를 커스터마이징해 사용할 수 있도록 제작 중입니다.
규칙
패스의 포인트가 소숫점에 위치할 경우 디바이스에서 의도하지 않게 표현될 수 있습니다. 되도록 최종 산출물의 포인트의 위치가 정수가 될 수 있도록 제작합니다. 아래는 아이콘 디자인 시스템의 기본 규칙입니다. 제작 효율을 위한 세팅으로 라운드가 포함되지 않았습니다.
Position: Point 좌표값 정수
End: Butt end 각진 끝
Join: Miter Join 각진 꺽임
Border Position: Center
종류
벡터 프로그램으로 뼈대가 되는 패스를 제작하고 이를 바탕으로 굵기를 조절할 수 있는 파일(Stroke)과 윤곽선을 따 굵기를 조절할 수 없는 파일(Outline, Fill)로 나뉩니다. 실제 코드에서는 윤곽선이 따진 아이콘을 사용합니다. Stroke로 만들어진 svg를 사용할 경우 선 굵기 정보를 디바이스가 계산해 디스플레이에 표시해 부하가 늘어날 수 있어 윤곽선이 따진 svg을 사용하는 것이 좋습니다.
Storke: 아이콘 스타일을 다루기 위한 원본
Outline 1px, 2px: 아웃라인이 따진 선으로 표현된 아이콘
Fill: 아웃라인이 따진 속이 차 있는 아이콘
사용법
1.SVGO Compressor, Rename It 플러그인 설치.
(SVG Export 최적화와 레이어,아트보드 이름 관리 플러그인입니다.)
2. Preference > Libraries > Add Library 선택 후 DesignCompass-Icon-60.sketch 파일 추가
3.Outliine과 Solid 심볼을 디자인에 적용
4.새로운 디자인을 추가하거나 수정하려면 Stroke 아이콘을 제작한 뒤 Outoline 혹은 Solid 제작
직접 만들기
아이콘을 표현하기 위한 다양한 레이어로 구성됩니다. 아이콘을 표현하기 위한 레이어 뿐만 아니라 내부 여백을 위해 24x24 크기의 비어있는 Rectangle 레이어가 필요합니다. Export할 시 여러 툴에서 강제로 여백을 재단하는 경우가 많아 안전장치로 Fill과 Border가 비어 있는 Rectangle 레이어를 사용합니다.
1.그리드 심볼 위에 원하는 아이콘을 Stroke로 제작 후 24x24 크기의 심볼을 만듭니다.
2.새 심볼을 만들어 Stroke 아이콘을 복사-붙여넣기 한 뒤 픽셀에 정확하게 표시되는지 확인 후 Layer > Convert to Outlines(혹은 Shift + Command + O)를 선택합니다.
3.새 심볼을 만들고 Stroke 아이콘을 2px 굵기로 설정해 복사-붙여넣기 한 뒤 픽셀에 정확하게 표시되는지 확인 후 Layer > Convert to Outlines(혹은 Shift + Command + O)을 선택합니다.
4.Solid가 필요할 경우 Stroke의 Fill을 선택해 심볼을 만듭니다.
내보내기
마스터 심볼
Stroke 심볼은 아이콘 제작을 위한 원본이며 실제로 개발에 사용하는 심볼은 Outline 1px, Outline 2px, Solid입니다. 각 심볼은 Make Exportable가 설정되어 있습니다. 심볼은 컬러 오버라이드 레이어와 패스 레이어로 구성됩니다. 패스 레이어는 Layer/Combine/Flatten으로 가능한 하나의 패스로 정리했습니다. 라이브러리 아이콘을 사용한 뒤 제플린으로 내보내면 여백이 포함된 svg 혹은 png 파일을 다운로드 받을 수 있습니다.
인스턴스 심볼
인스턴스 심볼을 내보낼 경우 별도의 수정이 없을 경우 바로 내보내면 되지만 색을 오버라이드를 할 경우 별도의 작업이 필요합니다. 제플린의 경우 색상 오버라이드를 무시하고 마스터 심볼대로 내보내기 때문에 의도한대로 내보내기 위해서는 슬라이스와 그룹을 사용해야합니다. 다른 레이어 요소에 영향을 받지 않도록 (배경에 하얀 레이어가 깔려 있다던가) 슬라이스와 심볼을 그룹핑하고 슬라이스 레이어를 선택한 뒤 Export group contents only 를 체크합니다.
스케치 파일 다운로드
https://github.com/p-j-m/design-compass/blob/master/assets/files/dc-icon.sketch
Version
v0.0.2: 심볼에서 색을 교체할 수 있는 마스크가 추가되었습니다. 색을 변경할 경우 아트보드에서 해당 svg를 slice하거나 그룹해서 export 해야 의도한 색상으로 내보냅니다. 스케치에서 색을 다루기 힘들어서 마스크를 사용하긴 했지만 <object>로 사용하는데 최적화는 되지 않습니다.
v0.0.3:브랜드 아이콘과 툴 아이콘 추가 중
v0.1: 심볼, 레이어 정리정돈.
*제플린의 에셋 내보내기는 마스터 심볼을 기준으로 하기 때문에 Nested Symbol과 색상 마스크가 적용되지 않습니다. 위 방식에서는 아이콘을 스케치로 내보내서 드롭박스로 연동합니다.
v0.2: 심볼 사용법 업데이트. 자잘한 버그 수정
