brunch

매거진 스케치 가이드

라이킷 67 댓글 1

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by Jongmin Park Jun 28. 2018

스케치 레이아웃 라이브러리

Sketch Layout Library

스케치로 레이아웃을 짤 때 사용하는 가이드라인입니다. 서비스의 큰 패턴을 디자인할 때 사용하며 자세한 디자인에 들어갈 때는 사용하지 않는 편입니다. 스크린마다 조건이 다르기 때문에 규칙을 엄격하게 지키기보다는 상황에 맞춰 사용합니다.

그리드

최소한의 단위를 표현한 격자 안내선입니다. 1픽셀 단위로 디자인할 경우 효율이 떨어지기 때문에 스크린의 전체 픽셀을 기준으로 최소 단위를 정합니다. 보편적으로 쓰이는 스크린 픽셀이 8로 나눠지기 때문에 8pt 그리드를 널리 사용합니다. 8로 나눠지지 않는 스크린을 디자인할 경우 따로 그리드를 설정해주기도 합니다.

레이아웃

반복해서 적용되는 레이아웃 패턴을 위한 안내선입니다. 나눌 단의 개수, 기본 픽셀 그리드와의 적합성 등을 고려해서 4단, 6단, 8단, 12단을 사용합니다. Header, Footer, Contents, Nav와 같이 전체적인 구조를 짜거나 반응형 디자인을 할 때 도움이 되는 안내선입니다.

설정

스케치 오른쪽 상단의 View에서 Grid와 Layout을 설정할 수 있습니다. Grid block size 에 기본 단위를 설정해 그리드를 설정합니다. 양쪽 마진을 고려해 Total width를 지정하고(Device Width - (Left Margin + Right Margin)=Total width), Number of Columns와 Gutter Width를 이용해 레이아웃을 설정합니다.