UI/UX 디자인 꿈나무를 위한 스케치앱 기초강좌 3

점검창(Inspecter) 파헤치기

 

2강, 아트보드의 모든 것을 보시려면 여기를 누르세요
1강, 기본구조 이해하기를 보시려면여기를 누르세요

 

이번 포스트는 길이가 길어서 서론 없이 바로 들어갑니다! 궈궈!!
어도비를 조금이라도 다뤄본 분들이면 읽기만 해도 충분합니다.
처음 접하는 분들은 아트보드를 하나 생성하고 그 안에 오브젝트를 그려서 따라해 보시기를 권장합니다.

 

점검창(Inspecter)이란?

우측에 있는 점검창 Inspector 은 현재 레이어를 위한 설정 또는 옵션을 조정할 수 있게 해 줍니다.
레이어를 선택했을 때 점검창이 활성화 됩니다.

 

1. 오브젝트 정렬하기

sketchapp_class_3_1
점검창 상단의 정렬 버튼

점검창 맨 상단에 정렬에 관련된 버튼이 8개가 있습니다.
많은 분들이 모양만 봐도 아시겠지만, 스케치앱 ‘기초’ 강좌인 만큼 한번 짚고 넘어가겠습니다!

 

(1)오브젝트가 3개 이상일 때

sketchapp_class_3_2
정렬 예시 (플러스 버튼은 예시를 위해 템플릿에서 가져왔습니다.)

위 두개는 오브젝트가 3개 이상일 때만 활성화 되고, 각각 동일한 간격으로 정렬할 때 사용합니다.

 

(2)오브젝트가 1개 이상일 때

sketchapp_class_3_3
정렬 예시

오브젝트가 1개일 때는 아트보드(Artboard)에 맞춰 정렬,
2개 이상인 경우 주요 오브젝트에 정렬됩니다.

 

2. 위치(position), 사이즈(size), 변형(Transform)

sketchapp_class_3_4
오브젝트를 클릭하면 점검창이 활성화됩니다.

8개의 핸들(선택된 +버튼 주변의 하얀 점)은 선택되어진 것을 보여주고, 레이어를 이동하고 크기를 조절하는 데에 사용됩니다. 회전은 상단 툴바나 점검창의 Transform으로 변경해야 합니다.

sketchapp_class_3_5
출처:http://www.sketchapp.com

위치, 사이즈에 대한 수치는 점검창에서 직접 입력하거나 마우스로 테두리 상자를 이용해 조정이 가능합니다.

sketchapp_class_3_6
출처:http://www.sketchapp.com

alt (⌥) 키를 누르면 반대편 모서리 대신, 중앙으로 부터 크기 조절이 됩니다.

키보드를 사용해서도 레이어를 크기 조절할 수 있습니다. 픽셀 단위의 매우 정밀한 조정은 마우스를 사용하기 보다 더 쉽습니다.

⌘→ 는 레이어의 폭을 1px 증감
⌘← 는 1px 감소
⌘↓ 는 레이어의 높이를 1px 증감
⌘↑ 는 1px 감소
(shift 키를 누르면 1px 증감 대신 10px 로 바꿔줍니다)

 

3. 투명도(Opacity)와 블렌딩(Blending)

sketchapp_class_3_7
투명도와 블랜딩

투명도단축키는 숫자키 1~0 으로, 1(투명도 10%)부터 0(투명도 100%)까지 10% 단위로 조정할 수 있습니다. 블렌딩은 직접 해보는 게 최고에요. 간단하게 사진이나 오브젝트 2개를 겹치고 상위 레이어에 블렌딩을 적용하시면 됩니다.

 

4. Fill과 Borders(색 지정하기)

새로운 채우기 또는 테두리를 추가하기 위해서는 섹션 타이틀에서 + 아이콘을 클릭하면 됩니다.각각의 채우기와 테두리는 해당 속성의 왼쪽에 있는 체크 박스를 해제하는 것으로 색을 꺼둘 수 있습니다. 채우기 또는 테두리가 꺼져 있을 때, 섹션 타이틀 위에 있는 휴지통 아이콘을 클릭하면 체크 해제된 색들을 삭제할 수 있습니다.

 

(1) Fill : 색 채우기

