Read Original
#Design

디자이너가 시안 대신 앱을 만든 이유

디자이너가 시안 대신 앱을 만든 이유
01

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가 작성한 코드의 성능 및 유지보수 적합성에 대해서는 시니어 개발자의 추가 검토가 필요할 수 있다.

03

Key Concepts

Concept · 01

Underlay

화면 위에 뜨는 오버레이(Overlay)와 상반되는 개념으로, 현재 화면 아래에 존재하다가 특정 인터랙션을 통해 모습을 드러내는 UI 구조이다.

  • 기존 사용자의 맥락을 끊지 않으면서 다음 행동을 유도하는 '데드엔드' 프로젝트의 핵심 장치로 활용됨
Concept · 02

SwiftUI

애플의 선언형 UI 프레임워크로, 적은 코드로도 실제 기기에서 동작하는 강력한 인터랙션과 애니메이션을 구현할 수 있게 해준다.

  • 디자이너가 AI의 도움을 받아 직접 프로토타입 앱을 제작하는 주 도구로 사용됨
Concept · 03

Metal Shader

GPU에서 직접 실행되는 저수준 그래픽 코드로, 픽셀 단위의 정밀한 계산을 통해 독특한 질감이나 고난도의 시각 효과를 만든다.

  • 'AI가 화면을 스캔하는 느낌'을 표현하기 위해 빛의 번짐, 속도, 질감 등을 세밀하게 제어하는 데 사용됨