이 게시물은 토스에서 underlay 컴포넌트를 만들며 AI를 코드로 활용한 디자인 과정을 공유합니다. 기존에는 디자인을 만들고 문서로 설명한 뒤 개발자가 다시 구현했지만, AI와 함께 코드 기반으로 작업하며 번역 과정이 줄었다고 설명합니다. 데드엔드 화면을 다음 경험의 시작으로 만들기 위해 화면 위(overlay)가 아니라 아래에 깔린 underlay를 설계합니다. underlay의 핵심이 “어떻게 움직이는가”라고 보고, SwiftUI로 iOS 앱을 직접 구현하며 버튼·레이아웃·등장 디테일까지 실제 기기에서 반복 수정했다고 합니다. 스캔 인터랙션의 질감은 Metal 셰이더로 구현하고, AI가 작성한 코드에 대해 값(번짐, 틴트, 속도 등)을 조정하며 파인튜닝했다고 전합니다. 개발 단계에서는 상세 인터랙션 가이드를 문서로 두기보다 레포를 전달했고, 결과적으로 개발 코드 구조가 레포와 유사하게 구현되어 수정 전달이 코드 중심으로 쉬워졌다고 말합니다. 글은 좋은 시안이 “보이는 화면”뿐 아니라 “만들어진 방식”까지 개발 가능한 형태여야 한다는 점과, 앞으로 디자이너는 “뭘 만들까”를 더 고민하게 될 것이라고 정리합니다.