02.인터페이스, 화면을 살펴보자

스케치를 다 설치하셨나요? 그럼 이제 화면 구성에 대해서 알아봅니다. 스크린의 모양을 기준으로 각 영역이 어떤 역할을 하는지, 그리고 이 툴로 무엇을 할 수 있는지 대략적으로 살펴봅니다.

화면 구성 – 주방과 비슷한 프로그램

스케치 화면은 크게 4가지로 구분됩니다. 상단의 Tool bar, 가운데 Canvas, 좌측의 Layer List, 우측의 Inspector로 구성됩니다. 요리라고 생각해볼까요? 캔버스는 도마입니다. 레이어 리스트에는 도마 위에 무엇이 있는지 표시됩니다. 이제 여러분은 상단에 있는 다양한 조리 도구를 이용해서 레이어를 이리저리 손질합니다. 이 때 요리 재료를 클릭하면 해당 요리재료가 어떤 영양소를 갖고 있는지, 현재 온도가 몇도인지 오른쪽에 표시됩니다. 대충 그런 느낌이에요.

" decoding="async" data-src="https://designcompass162885993.files.wordpress.com/2020/11/interface-overview.png?w=924" alt="" class="wp-image-1564" data-recalc-dims="1" />

툴바 – 칼, 가위, 젓가락 같은 조리 도구

상단의 툴바에서는 말 그대로 스케치에서 사용할 수 있는 다양한 도구가 모여 있습니다. 그래픽 요소를 추가하거나 벡터 이미지를 편집하고, 프로토타이핑을 확인하거나 클라우드 서비스에 파일을 업로드할 수도 있습니다. 스케치에서 제공하는 다양한 기능을 커스터마이징할 수도 있습니다.

보통 실제로 작업을 할 때는 직접 누르기보다 단축키를 사용하는 것이 훨씬 더 빠르게 작업할 수 있습니다.

" decoding="async" data-src="https://designcompass162885993.files.wordpress.com/2020/11/interface-toolbar.png?w=924" alt="" class="wp-image-1565" data-recalc-dims="1" />

캔버스 – 재료들을 꺼내놓고 요리하는 도마

캔버스는 시각 구현물이 표시되는 가운데 영역입니다. 캔버스는 아트보드, 심볼, 레이어가 표시됩니다. 캔버스는 제한이 없는 무한히 펼쳐진 공간이라 생각하면 되고, 하얀색 바탕 종이가 아트보드, 그 위에 흩뿌리고 풀로 붙이는 색종이들이 레이어라고 생각하면 됩니다.

" decoding="async" data-src="https://designcompass162885993.files.wordpress.com/2020/11/interface-canvas.png?w=924" alt="" class="wp-image-1567" data-recalc-dims="1" />

레이어 리스트 – 꺼내놓은 재료 목록

레이어 리스트 영역에는 페이지와 레이어의 목록이 표시됩니다. 페이지를 이용해 큰 그룹을 나눌 수 있고 레이어 리스트에서 다양한 요소들을 확인할 수 있습니다. 키워드로 검색이 가능하며 우클릭으로 해당 레이어를 손쉽게 다룰 수 있습니다.

캔버스에 표시되는 바탕 종이인 아트보드와 색종이인 레이어가 목록으로 표시되는 영역입니다. 실제 작업 시에는 캔버스를 중심으로 작업을 진행하기 때문에 나중에 레이어를 정리하는 경우가 많습니다.

" decoding="async" data-src="https://designcompass162885993.files.wordpress.com/2020/11/interface-layer.png?w=924" alt="" class="wp-image-1566" data-recalc-dims="1" />

인스펙터 – 재료를 계량해주는 컵과 자, 온도계!

인스펙터는 캔버스나 레이어 리스트에서 선택한 요소의 속성을 제어하기 위한 영역입니다. 해당 시각 요소의 위치, 크기, 색, 선, 그림자 등을 제어할 수 있습니다. 또한 여러 요소의 정렬 등을 정의할 수도 있습니다.

실제 작업을 할 때 캔버스 다음으로 가장 많이 다루게 될 영역입니다. 선택한 시각 요소의 성격에 따라 표시되는 내용이 달라지며, 다양한 수식 표현은 4*3 혹은 320/3 과 같이 수식을 이용해 계산을 할 수도 있습니다.

" decoding="async" data-src="https://designcompass162885993.files.wordpress.com/2020/11/interface-inspector.png?w=924" alt="" class="wp-image-1576" data-recalc-dims="1" />

최근 소식

디자인 나침반 아카데미

최근 글

WWDC24: 드디어 애플의 AI

애플이 WWDC 2024 일정을 공개했습니다. 6월 10일 월요일 특별 기조연설을 시작으로 14일까지 개최 예정입니다. 애플 파크에서

글이 없습니다.