대부분의 프로토타입 로그인 화면은 일종의 지름길입니다. 버튼을 누르면 화면이 바뀌고, 모두가 로그인 정보가 진짜인 것처럼 연기하는 데 동의하죠. 문제는 시각적인 디자인에 있는 것이 아닙니다. 바로 가짜 로그인이 가짜 피드백을 만들어낸다는 점입니다. 테스트 참가자들이 상호작용이 진짜가 아니라는 것을 알게 되면 행동이 변하고, 그에 따라 수집하는 데이터도 왜곡됩니다.
이 튜토리얼에서는 다음과 같이 실제로 작동하는 결과물을 만듭니다.
그 결과, 코드 한 줄 없이 오직 ProtoPie만으로 실제 출시된 제품과 구분할 수 없을 정도의 로그인 흐름이 완성됩니다.
비디오를 보며 학습하는 것을 선호하시나요? 전체 튜토리얼 비디오가 실시간으로 모든 단계를 안내해 드립니다.
직접 읽고 실행하는 방식을 선호하시나요? 맥락을 파악할 수 있는 비디오와 다시 복습하고 싶은 단계를 적어둔 이 가이드북 두 가지 모두를 활용해 보세요.
준비물:
Figma 또는 선호하는 UI 도구에서 가져온 로그인 UI
Face ID 애니메이션용 Lottie 파일 (본 튜토리얼에서 사용된 파일)
완성된 빌드를 먼저 둘러보고 싶으신가요? 본 튜토리얼 마지막 부분에서 1장 프로토타입 파일을 다운로드하실 수 있습니다.
ProtoPie가 처음이신가요? 무료 계정으로 시작하여 빌드 과정을 따라 해보세요.
1단계: Figma에서 로그인 UI를 가져오고 레이어 구조 유지하기
Figma에서 플러그인 패널을 열고 ProtoPie를 검색한 뒤 실행합니다. 전체 로그인 프레임이 선택된 상태에서 Flattened 대신 Scene을 선택합니다. Scene은 레이어 계층 구조를 그대로 유지해 주지만, Flattened는 모든 요소를 하나의 이미지로 병합하므로 나중에 개별 요소와 상호작용하는 것이 불가능해집니다.
Export를 클릭합니다. 레이어가 Figma에 구성된 형태 그대로 ProtoPie에 나타납니다.
💡 다음 단계로 넘어가기 전에, 모든 레이어의 이름을 명확하게 변경하세요. “Rectangle 14”와 같이 모호한 이름은 상호작용을 연결하기 시작하는 순간 많은 시간을 낭비하게 만듭니다.
Figma 레이어를 ProtoPie로 직접 가져오세요 — 레이어 구조가 그대로 유지되어 프로토타입을 만들 준비가 완료됩니다.
2단계: 정적 입력 필드를 실제로 텍스트를 입력할 수 있는 필드로 교체하기
이 단계가 실제 같은 프로토타입과 단순히 클릭만 가능한 목업을 구분 짓는 핵심입니다. ProtoPie의 고유 Input 레이어는 실제 키보드 입력을 허용합니다. 즉, 테스터가 모조 콘텐츠가 아닌 진짜 텍스트를 타이핑할 수 있음을 의미합니다.
Text → Input으로 이동하여 Input 레이어를 캔버스로 드래그합니다. 레이어 계층 구조에서 사용자 이름(username) 필드 그룹 안에 배치한 후, 디자인과 시각적으로 일치시킵니다.
플레이스홀더(placeholder) 텍스트를 Username으로 설정합니다.
배경 채우기 색상을 필드 배경과 맞춥니다.
필드 가장자리에 원치 않는 공백이 있는 경우 Padding의 체크를 해제합니다.
원래 텍스트 레이어의 헥사(Hex) 코드를 복사하여 Input 레이어의 플레이스홀더 색상에 붙여넣고, 글꼴 및 크기를 일치시킵니다.
미리보기를 실행합니다. 필드를 클릭하고 타이핑해 보세요. 이제 사용자 이름 입력 필드가 실제로 작동합니다.
💡 레이어를 복제하기 전에 이 레이어의 이름을 Input Username으로 변경합니다.
3단계: 실제 앱처럼 작동하도록 비밀번호 필드 마스킹하기
Input Username을 복제하고 비밀번호 필드 그룹 안에 복사본을 배치합니다. 비밀번호 필드로 만들기 위한 두 가지 변경 사항은 다음과 같습니다.
플레이스홀더 텍스트를 Password로 변경합니다.
Type을 Text에서 Text Password로 변경합니다.
Text Password는 복잡한 커스텀 로직 없이도 입력된 문자를 자동으로 점(•)으로 마스킹해 줍니다.
두 필드를 모두 미리보기해 봅니다. 사용자 이름은 입력한 텍스트가 표시되고 비밀번호는 점으로 표시됩니다. 사용자가 기대하는 바와 정확히 일치하며, 사용자 테스트 세션에서 이 프로토타입의 신뢰성을 높여주는 결정적인 요소입니다.
Type을 Text Password로 전환하는 것만으로 필드 마스킹이 가능합니다 — 별도의 커스텀 로직이 필요 없습니다.
4단계: 내비게이션 연결 전에 대시보드 씬 만들기
ProtoPie에서 새 씬(Scene)을 추가합니다. 이 씬은 대시보드가 될 예정이며, 현재 단계에서는 비어 있어도 무방합니다. 중요한 점은 로그인 버튼을 연결하기 전에 이동 대상(navigation target)으로 존재해야 한다는 것입니다.
💡이동 대상 씬이 없는 상태에서 Jump 반응을 설정하려고 하는 것은 초기 ProtoPie 빌드에서 흔히 발생하는 순서상의 실수입니다.
5단계: 로그인 버튼을 누르면 대시보드로 이동하도록 설정하기
Log In 버튼 레이어를 선택합니다. Tap 트리거를 추가하고 해당 반응을 대시보드 씬을 대상으로 하는 Jump로 설정합니다. 네이티브 앱 같은 느낌을 주기 위해 전환 효과를 Slide in from right to left로 설정합니다.
미리보기하고 탭해 봅니다. 씬이 전환됩니다. 버튼은 작동하지만, 현재는 입력 필드에 무엇을 입력하든 상관없이 작동합니다. 다음 단계에서 이 문제를 해결하겠습니다.
Jump와 연결된 Tap 트리거 — 이제 로그인 버튼을 누르면 대시보드 씬으로 이동합니다.
6단계: 변수를 사용해 사용자가 입력하는 내용 캡처하기
변수(Variables)는 프로토타입에 '기억력'을 부여하는 장치입니다. 변수가 없다면 입력 필드는 앱의 로직과 아무런 연결도 없는 시각적인 껍데기에 불과합니다.
ProtoPie 인터페이스 왼쪽 아래에서 로그인 씬에 변수 두 개를 추가합니다. 문자, 숫자, 특수 문자를 모두 처리할 수 있도록 두 변수의 형식을 Text로 설정합니다.
변수 이름은 다음과 같이 지정합니다.
username
password
공식을 사용하여 각 변수를 해당 입력 레이어에 바인딩합니다. username 변수를 선택하고 Use Formula를 클릭한 뒤 다음을 입력합니다: input("Input Username").text
password 변수도 동일하게 설정합니다: input("Input Password").text
각 변수 옆에 있는 디버그 아이콘을 켭니다. 텍스트를 입력할 때 실시간 변수 값을 보여주는 녹색 변수 오버레이가 화면에 나타납니다. 이를 통해 그 위에 논리를 구축하기 전에 바인딩이 제대로 작동하는지 확인할 수 있습니다.
무료 요금제를 사용 중이신가요? 이 튜토리얼의 모든 내용을 구축하실 수 있습니다. 무제한 프로토타입, 팀 협업, 더 많은 씬 등 더 높은 수준의 기능이 필요하시다면 아래 요금제 정보를 확인해 보세요.
7단계: 올바른 로그인 정보만 로그인되도록 조건문 로직 추가하기
로그인 버튼의 Tap 트리거로 돌아가서 조건(Condition)을 추가합니다. 동시에 충족되어야 하는 두 가지 조건을 생성합니다.
username이 alex.c@gmail.com과 일치함
password가 ABC123과 일치함
이 조건 블록 안으로 Jump 반응을 이동합니다. 이제 두 값이 정확히 일치할 때만 씬 전환이 실행됩니다. 잘못된 자격 증명, 잘못된 이메일 형식 또는 빈 필드는 모두 통과하지 못합니다.
두 조건이 모두 충족될 때만 Jump 반응이 발생합니다. 잘못된 자격 증명은 통과할 수 없습니다.
8단계: 로그인 실패 시 보여줄 에러 상태 빌드하기
오류 상태가 없는 로그인 흐름은 제대로 된 로그인 흐름이 아닙니다. 일방통행이나 다름없죠. 오류 메시지 레이어를 찾아 이름을 Error Text로 변경하고, 로드 시 보이지 않도록 투명도(opacity)를 0으로 설정합니다.
로그인 버튼 트리거에 첫 번째 조건과 반대되는 두 번째 조건을 추가합니다.
username이 alex.c@gmail.com과 같지 않음
password가 ABC123과 같지 않음
이 조건 안에 Error Text를 대상으로 하는 Change Property 반응을 추가합니다. 투명도를 100으로 설정합니다.
전체 흐름을 미리보기해 봅니다. 잘못된 정보를 입력하면 에러 메시지가 나타납니다. 올바른 정보를 입력하면 대시보드로 이동합니다. 이제 로그인은 두 가지 명확한 결과물을 갖게 되며, 이를 통해 검증할 수 있고 이해관계자들에게도 바로 보여줄 수 있는 상태가 됩니다.
9단계: 실제 앱처럼 느끼게 만드는 디테일 인 Face ID 애니메이션 추가하기
생체 인식 로그인은 테스터들이 멈춰 서서 이게 진짜 앱인지 묻게 만드는 핵심 상호작용입니다. 구축 방법은 다음과 같습니다.
Media로 이동하여 Lottie 레이어를 캔버스로 드래그합니다. Face ID Lottie 파일을 불러온 뒤, iPhone 프레임 위의 화면 밖에 그룹을 배치합니다. 이 그룹이 내려앉을 Y 좌표(예: Y: 60이 무난한 도착 위치입니다)를 확인해 둡니다.
Login with Face ID 버튼을 선택하고 Tap 트리거를 추가합니다. 메인 로그인 트리거와 구분하기 위해 이름을 Tap Face ID로 변경합니다.
네 가지 반응을 순서대로 추가합니다.
Move — Lottie 컨테이너를 대상으로 설정하고 Y를 60으로 지정합니다. 이 동작으로 인해 화면 위에서 아래로 미끄러져 시야에 들어옵니다.
Playback: Seek — Lottie 파일을 대상으로 지정하고 시간을 0초로 설정합니다. 이를 통해 애니메이션이 항상 처음부터 재생되도록 초기화합니다.
Playback: Play — Lottie 파일을 대상 시스템으로 지정합니다.
Jump — 대시보드 씬으로 이동하도록 설정하고 전환 효과는 우측에서 좌측으로 들어오는 슬라이드로 설정합니다.
10단계: 씬이 전환되기 전에 애니메이션이 재생되도록 타이밍 조절하기
지연 시간(delay) 설정이 없다면 네 개의 반응이 동시에 실행되어 애니메이션이 재생되기도 전에 다음 씬으로 바로 넘어가 버립니다. 타임라인 지연 제어기를 사용하여 이 작업들의 흐름에 시차를 둡니다.
권장되는 지연 시간:
Move: 0초 (탭하는 즉시 실행)
Seek: 0초 (즉시 실행)
Play: 0.5초 (Lottie가 실행되기 전에 Move 애니메이션이 완료될 수 있도록 시간 부여)
Jump: 1초 (씬이 전환되기 전에 전체 Lottie 애니메이션이 끝까지 재생될 수 있도록 시간 부여)
Jump 반응에서 Reset selected scenes를 선택합니다. 이를 통해 사용자가 로그인 화면으로 다시 돌아갔을 때 Face ID 애니메이션이 초기 시작 위치로 복귀하도록 만듭니다.
완성된 로그인 흐름을 미리보기합니다. 'Login with Face ID'를 탭하면 애니메이션이 하강하며 재생된 뒤 화면이 부드럽게 전환됩니다. 모든 이해관계자나 테스트 참여자 앞에서도 당당하게 선보일 수 있는 생체 인식 로그인이 개발되었습니다.
이 로그인 흐름이 가능하게 하는 것
실제 사용자 정보를 검증하고, 실시간 에러 상태를 표시하며, 생체 인증을 모방하는 로그인 방식은 단순히 시각적으로 감탄을 자아내는 데 그치지 않습니다. 프로토타입으로 할 수 있는 가능성 자체를 바꿔 놓습니다.
테스트 피실험자들은 실제 상용 제품을 사용하듯 깊게 몰입합니다. 수집하게 되는 피드백은 "이건 단지 데모일 뿐이야"라는 타협 없이 실제 사용자 행동을 있는 그대로 투영합니다. 이해관계자들은 구구절절한 설명 없이도 실제 기동하는 인증 메커니즘을 경험할 수 있습니다. 로직이 이처럼 정형화되면, 프로토타입은 더 이상 시각적 참고 자료 머물지 않고 개발팀이 바로 구현할 수 있는 실무 사양서의 역할을 시작하게 됩니다.
이것이 바로 Pie Bank가 구축된 기초입니다. 튜토리얼 2에서는 대시보드를 구성하고, 변수들이 매 화면마다 금융 상태를 어떻게 이동시키는지, 그리고 프리미엄 앱 특유의 손맛을 전해주는 스크롤 반응을 구현하는 방식을 알아봅니다.
작성이 완료된 로그인 씬 — 모든 상호작용이 연결되고 조건이 만족되어, 실제 앱과 똑같이 움직이는 프로토타입을 만나볼 준비가 되었습니다.
ProtoPie 실습 따라하기
모든 인터랙션과 로직 조건이 완벽히 세팅된 1장의 로그인 씬 프로토타입 파일을 다운로드하세요. 이 튜토리얼과 함께 실행해 보면서 각 단계가 어떻게 유기적으로 맞물리는지 탐색하거나, 사용자가 직접 구축한 빌드를 체크하는 참조용 자산으로 활용하실 수 있습니다.
아직 ProtoPie 회원이 아니신가요?
아직 ProtoPie 회원이 아니신가요? 시작은 무료입니다. 이 튜토리얼의 모든 실습은 무료 요금제에서도 원활하게 구현해 볼 수 있습니다.
이 정도 수준의 고화질 프로토타이핑을 실제 프로젝트에 빠르게 적용하고 싶나요?
개발하고자 하는 실제 가치와 복잡도가 결합된 상황에서 이와 같은 고성능 프로토타이핑 작업이 필요하시다면, 본사 전담 크리에이티브 테크놀로지스트들이 설계 팀과 실시간으로 협업하여 이상적인 속도로 목적지에 이르게 안내해 드립니다.
