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

기본구조 이해하기

 

스케치는 UI/UX 디자인에 최적화된 도구 중 하나로, 현재 UI 디자인 필드에서 포토샵으로 작업하던 부분을 스케치로 상당 부분 대체하는 추세입니다. 그 이유는 UI 디자인을 할 때, 포토샵보다 기능이 간편하고 반응 속도가 더 빠르기 때문입니다. 또한, Plugins 중 하나인 재플린(Zeplin)을 이용하면 디자이너와 개발자 간의 원활한 협업도 가능합니다!
(저희 블루핵에서도 UI/UX 디자인 프로그램으로 스케치와 재플린을 사용합니다:D )

 

아래 사진은 스케치 기본 구성 화면 입니다. 기초인 만큼 간단하게 설명하겠습니다.

sketch_basic-02
스케치의 기본 작업 공간

1. 삽입(Insert) 메뉴 : 모든 요소를 생성할 수 있는 메뉴 입니다.
2. 툴바 : 생성된 오브젝트를 변형할 수 있는 기능 등을 모아 놓은 곳입니다.
3. 레이어 리스트 : 모든 레이어가 리스트로 모이는 곳 입니다.
4. 점검창 : 오브젝트를 상세 변경할 수 있습니다.

이중 제일 중요한 두 가지 기능을 좀 더 자세히 살펴보겠습니다.

 

삽입(Insert) 메뉴
선, 화살표, 사각형, 원… 등 다양한 요소를 생성 할 수 있습니다.

sketch_basic-03
삽입(Insert) 메뉴 클릭 화면

이 작업들은 삽입(Insert) 메뉴를 클릭해야 수행이 가능하기 때문에 빠른 작업을 위해서는 단축키를 외워두시는 것을 추천합니다! 아래 단축키 모음이 복잡하시다면 이 4개만 외우세요! 더 빠른 작업이 가능해 집니다 ^^

선 (Line) : L
사각형 (Rectangle) : R
원 (Oval) : O
글자(Text) : T

sketch_basic-04
스케치 단축키 모음 (출처 : http://www.sketchapp.com/)

 

점검창 (The Inspector)
다음으로 중요한 기능인 점검창 입니다.
생성된 오브젝트의 디테일한 수정이 가능한 곳입니다.

sketch_basic-05
점검창이 활성화된 화면

속성 : 위치, 크기, Radius 값들을 조정합니다.
레이어 스타일 : 자신이 작업한 내용을 레이어 스타일, 심볼 등으로 지정하여 일괄 적용이 가능합니다.
도형 설정 : 칠, 선, 그림자 등을 수정할 수 있으며 각각은 중복 적용할 수 있습니다.
내보내기 : 한꺼번에 여러가지 옵션으로 내보내기가 가능합니다. (1.5배, 2배, 3배…) 이러한 옵션 설정이 가능한 내보내기는 스케치의 가장 큰 장점입니다.

 

여기까지 스케치의 기본 구조를 살펴 보았습니다.
Adobe의 Illustratior와 Photoshop을 써본 분이라면 상당 기능이 비슷해서 어렵지 않게 이해하셨으리라 생각됩니다!
이어지는 포스트에서는 각각의 기능을 수행해 보겠습니다. 😀

2강으로 이동하시려면 여기를 클릭하세요

 


banner_bluelens

About Author

이선혜

이선혜

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


« Previous Post
Next Post »