스케치(Sketch) : 3. 레이어

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

(참고. 다른 그래픽 툴과 레이어 기능이 같거나 비슷한 요소는 생략하고, 스케치에서 차별화된 요소를 중심으로 정리.)

Layer

기본적으로 포토샵 또는 기타 그래픽 툴을 통해 알고 있는 레이어 기능과 거의 비슷하다.

오브젝트 복제하기(Duplicate)

크게 3가지 방법이 있다.

- 복제할 대상 선택 후 오른쪽 클릭 -> ‘Duplicate’  

- 레이어 영역에서 복제할 대상 선택 후 오른쪽 클릭 -> ‘Duplicate’  

- ‘option’ 키 누르면서 동시에 복제할 대상을 이동시킴

레이어 그룹/그룹 해제

- 그룹/그룹 해제 대상 선택 후 오른쪽 클릭 -> ‘Group Selection’  

- 그룹 : 대상 선택 후 ‘Command’+’G’ 키  

- 그룹 해제 : 대상 선택 후 ‘Command’+’Shift’+’G’ 키

Tip! 오브젝트 사이의 거리 재기

'Option' 키를 눌러서 오브젝트 사이의 거리 재기

기준이 되는 오브젝트를 선택하고, ‘Option’ 키를 누르면서, 다른 오브젝트를 후버 하면, 오브젝트 사이의 거리를 확인할 수 있다.

Tip! 오브젝트의 스타일을 CSS로 만들기

스타일 속성 CSS로 만들기

오브젝트의 boder, shadows, gradient 등 모든 속성을 CSS로 만들 수 있다.  

1. 오브젝트 클릭 후 오른쪽 버튼 클릭 -> ‘Copy CSS Attributes’

2. 1번에서 복사된 CSS속성을 CSS나 html 문서에 붙여 넣는다.

---

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

연재 순서는 다음과 같다.

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

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

2. 인터페이스(Interface)  

3. 레이어(Layer)  

4. 텍스트(Text)  

5. 슬라이스(Slice)  

6. 스케치 미러(Sketch Mirror)  

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

8. 플러그인 소개