문서

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

김민지 토스 · 토스 기술 블로그

AI 핵심 요약

토스의 데드엔드 화면을 다음 경험의 시작점으로 바꾸기 위해, 화면 위에 뜨는 오버레이 대신 아래에 깔렸다가 드러나는 underlay 컴포넌트를 구상했습니다. 인터랙션이 디자인의 핵심이었지만 프로토파이나 프레이머 경험이 없어, AI를 활용해 SwiftUI와 Xcode로 실제 iOS 앱을 만들고 기기에서 반복 테스트했습니다. 화면을 훑는 스캔 효과는 Metal 셰이더로 구현하고 세부 값을 직접 조정했으며, 개발자에게 인터랙션 가이드 대신 동작하는 레포를 전달해 시안의 구조와 모션을 구현 과정에 활용했습니다. 이 경험을 통해 좋은 시안은 보이는 결과뿐 아니라 개발 가능한 코드 구조까지 갖춰야 하며, AI 시대 디자이너의 역할은 무엇을 만들지 상상하고 선택하는 데 있다는 점을 배웠습니다.

인터랙션이 핵심인 디자인은 정지 화면보다 실제 기기에서 반복해 움직여 보며 판단하세요.
AI가 만든 코드를 출발점으로 삼되, 빛의 번짐이나 속도 같은 세부 값은 직접 조정해 원하는 질감을 찾을 수 있습니다.
시안 코드는 일회용으로 만들기보다 실제 개발에 활용할 수 있는 구조로 설계하면 구현과 수정의 기준이 됩니다.
동작하는 레퍼런스가 있으면 추상적인 느낌을 구체적인 동작으로 설명해 AI와 개발자 모두와 더 정확히 소통할 수 있습니다.

소개

툴의 제약을 넘어, 머릿속에 있던 디자인을 AI로 그대로 구현해본 이야기를 들려드립니다.

비슷한 학습 자료

책 전하린 예스24

AI 잘 쓰는 디자이너

책 전하린 예스24

“AI 시대, 디자이너는 어떻게 일해야 할까?” 콘텐츠, UX/UI, 그래픽, 패키지, 로고, 영상 디자이너가 AI로 일하는 법 나노 바나나부터 미드저니, 피그마, 캡컷, 수노, 런웨이까지! “요즘 다 AI로 디자인한다던데…” “진짜 실무에서는 어떻게 일하는지 궁금해!” 디자인 업무를 완전히 뒤바꿀 새로운 도구인 AI! 이제 디자인 필드는 AI를 잘 쓰는 사람과 그렇지 못한 사람으로 나뉜다. 콘텐츠, UX/UI, 그래픽, 패키지, 로고, 광고 영상 디자인 프로세스에서 AI를 어떻게 적용할지 이 책으로 모두 확인해 보라. 단순히 이미지 하나만 만드는 것이 아니라 가상의 브랜드를 설정해서 전체 디자인 과정에 AI를 접목하며 실전 감각을 기를 수 있다. 6가지 실전 프로젝트를 직접 만들어 보며 포트폴리오에도 추가해 보길 추천한다. 이 책에서만 제공하는 ‘클라이언트 설득용 GPTs 챗봇’부터 미드저니 프롬프트 생성기, 디자이너를 위한 프롬프트 111가지까지 활용하면 당신도 ‘AI 잘 쓰는 ...

인공지능 기타 그래픽 디자인