오늘날의 디지털 환경에서 앱 내 메시징 앱은 현대 커뮤니케이션에 필수적이 되었으며, 이러한 경험을 위한 고충실도 프로토타이핑은 원활하고 몰입감 있는 사용자 상호작용을 만들고, 테스트하고, 완성하는 데 필수적입니다.
이 튜토리얼에서는 두 기기를 사용해 앱 내 메시징 경험을 만드는 방법을 보여드리겠습니다. 예시로 Snapchat의 인메신저 앱을 사용하겠습니다.
아래 데모 영상을 보고 이 튜토리얼에서 무엇을 만들지 확인해 보세요.
완성된 Pie 파일(보내는 쪽)완성된 Pie 파일(받는 쪽)
개요
프로토타이핑을 시작해 봅시다
1단계: Snapchat UI를 준비하고 디자인을 ProtoPie로 내보내기
2단계: 첫 번째 Pie의 프로토타이핑 시작하기
3단계: 메시징 상호작용 만들기
4단계: 두 번째 Pie로 이동(메시지 수신)
5단계: 크로스 디바이스 통신에 ProtoPie Connect 사용하기
ProtoPie로 프로토타이핑 전문가 되기
ProtoPie를 처음 사용하신다면, 이 가이드는 ProtoPie의 강력한 기능을 활용해 크로스 디바이스 경험의 세계로 들어가는 데 도움을 줄 것입니다.
참고: 이 글에서는 Snapchat 앱 전체를 완전히 프로토타이핑하지는 않았습니다. 대신 한 기기에서 다른 기기로 메시지를 주고받는 상호작용을 프로토타이핑하는 데 집중했습니다. 여러분의 프로젝트에서도 특정 기능 하나를 강조하고 싶을 수 있습니다. 따라서 일정과 정확히 무엇을 스테이크홀더에게 보여줄지에 대한 기대치를 관리하는 것이 중요합니다.
프로토타이핑을 시작해 볼까요! 🍴
1단계: Snapchat UI 디자인을 ProtoPie로 내보내기
Figma에서 ProtoPie로 디자인을 내보내세요.
ProtoPie Studio에서 새 Pie를 만드세요. 프로토타이핑 과정에 들어가기 전에, Figma Community의 Figma Community 내 ProtoPie 페이지에서 화면을 사용할 수 있도록 준비해 두었습니다. 자신의 계정으로 Figma 파일을 열어 편집 권한을 얻을 수 있습니다. 그런 다음 Figma에서 ProtoPie로 디자인을 직접 내보내 프로토타이핑을 시작할 수 있습니다.
아직 ProtoPie 플러그인을 다운로드하지 않았다면, 즐겨 사용하는 디자인 툴에서 검색하거나 아래 버튼을 클릭해 찾을 수 있습니다.
다음으로 화면을 선택하고 ProtoPie 플러그인을 연 뒤 Export를 클릭해 디자인을 ProtoPie로 옮기세요. 디자인을 내보내는 방법에 대한 자세한 정보는 디자인을 내보내는 방법에서 확인하거나, 이 영상도 살펴보세요
이번 경험에서는 두 개의 Pie를 만들 것입니다. 하나는 보내는 쪽 Pie, 다른 하나는 받는 쪽 Pie입니다. 두 기기 모두 서로 메시지를 주고받을 수 있습니다.
화면 디자인을 마치고 준비가 되었으니 이제 ProtoPie Studio로 이동해 봅시다. 먼저 첫 번째 Pie(프로토타입)부터 시작합니다. 두 개의 화면을 선택하고 플러그인을 연 뒤 Export를 클릭하세요.
2단계: 첫 번째 Pie의 프로토타이핑 시작하기
프로토타이핑 시작.
먼저 첫 번째 Pie부터 시작하겠습니다. 이 Pie가 메시지를 보내는 역할을 합니다. 경험 흐름은 프로필 페이지에서 시작되며, 사용자가 메시지 아이콘을 탭하면 메시징 화면이 열립니다.
탭 트리거.
ProtoPie 용어로, *트리거*는 Tap이고, 반응은 이 경우 메시징 UI가 있는 다른 화면으로의 **점프**입니다.
점프 반응.
Jump 반응은 여러 종류의 전환을 허용합니다. 이 경우에는 Snapchat에서 일어나는 것과 비슷한 상호작용을 구현하고 싶으므로 Slide Out의 Left to Right 전환을 사용하겠습니다.
Slide Out 전환.
첫 번째 화면은 완료했습니다!
프로토타입의 첫 번째 화면 완료.
3단계: 두 번째 화면에서 메시징 상호작용 만들기(메시지 보내기)
두 번째 화면.
두 번째 화면으로 넘어가겠습니다. 이곳에서 메시징 상호작용이 이루어집니다.
이전 장면에서 Jump한 뒤, Start 트리거를 추가했습니다. 장면이 로드되면 이 트리거가 연결된 모든 반응이 실행됩니다.
이 장면에서는 장면이 로드된 직후에 몇 가지 전환을 추가하고 싶었기 때문에 Move와 Focus 반응.을 모두 사용했습니다.
Move 및 Focus 반응.
새롭게 개편된 이징 옵션을 꼭 활용해 보세요. 자신만의 커스텀 프리셋도 만들 수 있습니다!
커스텀 프리셋.
Move 전환 애니메이션이 끝나면 다음 반응은 Focus입니다.
Snapchat 메시지가 어떻게 동작하는지 살펴보면, 첫 번째 화면에서 메시지 아이콘을 탭하고 두 번째 화면으로 이동했을 때 텍스트 필드가 메시지를 보낼 준비가 되어 있고 입력과 휴대폰 키보드가 활성화됩니다. 그래서 비슷한 결과를 만들기 위해 Focus를 사용합니다:
Focus 반응.
입력 레이어.
참고: Focus가 작동하려면 Text Field 그룹 안에 Input Layer를 추가해야 합니다. Text → Input으로 이동해 디자인의 크기에 맞는 박스를 그리세요. 디자인을 Snapchat 텍스트 필드 디자인에 맞게 조정합니다.
Focus 미리보기.
다음은 무엇일까요? 이제 다른 휴대폰으로 메시지를 보내서 수신하게 만들겠습니다. 먼저 메시지가 무엇인지, 다시 말해 입력란에 무엇이 들어 있는지 알아야 하므로, 이를 위해 Detect. Detect라는 기능을 사용하겠습니다. Detect는 선택한 객체의 속성이 변경되는지 모니터링하며, 그 아래에 넣은 모든 Responses는 해당 속성이 바뀔 때마다 실행됩니다.
여기서 우리의 Detect 트리거는 Input 레이어의 텍스트를 모니터링합니다.
Detect 트리거.
이를 위해 텍스트 변수를 Assign하는 수식을 사용하겠습니다. 왜냐고요? 입력한 텍스트는 변수에 "저장"되기 때문입니다. 즉 나중에 메시지를 보낼 때 변수에 "저장"된 텍스트가 전송됩니다.
ProtoPie Studio 왼쪽 아래에서 Variables 옆의 “+”를 탭해 이 장면의 변수를 만들고, Text 유형을 선택하세요. Detect 트리거 아래에 새로 만든 변수에 Assign 반응을 추가합니다. 수식은 'Input 1'. text를 사용하세요.
Assign 반응.
작동 방식 미리보기입니다:
메신저 앱 미리보기.
이제 텍스트를 보낼 준비가 되었습니다. 하지만 메시지를 입력한 뒤 키보드에서 "send"를 눌러야만 전송됩니다. 이를 위해 Return 트리거를 사용하겠습니다.
키보드에서 "send"를 누르면 다음 동작이 트리거됩니다:
송신 및 수신 Pie.
"Send Response"는 나중에 다른 기기에서 수신할 수 있도록 메시지를 전송합니다.
보낸 메시지가 화면에 텍스트로 표시됩니다. (이를 위해 Text 반응을 사용합니다.)
텍스트와 함께 일부 UI도 나타납니다. 실제 앱과 같은 효과를 내기 위해 간단한 Opacity 트리거를 사용합니다.
입력 필드를 다시 편집 가능하게 만드는 또 다른 Focus 트리거.
입력 필드에 이전에 작성한 텍스트를 삭제하는 Reset.
또 다른 변수인 "Text 2"도 두 번째 Pie에서 텍스트를 수신하기 위해 생성되었습니다.
텍스트 변수.
이 Pie의 수정을 마무리하기 위해, Pie 2에서 보내진 텍스트가 Pie 1에 표시되도록 Text 반응을 추가하고, Opacity response를 100%로 설정합니다.
4단계: 두 번째 Pie로 이동(메시지 수신)
두 번째 Pie는 첫 번째 Pie의 이전 ‘Screen 2’와 같은 원리를 따릅니다.
ProtoPie Studio에서 새 Pie를 만드세요. 이전 Pie에서 했던 것처럼 Figma에서 “Adri”라는 이름의 화면을 가져옵니다.
다시 한번 Start 트리거가 UI에 영향을 주어, 키보드에 맞게 하단 시트를 이동시키고 입력이 텍스트를 받을 준비가 되도록 설정합니다.
다시 2개의 변수를 만들어야 합니다: 첫 번째 Pie와 맞추기 위해 "Text 1"과 "Text 2"를 생성하세요.
Detect 트리거는 변수 "Text 2"와 함께 작동합니다. 이 변수는 Pie 2의 정보를 저장해 Pie 1로 보내는 역할을 하고, 변수 "Text 1"은 그 반대 역할을 합니다. 이 Pie의 나머지 트리거와 반응을 따라가면, 이전 Pie와 같은 단계를 수행했다는 것을 알 수 있을 것입니다.
중요: Send와 Receive를 사용하면 메시지와 함께 작동합니다. 이 메시지들은 반드시 Pie 1의 메시지와 일치해야 합니다.
Pie 1이 보내고, Pie 2가 수신 - 메시지 "SENT". 채널: ProtoPie Studio
Pie 2가 보내고, Pie 1이 수신 - 메시지 “SENT 2”. 채널: ProtoPie Studio.
5단계: 크로스 디바이스 통신을 위해 ProtoPie Connect 사용하기
이제 크로스 디바이스 경험을 테스트할 시간입니다. 이를 위해 ProtoPie Connect를 사용해야 합니다. 모습은 다음과 같습니다:
ProtoPie Connect.
ProtoPie Enterprise를 사용하지 않는 경우, 두 개의 프로토타입을 ProtoPie Cloud에 저장하고 다운로드해야 합니다. 그런 다음 로컬 프로토타입을 Connect에 업로드하여 서로 "통신"할 수 있게 합니다.
두 개의 Pie를 업로드한 후에는 기기 아이콘을 사용해 미리보기를 열거나, 휴대폰의 ProtoPie Player 앱에서 QR 코드를 스캔할 수 있습니다. 각 기기에서 QR 코드를 스캔해야 합니다.
이제 끝입니다. 메신저 앱을 프로토타이핑했습니다. 잘하셨어요!
여러분의 작품을 우리와 공유해 주세요. 또한 #MadeWithProtoPie 태그를 사용하여 갤러리 페이지에 소개되고, Pie of the Month로 선정될 기회를 놓치지 마세요.
ProtoPie로 프로토타이핑 전문가 되기
이 경험을 프로토타이핑하며 즐거우셨길 바랍니다. 여기서 배운 상호작용은 더 깊이 탐구할 수 있는 훌륭한 토대가 됩니다. 더 배우고 싶다면 ProtoPie school에 등록하거나, ProtoPie를 무료로 다운로드해 바로 시작할 수 있습니다.
