디자이너가 AI로 앱을 직접 만들다!
디자이너가 AI와 SwiftUI를 활용해 동작하는 프로토타입을 직접 제작하며 디자인-개발 간 번역 과정 축소
사용자의 다음 경험을 위한 'underlay' 컴포넌트를 개발, 기존 UI의 방해 요소를 개선하고 새로운 인터랙션 방식 모색
Metal 셰이더(Shader)를 활용한 스캔 인터랙션 구현 및 AI 코드 생성/수정을 통해 디자인 완성도 향상
개발자에게 디자인 문서 대신 동작하는 코드 레포지토리를 전달하여 효율적인 협업 및 높은 구현 완성도 달성
AI 기반 디자인 협업의 변화
AI의 발전으로 디자이너는 코드 생성 능력을 갖추게 되면서, 기존의 정지된 시안(Mockup) 전달 방식에서 벗어나 동작하는 프로토타입(Interactive Prototype)을 직접 제작하게 되었음.
번역 과정 축소: 디자인 의도를 AI가 코드로 구현해주므로, 디자이너-개발자 간의 커뮤니케이션 비용과 시간 단축.
디자인 의도 명확화: AI에게 원하는 경험을 설명하고, 결과물을 보며 수정하는 과정을 통해 디자인의 추상적 표현을 구체화.
새로운 역할: 디자이너는 '무엇을 만들지'에 집중하고, AI는 '어떻게 만들지'를 지원하는 협업 모델 구축.
결과적으로 디자이너는 인터랙션 툴(Interaction Tool)의 제약 없이 창의적인 아이디어를 실체화할 수 있게 되었음.
Underlay 컴포넌트의 아키텍처적 의도
기존 오버레이(Overlay) 방식의 UI가 사용자의 흐름을 방해하는 문제를 해결하기 위해, 화면 아래에 깔리는 'underlay' 컴포넌트를 고안했음.
택배 송장 비유: 기존 콘텐츠를 가리지 않고 그 아래 존재하던 것이 드러나는 방식에서 영감을 얻어, 새로운 정보 제공 방식을 모색.
사용자 경험(UX) 중심 설계: 화면 위에 뜨는 방식 대신, 기존 화면의 맥락을 유지하면서 정보를 제공하는 비침습적(Non-intrusive) 디자인 추구.
재사용성 확보: 앱 내 다양한 '데드엔드(Dead-end)' 화면에서 다음 경험으로 자연스럽게 이어지도록 하는 공통 컴포넌트(Common Component)로 개발.
이는 단순히 UI 개선을 넘어, 앱 전체의 사용자 흐름(User Flow)을 최적화하려는 시도임.
SwiftUI와 Metal을 활용한 인터랙션 구현
디자이너가 SwiftUI를 직접 사용하여 인터랙션 중심의 컴포넌트를 개발하고, Metal 셰이더(Shader)를 통해 독특한 시각 효과를 구현했음.
코드 기반 디자인: 피그마(Figma) 같은 디자인 툴의 한계를 넘어, 실제 동작하는 인터랙션을 코드로 구현하며 디자인의 디테일을 살림.
Metal 셰이더 활용: 빛의 번짐, 스캔 효과 등 복잡한 그래픽 처리를 위해 픽셀 단위의 렌더링 로직을 직접 제어.
AI 코드 생성 및 수정: SwiftUI 문법 학습 및 셰이더 코드의 파라미터 조정을 AI의 도움을 받아 진행하며, 빠른 반복 수정(Rapid Iteration) 가능.
결과적으로 디자이너는 수백 번의 수정을 통해 원하는 질감과 움직임을 찾아냈으며, 이는 코드 레포지토리(Code Repository)를 통해 개발팀에 효과적으로 전달되었음.
디자인 전달 방식의 혁신: 코드 레포지토리
기존의 인터랙션 가이드 문서 대신, 디자이너가 직접 만든 동작하는 코드 레포지토리(Working Code Repository)를 개발팀에 전달하는 방식을 채택했음.
명확한 커뮤니케이션: 추상적인 설명 대신 실제 구현된 코드를 통해 디자인 의도를 정확하게 전달하여 오해 감소.
높은 구현 완성도: 개발팀은 전달받은 코드를 기반으로 첫 개발 버전부터 높은 완성도를 보였으며, 이는 파인튜닝(Fine-tuning) 단계에서의 효율성 증대.
협업 효율 증대: 디자이너가 직접 UI 디테일 값을 조정하는 과정에 개발자가 참여하며, 실시간 피드백 및 빠른 수정이 가능해짐.
이는 '만들어진 방식'까지 디자인의 일부로 간주하는 새로운 접근 방식을 보여줌.
디자인의 미래: '어떻게'에서 '무엇을'로
AI의 발전으로 '어떻게 만들지(How)'에 대한 장벽이 낮아지면서, 디자이너의 역할은 '무엇을 만들지(What)'에 대한 결정으로 더욱 중요해지고 있음.
창의성의 확장: 툴의 제약에서 벗어나 가장 이상적인 디자인을 먼저 구상하고, AI를 통해 구현 가능성을 탐색.
실물 기반 디자인: 정지된 시안이 아닌, 실제로 동작하는 결과물을 통해 디자인의 완성도를 높이고 개발자와의 협업을 용이하게 함.
새로운 디자인 패러다임: 디자이너는 단순히 화면을 설계하는 것을 넘어, 코드 구조 설계까지 관여하며 결과물의 품질을 높이는 역할 수행.
궁극적으로 디자이너는 AI를 활용하여 상상하는 모든 것을 실체화하는 데 집중하게 될 것임.
