brunch

라이킷 133 댓글 18

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by maus x maus Sep 03. 2017

스케치 47 심볼 라이브러리

스케치 47 조타~

안녕하세요.

이번에 곧 업데이트될 스케치 47 심볼 시스템이 아주 많이 좋아졌습니다.

심볼 라이브러리라는 시스템이 생겼는데

첨 들었을땐 UI가 개편되는구나 했는데 설치해 보니 시스템 개편을 했더군요.

대규모 혹은 여러 디자이너가 스케치에서 디자인을 아주 쉽고 효율적으로 작업할 수 있게 나온 시스템입니다.

일반적으로 심볼을 공유하려면 Craft Library를 쓰거나 Lingo App을 통해 심볼 공유가 가능했는데 이번 업데이트로 디자이너가 별도 외부 툴 없이 스케치 독자적으로 협업을 쉽게 할 수 있게 나왔습니다.

iOS UI 디자인이 기본으로 들어가 있습니다.

먼저 기존 심볼의 Sync 아이콘 말고 Link 아이콘 같은 심볼 라이브러리가 생겼습니다. 이게 새로운 심볼 라이브러리입니디.

심볼 라이브러리 개념이 조금 헷갈릴 수 있는데

심볼 라이브러리는 서로 다른 스케치 파일에 서로 다른 디자이너가 서로 다른 컴퓨터에서 공통으로 심볼로 제작된 UI 콤포넌트/컬러 등 디자인 에셋을 공유 및 재사용할 목적으로 생긴 기능입니다.

간단한 제작 법을 알려드리겠습니다.

먼저

저는 (심볼)버튼만 따로 만들어서 lib_btn이라는 스케치 파일(*.sketch)을 만들어서 저장했습니다.

저 같은 경우엔 기본 Page1는 지우고 Symbol 페이지만 남겨두었는데 이유는 실제로 화면 제작할 스케치 파일에서 심볼 라이브러리에 만든 심볼만 가져와 쓰기 때문입니다.

*혹은 Page1에 별도 사용 예시를 위해 보존하는 것도 추천합니다.

그래서 저는 버튼만 모아둔 lib_btn과 컬러만 모아둔 lib_color 스케치 파일을 위 스크린샷처럼 만들었습니다.

그리고 실제 작업은 빈 스케치 파일에서 만들것이고 파일명은 47_test로 할 겁니다.

그리고 lib_color.sketch 화면을 보면 아래와 같습니다.

1단계 심볼만 구성된 스케치 파일을 만든다.

네... 꼴랑 컬러 심볼 4개입니다.

컬러는 나중에 추가하거나 수정하고 동기화하면 되는 거고 이 부분은 나중에 설명드리겠습니다.

2단계 심볼을 라이브러리에 등록한다.

Prefereces에 가면 Libries 항목이 추가된 걸 볼 수 있습니다.

거기서 Add Library... 을 클릭하고 아까 만든 lib_color 스케치 파일을 추가합니다.

그러면 이와 같이 라이브러리가 추가됨을 볼 수 있습니다.

라이브러리는 비활성화 혹은 삭제 가능합니다.

3단계 신규 스케치 파일에서 심볼 라이브러리 호출.

스케치 화면 왼쪽 Insert를 통해 보면 처음에 언급한 심볼 라이브러리가 추가되었음을 알 수 있습니다.

이상입니다.

4단계 심볼 라이브러리를 수정하면?

심볼 라이브러리 오리지널 소스파일(lib_color.sketch)의 심볼을 수정하면 화면 우측 상단에

Library Update Available이라는 알람이 뜹니다.

그리고 이걸 클릭하면 아래와 같은 팝업 알림이 뜨는데,

lib_color 심볼 라이브러리에서 가져다 쓴 심볼을 계속 유지할 건지,

lib_color 심볼 스케치 파일에서 수정한 최신 심볼로 덥어 쓸 건지 물어봅니다.

그럼 끝.

심볼 라이브러리가 싫어요 ㅠ

심볼 라이브러리 말고 내 파일로 그냥 독자적으로 건드리고 싶을 수도 있습니다. 그쳐?

그럼 해당 심볼 라이브러리를 더블클릭하면 아래와 같은 팝업이 뜹니다.

Unlink from Library:

선택한 심볼 라이브러리가 지금 작업 중인 심볼로 바뀌며 해당 파일 심볼로 변환됩니다.

Symbol 페이지가 없는 경우에도 자동으로 Symbol 페이지가 생성됩니다.

Open in Original Document:

이걸 선택하면 심볼 라이브러리 오리지널 스케치 파일을 열게 됩니다.

생각해 보기

그럼 모든 디자이너가 하나의 심볼 라이브러리를 쓰기 위해선 어디에 저장하는 게 좋을까요?

스케치 공식 웹사이트에는 Dropbox 나 repository in GitHub을 언급하는데 네트워크를 통해서도 가능하지 않을까 합니다(끊기는 경우가 있겠지만). 회사 조직에서 망을 막아놓았다면 로컬에서 밖에 못할 텐데 인제 남은 고민은 라이브러리 파일 저장을 어디로 해야 효율적인지가 아닐까 합니다.

샘플 파일 다운로드하기: https://www.dropbox.com/s/h2c1out4gclu8km/47_lib.zip?dl=0