믿을 만한 카메라 인터랙션을 만들고 싶으신가요? 이 튜토리얼에서는 몇 번의 클릭만으로 이를 프로토타입으로 만드는 방법을 보여드릴게요!
카메라 인터랙션을 사용해 어떤 놀라운 프로토타입을 만들 수 있는지 데모 동영상을 확인해 보세요.
영감을 얻으셨나요? 아래 튜토리얼을 따라 나만의 카메라 인터랙션 프로토타입을 시작해 보세요.
개요
필요한 것
배울 내용
카메라 인터랙션을 프로토타입으로 만드는 방법
1단계: Camera Layer 만들기
2단계: 카메라 시작하기
3단계: 미리 보기!
4단계: 인터랙션 추가하기
이제 끝입니다! 카메라 인터랙션이 준비되었습니다!
카메라 인터랙션에 대해 더 알아보기
더 많은 프로토타이핑 강의 살펴보기
ProtoPie School에서 더 알아보기
필요한 것
아직 ProtoPie를 사용하고 있지 않다면 지금 바로 ProtoPie Studio를 무료로 다운로드하세요.
다음으로, 아래의 Pie 파일을 다운로드하여 이 프로토타입을 직접 만들어 보세요.
휴대폰도 가까이에 두세요. 실제 기기에서 인터랙션을 미리 볼 예정이니까요. 아직 설치하지 않았다면, 기기에서 프로토타입을 바로 미리 보고 테스트할 수 있게 해 주는 ProtoPie Player 앱을 설치하세요:
배울 내용
이 튜토리얼을 마치면 다음을 할 수 있게 됩니다:
카메라 레이어 만들기
카메라 시작하기
Camera Response를 사용해 사진 촬영과 전면/후면 카메라 전환 같은 기능이 있는 인터랙션 만들기
휴대폰에서 인터랙션 미리 보기
피드백과 느낌을 개선하도록 경험에 애니메이션 적용하기
완료 시간: ≤15분
카메라 인터랙션을 프로토타입으로 만드는 방법
1단계: 카메라 레이어 만들기
시작해 볼까요! 먼저 위에서 다운로드한 시작용 Pie 파일을 ProtoPie Studio에서 여세요:
카메라 앱 인터페이스의 시작 화면이 이미 만들어져 있습니다.
새 카메라 레이어를 만들어 봅시다.
Media 메뉴에서 Camera를 선택하세요.
마우스 커서가 십자선 아이콘으로 바뀝니다. 씬에 Camera layer를 그리세요.
아직 하지 않았다면, Camera layer의 크기를 조정해 화면 전체를 채우세요.
컨트롤 포인트를 드래그하거나 속성 패널에 값을 입력해도 됩니다.
UI 구성 요소인 —
Shutter Button과Switch Cam Button— 이 카메라 레이어 위에 오도록 하겠습니다.
Camera layer를 스택의 맨 아래로 드래그하세요.
2단계: 카메라 시작하기
씬이 시작될 때 카메라도 시작되도록 하고 싶습니다. ProtoPie에서는 아주 쉽습니다:
속성 검사기에서 Auto Start 옆의 체크박스를 선택하세요.
사용할 카메라를 선택할 수 있습니다. Rear를 선택하세요.
3단계: 미리 보기!
이건 카메라가 보는 화면처럼 보이지 않죠? 카메라 영상을 보려면 Pie를 기기에서 직접 미리 봐야 합니다.
Studio에서 Preview 버튼을 클릭하면 다음과 같이 보입니다.
바로 여기서 ProtoPie Player 앱이 필요합니다! 이 강력하고 무료인 앱을 사용하면 당신이나 Pie를 공유한 누구나, 마치 네이티브 모바일 경험처럼 휴대폰이나 태블릿에서 프로토타입을 실행할 수 있습니다.
게다가 휴대폰 카메라 같은 기기 내장 센서를 활용할 수 있는 유일한 방법이기도 합니다. 아직 설치하지 않았다면, 위의 필요한 것 섹션에 있는 링크를 사용해 기기에 앱을 설치하세요.
Studio의 오른쪽 상단 아이콘 묶음에서 Device를 클릭하세요. 그러면 QR 코드가 표시됩니다. 잠시 후 필요하니 이 화면을 그대로 두세요.
기기에서 ProtoPie Player 앱을 실행하세요. 다음 화면이 나타납니다:
Scan QR Code를 탭하세요.
위에서 표시한 QR 코드를 스캔하세요. 이제 Pie가 휴대폰에서 실행되고, 씬에는 후면 카메라 이미지가 채워져 있어야 합니다.
💡 참고: 이 기능을 사용하려면 휴대폰이 Studio를 실행 중인 컴퓨터와 같은 Wi-Fi에 연결되어 있거나, USB 케이블로 Studio를 실행 중인 컴퓨터에 연결되어 있어야 합니다. 기기에서 Pie가 시작되지 않으면, 휴대폰이 이 두 가지 방법 중 하나로 연결되어 있는지 다시 확인하세요.
4단계: 인터랙션 추가하기
이제 기기에서 Pie를 미리 보는 방법을 알았으니, 카메라 전환 버튼과 셔터 버튼을 연결해 봅시다.
Tap 트리거를 추가하세요.
Switch Cam Button레이어를 선택하세요.
Camera 응답을 추가하세요.
Camera 1레이어를 선택하세요
속성 패널에서 Camera 선택 드롭다운에서 Switch를 선택하세요.
다른 Tap 트리거를 추가하세요.
Shutter Button레이어를 선택하세요.
Camera 응답을 추가하세요.
Camera 1레이어를 선택하세요.
Shutter 버튼을 탭하면 Pie가 사진을 찍도록 하고 싶습니다. ProtoPie에서는 카메라를 중지해서 이를 구현합니다.
속성 패널에서 Action 옆의 Stop을 선택하세요.
휴대폰의 Player에서 미리 보기를 업데이트하려면 Studio에서 Run 아이콘을 클릭하세요. 그러면 변경 사항이 반영된 Pie가 기기에서 다시 로드됩니다.
이제 전면/후면 카메라를 전환할 수 있고, 사진도 찍을 수 있어야 합니다.
이제 끝입니다! 카메라 인터랙션이 준비되었습니다!
이제 Camera Layer 객체와 Camera Response를 사용해 기기의 내장 카메라를 활용하는 프로토타입을 만드는 방법을 알게 되었고, ProtoPie Player 앱으로 여러분의 멋진 작업을 휴대폰이나 태블릿에서 실행하는 방법도 배웠습니다. 잘하셨어요!
경험을 더 개선하고 싶다면 — 지금 Pie는 한 장의 사진만 찍을 수 있고, 피드백도 거의 없으며, 전면/후면 카메라 전환도 조금 더 자연스러울 수 있습니다 — 지금 만든 내용을 바탕으로 한 단계 더 발전시켜 매우 그럴듯한 카메라 앱 데모로 바꾸는 후속 동영상을 시청해 보세요.
카메라 인터랙션에 대해 더 알아보기
더 많은 프로토타이핑 강의 살펴보기
이 시리즈를 처음부터 따라오셨다면, 이전 글에서 Voice와 Speech에 대해 다룬 것을 기억하실 겁니다. 이 두 기능은 모바일 기기에서 아주 훌륭하게 작동합니다. 프로토타이핑 실력을 키울 수 있도록 모든 강의를 살펴보세요.
강의 5: 카메라 인터랙션을 프로토타입으로 만드는 방법
ProtoPie School에서 더 알아보기
프로토타이핑을 마스터하고 수료증도 받고 싶으신가요? 그렇다면 ProtoPie School로 가보세요. 완전히 무료입니다!
