디자이너가 시안 대신 앱을 만든 이유 (새 탭에서 열림)
AI를 활용하면 디자이너가 정적인 시안을 넘어 실제로 동작하는 프로토타입을 직접 만들 수 있고, 디자인과 개발 사이의 번역 과정도 줄어든다. 토스의 underlay 프로젝트는 화면 위에 겹치는 대신 화면 아래에 있던 정보가 드러나는 방식을 통해, 사용자의 흐름을 방해하지 않고 다음 경험으로 연결하려 했다. 이 과정에서 동작하는 코드 자체가 디자인 명세이자 개발 가능한 구조가 될 수 있음을 보여준다. ## 데드엔드를 다음 경험의 시작으로 바꾸기 - 송금 완료나 결제 완료처럼 사용자의 할 일이 끝나는 화면을 ‘데드엔드’로 정의했다. - 목표는 특정 화면을 개선하는 것이 아니라, 앱 어디서든 현재 경험을 자연스럽게 다음 경험으로 연결하는 공통 장치를 만드는 것이었다. - 이를 위해 여러 화면에서 재사용할 수 있는 컴포넌트 개발부터 시작했다. ## 기존 알림 UI의 한계와 underlay의 발상 - 바텀시트, 토스트, 푸시 등 기존 UI는 화면 위에 나타나 사용자의 시선을 끌지만, 보고 있던 화면이나 진행 중인 행동을 방해할 수 있다. - 전화처럼 등장하거나 화면 한쪽·채팅창처럼 나타나는 방식도 같은 문제를 가졌다. - 택배 송장을 떼자 아래에 있던 책의 문구가 드러난 경험에서 아이디어를 얻었다. - 새로운 정보를 화면 위에 올리는 대신, 화면 아래에 존재하던 정보가 드러나게 하는 컴포넌트를 **underlay**라고 정의했다. ## AI와 코드로 인터랙션을 디자인하기 - underlay는 외형보다 움직임과 반응 방식이 중요한 컴포넌트였다. 인터랙션 자체가 디자인의 핵심이었다. - 프로토파이나 프레이머 대신 SwiftUI와 Xcode로 iOS 앱 형태의 프로토타입을 직접 만들었다. - SwiftUI를 처음 사용했지만 AI에게 구현을 요청하며 디자인을 구체화했다. - 디자이너의 역할은 다음 세 가지로 정리됐다. - 만들고 싶은 경험을 설명하기 - AI가 제안한 여러 방향 중 적절한 것을 선택하기 - 실제 기기에서 결과를 보고 판단하기 - AI와의 디자인 과정은 설계, 선택, 검증을 반복하는 과정이었다. ## 실제 기기에서 반복하며 완성도 높이기 - 먼저 자유롭게 실험하고 지울 수 있는 플레이그라운드 환경을 만들고, 피그마 시안을 AI에게 참고 자료로 제공했다. - 버튼, 텍스트, 레이아웃을 정지 화면이 아니라 실제 기기에서 움직여 보며 수정했다. - 상상한 움직임과 실제 구현된 움직임의 차이가 컸기 때문에 수백 번 반복해서 조정했다. - 화면의 맥락을 읽고 적절한 정보를 찾는 느낌을 표현하기 위해 빛이 화면을 훑는 스캔 인터랙션을 도입했다. - 빛의 번짐, 틴트, 폭, 속도, 배경 어두워짐 등은 Metal 셰이더로 구현했다. - AI가 작성한 셰이더 코드를 출발점으로 삼되, 최종 질감은 직접 수치를 조정하며 완성했다. - 등장하거나 스캔이 지나갈 때의 미세한 출렁임 같은 디테일도 코드로 다듬었다. ## 디자인 가이드 대신 동작하는 레포 전달하기 - 기존 방식이라면 등장 타이밍, 이징 커브, 딜레이 등을 문서로 정리했을 것이다. - 이번에는 간단한 플로우만 설명하고, 직접 만든 코드 레포를 개발자에게 전달했다. - 동작하는 레퍼런스가 있었기 때문에 개발자는 시안의 구조와 인터랙션을 빠르게 이해할 수 있었다. - 개발 과정의 파인튜닝에서도 opacity나 모션 값을 말로 주고받기보다, 디자이너가 직접 실행 결과를 보며 수정했다. - AI에게 원하는 모션을 자연어로 설명하고 결과를 확인하는 과정을 개발자의 환경에서도 반복하면서 인터랙션 완성도를 높였다. - “느낌이 이상하다”는 추상적 표현 대신 실제 코드와 동작을 기준으로 소통할 수 있었다. ## 시각적 결과뿐 아니라 코드 구조까지 디자인하기 - 프로토타입 레포의 구조가 실제 iOS 개발 코드와 거의 동일하게 활용됐다. - 처음부터 개발을 위한 구조를 의도한 것은 아니었지만, UT와 빠른 버전 변경을 위해 만든 구조가 자연스럽게 개발 가능한 형태가 됐다. - 잘 만든 시안은 보기 좋은 화면에 그치지 않고, 재사용·수정·확장이 가능한 방식으로 만들어져야 한다. - 일회용 코드라면 개발자가 다시 구현해야 하지만, 개발 가능한 구조의 시안은 그대로 구현 명세가 될 수 있다. - AI가 “어떻게 만들지”를 지원하는 시대에는 디자이너가 “무엇을 만들지” 상상하고 결정하는 역량이 더 중요해진다. ## 적용 방법 - 도구의 제약에 맞춰 디자인하기보다, 가장 좋은 사용자 경험을 먼저 상상한다. - 정적인 그림으로 끝내지 말고 AI와 코드를 활용해 실제 기기에서 작동하는 프로토타입을 만든다. - 인터랙션을 문서로만 설명하기보다, 직접 만든 동작하는 레포를 개발자에게 전달한다. - 최종 결과뿐 아니라 코드 구조와 수정 가능성까지 디자인의 일부로 고려한다. 실용적으로는 작은 인터랙션부터 SwiftUI나 웹 기술로 직접 구현해 보고, 실제 기기에서 반복 검증하는 방식이 효과적이다. 완성된 코드는 단순한 시안이 아니라 개발자와 AI 모두가 이해할 수 있는 실행 가능한 디자인 스펙이 될 수 있다.
