시작하기 전에

 

왜 프로토파이를 써야할까요?

어떤 부분이 그렇게 좋아서, 새로운 툴을 또 익혀야 하나요? 답은 바로 생산성에 있습니다.

프로젝트 진행 과정에서, 프로토타입 제작은 이제 필수 과정입니다.
이 때 디자이너는, 정적 디자인을 프로토타입으로 만들어야 합니다.

이 과정을 오래 전부터 프로토타입 제작에 많이 사용했던 애프터이펙트로 예를 들면,
“디자인 된 화면을 불러와서, 모션을 입힌다.”
라고 요약할 수 있습니다. 말은 간단하지만, 실제로 적용하기는 쉽지 않죠.

물론, 순수하게 움직이기만 하는 모션은 매우 간단합니다.
하지만 그 모션에 커브(모션의 속도 등 강약 조절)값을 입력하는 과정이 너무 복잡하고, 수정도 어렵죠.

게다가 여러 오브젝트에 동일한 커브값을 주는 작업 또한 만만치 않습니다.
그렇다고 커브값 없이 모션을 제작하면 지루하기만 한 결과물이 만들어집니다.

결국, 결과물에 비해 많은 시간이 필요하고, 생산성이 떨어집니다. 다 만들었는데 수정이 필요해지면,
네 그렇습니다, 처음부터 다시. 야근을 시작합니다

 

이 과정을 좀 줄여봅시다

반나절만에 작업방식을 익히고, 남은 반나절동안 결과물을 만들 수 있습니다.

오브젝트를 선택하고, 입력(제스처, 모션 등)과 출력(움직임, 크기 변화 등)을 설정하면,
실제 어플(혹은 프로그램)과 동일하게 작동합니다. 그렇기 때문에 논리적이며, 그렇기 때문에 쉽죠. 칼퇴합시다

이제 시작합니다.

 

 

Protopie 시작하기

 

새로운 프로그램을 사용할 때, 누구나 당황하는 순간이 있죠.
익숙하지 않은 아이콘과 버튼이 보일 때입니다.

Protopie 새 창을 열었을 때 모습

프로토파이를 열고, 새 파이(New Pie)를 누르면 위와 같은 화면이 나타납니다.

얼핏 보면 우리에게 익숙한 포토샵과 비슷한 모습이지만, 막상 어디서부터 시작해야 하는지 잘 모르겠죠.
생소한 단어들도 많이 보게 됩니다. 그 대표 예시가 바로 오브젝트와 트리거입니다.

천천히 하나씩 파악해봅시다.

 

 

오브젝트

 

말 그대로, 오브젝트를 만들거나 불러올 수 있는 기능입니다.

오브젝트 패널 버튼 모음

Image : 이미지를 불러온다
Video : 비디오를 불러온다
Shape : 사각형, 원 등의 도형을 만든다
Text : 텍스트를 입력한다

위 4가지 버튼은 모두 포토샵이나 타 프로그램에서 쉽게 볼 수 있습니다. 이미 익숙한 아이콘이죠.
하지만 컨테이너? 여기서 마우스를 멈칫하게 됩니다. 아이콘 형태로나 이름 무엇으로도 의미를 파악하기 쉽지 않죠.

일단 클릭해봅시다.

컨테이너를 선택하면 나타나는 기능

컨테이너에 대해 쉽게 설명하자면, 포토샵에 있는 마스킹 기능과 유사하다고 생각하면 됩니다.

컨테이너로 투명 영역을 설정하고, 그 안에 레이어(오브젝트)를 넣게 됩니다.
이 때 컨테이너 설정에서 Clip Sublayers를 체크해두면, 설정한 컨테이너 영역 안에서만 레이어가 보이게 됩니다.

백문이 불여일견, 일단 한 번 봅시다.

1) 오브젝트를 만든다

2) 컨테이너를 선택한다

3) 컨테이너를 오브젝트와 겹치게 이동시킨다

4) 오브젝트 레이어를 컨테이너 영역에 넣는다

5) Clip Sublayers 선택

위에서 컨테이너를 “포토샵에 있는 마스킹 기능”과 유사하다고 말했습니다.
거기에 더해서 컨테이너는, 오브젝트를 귀속시키는 폴더 개념을 확장합니다.

컨테이너를 이용하면 여러 오브젝트에 터치영역을 생성하고, 스크롤하는 경우 보이는 영역을 설정할 수 있습니다.

또한 스크롤/페이징 컨테이너를 통해 화면 전환 효과를 부여할 수도 있죠

스크롤 컨테이너 예시 | Protopie

페이지 컨테이너 예시 | Protopie

Device = 화면 크기

 

화면 상단 중앙을 보면 가 눈에 들어옵니다.

디바이스? iPhone8? 안드로이드 작업 해야하는데?
이번에도 당황하지 마시고, 침착하게 그 버튼을 눌러봅시다.

iOS 기종별 해상도가 나타납니다

 

