문서
디자이너가 시안 대신 앱을 만든 이유
김민지 · 토스 · 토스 기술 블로그
소개
툴의 제약을 넘어, 머릿속에 있던 디자인을 AI로 그대로 구현해본 이야기를 들려드립니다.
AI 핵심 요약
토스의 데드엔드 화면을 다음 경험의 시작점으로 바꾸기 위해, 화면 위에 뜨는 오버레이 대신 아래에 깔렸다가 드러나는 underlay 컴포넌트를 구상했습니다. 인터랙션이 디자인의 핵심이었지만 프로토파이나 프레이머 경험이 없어, AI를 활용해 SwiftUI와 Xcode로 실제 iOS 앱을 만들고 기기에서 반복 테스트했습니다. 화면을 훑는 스캔 효과는 Metal 셰이더로 구현하고 세부 값을 직접 조정했으며, 개발자에게 인터랙션 가이드 대신 동작하는 레포를 전달해 시안의 구조와 모션을 구현 과정에 활용했습니다. 이 경험을 통해 좋은 시안은 보이는 결과뿐 아니라 개발 가능한 코드 구조까지 갖춰야 하며, AI 시대 디자이너의 역할은 무엇을 만들지 상상하고 선택하는 데 있다는 점을 배웠습니다.
- 인터랙션이 핵심인 디자인은 정지 화면보다 실제 기기에서 반복해 움직여 보며 판단하세요.
- AI가 만든 코드를 출발점으로 삼되, 빛의 번짐이나 속도 같은 세부 값은 직접 조정해 원하는 질감을 찾을 수 있습니다.
- 시안 코드는 일회용으로 만들기보다 실제 개발에 활용할 수 있는 구조로 설계하면 구현과 수정의 기준이 됩니다.
- 동작하는 레퍼런스가 있으면 추상적인 느낌을 구체적인 동작으로 설명해 AI와 개발자 모두와 더 정확히 소통할 수 있습니다.