brunch

You can make anything
by writing

C.S.Lewis

by 키미 Apr 04. 2016

스케치(Sketch) : 2. 인터페이스

UI/UX 디자인을 위한 프로토타이핑 툴 - 스케치(Sketch)

먼저 스케치의 인터페이스를 살펴보자. 크게 다섯 부분으로 나뉜다.  


1. 툴바(Toolbar)  

2. 레이어 리스트(Layer List)

3. 인스펙터(Inspector) : 세부 속성 값 조절  

4. 캔버스(Canvas)

5. 인서트(Insert) 메뉴: 툴바 영역 안에 있지만, 중요한 부분이라서 따로 구분했다.


스케치 인터페이스


인서트(Insert) 메뉴


‘Insert’ 메뉴

가장 많이 사용하게 되는 메뉴다. ‘Insert’메뉴를 통해 캔버스에 놓이는 모든 오브젝트에는 자동으로 레이어가 할당된다. shape, line, text 등의 기본 도구과 ‘Artboard’, ‘Slice’ 와 같은 고급 기능이 포함되어 있다.


스케치를 처음 사용할 때는 이렇게 자주 사용하는 메뉴를 왜 두 번 클릭하게 되는 저 위치에 뒀는지, 이해도 안 가고, 무척 성가셨는데, 차츰 스케치에 익숙해져 단축키를 사용하니 좀 편해졌다. (하지만 아직도 이해가 안 가는 메뉴 위치이다.)


Line(L), Rectangle(R), Text(T) 등… 메뉴 옆에 쓰인 알파벳은 단축키를 의미한다.


이어지는 포스트에서 영역별로 살펴보도록 하자.





그동안 스케치를 사용하면서 간단하게 메모해 두었던 기능들을 정리하는 중이다. 스케치(Sketch)가 아직은 생소한 사용자에게 이 포스트가 조금이나마 도움이 되길 바란다. 새로운 툴을 사용하는 것에 대한 두려움을 버리고, 다음 프로젝트에 도입해서 적용해 보기를 권한다.


연재 순서는 다음과 같다.


스케치(Sketch) 기능 살펴보기  


1. 설치하기, 관련 링크(Installing, Useful Links)  

2. 인터페이스(Interface)  

3. 레이어(Layer)  

4. 텍스트(Text)  

5. 슬라이스(Slice)  

6. 스케치 미러(Sketch Mirror)  

7. 스케치사용팁 : 키보드 숏컷(shortcuts)

8. 플러그인 소개




* 이 글은 저자 블로그 http://www.kimee.net/2016/04/03/sketch-interface/에도 개재했습니다.


브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari