디자이너가 시안 대신 앱을 만든 이유
Summary
"피그마는 한계가 있다" 직접 코딩으로 상상을 현실로 만든 토스 디자이너의 이야기
AI와 SwiftUI로 디자인과 개발의 경계를 허물고 '진짜 동작하는 시안'을 만드는 법
정적인 이미지를 넘어 실제 사용자의 손끝에서 느껴지는 감각인 '인터랙션'을 직접 설계하기 위해 코드를 잡은 한 디자이너의 혁신적인 실무 경험담입니다. AI를 파트너 삼아 디자인 가이드 문서 대신 코드 레포지토리를 개발자에게 넘기며 협업의 패러다임을 바꾼 과정과 그 기술적 성취를 다룹니다.
- 01정적 시안의 한계를 극복하기 위해 AI와 SwiftUI를 활용한 직접 코딩 도입
- 02사용자 흐름을 방해하지 않는 새로운 UI 개념 'underlay'의 설계와 구현
- 03Metal 셰이더를 활용한 고난도 그래픽 효과의 정교한 파인튜닝
- 04디자인 가이드 대신 코드 저장소를 공유하는 혁신적인 협업 방식
- 05디자이너의 프로토타입 코드가 실제 상용 앱의 스펙이자 구조가 된 사례
RECOMMENDATION
디자인과 개발 사이의 소통 비용을 줄이고 싶은 팀이나, AI를 활용해 직무의 한계를 넓히고 싶은 디자이너 및 프론트엔드 엔지니어에게 적극 추천합니다.
The Problem
피그마와 같은 정적 디자인 도구는 복잡한 인터랙션을 온전히 표현하는 데 한계가 있으며, 디자인 시안을 개발로 번역하는 과정에서 정보의 손실과 비효율이 발생했다. 또한 기존의 팝업이나 바텀시트 같은 오버레이 UI는 사용자의 현재 흐름을 방해하는 구조적 문제를 안고 있었다.
The Solution
AI(LLM)를 활용해 직접 SwiftUI 기반의 iOS 앱 프로토타입을 개발함으로써 '어떻게 움직이는지'가 핵심인 'underlay' 컴포넌트를 직접 구현했다. 단순한 UI 코드를 넘어 Metal 셰이더를 사용하여 고난도의 스캔 효과와 질감을 정밀하게 조정하고, 완성된 코드 저장소를 개발자에게 직접 전달했다.
The Result
디자이너가 작성한 코드 구조가 실제 iOS 개발 환경과 일치하여 개발 완성도와 속도가 비약적으로 향상되었으며, 시안 단계의 인터랙션이 서비스에 그대로 반영되었다. 추상적인 설명 대신 실제 코드로 소통함으로써 파인튜닝 과정에서의 의사소통 비용을 최소화하고 높은 완성도를 달성했다.
Trade-off
디자이너가 직접 코딩 환경(Xcode)과 언어(SwiftUI)를 익히고 직접 구현해야 하므로 초기 작업 시간이 늘어나며, AI가 작성한 코드의 성능 및 유지보수 적합성에 대해서는 시니어 개발자의 추가 검토가 필요할 수 있다.
Key Concepts
More from 토스
View all posts from 토스
1%가 겪은 버그 고쳐야할까요?
HotfixProgressive DeliveryQA Platform1일 전
토스증권 추천과 검색은 어떻게 진화하고 있을까?
Vector DatabaseRAGEmbedding Model4일 전
LLM 서빙, 띄우는 것과 잘 띄우는 것 사이
LLM ServingvLLMObservability1주 전
전체 데이터를 브라우저에 두는 광고 대시보드 만들기
State ManagementPerformance OptimizationAPI Design1주 전
토스는 어떻게 광고 속에 게임을 넣었을까
MRAIDWebViewJS Bridge1주 전