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

아트보드의 모든 것
(지난 강좌를 보시려면 여기를 클릭하세요)

 

얼마 전 같은 디자인과 친구들과 오랜만에 만났는데 이런 이야기를 들었습니다.

“앱 디자인은 어렵고 재미없어!”

어머. 그럴리가요. 물론 UI/UX 디자인의 세계는 무한하고 오묘하며 어렵습니다. 하지만 ‘스케치앱’을 배운다면 좀 더 쉽게, 매력적으로 UI/UX 디자인을 할 수 있습니다. 단지 ‘쉽다’는 이유만으로 ‘스케치앱’을 추천하는 것 만은 아닙니다. ‘스케치앱’은 사용성 면에서 어느 프로그램보다 편리합니다. 때문에 실리콘밸리를 중심으로 애플, 구글, 페이스북 같은 선망 받는 대기업부터 드롭박스, 트위터, 페이팔 등 인지도 높은 기업까지 발 빠르게 뻗어나가고 있습니다.

 

스케치앱_2_01
‘스케치앱’을 사용하는 기업들

이처럼 재미있고(?) 핫한 스케치앱 기초강좌를 시작해 보아요!! 오늘의 강의는 아트보드(Artboard)의 모든 것입니다.

 

1. 아트보드 없이 도형 그리기

 

스케치앱_2_02
아트보드 없이 별(Star)과 다각형(Polygon) 그리기

Insert > Shape > 도형 중 아무거나 선택 후 생성
(Shift키를 누르고 그리면 가로세로 1:1 동일 비율, Alt키를 누르고 그리면 중심부터 그리기)

 

2. 아트보드에 도형 그리기

 

스케치앱_2_03
아트보드 클릭 시 나타나는 화면

Insert > Artboard / 혹은 키보드 ‘A’

아트보드를 클릭하면 사진의 오른쪽처럼 iOS, 웹, Material의 사이즈가 적용된 목록이 나옵니다. 제가 앞에서 줄줄이 설명했던 UI/UX 디자인에 최적화 되어있는 장점의 한 예가 등장하는 순간이네요! UI/UX 작업을 위해서는 필요한 기기 사이즈로, 기타 작업할 때는 원하는 크기로 직접 만들면 됩니다.

 

스케치앱_2_04
아트보드 안에 도형 그리기

1번과 같은 방법으로 아트보드 안에 도형을 그려보세요.
아트보드를 벗어나는 영역은 마스크를 씌운 것처럼 깔끔하게 숨겨집니다!

 

3. 아트보드 복사하기

 

스케치앱_2_05
아트보드 복사하기

UI작업을 할 때 다중 화면을 제작하고자 할 경우 Alt를 누른 상태에서 아트보드를 클릭하고 이동하면 복사가 됩니다. Shift를 눌러 수직 수평에 맞춰 복사하면 깔끔하게 아트보드를 유지할 수 있습니다.
(스케치앱 내에서 Alt키는 복사 기능도 있지만 오브젝트 사이의 거리를 확인하는 기능도 있습니다.)

 

4. 아트보드 이름 바꾸기

 

스케치앱_2_06
아트보드 이름 바꾸기

좌측에 레이어 리스트에서 이름을 변경할 수 있습니다. 레이어를 두번 클릭하거나 또는 오른쪽 마우스 > Rename 으로 이름 바꾸기가 가능합니다.

 

5. 아트보드 내보내기 (Export)

 

스케치앱_2_07
아트보드 내보내기

작업이 끝나면 내보낼 아트보드를 선택하고 오른쪽 하단에 Export 옆 ‘+’버튼을 누르면 위와 같이 활성화 됩니다.
한번에 여러 장의 다른 사이즈의 이미지를 내보낼 수 있고, 형식이 다른 여러 장을 한꺼번에 뽑아낼 수도 있습니다. 개발자에게 Assets을 줄 때 쉽게 아이콘 내보내기가 가능합니다.

 

기본 구조에 이어 아트보드에 대해 알아보았습니다.
다음 포스트에서는 ‘점검창 (The Inspector)’에 대해 하나하나 뜯어보겠습니다!

 


banner_bluelens

About Author

이선혜

이선혜

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


« Previous Post
Next Post »