스케치 69, Components View
신입에게 가르쳐주는 스케치, 업데이트 편
Sketch 69에서 만든 내용입니다.
모바일보다 데스크톱에서 보는 게 좋습니다.
아래 글과 함께 보시면 좋습니다.
https://brunch.co.kr/@pliossun/145
스케치가 69로 업데이트되면서 3가지 큰 변화가 생겼습니다.
덕분에 이전에 쓴 글도 다시 수정하게 되었네요...
Color Variables, Components View, Insert Window입니다. 큰 변화에 따라 세부적인 변화도 많이 생겼습니다. 3가지 변화 중에서 Components View와 Insert Window는 심벌의 관리와 적용에 큰 변화입니다.
버전 69에서 심벌을 다루는 방식을 알아봅니다.
심벌 아이콘이
변했다.
스케치는 원래 Master와 Instance로 심벌을 구분하였는데, 다른 디자인 툴과 표준을 맞추기 위해 Master는 Source로 이름이 변경되었습니다.(어도비XD와 피그마도 Master란 용어를 사용하지 않습니다.)
비슷한 툴의 아이콘 모양이 통일되고 있습니다.심벌을 표현하는 아이콘도 변경되었습니다. 이전에는 변환과 재사용을 의미하는 동사형 아이콘이었는데, 이제는 마름모 형태로 바뀐 아이콘이 되었습니다. 좀 더 오브젝트에 가깝게 표시됩니다. 아이콘이 변경되면서, 전반적으로 심벌 수정에 사용된 버튼도 마름모로 바뀌었습니다.
심벌과 관련된 컴포넌트 기능의 Beta 판이 업데이트되었습니다.
원래 왼쪽 상단을 보면, Pages와 Componets라는 탭이 있었습니다. 그 탭을 선택하면 왼쪽 사이드바에서 다시 텍스트 스타일, 레이어 스타일, 심벌을 선택할 수 있었습니다. 69부터는 Panel이 아니라 View로 Toolbar의 메뉴가 새로 생겼습니다.
이제는 Canvas View와 Components View를 선택할 수 있습니다.
심벌과 스타일을 관리하고,
속성을 빠르게 변경합니다.
Components Panel이 View로 변하면서 심벌과 스타일을 관리하고, 속성을 빠르게 변경하는 기능으로 발전했습니다.
대략적인 흐름은 캔버스 - 컴포넌트 뷰 - 인서트 윈도우 입니다.69 버전 이전에는 패널에 등록된 심벌을 캔버스에 드래그하면 간단하게 추가되었습니다. 그런데 이제는 심벌로 바뀐 후에 'C'키를 눌러서 팝업 되는 Insert Window에서 드래그하여 추가합니다. 'C'와 'Y'가 반복되겠군요.
그래서 전체적인 흐름은 캔버스 뷰에서 작업을 하고, 심벌, 텍스트 스타일, 레이어 스타일, 색은 컴포넌트 뷰에서 관리합니다. 그리고 'C'키를 눌러서 캔버스에 심벌과 스타일, 컬러를 적용합니다.
기존의 프로세스와 비교해보면, 2개의 절차가 추가되었습니다. 이제 스케치에서 간단한 작업만 하는 것이 아니라, 꽤 복잡한 작업을 하는 경우가 많기 때문에, 절차가 추가되었지만, 효율성이 올라갈 것으로 보입니다. Panel에서 작은 크기에서 하는 것보다는 윈도우에서 보는 것이 각 심벌과 스타일을 보기 편합니다.
텍스트 스타일의 경우는 별도의 페이지를 만들어서 관리했습니다. 텍스트와 레이어, 색상에 기본 포맷이 정해지면서, 각각의 레이어와 스타일을 관리하기 편해졌습니다. 이제는 별도 페이지를 만들지 않아도 됩니다.
라이브러리의 경우도 텍스트 스타일을 관리하기 쉽게 하려고 텍스트, 컴포넌트, 아이콘 라이브러리를 iOS와 Android로 따로 작업했었는데, 이제 통합하여 하나의 라이브러리로 작업해도 괜찮을 듯합니다.
스타일과 색상 별로 제공되는 포맷을 통해서 별도의 가이드 정리를 하는 경우가 많이 줄어들 것으로 예상됩니다. 또 모니터 화면의 면적을 좀 더 효율적으로 활용할 수 있게 되었습니다.
컴포넌트 뷰의 기능은 베타가 끝난 후에 어떻게 바뀔지 모르지만, 대강 살펴보면 세부 기능은 다음과 같습니다.
Duplicate Symbol, 선택한 심벌을 복제합니다.
심벌과 스타일을 각각 확인할 수 있습니다. Symbols, Text, Layers, Colors를 각각 확인할 수 있습니다.
심벌과 스타일을 빠르게 검색할 수 있습니다.
패널에서 사용한 것처럼, 심벌과 스타일을 그룹핑하고 분류할 수 있습니다.
심벌을 선택하면, 다시 캔버스로 돌아가서 수정할 수 있습니다.
캔버스로 돌아가지 않아도, 간단한 수정은 컴포넌트 뷰에서 할 수 있습니다.
Insert Window
컴포넌트 뷰와 인서트 윈도우는 비슷해 보이지만, 인서트 윈도우의 경우는 편집 기능은 없고, 심벌과 텍스트, 컬러를 확인한 후에 캔버스에 삽입하는 기능만 있습니다.
69 버전으로 업데이트된 후에 가장 혼란스러운 부분이었습니다. 'C'키를 눌러서 불러낸 윈도우를 통해서 심벌과 스타일을 적용할 수 있습니다.
인서트 윈도우는 간단하게 되어 있습니다.
검색 영역이 길게 되어 있습니다.
오른쪽 끝에 핀을 눌러두면, 심벌을 추가한 후에 윈도우가 닫히지 않습니다.
심벌과 스타일을 쉽게 찾을 수 있습니다.
심벌의 크기와 형태를 미리 볼 수 있습니다.
인서트 윈도우는 3가지 방법으로 불러낼 수 있습니다. 첫 번째는 단축키의 'C'키를 누르는 게 가장 빠른 방법입니다. 두 번째는 Toolbar의 Insert 기능을 사용해서 불러낼 수 있습니다. Menu > Window에서 불러올 수도 있습니다.
베타 기능의
끝은 어디일까?
아직 69 버전이 올라온 지 얼마 안 되었습니다. Panel에서 View로 바뀌는 변화가 매우 독특합니다. 스케치로 인해 변하기 시작한 디자인 업무 프로세스는 앞으로 많은 변화가 있을 것으로 예상됩니다.
최근 들어 재미있는 기능이 많이 업데이트 되는 것 같습니다. 컬러의 경우는 별도 글로 작성합니다.
