이 영상에서 단테는 Codex에서 Astra로 만든 코인 지갑 앱의 첫 구현과, 화면마다 구체적인 수정 기준을 준 뒤의 개선판을 같은 10만 원 구매 흐름으로 비교합니다. 디자인 베스트 프랙티스 강의가 아니라, 에이전트에게 어떤 정보를 주느냐에 따라 디자인 결과가 어떻게 달라지는지를 확인하는 실험입니다. "AI가 만든 화면이 어딘가 어색하다"는 고민이 있는 분에게 도움이 됩니다.
첫 구현은 무엇이 부족했나
첫 버전에도 필요한 기능은 있었습니다. 자산을 보고, 비트코인을 고르고, 금액을 입력할 수 있었고, 수수료가 부족하면 막히며 거래 뒤 잔액도 맞게 바뀌었습니다. 단테가 놓친 것은 기능과 기능 사이였습니다.
- 차트는 기간을 눌러도 그대로였습니다.
- 주문 확인이 입력 화면을 통째로 갈아 끼웠습니다.
- 완료 표시가 맥락 없이 갑자기 나타났습니다.
비교를 위해 첫 버전을 일부러 나쁘게 만들지 않고 그대로 남겼습니다. 동일 조건 실험이 아니라 실제 첫 구현에서 부족한 부분을 찾아 고친 과정이라는 점도 밝힙니다.
무엇을 더 전달했나
수정에 앞서 몇 가지 자료를 참고했습니다. Atlassian은 디자인 값과 그 값을 쓰는 이유를 함께 전달하는 실험을 했고, Anthropic은 화면의 완성도와 실제 기능을 나눠 평가했습니다. 토스의 "디자이너가 시안 대신 앱을 만든 이유" 글에서는 실제로 동작하는 시안으로 사용성 테스트를 하며 조정한 사례를 봤습니다. 단테는 이 자료들을 참고로만 삼았고 Astra의 성능을 증명하는 수치로 쓰지는 않았습니다.
그래서 이번에는 화면마다 먼저 볼 정보, 다음 상태, 움직임이 필요한 이유를 적어 Astra에게 전달했습니다. 실제 수정 문서에는 이런 식의 문장이 들어갔습니다.
금액 입력을 배경에 남기고 주문 내역을 시트로 올리기
선택한 기간과 가격, 그래프를 같은 데이터로 연결하기
"덜 AI스럽게 해 달라"는 말 대신, 화면에서 끊기는 부분과 바뀌어야 할 동작을 함께 적은 것입니다. 그리고 결과를 직접 눌러 보며 다시 고쳤습니다.
화면별로 달라진 점
종목 상세에서는 기간을 바꾸면 선택 표시가 이동하고, 같은 자리의 그래프가 다음 모양으로 이어집니다. 그래프를 누른 채 움직이면 그 시점의 금액을 볼 수 있습니다. 가격은 예시 데이터입니다. 바뀐 것은 색이 아니라 차트의 역할로, 공간을 채우는 그림에서 기간과 값을 살펴보는 영역이 됐습니다.
구매에서는 확인 화면의 계층을 바꿨습니다. 금액을 입력한 화면 위로 주문 내역 시트가 올라오고, 뒤에 이전 화면이 조금 남아 지금이 입력을 확인하는 단계임을 보여 줍니다. 닫았다 다시 열어도 입력은 유지됩니다. 아래에는 수수료를 포함한 총액과 구매 후 잔액을 모았습니다. 확인창은 약 0.4초 동안 올라오고 끝에서 천천히 멈추는데, 이 값은 다른 앱을 복사한 것이 아니라 이 앱에서 정한 값입니다. 확정 버튼을 누르면 모의 처리 뒤 거래가 반영되고 나서 체크가 그려지며, 자산 화면으로 돌아오면 바뀐 숫자가 짧게 강조됩니다.
단테가 애니메이션보다 중요하게 본 것은 순서입니다. 성공하기 전에는 체크를 보여 주지 않고, 버튼을 빠르게 두 번 눌러도 거래가 한 번만 반영되게 했습니다. 10만 원에 수수료 100원이 더해지고 그 결과가 현금과 비트코인 잔고로 이어집니다.
교환에서는 방향 버튼을 누르면 두 입력 영역이 자리를 바꾸고 화살표가 돌며 계산 방향도 바뀝니다. 수수료를 뺀 받을 수량이 가장 크게 보입니다. 송금에서는 주소와 네트워크가 더 중요하므로 잘못 고르면 같은 자리에서 고치게 하고, 전액을 보낼 때는 수수료를 남기도록 했습니다. 확인창에서는 받는 수량과 내 계정에서 빠질 수량을 따로 보여 줍니다.
Figma 원본과 검증 범위
Figma 원본에는 기존 버전과 개선판을 다른 페이지로 남겼습니다. 버튼과 자산 행은 공통 컴포넌트이고, 숫자와 차트도 편집할 수 있습니다. 완료 체크를 선택하면 모션 타임라인의 키프레임이 보이고, 선이 그려지는 시간과 원의 크기를 조정할 수 있습니다. 웹 데모에는 입력에 반응하는 차트와 교환 동작을, Figma에는 시트와 완료 표시 같은 모션 설계를 남겼고 둘을 각각 확인했습니다.
움직임 줄이기 설정도 점검했습니다. 화면 이동과 스프링을 빼도 입력값과 확인할 금액은 그대로 남았고, 두 설정 모두에서 확인창을 닫았다 다시 열고 버튼을 두 번 눌러 봤을 때 입력은 유지되고 거래는 한 번만 반영됐습니다. 다만 상용 금융 앱 수준으로 검증한 것은 아니며, 실제 거래와 푸시 서버는 없고 일부 관리 화면은 예시 상태입니다.
요청 방식과 토큰 집계
처음 요구 사항은 코인베이스나 팬텀처럼 화면이 풍부한 모바일 앱을 최소 10개 화면 이상 실제 앱으로 만들고 Figma 원본을 남기라는 것이었고, 이를 자산·매수·교환·송금 등 화면별 명세로 풀었습니다. 결과물은 전체 18개 화면입니다.
토큰은 화면과 코드를 만들거나 고친 요청만 따로 셌습니다. 초기 구현은 약 597만 토큰, 개선 작업은 약 132만 토큰이었습니다. 이 숫자에는 모델이 앞선 맥락을 다시 읽은 양이 포함되므로 코드를 그만큼 썼다는 뜻이 아니고, 토큰 합계가 결제 금액도 아닙니다. 개선판은 기존 앱 위에서 작업했기 때문에 비용이 몇 퍼센트 줄었다고 말할 수도 없습니다.
정리
- 첫 구현에도 기능은 있었지만, 차트 반응, 입력과 확인의 관계, 완료까지의 순서가 끊겨 있었습니다.
- 화면마다 먼저 볼 정보, 다음 상태, 움직임의 이유를 구체적으로 적어 주자 결과가 자연스러운 앱에 가까워졌습니다.
- 애니메이션보다 순서가 중요했습니다. 성공 전에 체크를 보여 주지 않고 중복 클릭을 한 번만 반영했습니다.
- 웹 데모와 Figma 모션 설계를 따로 확인했고, 움직임 줄이기 설정에서도 상태가 유지되는지 점검했습니다.
- 토큰은 초기 약 597만, 개선 약 132만이었지만 맥락 재읽기가 포함된 부분 집계라 비용 비교로 쓰면 안 됩니다.