이 자습서는 FinTech Prototyping with ProtoPie 시리즈의 총 4개 중 2번째 자습서입니다. 각 챕터는 독립적으로 구성되어 있으므로 순서대로 진행할 필요는 없습니다.
핀테크 프로토타이핑에서 숫자가 틀리면 세션이 중단됩니다. 대시보드와 계좌 상세 화면 간의 잔액이 일치하지 않는 것만으로도 참가자는 이를 문제 삼아 이탈하게 되며, 제품을 테스트하는 것에서 프로토타입 자체를 평가하는 것으로 초점이 편향될 수 있습니다.
하드코딩되고, 서로 분리되어 있으며, 상태가 공유되지 않는 정적 대시보드는 바로 이러한 문제를 야기합니다.
본 자습서에서는 이 문제를 해결합니다. 'Pie Bank'의 모든 잔액은 변수에 저장됩니다. 대시보드는 실시간으로 총 순자산을 계산합니다. 또한 모든 계좌 씬(Scene)은 동일한 데이터 소스에서 정보를 불러옵니다. 값을 한 번만 변경하면 모든 것이 업데이트됩니다.
영상으로 학습하는 것을 선호하시나요? 전체 자습서 동영상에서 모든 단계를 실시간으로 따라 하실 수 있도록 상세히 안내합니다.
위 영상에서는 ProtoPie의 크리에이티브 테크놀로지스트(Creative Technologist)인 Eric이 모든 단계를 실시간으로 상세히 설명해 드립니다. 본 아티클은 해당 자습서의 텍스트 버전 가이드입니다.
준비물:
Pie Bank 챕터 1 파일 또는 홈 대시보드 및 계좌 씬이 포함된 자체 FinTech UI
Figma에서 ProtoPie로 가져온 대시보드 및 계좌 화면
완성본을 먼저 살펴보고 싶으신가요? 챕터 2 프로토타입 파일은 이 자습서의 끝부분에서 다운로드하실 수 있습니다.
ProtoPie가 처음이신가요? 무료 계정으로 시작하여 가이드를 따라 함께 제작해 보세요.
1단계: FinTech 대시보드 씬 가져오기 및 챕터 1 정리하기
Figma에서 대시보드 및 계좌 프레임을 선택하고, ProtoPie 플러그인을 연 다음, Scene을 선택하여 챕터 1과 동일한 프로세스로 내보냅니다.
가져오기가 완료되면 다음을 수행합니다.
이전 자습서에서 사용하고 남은 임시 대시보드 씬을 삭제합니다.
해당 씬을 가리키던 점프(Jump) 인터랙션이 깨지게 되는데, 이는 정상적인 현상이며 2단계에서 다시 연결할 예정입니다.
다음 단계로 넘어가기 전에 각 씬의 이름을 Home, Account/Checking, Account/Savings, Account/Visa와 같이 명확하게 변경합니다.
💡 "Scene 4"와 같이 모호한 씬 이름은 드롭다운 목록에서 이동 대상을 선택할 때 걸림돌이 됩니다. 지금 즉시 이름을 정리해 두시기 바랍니다.
2단계: 대시보드와 계좌 화면 간의 뱅킹 앱 내비게이션 연결하기
홈 대시보드에 있는 세 개의 예금 계좌 카드 각각에 터치(Tap)하면 해당 씬으로 이동하는 인터랙션을 추가해야 합니다. Checking, Savings 및 Visa 계좌에 대해 다음 작업을 수행해 주세요.
계좌 카드 그룹을 선택합니다.
Tap 트리거 생성 후 → Jump 리스폰스를 추가합니다.
타겟 씬을 설정합니다 (Checking / Savings / Visa)
전환 효과를 설정합니다: Slide in from right to left (오른쪽에서 왼쪽으로 슬라이드)
인터랙션의 이름을 변경합니다: Tap Checking, Tap Savings, Tap Visa
💡 이동 동작을 위와 같이 가로지른 후 바로 테스트해 보세요. 나중에 내비게이션이 제대로 작동하지 않는다면, 연결 문제가 아닌 변수 설정의 문제임을 즉시 인지할 수 있습니다.
세 개의 계좌 카드와 세 개의 점프 인터랙션 — 각각 오른쪽에서 왼쪽으로 슬라이드되는 방식의 전환 효과를 통해 일치하는 씬에 완벽히 연결되었습니다.
3단계: 고정된 탐색 바를 포함하는 스크롤 가능한 대시보드 제작하기
대시보드는 헤더, 메인 콘텐츠, 하단의 내비게이션 바 등 세 개의 레이어로 구성됩니다. 내비게이션 바는 고정되어 유지되며, 그 위의 모든 요소는 스크롤됩니다.
내비게이션 바가 스크롤되는 콘텐츠의 위에 올 수 있도록 내비게이션 바 레이어를 맨 앞으로 가져옵니다 (Bring to front)
헤더 및 메인 콘텐츠 레이어를 다중 선택한 뒤 → 그룹화하고 → 그룹 이름을 Scroll로 지정합니다.
생성된 Scroll 그룹이 선택된 상태에서 하단 경계선을 드래그하여 내비게이션 바의 바로 윗선에 맞춥니다.
속성 창에서 Clip Inner Layers (내부 레이어 자르기)를 활성화합니다.
Scroll 인터랙션을 추가하고 → 방향을 Top to Bottom (위에서 아래로)으로 설정합니다.
미리보기를 실행해 보세요. 콘텐츠는 스크롤되지만 내비게이션 바는 고정된 채 유지됩니다. 이는 사용자가 프리미엄 금융 앱에 기대하는 고정 내비게이션 고유의 동작 방식으로, 테스터들이 흐름을 끊지 않고 자연스럽게 전체 레이아웃을 파악할 수 있도록 돕습니다.
메인 콘텐츠는 스크롤되고, 내비게이션 바는 제자리에 고정됩니다 — 스크롤 그룹은 내비게이션 바의 경계선에서 잘려 흐름이 바 아래 침범하지 않도록 제어합니다.
4단계: FinTech 대시보드를 구동하는 ProtoPie 변수 연동 체계 구축하기
본 단계야말로 정적인 단순 핀테크 프로토타입과 실제 제품처럼 매끄럽게 작동하는 대시보드를 구분 짓는 핵심적인 부분입니다.
ProtoPie Studio 좌측 하단의 Variables(변수) 패널을 열고, 다음 네 개의 변수를 생성합니다.
1개의 로컬 변수 — 홈 씬에서만 작동함:
이름:
total_net_worth· 유형: Number · 기본값: 0 · 범위: This Scene
총 순자산은 홈 화면에서만 계산되고 노출되는 값으로, 사용자가 계좌 상세 화면으로 깊이 이동할 때 굳이 해당 상태를 유지하며 쫓아올 필요가 없습니다.
3개의 글로벌 변수 — 모든 씬에서 사용 가능함:
checking_balance· 유형: Number · 기본값: 0 · 범위: For All Scenessavings_balance· 유형: Number · 기본값: 0 · 범위: For All Scenesvisa_balance· 유형: Number · 기본값: 0 · 범위: For All Scenes
글로벌 변수는 개발 중인 프로토타입의 '공유 메모리' 역할을 담당합니다. 모든 씬에서 이를 읽어 들일 수 있습니다 — 이는 대시보드의 계좌 카드 영역과 세부 화면에서 정확히 동일한 잔액을 띄워 주고자 할 때 완벽한 해결책이 되어 줍니다.
💡 변수 이름에는 공백을 포함할 수 없습니다. checking balance 대신 밑줄을 사용하여 checking_balance와 같이 기재해 주세요. 규격에 맞지 않으면 ProtoPie가 오류 메시지를 띄우지만, 처음부터 정확하게 입력해 두는 것이 원활한 작업에 큰 도움이 됩니다.
계산된 순자산을 표시하기 위한 하나의 로컬 변수와 계좌별 잔고 처리를 위한 세 개의 글로벌 변수 — 이것이 대시보드가 구동되는 전반적인 변수 아키텍처 구조입니다.
5단계: 잔고 값 대입 및 실시간 순자산 수식 작성하기
세 개의 글로벌 변수에 대해 다음과 같이 현실성 있는 시작 값을 할당해 줍니다.
checking_balance→ 8000savings_balance→ 30000visa_balance→ 300
total_net_worth의 경우 고정된 숫자를 그대로 넣지 않고 수식을 직접 기재하여 연동합니다.
total_net_worth를 클릭한 뒤 → Use Formula (수식 사용)을 체크합니다.다음 수식을 입력합니다:
checking_balance + savings_balance
신용카드 한도가 들어가는 Visa 계좌는 의도적으로 수식에서 제외해야 합니다. 신용카드 대금 청구분은 가용한 자산이 아닌 '부채' 유형이기 때문에 자산 계산에 더해지면 안 됩니다. 금융 도메인 지식이 풍부한 핀테크 관련 의사 결정권자나 유저 테스트 참가자들은 이러한 논리적 모순을 무척 예리하게 집어냅니다. 이 논리를 올바르게 조율하는 것이 시연 중 자산 계산에 대한 무의미한 지적을 면하고 기획 구성 자체에 대한 전폭적인 지지를 유도하는 프로토타입을 완성해 주는 한 끗 차이를 만듭니다.
텍스트 레이어에 변수를 결합하기 전에, 해당 수식이 잘 연동되었는지 상태를 먼저 점검해 봅니다.
각 변수 목록 우측의 디버그(말말풍선 모양) 아이콘을 켭니다.
화면에 실시간으로 값 상태를 보여주는 녹색 오버레이가 나타납니다.
total_net_worth변수가 정상적으로 합산된 38000 (checking + savings)을 띠고 있는지 체크해 봅니다.
total_net_worth에 수식이 설정된 모습 — 디버그 화면을 통해 이 값을 다른 텍스트 레이어로 넘기기 전에 정상 연동 여부를 미리 검사할 수 있습니다.
6단계: Start 트리거를 활용해 ProtoPie 변수를 대시보드 텍스트 레이어에 투사하기
변수는 메모리상에만 살아 있습니다. 텍스트 레이어는 실제 눈에 보이는 레이아웃 스크린에 올라가 있습니다. Start 트리거는 이 둘의 간극을 메우는 브릿지 역할을 담당합니다 — 사용자가 이를 미처 확인하기 전, 씬이 불려오는 시점에 자동으로 실행됩니다.
홈 씬에 Start 트리거를 구축합니다.
홈 씬을 선택하고 → Start 트리거를 하나 만듭니다.
Jump Restart 옵션을 체크합니다 — 이렇게 처리해 주면 사용자가 상세 페이지에 진입했다가 다시 홈 대시보드로 돌아올 때마다 트리거가 재실행되어 최신 변경 내용을 반영합니다.
총 순자산 텍스트 레이어와 변수를 매핑합니다.
Text 리스폰스를 만듭니다.
대상 텍스트 레이어 속성에서 Editable(레이어 내 텍스트 수정 가능 상태)이 선택되었는지 점검합니다. (이 부분이 체크되어야 향후 타겟으로 연동할 수 있습니다)
방금 처리한 순자산 텍스트 레이어를 타겟으로 지정합니다.
값을 Formula로 바꾼 뒤 → 다음을 작성합니다:
total_net_worth
Start 트리거에 Jump Restart를 결합하여 총 순자산 텍스트를 연동해 준 세팅 정보 — 씬이 생성될 때마다 매번 값이 초기화되어 동적으로 반응하게 됩니다.
이제 대시보드 구조에 38000이 잘 표시될 것입니다. 하지만 진짜 금융 앱은 콤마(쉼표)와 소숫점이 정리된 형태의 완벽한 통화 서식으로 표현되어야 자연스럽습니다. 수식을 업데이트해 봅시다:
입력값을 다음처럼 교체합니다:
format(total_net_worth, "###,##0.00")미리보기창을 확인해 보세요 → 값이 이제 38,000.00과 같이 깔끔한 서식으로 렌더링됩니다.
세 개의 나머지 계좌 잔액 관련 텍스트 레이어에 대해서도 이 규칙을 동일하게 부여해 줍니다 — 각각 Text 리스폰스를 적용하고, 레이어를 Editable 상태로 설정한 후, 알맞은 변수 이름에 통화 서식을 아래처럼 감싸서 작성합니다.
format(checking_balance, "###,##0.00")format(savings_balance, "###,##0.00")format(visa_balance, "###,##0.00")
💡 첫 항목 작성 후 포맷 문자열을 클립보드에 복사해 두면 편리합니다. "###,##0.00"과 같은 수식을 매번 일일이 손으로 적다 보면 예기치 못한 오타가 일어날 수 있습니다.
이제 모든 잔고 정보가 천 단위를 가늠하는 콤마와 소숫점을 동반하여 완벽하게 반영되어, 실제 운영 중인 모바일 금융 서비스와 구별이 가지 않을 정도로 높은 퀄리티를 구현합니다.
7단계: 세 개의 세부 계좌 씬에도 이 변수 동기화 방식 똑같이 확장하기
홈 대시보드 구성이 다 갖춰졌다면, 이제 Checking, Savings, Visa 각 상세 화면에도 똑같은 작업 규칙을 심어보도록 하겠습니다.
세 계좌 화면 전체에 대하여 다음 작업을 각각 한 번씩 수행해 줍니다.
Start 트리거를 구성하고 → Jump Restart를 체크합니다.
홈 대시보드의 Start 트리거 밑에 있는 관련 Text 리스폰스 항목을 복사합니다.
이 상세 계좌 씬에 불여넣기한 뒤, 타겟이 될 잔고 텍스트 레이어를 Editable로 지정하고 다시 레이어를 바르게 타겟팅해 줍니다.
상단의 '뒤로 가기(Back)' 버튼 영역에 Tap 트리거 생성 후 → Jump to Home 반응을 추가하고 → 전환 효과는 Slide in from left to right로 세팅합니다.
세 개의 상세 씬 처리가 끝났다면 미리보기창을 켜고 전반적인 탐색 흐름을 확인해 봅니다.
대시보드 메인 화면 — 네 개의 주요 지표와 텍스트가 서식에 맞추어 오차 없이 맞물려 올라가는지 확인합니다.
Checking 카드를 탭하여 상세 씬 진입 — 그 안의 액수가 앞서 홈 카드에서 보았던 8,000.00과 일맥상통하게 맞물리는지 체크합니다.
뒤로 가기를 탭하여 뒤로 복귀 — 메인 화면의 기재 값이 정상 상태를 유지하는지 훑어봅니다.
Savings 및 Visa 영역도 위와 같이 각각 차례로 눌러가며 검증해 줍니다.
모든 항목의 수치가 흐트러짐 없이 일치하는 이유는 단 하나의 공용 글로벌 변수를 중심에 두고 있기 때문입니다. 이러한 정보의 신뢰도와 일관성이야말로 본 결과물이 단순 시각 자료를 뛰어넘어 작동하는 앱처럼 다가가게끔 하는 요소이며, 마침내 개발 팀에 전사적인 스펙 가이드로 넘기더라도 오인할 여지가 없도록 신뢰를 부여하는 수단이 됩니다.
*무료 요금제를 사용 중이신가요? 이 문서에 담긴 모든 기능은 무료 요금제에서도 원활하게 구현해 보실 수 있습니다. 다만 이후 소속 팀이 더 확장되어 무제한 프로토타입 작업과 풍부한 실시간 협업 지원 장치가 필요한 순간이 필요하다면:*
변수 기반의 FinTech 대시보드 프로토타입이 선사하는 가치
변수 처리를 마친 대시보드는 단순히 '보기 좋게 예쁜 화면' 이상의 기능적인 변혁과 유연함을 가져다줍니다.
특히 핀테크 설계자들은 새로운 B2C 경험 아이디어를 발굴하여 임원진 등에 발제하고 컨펌을 유도해야 할 때 이러한 고차원적인 하이 피델리티 화면이 필수적입니다. 평평하게 정지된 와이어프레임 형태로는 동적인 금융 도메인 고유의 실시간 프로세스나 가치 변화의 짜임새를 전달하기 어렵습니다. 실시간으로 똑똑하게 상호작용하는 대시보드는 이를 아주 쉽게 설득할 수 있도록 돕습니다. 잔고가 공유 변수에 의해 구동되고 있으므로, 이후 챕터 3에서 소개할 자금 이송 연계 동작 시 checking_balance에서 액수를 차감하고, 이를 savings_balance로 보낼 때 이 모든 씬의 잔고가 서로 자동으로 가감되어 연동되는 연쇄 반응을 자연스레 실체화할 수 있습니다. 연산은 매끄럽고, 상태는 잘 지속됩니다.
유저 테스트 참여자들은 이를 피그마 스케치 성격이나 임시 데모 형태가 아니라고 인식하고 마치 라이브 중인 제품처럼 신중하게 다루기 시작합니다. 의사 결정권자들은 화면이 제대로 작동할지에 대한 추상적인 의심이나 사생활 데이터 침해 여부 같은 불필요한 질의 대신 오롯이 아이디어 방향성에만 집중하게 됩니다. 엔지니어링 역시 막연한 목업 시나리오 대신 제품을 그대로 구축해 나갈 때 필요한 명료하게 완성된 기술 설계 사양을 바로 확인하게 됩니다. 이는 앞으로 여러분의 혁신적인 핀테크 팀이 한 마음으로 눈높이를 맞추고 나아가야 할 올바른 업무 표준의 형태를 대변해 줍니다.
이어지는 자습서 3에서는 방금 구축해 둔 이 변수들을 고스란히 계승하여, 실제 잔액을 깎고 보내는 실시간 송금 기능 및 입력 필드 연동, 슬라이드하여 보내기 인터랙티브 카드 등을 구현해 보겠습니다.
제작이 완전히 마쳐진 대시보드 레이아웃 — 단 4개의 변수와 단 하나의 수식을 활용하여 실시간에 가깝게 변동하는 금융 자산의 상태 전파를 매끄럽게 처리해 냅니다.
지금 바로 ProtoPie에서 진행해 보기
연동이 무사히 진행된 최종 완성형 챕터 2 프로토타입 예제를 바로 내려받으실 수 있습니다. 변수와 수식, 3개의 개별 계좌 상세 씬 이동 바인딩이 모두 내포되어 있습니다. 본 아티클을 읽어 나가는 동시에 옆에 실행해 두시면 각 지점 연결 구조를 한눈에 수월하게 디버깅 및 적용해 보며 학습 효율을 극대화할 수 있을 것입니다.
아직 ProtoPie를 사용하기 전이신가요?
망설이지 마시고 무료로 프로토타이핑을 설계하여 아이디어를 세상 밖으로 펼쳐 보시기 바랍니다. 이 아카이브 가이드에서 서술한 모든 기능 모듈과 환경은 무료 요금제 사용 중에도 온전히 설계 및 동작에 지장을 체감하지 않고 연습 및 구사해 볼 수 있도록 열려 있습니다.
디자이너와 팀원들의 역량을 한 차원 높이고 싶으신가요?
실제 프로덕트처럼 복잡하고 방대한 시스템 수준의 프로젝트를 추진 중이거나 이와 같은 완성도를 자랑하는 제품을 팀 스케일로 기민하게 실현하고자 하신다면, 언제든지 ProtoPie의 전담 크리에이티브 테크놀로지스트(Creative Technologists) 팀에 조력을 구하고 한층 빠르게 비즈니스 목표를 성취해 보시기 바랍니다.
