프린서플 > 인터페이스 살펴보기

Hoon Cho
4 min readFeb 19, 2016

프린서플의 인터페이스는 스케치와 매우 유사하다. 때문에 스케치를 사용하던 디자이너들은 매우 빠르게 프린서플의 인터페이스에 적응할 것이다. 반대로 포토샵만 사용하던 디자이너들에게는 매우 익숙하지 않은 인터페이스라 적응하는데 시간이 다소 걸릴 수 있다. 사실 많은 디자이너들이 스케치가 대세라니 몇 번 써보다가 상당수가 다시 포토샵으로 돌아간다. 바쁘게 돌아가는 실무 환경에서 익숙하지 않은 인터페이스로 작업 시간을 뺏길 수 없기 때문이다. 암튼 그건 내가 알 바가 아니고 프린서플의 인터페이스에 대해 알아보자.

캔버스 (Canvas)

프린서플의 캔버스

가장 오랜 시간 동안 머무르며 대부분의 작업을 진행 할 공간이 바로 이 캔버스다. 캔버스에서 현재 작업 중인 아트보드는 녹색 테두리로 표시된다.

미리보기 (Preview)

프린서플의 미리보기

캔버스의 모서리에 있는 창은 미리보기 창이다.

프린서플의 미리보기

프린서플을 전체 화면이 아닌 상태로 작업 중이라면 캔버스 밖으로 빼서 사용할 수도 있다.

미리보기 포인터 설정

진행중인 프로젝트가 데스크탑이냐 모바일이냐에 따라 포인터를 마우스 커서나 터치 포인트로 바꿀 수도 있다. (VIEW > Toggle Preview Cursor Type)

미리보기에 대해 자세히 살펴보기

레이어 목록 (Layer List)

프린서플의 레이어 목록

왼쪽 하단의 레이어 목록에서 현재 작업중인 디자인에 있는 모든 레이어를 볼 수 있다. 스케치와 마찬가지로 그룹화 할 수도 있다. 거의 유사하다. 레이어 마우스 오버하면 눈 아이콘이 뜨는데 클릭하면 해당 레이어가 캔버스에서 숨겨진다. 주의할 점은 미리보기에는 영향을 주지 않는다는 점이다.

레이어에 대해 자세히 살펴보기

인스펙터 (Inspector)

프린서플의 인스펙터

스케치에 친숙한 디자이너라면 굳이 설명이 필요 없을 것이다. 스케치가 포토샵에 비해 인터페이스가 단순해 보이는 가장 큰 이유가 바로 이 인스펙터라고 생각한다. 선택한 레이어에 필요한 속성 만을 표시하기 때문에 매우 효율적이다.창의와 레이어 목록 위의 왼쪽에, 인스펙터는 선택한 레이어의 속성을 표시합니다.

이벤트에 대해 자세히 알아보기

애니메이트 패널 (Animate Panel)

프린서플의 애니메이션 패널

상단 메뉴바에서 ‘애니메이트(Animate)’ 아이콘을 클릭하면 화면 하단에 애니메이션 패널이 보여진다. 플래시나 애프터이펙트 같은 타임라인 베이스의 툴을 다뤄본 디자이너들은 쉽게 사용이 가능할 것이다.

애니메이션에 대해 자세히 알아보기

드라이버 패널 (Driver Panel)

프린서플의 드라이버 패널

상단 메뉴바에서 ‘드라이버(Drivers)’ 아이콘을 클릭하면 화면 상단에 드라이버 패널이 보여진다. 개인적으로 프린서플을 왜 쓰냐고 묻는다면 바로 이 드라이버 패널과 애니메이션 패널 때문이라고 말해주고 싶다. 이 두 가지만 잘 활용하면 생각보다 정교한 인터랙션을 만들어 낼 수 있다.

드라이버에 대해 자세히 알아보기

오늘은 여기까지…

UI 디자인 작업에 스케치를 주로 사용해 오던 디자이너라면 프린서플의 인터페이스가 매우 익숙할 것이다. 스케치와 겁나 유사하니 그냥 사용하면 된다. 다만 일부 프로토타이핑 툴에서 제공하는 스케치 데이터와의 호환은 안 된다. 현재 이 부분을 개발중이라고 해외포럼에서 읽은 기억이 있으니 희망을 갖고 기다려보자. 이제 버전 0.08의 시작 단계니까. 추가적으로 프린서플 공식 웹사이트의 FAQ를 정리한 글도 꼭 읽어보길 바란다.

--

--