생성형 AI는 디자인을 어떻게 바꾸고 있는가?
Design
이 글은 a16z 내 Jennifer Li and Yoko Li의 How Generative AI Is Remaking UI/UX Design를 번역, 의역, 요약, 재구성한 글입니다.
Source: https://a16z.com/how-generative-ai-is-remaking-ui-ux-design/
디자인 실제 구현 과정의 어려움과 이를 해결해주는 솔루션들의 등장
"이 디자인이 기술적으로 가능한가요?"
"이 단계에 다른 화면을 추가할 수 있나요?"
이러한 질문들은 실무에서 프로덕트 매니저, 디자이너, 개발자 사이에서 끊임없이 제기되고, 계속해서 반복되며, 타협하거나, 싸우거나, 심지어는 디자인을 실행하지 않기로 결정하는 등 지라(Jira) 지옥에 갇혀 시간만 왕창 사용하는 경우가 많다.
그러나 지난 10년 동안 브라우저와 프론트엔드 기술의 발전은 이러한 과정을 크게 개선해왔다. 디자인 팀은 F피그마(Figma)와 같은 클라우드 기반의 디자인 앱을 사용하여 디자인 시스템을 도입하고, 개발팀은 Next.js, Flutter, shadcn/ui, Tailwind과 같은 프론트엔드 프레임워크와 라이브러리에 접근할 수 있게 되면서, 시각적 요구와 기능적 요구를 모두 충족할 수 있는 공통 기반을 갖게 되었다.
생성형 AI의 등장, 그리고 무한한 가능성의 시작
최근, 생성형 AI가 이러한 디자인과 개발의 과정에 적용되면서, 탁월한 코드 및 이미지 생성으로 실제 작동하는 애플리케이션을 만들어내는 과정의 시간을 극적으로 단축시키고 있다.
프롬프트를 넣어 생성된 UI 예시, 출처: https://a16z.com/우리(글쓴이)는 최근 AI-Tamago라는 사이드 프로젝트를 진행하면서, Vercel v0와 같은 생성형 AI 툴을 사용하여 UI를 빠르게 설계할 수 있었다. 기존 프롬프트보다 더 상세하게 설명하기도 하고, 아니면 완전히 다른 방식의 프롬프트를 적용해보면서 LLM은 생각지도 못한 좋은 아이디어를 제공해주었다.
AI를 활용한 디자인 과정은 약 30분만에 끝났다. 물론 디자인과 개발을 모두 할 수 있는 한 사람이 이 업무를 하면 더 빠르게 끝날 수 있겠지만, 일반적으로 여러 사람이 협업하는 환경을 생각해보면 이는 비약적으로 효율화된 업무 과정이다.
비효율적일 수밖에 없는 디자인의 실제 구현 과정
일반적으로 생각하는 업무 흐름과 실제 흐름, 출처: https://a16z.com/디자인을 실제 구현하기 위해 개발하기 시작하면, 화면에 표시된 내용(디자인)과 코드로 구현된 내용(개발) 간의 격차를 메우는 데 많은 시간과 에너지를 소비한다. 앱의 흐름상 복잡한 구조나 엣지 케이스가 있을 경우 이를 고려하여 모든 사용 플로우를 구체화시키는 것이 좋은데, 이를 위해 디자이너가 모든 가능성을 내포한 화면을 나열하는 것은 엄청난 작업이기 때문에 업무상 부담과 비효율은 더욱 악화된다.
기획이든, 디자인이든, 개발이든, 모든 케이스에 대한 화면을 다 하나하나 세심히 작업한다 하더라도 완벽히 모든 상황을 대처하기란 어렵다. 이러한 복잡한 소프트웨어 개발 업무 방식으로 인해, 대부분의 문제들은 QA 테스트 때 새롭게 등장하며, 그 문제를 해결하기 위해 다시 업무의 첫 단계로 돌아가는 악순환이 발생합니다.
생성형 AI기술은 그러한 악순환을 해결해 줄 수 있다.
생성형 AI 기술은 화면 생상과 코드 제작을 빠르게 수행해주어 프로토타이핑 시간을 비약적으로 줄여 이러한 반복적인 업무 시간을 상당하게 줄일 수 있을 것이다. 생성형 AI 기술은 두 가지 측면에서 큰 가치를 지니고 있다.
1. 풍부한 디자인 의견을 제공해주는 역할
제공된 프롬프트 기반으로 다양한 디자인 아이디어를 제시해주기 때문에, 디자이너는 풍부한 시작 정보들을 가치고 더욱 창의적인 디자인 결과물을 만들 수 있을 것이다. 즉, 업무적으로 디자이너는 이제 1픽셀 1픽셀 조정하는 업무에 스트레스 받을 필요는 더욱 줄어들 것이며, 더욱 효과적인 디자인 결과물을 만들어내기 위해 가치, 사용성, 구성 등 디자인 본질적인 아이디어를 구상하는 것에 더욱 집중할 수 있을 것이다.
2. 빠르게 프로토타입화를 돕는 역할
생성형 AI를 통해 디자인 산출물에서 빠르게 작동하는 프로토타입을 만들 수 있게 되었다. 그래서 심지어는 최근 디자인과 개발의 교차점에서 업무하는 '디자인 엔지니어'가 증가하는 추세다.
생성형 AI 기반 세 가지 새로운 디자인 워크플로우
1. 디자인 과정 자체의 효율화
디자인 업무 과정은 굉장히 복잡하고 비선형적이기 때문에, 디자이너가 디자인에 대한 폭넓은 탐색을 할 수 있게 하되, 너무 미시적인 픽셀 단위의 조정을 필요로 하지 않게 하는 것이 매우 중요하다. 디자인 코파일럿 서비스 Galileo처럼, 생성형 AI는 디자인 아이디어를 시각적인 이미지로 즉시 제공해주면서, 디자인 산출물을 만드는 과정은 더욱 협력적이고 상호작용 기반으로 진행된다. 이런 빠른 시각화 과정 덕분에, 디자이너들은 기존에 알아차리지 못한 것들을 빠르게 파악할 수 있게 되었다.
2. 디자인에서 개발로 넘어가는 과정의 효율화
디자인에서 개발로 넘어가는 과정이 실무에서 가장 갈등이 많은 단계다. 시각적인 이미지를 코드로 바꾼다는 것은 마치 여러 언어를 번역하는 것과 비슷하다. 그렇기 때문에 이러한 번역 과정에서 몇몇 정보들이 손실되거나 변형되는 경우가 잦다.
하지만 생성형 AI는 다양한 데이터셋에 대한 훈련과 조정을 통해 이런 번역적 오류가 발생할 가능성을 최소화할 수 있게 됐다. Tailwind와 같은 UI 템플릿과 프레임워크를 적용할 수 있는 능력과 결합하여, LLM은 이제 기능적이고 미적으로 만족스러운 UI 요소를 생성할 수 있다. 이러한 서비스들은 단순히 디자인을 코드화시키는 것뿐만 아니라, 최신 트렌드를 적용하고 우수 사례를 적용하며 기존 프레임워크를 기반으로 작동할 수 있다.
이러한 디자인의 코드화에 대해서, 개발자들은 '과연 이 코드가 정말로 실무에 잘 쓰일 수 있을 만큼 깊이있는지'에 대해 궁금할 것이다. 오늘날 대부분의 솔루션은 시각적 스타일을 구현하는 데에만 중점하고 있긴 하지만, 현재 이러한 솔루션들이 고도화되면 Devin(코딩 에이전트)과 같이 여러 라이브러리와 통합되거나 하는 방식으로 더 깊이있는 코드를 제공해줄 수 있을 것이다.
3. 개발의 효율화
대부분의 디자인 산출물은 정적(static)이기 때문에, 기능성과 상호작용과 같이 구체적인 작동 방식들을 애니메이션화하거나 상세히 설명하지 않으면 제한된 정보만을 담고 있을 수 밖에 없다. 그래서 개발자들이 디자인을 실제 구현할 때 미적 측면뿐만 아니라 기능적인 빈틈을 채우는 것이 필요하다.
이 때문에 많은 조직들이 '코드'를 실제 구현 가능성의 척도로 여기는 경우가 많다. 이러한 접근법은 상호작용이 많은 제품이나 빠른 반복과 테스트가 필요한 조직(ex. 스타트업)에게 특히 유리한 방식이다. 생성형 AI는 기존 디자인 및 개발 컴포넌트 시스템을 활용하여 이러한 과정을 효율화시켜줄 수 있다.
아직 '개발의 효율화'는 완전히 초기 시장이기 때문에, 어떤 솔루션이 뚜렷한 해답이 될 지는 미지수지만 V0, MagicPatterns, RapidPages와 같은 제품들이 많은 시도를 하고 있다.
프로덕트의 작동 방식 자체를 바꿀 생성형 AI - 상태 기반 동적 UI부터 완전 적응형 UI까지
상태 기반 동적 UI
사용자가 특정 요구를 할 경우, 생성형 AI는 사용자의 요구에 맞는 UI 구성을 진행한다. 웹 앱에서 가장 작은 단위의 디자인 원자(아토믹 디자인)은 텍스트와 이미지인데, 생성형 AI는 이러한 디자인 원자들에 대한 배리에이션을 하는 데에 뛰어나다. 생성형 AI는 사용자의 요구와 실시간 데이터에 기반해 해당 디자인 원자를 결정하여, 웹사이트 성능을 최적화시키는 데 큰 도움을 줄 수 있다.
comment 전반적인 레이아웃은 동일하되, 레이아웃을 구성하는 세부 텍스트와 이미지가 배리언츠로 적용된다는 것
완전 적응형 UI
완전 적응형 UI는 사용자가 입력한 프롬프트를 기반으로 서비스의 디자인 구성을 완전히 바꿔버리고, 필요한 기능만 취할 수 있도록 돕는 것을 의미한다. 서비스에 갓 가입한 사용자에게는 수준에 맞는 온보딩 과정을 제공하여 빠르게 가치를 인식할 수 있게 도울 수 있을 것이다. 또한, 숙련된 사용자에게는 서비스의 사용 플로우를 간소화시켜 편의성을 증진시켜 줄 것이다.