처음 New Pie로 새 창을 열었을 때, 포토샵에 익숙한 사용자는 이미 눈치챘을지도 모르겠습니다.
새 창을 열었을 뿐인데, 마음대로 캔버스 사이즈가 정해져 있죠.

프로토파이 툴은 실제 디바이스에서 테스트 가능한 프로토타입을 제작합니다.
즉, 모바일/모니터 해상도가 캔버스 사이즈가 됩니다.

해상도를 직접 입력할 필요 없이, 다양한 샘플을 미리 제공합니다

 

iOS 디바이스는 대부분 샘플을 제공하지만, 안드로이드나 모니터는 그렇지 못함을 알 수 있습니다. iOS에 비해 해상도가 훨씬 다양해서, 다 포함하기엔 비효율적이라는 판단에서겠죠. 다만 레퍼런스(혹은 준 레퍼런스) 디바이스 해상도는 대부분 포함되어 있으므로, 비슷한 해상도와 DP 값을 고려해서 자신에게 맞는 해상도를 찾아 선택할 수 있습니다.

그런데, 아예 새로운 비율을 가진 디바이스는 어떻게 적용해야 할까요?
한 예로, LG V40을 보면, 1440×3120 이라는 특이한 비율을 가지고 있습니다.
이런 화면에서 프로토타입을 만들고자 한다면, 나만의 커스텀된 화면이 필요합니다.

디바이스 선택 메뉴에서 마지막 탭인 커스텀을 눌러보겠습니다.

커스텀 디바이스 설정 창이 나타나죠. 우리가 원하는 가로, 세로 크기를 픽셀 기준으로 적어주면 되는데,
앞서 이야기했던 LG V40의 사이즈인 1440×3120을 적어보겠습니다.

Custom Density

 

그런데 또 낯선 단어가 보여 멈칫하게 됩니다, Density. 실무 작업에 아직 익숙하지 않다면 처음 봤거나, 아니면 여러 번 봤어도 무심코 지나쳐, 정확한 의미를 잘 모를 수 있습니다. Density란, 화면 크기당 픽셀 밀집도입니다.

레티나 디스플레이 Density 예시 | 정윤선님 브런치

 

위에 보이는 카메라 아이콘 크기는 동일하지만, 사실 레티나 디스플레이 아이콘이 두 배 더 큽니다. Density가 두 배 차이 나기 때문이죠. 레티나 디스플레이 아이콘을 왼쪽 화면에 넣으려면, 아이콘 사이즈가 두 배로 커져야 합니다. 분명히 같은 화면을 가진 디바이스였는데도 말이죠.

이와 같이 Density에 따라 원하는 결과물이 다르게 나타납니다.

스크린 사이즈와 해상도는 각 디바이스 제조사 공식 홈페이지에서 확인할 수 있고, 그 값을 통해 Density를 계산하시면 됩니다. 아래는 Density 값을 쉽게 볼 수 있는 사이트입니다.

Density 값 계산, Pixplicity | DP/PX converter

 

Mdpi=@1x를 기준으로 V40의 QHD 사이즈는 그 네 배인 @4x가 됩니다.

여러 창 열기

 

새 화면을 생성하는 방법은 두 가지입니다.

  • Scene을 추가
  • 새로운 프로젝트 만들기

그 중 Scene을 추가하는 방법은 아래와 같습니다.

디바이스 설정 바로 옆, Scene 추가/삭제

 

다만 이 방법은, 동일 디바이스 사이즈로만 적용 가능합니다.
한 Scene에서 디바이스를 변경하면, 모든 Scene에서 동시에 적용된다는 뜻이죠.

새로운 디바이스(해상도와 Density)가 필요하다면 File–New(Ctrl+N)을 사용해서 새로운 프로젝트를 만들어야 합니다.

프로토파이 핵심 기능, 트리거(Trigger)

 

프로토파이에서 모션을 입히는 과정은 매우 논리적이며, 구현이 간단합니다.
오브젝트를 선택하고, 입력(제스처, 모션 등)과 출력을 설정하면, 작동합니다.

여기서는 입력에 해당하는 트리거(Trigger)를 설명합니다.

트리거의 첫 번째 구성요소, 입력 설정 화면

자주 사용하는 입력 방식에는 단축키가 부여되어있음

기본 제스처 Tap, 거기서 파생된 응용 트리거

Tap 눌렀다 뗌
Double Tap Tap을 두 번 반복
Touch Down or Up 누름 or 뗌 (Tap 제스쳐의 절반)
Long Press 길게 누름
Fling Tap 대상 오브젝트는 움직이지(Move) 않음
Pull 오브젝트가 허용 범위까지 움직임
허용 범위를 벗어나면 제자리로 돌아옴

가장 기본이 되는 Tap 제스쳐 예시 | Protopie

 

 

Drag 기반 트리거

