스케치 워크샵 2/3
협동을하자꾸나~
1. 심볼 라이브러리
1. 다운로드
먼저 스케치 베타를 받아둡니다.https://www.sketchapp.com/beta/
파일을 받으면 파란색 아이콘이 보일 거예요.
버전 호환이 안되기 때문에 절대 작업 중인 파일은 열람하지 마세요.
2. 라이브러리 만들기
Sketch 47에서 빈 스케치 파일을 만듭니다.
그리고 심볼을 제작하고 파일을 저장합니다.
심볼 만들기 귀찮으면
File > New from Template > Material Design을 선택합니다.
그리고 파일 저장을 이해하기 쉽게 규칙을 만들어 저장해 봅니다.
저는 library의 약자인 lib라고 해서 lib_material.sketch로 저장했습니다.
지금 저장한 파일은 실제로 파일 안에서 작업할게 아니고 심볼만 가져다 쓸 파일이기 때문에 파일 이름을 규칙성을 주면 좋습니다.
*위 이미지를 보면 미리보기가 안 이쁜데(구별하기 힘듦) 미리보기를 원하는 이미지로 만드는 방법은 아랫부분에 설명하겠습니다.
그리고 파일을 저장할 때 스케치 화면 하단에 호환이 안될 거란 경고 팝업이 뜹니다.
*절대 실제 작업하는 프로젝트로 하지 마세요란 뜻이니 숙지하시고 저장하시기 바랍니다.
-
그리고 새로운 빈 스케치 파일을 만듭니다.
3. 라이브러리 등록하기
인터페이스는 큰 차이는 없으나 심볼 라이브러리 기능이
Sketch Beta > Preferences 메뉴에 Libraries 가 추가된 것을 알 수 있습니다.
기본 라이브러리로 iOS UI가 있습니다. 일단 물리적으로 해당 라이브러리는 접근 수정이 안됩니다.여기 라이브러리에서 아까 저장한 lib_material_design 파일을 등록하면 됩니다.
여기 심볼 라이브러리를 등록/삭제/감추기 등을 제어할 수 있습니다.
우측 파일 하단의 Add Library 버튼을 눌러 아까 저장한 스케치 파일(lib_material_design)을 추가합니다.
그러면
라이브러리가 등록됨을 확인할 수 있습니다.
-
위에 언급한 데로 미리보기 이미지가 그지 같아서 나중에 라이브러리를 많이 만들면 헷갈리기 쉬습니다.
그래서 미리보기 아이콘을 스크린샷 개념이 아닌 의도한 아이콘으로 노출되는 방법을 알려드리겠습니다.
그리고
좋은 방법인지는 모르겠지만 심볼을 만들 때 페이지 이름이 굳이 Symbols가 아니어도 됩니다.
예제 파일의 심볼 페이지는 "Material Design Symbols"입니다.
4. 라이브러리 응용하기
정상적으로 등록이 되었다면
이와 같이 lib_material_design 라이브러리를 기존 심볼과 같이 쓸 수 있습니다.
로컬 파일에서 만든 심볼과 차이점은 아이콘인데
자세히 보면 심볼 아이콘 하고 심볼 라이브러리 아이콘 하고 다른 걸 알 수 있습니다.
만약 심볼 라이브러리에서 가져온 심볼을 로컬 파일로 쓰고 싶다면 해당 심볼을 더블클릭하면 됩니다.
더블 클릭하면 위와 같은 팝업이 뜨는데
-
Unlink from Library: 심볼 라이브러리를 깨고 현재 작업 중인 스케치 파일 심볼로 자동 등록.
Open in Original Document: lib_material_design 파일을 열어서 직접 수정하게 해줍니다.
*디폴트로 있는 iOS UI Design은 접근 불가합니다.
5. 심볼 라이브러리 업데이트
만약 심볼 라이브러리의 심볼을 수정하면 해당 심볼 라이브러리 심볼을 사용하는 my_design.sketch 파일에서 수정 이력을 알려주는데 그건 우측 상단에 뜹니다. 단점이라 하면 알람 인터페이스 너무 작아서 인지하기 어렵다는 거네요.
넘 작아 ㅠㅠㅠ
크릭하면 라이브러리 업데이트를 선택할 수 있습니다.
그리고 기존에 이미 사용중인 심볼이 있으면 덥어 씌울것인지 물어봅니다.그리고 사용 안 한 심볼 라이브러리의 심볼은 한 번도 화면에 놓고 작업하지 않아도 자동으로 수정 반영됩니다.
여러 명이 동시에 팀 작업을 한다면 심볼 라이브러리 스케치 파일을 드랍박스에서 작업하는 것을 추천합니다.
작업하다 문제가 있으면 댓글로 알려주세요.
lib_material_design 파일 받기:
https://www.dropbox.com/s/cq3hbtwfxj65lg2/ui_library.zip?dl=0
6. 지저분한 프리뷰 이미지 바꾸기
이런 경우 프리뷰 이미지는 뭐 파일 내용을 알 수 있어 큰 문제가 되지 않으나
심볼 라이브러리에서는 라이브러리가 많아지면 관리하기 어렵게 됩니다.
그래서 원하는 화면을 만드는 방법을 알려드리겠습니다.
우선 썸네일 비율인데
100 x 80px로 된 것을 알 수 있습니다.
-
그래서 맘 편하게 2배 수로 아트보드를 그립니다.
그리고 파일을 저장합니다. 그러면 현재 위치한 화면의 첫 번째 디자인이 프리뷰로 저장됩니다.
*그전에 파일을 저장하면 절대 안 됩니다.
저는 페이지를 3개 만들었는데요.
Cover: 프리뷰 이미지 생성을 위한 페이지.
UI Design: 심볼 조합으로 구성된 화면 예제 페이지.
Symbols: 심볼 라이브러리 페이지
이렇게 만들었습니다. 그러면 다시 등록해 보겠습니다.
이렇게 아름다운 썸네일이 만들어졌습니다. @_@
*블링블링*
-
아 그리고 라이브러리 제어 관련 메뉴는 오른 클릭하면 됩니다.
추석 잘 보내시고 우리 한번 따라 해 보아요.
