들어가며: 로그인은 단순한 시작점이 아닙니다
UX 라이트하우스에서 진행된 거의 모든 사용성 테스트 세션에서 참가자가 로그인 화면에 도달했을 때 잠시 멈추는 순간이 있습니다. 그들은 "이건 진짜 앱이 아니지?"라고 눈치채고, 이후의 모든 행동은 이 인식을 기반으로 변형됩니다. 특히 금융 앱에서는 더 심각합니다. 잔액이 맞지 않거나, 아무 값이나 입력되는 필드를 보면 참가자들은 즉시 불신을 드러내고 테스트는 '시연'으로 전락합니다.
이 문제의 해결책은 생각보다 좁습니다. 참가자의 신뢰가 형성되는 순간을 찾아 그 인터랙션을 '진짜'로 만드는 것입니다. 금융 앱에서 그 순간은 바로 로그인입니다. 이 튜토리얼에서는 코드 없이 실제 인증, 에러 상태, 네이티브한 생체 인식 애니메이션을 갖춘 로그인 플로우를 ProtoPie로 구현하는 방법을 다룹니다.
준비물
- Figma (또는 지원되는 디자인 툴)에서 만든 로그인 UI
- ProtoPie Studio (무료 플랜으로 충분합니다)
- Face ID 애니메이션용 Lottie 파일 (이 글에서 사용한 Lottie 파일 링크 참고)
- 완성된 Pie Bank 프로토타입 파일 (참고용)
이 튜토리얼은 ProtoPie 블로그의 FinTech Prototyping 시리즈의 일부입니다. 대시보드, 송금 로직, 카메라 통합을 다루는 다른 챕터도 있으니 관심 있다면 시리즈 전체를 확인해 보세요.
Step 1: Figma에서 Scene으로 가져오기
Figma에서 ProtoPie 플러그인을 열고 로그인 프레임을 선택한 뒤 Scene으로 내보내세요. Flattened는 모든 것을 하나의 이미지로 합치지만, Scene은 레이어 계층을 보존하여 각 요소를 개별적으로 조작할 수 있게 합니다.
중요: 내보내기 전에 모든 레이어 이름을 의미 있게 바꾸세요. "Rectangle 14" 대신 "Input Username"처럼요. 나중에 수식에서 이 이름을 참조하게 되므로, 애매한 이름은 시간 낭비를 부릅니다.
Step 2: 정적 필드를 실제 입력 가능한 Input 레이어로 교체
ProtoPie의 네이티브 Input 레이어는 실제 키보드 입력을 받습니다. 참가자가 텍스트를 입력할 수 있게 하려면:
1. 텍스트 도구 → Input 레이어 선택
2. 캔버스에 드래그하여 사용자 이름 필드 그룹 안에 중첩
3. Placeholder를 "Username"으로, 배경색과 폰트는 디자인에 맞게 설정
미리보기를 실행하고 필드를 클릭해서 입력해 보세요. 이제 프로토타입이 실제 앱처럼 동작합니다. 이 레이어를 복제하고 비밀번호 필드 그룹에 중첩하세요.
Step 3: 비밀번호 마스킹 설정
복제한 레이어의 Placeholder를 "Password"로 바꾸고, Type을 Text Password로 설정하세요. ProtoPie가 자동으로 마스킹 처리합니다. 별도의 커스텀 로직이 필요 없습니다.
Step 4: 목적지 씬 만들기
새 씬(Scene)을 추가하세요. ProtoPie에서 가장 흔한 실수는 목적지 씬 없이 내비게이션을 연결하려는 것입니다. 먼저 만들고 시작하세요.
Step 5: 버튼 연결 (하지만 아직 부족함)
로그인 버튼에 Tap 트리거를 추가하고, 응답으로 Jump를 설정하여 대시보드 씬으로 이동하게 하세요. 트랜지션은 Slide in from right to left로 지정하세요.
[로직 트리] Log In → Tap → Jump → Dashboard
미리보기에서 탭하면 이동하지만, 아무 입력 없이도 통과됩니다. 아직 프로토타입은 사용자를 속이고 있습니다. 다음 두 단계가 해결책입니다.
Step 6: 변수 추가하여 입력값 저장
ProtoPie 하단 왼쪽에서 Text 타입 변수 두 개(username, password)를 추가하세요. 각각의 Input 레이어에 바인딩합니다.
username = input("Input Username").text
password = input("Input Password").text
디버그 아이콘을 활성화하면 입력할 때 변수 값이 실시간으로 표시됩니다. 이 값이 보이면 바인딩이 정상입니다.
Step 7: 올바른 자격 증명만 통과시키는 조건 추가
로그인 버튼의 Tap 트리거에 Condition을 추가하고, 두 규칙이 모두 참일 때만 Jump가 실행되도록 하세요.
username equals alex.c@gmail.com
password equals ABC123
잘못된 자격 증명, 빈 필드, 형식이 다른 입력은 모두 거부됩니다. 이제 참가자는 실제로 로그인해야 합니다. 이 제약 하나가 이후 테스트 세션의 질을 바꿉니다.
Step 8: 에러 상태 구현 (대부분의 프로토타입이 놓치는 부분)
에러 메시지 레이어를 찾아 이름을 Error Text로 바꾸고 초기 투명도를 0으로 설정하세요. 그런 다음 첫 번째 조건의 반대 조건을 추가하고, 그 안에서 Error Text의 투명도를 100으로 변경하는 Change Property 응답을 넣으세요.
[로직 트리] Log In → Tap → Condition (Invalid) → Change Property (Error Text opacity=100)
이제 잘못된 입력이면 에러가 표시되고, 올바른 입력이면 대시보드로 이동합니다. 두 가지 결과가 있어야 진정한 테스트가 가능합니다.
Step 9: Face ID 애니메이션 추가
미디어(Media) → Lottie 레이어를 끌어다 놓고 Face ID 파일을 로드하세요. iPhone 프레임 위쪽 오프스크린에 배치합니다. 'Login with Face ID' 버튼에 Tap 트리거를 추가하고, 순서대로 네 가지 응답을 설정합니다.
1. Move: Lottie 컨테이너 Y=60
2. Playback: Seek time 0s (애니메이션 리셋)
3. Playback: Play Lottie 파일
4. Jump: 대시보드
Step 10: 타이밍 지연으로 네이티브한 느낌 만들기
지연 없이는 모든 응답이 동시에 실행되어 애니메이션이 재생되기 전에 화면이 전환됩니다. 각 응답에 지연을 추가하세요.
| 응답 | 지연 |
|---|---|
| Move | 0s |
| Seek | 0s |
| Play | 0.5s |
| Jump | 1s |
Jump 시 Reset selected scenes 옵션을 활성화하세요. 그렇지 않으면 뒤로 갔다 오면 애니메이션이 Y=60에 고정됩니다.
미리보기: Face ID 버튼을 탭하면 애니메이션이 내려오고 재생된 후 화면이 전환됩니다. 실제 iOS 생체 인증과 구분이 안 갑니다.
주의사항 및 한계
- 이 튜토리얼은 디자인 프로토타입 수준입니다. 실제 보안 인증(서버 검증, 토큰 등)을 구현하는 것이 아니므로, 실서비스 보안 요구사항을 대체할 수 없습니다.
- ProtoPie의 무료 플랜에는 일부 기능 제한이 있을 수 있습니다. 팀 단위 고급 기능(공동 작업 등)은 유료 플랜이 필요할 수 있습니다.
- Lottie 파일의 크기와 최적화에 따라 애니메이션 성능이 달라질 수 있습니다. 너무 큰 파일은 모바일 기기에서 버벅임을 유발할 수 있으니 가볍게 유지하세요.
결론: 로그인이 진짜가 되면 테스트에서 얻는 데이터가 달라집니다
실제 인증이 동작하면 에러 상태는 진정한 리서치 포인트가 됩니다. 사용자가 메시지를 이해하는지, 재시도하는지, Face ID를 선호하는지 등을 알 수 있습니다. 가짜 로그인으로는 절대 얻을 수 없는 인사이트입니다.
또한 이해관계자 리뷰에서 이 플로우는 말로 설명하지 않아도 그 자체로 설득력이 있습니다. 엔지니어링 핸드오프에서도 인터랙션 패널에 조건 로직, 변수 바인딩, 타이밍이 문서화되어 있어 엔지니어가 의도를 정확히 파악할 수 있습니다.
다음 단계 학습 방향:
- ProtoPie에서 송금 로직을 구현하는 방법을 배워보세요.
- 데이터 기반 의사결정을 위해 스포티파이의 컨텍스트 큐레이션 아키텍처를 참고하세요.
- 최신 클라우드 인프라 트렌드가 프로토타이핑에 미치는 영향을 이해하려면 KubeCon EU 2026에서 공개된 MS의 쿠버네티스 & AI 인프라 업데이트를 확인해 보세요.
이 튜토리얼이 유용했다면, ProtoPie FinTech 시리즈의 다른 챕터도 계속 학습해 보세요. 대시보드, 송금, 카메라 통합까지 다루며, 더 완성도 높은 금융 앱 프로토타입을 만들 수 있습니다.
이 글은 Smashing Magazine의 원문을 기반으로 재구성한 것입니다.