Fill에는 아래 그림처럼 6가지 방식으로 색을 채울 수 있습니다. 스포이드는 스케치앱 밖에 스크린 모든 곳에서 컬러를 pick할 수 있고, 하단의 모든 + 버튼은 사용자 지정색이나 패턴 등을 저장할 수 있습니다.

sketchapp_class_3_8
Fill의 종류

1) Flat Color : 색을 고르거나 RGB값을 입력합니다. (A는 투명도)
2) Linear Gradient : 선형 그라디언트는 빛이 들어오는 듯한 자연스러운 느낌을 줄 수 있습니다. 더 정밀한 그라디언트를 위해서 Color Stop을 추가할 수 있습니다.

sketchapp_class_3_9
Color Stop (원하는 위치에 더블 클릭하면 추가됩니다.)

3) Radial Gradient : 버튼이나 오브젝트에 둥근 입체감을 만들때 적절합니다.
4) Angular Gradient : 개인적으로 이미지 랜더링을 할 때 금속 질감을 위해 많이 사용하던 그라디언트 도구입니다.
5) Pattern Fill : 특정 Shape에 패턴을 지정하거나 이미지를 넣을 때 쓰는 도구입니다. Choose Image버튼을 클릭하면 이미지를 불러올 수 있습니다.
6) Noise Fill : 타입별로 노이즈를 줄 수 있습니다. 강도는 조절 가능.

 

(2) Borders : 오브젝트 테두리

sketchapp_class_3_10
Borders의 종류

Fill처럼 이미지를 삽입하거나 패턴을 적용할 수는 없지만 앞에 1~4는 Fill의 1~4와 같은 속성의 채우기입니다.

 

sketchapp_class_3_11
Borders의 설정 클릭

Borders 옆에 기어 gear 아이콘을 클릭하면 선의 특성을 조절할 수 있습니다. Ends는 선이 끝나는 지점 처리, Joins는 다각형일 때 모서리가 굴러가는 모양을 의미합니다. 아래 Dash(선의 길이)와 Gap(사이 거리)에 수치를 입력하면 점선으로 표현할 수 있습니다.

 

5. 그림자(Shadows)와 가우시안 블러(Gaussian Blur)

(1) 그림자 효과

새로운 그림자를 추가하기 위해서는 섹션 타이틀에서 + 아이콘을 클릭하면 됩니다. 그림자는 해당 속성의 왼쪽에 있는 체크 박스를 해제하는 것으로 그림자를 꺼둘 수 있습니다. 그림자가 꺼져 있을 때, 섹션 타이틀 위에 있는 휴지통 아이콘을 클릭하면 체크 해제된 그림자를 삭제할 수 있습니다.

sketchapp_class_3_12
자연스러운 그림자를 위해 여러 개의 그림자를 적용한 모습

앱 디자인에서 자연스러운 깊이감을 주기 위해서 그림자 효과를 사용하고 있습니다.(플랫 디자인 Flat Design의 대표 주자인 머터리얼 디자인 Material Design은 Z축에 따른 높이를 그림자로 표현하여 화면 요소 간의 계층 구조를 형성하고 있죠!) Inner Shadows의 경우 안으로 파인 느낌을 만들 수 있습니다.

 

(2) 블러 효과

sketchapp_class_3_13
다양한 블러를 적용한 모습

극적인 효과를 위해 버튼 대신 이미지를 불러와 각각의 블러를 적용 시켜 보았습니다. Motion Blur는 방향성을 가진 블러입니다. Zoom Blur의 경우 튀어나오는 듯한 인상을 주네요 😀

sketchapp_class_3_14
Color Adjust

이 밖에도 이미지를 불러올 경우 블러 바로 아래 ‘Color Adjust’라는 기능이 뜨는데, 이 기능으로 간단한 이미지 보정도 가능합니다.

 

이제 기본적이고 아주 간단한 스케치앱의 기능들은 거의 다 숙지하셨다고 생각하시면 됩니다. 다음 포스트는 쉬어가는 타이밍으로 스케치앱과 사용하기 좋은 플러그인 2가지에 관해 이야기 해봐요!

 

 


banner_bluelens

About Author

이선혜

이선혜

블루핵 디자이너로 어플리케이션 UI부터 사무실 인테리어까지 블루핵에서 디자인과 관련된 모든 일들을 하고 있습니다. 그림그리기를 좋아하고 리액션의 대가이며 365일 다이어트를 진행중이지만 밀가루 신봉자입니다.


« Previous Post
Next Post »