Drag 누른 후 한 방향으로 움직임
Pinch 두 손가락을 사용하여 누른 후
상반되는 방향으로 움직임
Rotate 두 손가락으로 누른 후 회전시킴

Drag 예시 | Protopie

 

조건_Condition 기반 트리거

Chain 선택한 오브젝트 변화에 따라 Chain으로 연결된
다른 오브젝트 또한 변화된다.
Range 범위를 설정하고 범위 밖으로 벗어난 오브젝트만 변화된다.
Start 프로토타입이 실행되거나 Scene이 전환되면
별도 제스처 없이 자동으로 변화시킨다.
Detect 설정한 변수에 부합하면 오브젝트를 추가로 변화시킨다.

Chain의 예시 | Protopie

 

마우스(+키보드) 기반 트리거

Mouse Over 마우스가 오브젝트 위로 올라오면
오브젝트를 변화시킨다.
Mouse Out 마우스가 오브젝트를 벗어나면
오브젝트를 변화시킨다.
Press 특정 키를 입력하면
오브젝트를 변화시킨다.

디바이스 네이티브 트리거

이 밖에도, 텍스트 입력을 만들거나 소프트버튼에 반응하게 할 수도 있고,
디바이스 자체 센서를 사용하는 트리거 또한 가능합니다.

Response

 

입력(Trigger)을 선택했으니, 이제 출력(Response)를 출력해야겠죠? 천천히 진행해봅시다.
제스처에 따라 오브젝트에 어떤 변화가 일어나는지 설정하는 화면입니다.

트리거를 새로 만들면 위 화면이 나옵니다. 방금 만든 트리거 밑에 붙어있는 + 버튼을 클릭해봅시다.

이번에도 주요 기능에 단축키가 붙어있습니다.

Move 오브젝트를 X, Y 축으로 움직인다.
Scale 오브젝트 크기를 조절한다.
Rotation 오브젝트를 회전시킨다.
3D Rotate 오브젝트에 3차원 효과를 부여하여 회전시킨다.
Opacity 오브젝트 투명도를 조절한다.
Color 오브젝트 컬러를 변경한다.
Radius 모서리 라운드 값을 변화시킨다.
Scroll 오브젝트를 특정 위치로 스크롤한다.
이를 활용하여 스크롤 시 정돈된 효과
(관성 스크롤 등)를 줄 수 있다.

위에서는 실무에서 많이 쓰이는 기능 위주로 설명했습니다.
좀 더 자세한 기능이나 추가 정보가 필요하시다면, 프로토파이 홈페이지를 참고하시면 되겠습니다.

프로토파이 홈페이지: 리스펀스 항목

 

 

상세 설정은 여기! 정보창

기본 배경_Bg 정보창

오브젝트 선택 시 정보창

트리거 선택 시 정보창

 

선택한 오브젝트나 트리거에 대한 상세 정보는, 화면 우측 정보창에서 볼 수 있습니다. 여기는 프로토파이에서 대부분의 설정을 조작하는 화면이기 때문에

– 오브젝트 클릭 → 정보창에서 수정
– 트리거 클릭 → 정보창에서 수정

하는 형태로 작업 대부분을 진행하게 됩니다. 가장 많이 사용하게 될 화면이며, PC 사용자 대부분은 오른손으로 마우스를 사용하기 때문에, 해당 패널은 오른쪽에 있습니다.

아무 것도 선택하지 않으면 Bg 설정으로 표시됩니다.

 

 

결과물 확인

제작한 프로토타입을 실제 디바이스에서 확인하고 싶다면 어떻게 해야 할까요?
이메일이나 메신저로 파일을 디바이스에 보내야 하나요?

프로토파이에서는 그럴 필요가 없으니, 간단하게 연결해봅시다.

PC에서 확인: Preview

가장 기본 방식입니다. 시뮬레이션을 위해 새 창을 열어, PC에서 바로 확인합니다.
실시간으로 작업물을 수정하며, 결과물을 확인하기 편리합니다.

모바일에서 확인: Device

디바이스에서 작업물을 확인합니다. 실제 앱(혹은 웹, 서비스 등)처럼 사용해 볼 수 있죠.

디바이스 연결 방식은 총 3가지가 있습니다.

  • 모바일 프로토파이 앱으로 QR코드 인식
    (PC와 모바일 디바이스가 동일한 WiFi에 연결돼있어야 합니다)
  • IP주소 직접 입력
  • 모바일-PC USB 연결

모바일 디바이스 연결

 

또한 작업물을 Cloud로 공유하고, 협업을 진행하거나 다른 장소에서 작업을 이어갈 수 있습니다.

Upload 버튼을 눌러 클라우드에 올리고

Cloud 버튼으로 작업물을 가져옵니다.

URL로도 공유가 가능하므로, 작업물 공유와 협업을 편리하게 진행할 수 있습니다.

Leave a Reply

Mets HIT Inc.

Be creative. Emotional. Innovative with our eXperience