[ProtoPie School] 카메라 인터랙션 만들기
ProtoPie에서 간단하지만 현실적인 카메라 인터랙션을 구현해 봅시다.
▶ 이전 학습내용이 궁금하다면? 여기를 클릭!
▶ 어떤 내용을 배울지 한눈에 보고 싶다면? 여기를 클릭!
ProtoPie의 뛰어난 기능 중 하나는 camera, vibration, tilt, compass 및 3D touch와 같은 최신 스마트폰 및 태블릿의 다양한 기본 기능을 사용할 수 있다는 것입니다. ProtoPie를 사용하여 사실적인 카메라 인터랙션을 쉽게 구현하는 법을 배워보겠습니다.
필요한 사항
이번 아티클에서는 아래 Pie를 사용하여 작업할 예정입니다.
카메라 인터랙션 Pie 파일 다운받기
기기 자체에서 인터랙션을 테스트할 예정이므로, 휴대폰을 작업 공간 근처에 두세요. 또한 ProtoPie Player 앱이 설치되어 있는지 확인합니다.
ProtoPie Player 앱 다운받기:
iOS
Android
학습할 내용
학습 목표
▶ Camera Layer 만들기
▶ 카메라 시작하기
▶ Camera Response와 사진 촬영, 전면 및 후면 카메라 간 전환 등의 기능을 사용한 인터랙션 생성하기
▶ 휴대폰에서 인터랙션 미리 보기
▶ 애니메이션을 적용을 통한 피드백과 느낌 개선하기
소요 예정 시간: ≤15분
1. Camera Layer 만들기
위에서 다운로드한 Pie 파일을 Studio에서 엽니다.
카메라 앱 인터페이스는 이미 생성되어 있으니, 새 Camera Layer를 만들어 보겠습니다.
Media 메뉴에서 Camera를 선택하면, 마우스 커서가 십자선 아이콘으로 바뀔텐데요. 이때 scene에 카메라 레이어를 그립니다.
Camera Layer가 화면 전체에 차도록 크기를 조정해야 하는데, . 제어점을 드래그하거나 속성 패널에 값을 입력하면 됩니다.
Camera Layer 위에 UI 구성 요소인 Shutter 버튼과 Switch Cam 버튼이 있도록 설정해 봅시다.
Camera Layer를 스택의 맨 아래로 드래그하세요.
2. 카메라 시작하기
Scene이 시작될 때 카메라를 시작하도록 설정해 봅시다. ProtoPie에서는 해당 작업을 쉽게 수행할 수 있는데요.
속성 관리자에서, Auto Start 옆의 확인란을 선택하기만 하면 됩니다.
사용할 카메라 방향도 선택이 가능한데요. 이번 시간에는 Rear를 선택해 봅시다.
3. 미리 보기
아래 이미지는 카메라에서 보여지는 것과는 많이 다르죠?
카메라의 사진을 보려면 기기에서 직접 Pie를 미리보기 해야합니다.
Studio에서 Preview 버튼을 클릭하면 위와 같은 이미지를 볼 수 있습니다.이때 ProtoPie Player 앱을 사용하면 됩니다.
ProtoPie Player 앱은 Pie를 공유하는 모든 유저가 휴대폰이나 태블릿에서 실제 환경과 동일하게 프로토타입을 실행할 수 있도록 도와주는 강력한 앱입니다. 또한, 휴대폰 카메라와 같은 내장 장치 센서를 사용할 수 있는 유일한 방법이기도 합니다.
Player 앱을 아직 설치하지 않으셨다면, 위의 What you'll need 섹션에 있는 링크를 사용하여 기기에 앱을 설치하세요.
Studio의 오른쪽 상단 아이콘 세트에서 Device를 클릭합니다. 클릭과 동시에 QR 코드가 표시되는데, 곧 사용할 것이니 잠깐만 그대로 두세요.
기기에서 ProtoPie Player 앱을 시작하면, 다음과 같은 화면이 표시될 것입니다.
Scan QR Code를 클릭하세요.발급받은 QR 코드 스캔과 동시에, Pie가 휴대폰에서 실행되고 scene이 후면 카메라 이미지로 채워질 것입니다.
▶ 참고사항: 해당 작업을 실행하기 위해서는 휴대폰이 Studio를 실행하는 컴퓨터와 동일한 WiFi에 연결되어 있거나, USB 케이블을 사용하여 Studio를 실행하는 컴퓨터에 장치가 연결되어 있어야 합니다.
기기에서 Pie가 시작되지 않으면 위 두가지 방법 중 하나를 사용하여 휴대폰을 연결해 보세요.
4. 인터랙션 추가
이제 기기에서 Pie를 미리 보는 방법을 배워보았으니, Switch Cam 버튼과 Shutter 버튼을 연결해 보겠습니다.
Tap trigger를 추가하고, Switch Cam Button 레이어를 선택합니다.
Camera Response를 추가하고, Camera 1 레이어를 선택하세요.
속성 패널의 Camera 드롭다운에서 Switch를 선택합니다.
다른 Tap trigger를 추가하고, Shutter Button 레이어를 선택합니다.
Camera Response를 추가합니다. 그 다음, Camera 1 레이어를 선택합니다.
셔터 버튼을 탭하면 Pie가 사진을 찍도록 설정해 보려고 합니다. ProtoPie에서 카메라를 중지하면 이 작업을 수행할 수 있습니다.
속성 패널에서, Action 옆의 Stop을 선택합니다.휴대폰의 Player에서 미리 보기를 업데이트하려면, Studio에서 Run 아이콘을 클릭하세요. 기기에 Pie가 다시 로드되고 변경 사항이 반영됩니다.
이제 전면 카메라와 후면 카메라 사이를 전환할 수 있으며 사진 촬영이 가능합니다.
카메라 인터랙션, 이제 쉽게 구현해 보세요!
이번 시간에는 Camera Layer 객체와 Camera Response를 사용하여 기기의 내장 카메라를 사용하는 프로토타입을 만드는 방법과 ProtoPie Player 앱을 사용하여 휴대폰이나 태블릿에서 뛰어난 작업을 실행하는 방법을 배웠습니다.
현재 Pie는 한 장의 사진만 촬영할 수 있으며, 전/후방 카메라간의 변경이 매끄럽지 못한 경향이 있습니다. 또한 해당 기능에 대한 피드백이 아직은 충분하지 않습니다.
ProtoPie에서 카메라 인터랙션을 구현하는 방법을 더 살펴보려면 아래 영상을 확인해 보세요.
Camera Layer 및 response 사용 방법을 배웠으니, ProtoPie에 포함된 다른 기기별 기능을 살펴보는 것을 추천드립니다. ProtoPie에는 오늘 다룬 카메라 기능 외에도 Tilt, Compass 및 3D Touch를 위한 trigger와 Vibration에 대한 response가 있습니다.
이 시리즈를 계속 보셨다면,
이전에 업로드된 음성인식에 대한 아티클을 접하셨을 수도 있을 텐데요.
음성인식과 카메라, 모두 모바일 기기에서 원활하게 작동한답니다.
