“AI로 만들면 왜 다 비슷할까”...UX 설계가 결과물 차이 만든다
생성형 인공지능(AI)에 아이디어를 입력하면 불과 몇 분 만에 웹사이트와 애플리케이션 화면이 만들어진다. 하지만 결과물은 어디선가 본 듯 비슷하고, 사용자의 실제 문제를 해결하지 못하거나 완성도가 부족한 경우가 적지 않다.
이처럼 겉보기에는 그럴듯하지만 차별성과 실용성이 떨어지는 AI 생성 결과물을 가리켜 'AI Slop'이라고 부른다. 문제는 AI의 코딩 능력보다 코딩에 앞서 무엇을, 누구를 위해, 어떤 모습으로 만들 것인지를 충분히 설계하지 않았다는 데 있다.
전자신문인터넷은 오는 10월 16일 서울 위플레이스 강남2호점에서 'UX 기획·DESIGN.md 설계·AI 구현 전 과정 1-day 워크숍 with Claude Code·Codex'를 개최한다.
이번 과정은 AI를 이용해 단순히 코드를 생성하는 방법을 배우는 교육이 아니다. 사용자의 문제를 발견하는 유저 리서치부터 제품요구사항문서(PRD) 작성, 디자인 명세서인 'DESIGN.md' 설계, 사용자환경(UI) 프로토타이핑, 코딩 에이전트를 활용한 구현과 서비스 배포까지 전 과정을 하루 동안 직접 수행한다.
바이브 코딩의 진입 장벽은 빠르게 낮아지고 있다. 코딩 경험이 부족한 사람도 AI와 대화하며 서비스를 만들 수 있게 됐지만, 같은 AI 도구를 사용하는 사람들의 결과물은 갈수록 유사해지고 있다. AI에 기능만 요청할 뿐 사용자가 누구인지, 어떤 문제를 해결해야 하는지, 어떤 경험과 시각적 인상을 제공해야 하는지 충분히 전달하지 않기 때문이다.
이번 교육은 이러한 한계를 해결하기 위해 바이브 코딩에 UX 설계 방법론을 결합한다. UX를 특정 직무나 디자인 기술이 아니라, 사용자의 문제를 정의하고 AI가 구현해야 할 제품의 방향을 구체화하는 방법론으로 활용한다.
첫 번째 세션에서는 같은 AI를 사용해도 결과물의 완성도가 달라지는 이유를 분석하고, UX 설계 중심의 바이브 코딩 프로세스를 살펴본다. 클로드 코드(Claude Code)와 코덱스(Codex) 등 주요 코딩 에이전트의 특징을 비교하고, Claude Design과 Google Stitch, Pencil 등 AI 기반 UX·디자인 도구의 활용 방법을 소개한다.
AI 에이전트 시대의 핵심 개념인 모델컨텍스트프로토콜(MCP)과 스킬(Skills), 서브에이전트(Sub-agent)의 역할도 다룬다. AI에 한 번의 지시를 내려 결과물을 생성하는 수준을 넘어, 필요한 정보와 전문 기능을 연결하고 여러 작업을 단계적으로 수행하게 만드는 방법을 익힌다.
이어지는 실습에서는 수강생 자신을 첫 번째 사용자로 설정해 실제로 겪고 있는 문제를 발견한다. 막연한 아이디어에서 시작하는 것이 아니라 유저 리서치를 통해 해결할 문제를 구체화하고, 시장과 유사 사례를 조사한 뒤 AI가 이해할 수 있는 PRD로 정리한다.
리서치 MCP를 활용해 관련 시장과 사례를 조사하고, 스킬을 이용해 페르소나와 사용자 시나리오도 작성한다. 이를 통해 “무엇을 만들 것인가”라는 아이디어를 “누구의 어떤 문제를 어떤 방식으로 해결할 것인가”가 명확한 서비스 기획으로 발전시킨다.
오후에는 AI 에이전트가 읽고 실제 결과물에 반영할 수 있는 디자인 명세서 'DESIGN.md'를 작성한다.
DESIGN.md에는 서비스가 지향하는 브랜드의 말투와 성격, 색상, 타이포그래피, 화면 구성 요소와 디자인 원칙 등을 구조적으로 기록한다. 사람이 머릿속으로만 생각하거나 감각적으로 전달하던 디자인 방향을 AI가 해석하고 일관되게 적용할 수 있는 언어로 바꾸는 과정이다.
수강생은 레퍼런스를 바탕으로 자신만의 서비스 브랜드 보이스를 정의하고, 디자인 토큰과 주요 UI 구성 요소를 설계해 DESIGN.md를 완성한다. 이는 AI가 화면마다 서로 다른 스타일을 생성하거나 흔한 템플릿형 디자인을 반복하는 문제를 줄이는 기준점으로 활용된다.
완성한 PRD와 DESIGN.md는 UI 프로토타이핑으로 연결한다. Claude Design을 활용해 와이어프레임과 UI 목업을 만들고, 처음 설정한 사용자 문제와 기획 의도, 디자인 원칙이 화면에 제대로 반영됐는지 검토한다. 생성된 UI를 평가하고 수정하는 반복 과정을 거치며 서비스의 완성도를 높인다.
마지막 두 시간은 클로드 코드와 코덱스 등 코딩 에이전트를 활용해 앞서 기획하고 디자인한 서비스를 실제로 구현하는 실습으로 진행된다. 수강생은 코딩 에이전트의 기본 사용법과 오류 대응, 기능 수정 방법을 익히고, 프로토타입을 동작하는 서비스로 발전시킨다.
AI가 만든 초기 결과물에 만족하지 않고 핵심적인 20%를 집중적으로 개선해 전체 완성도를 높이는 '80대 20' 방식의 결과물 다듬기와 검증 방법도 배운다. Agentation과 Playwright 등의 도구를 활용해 문제를 발견하고 수정한 뒤, 완성된 서비스를 버셀(Vercel)이나 넷리파이(Netlify)를 통해 직접 배포한다.
이번 과정의 가장 큰 특징은 유저 리서치와 기획, 디자인, 개발을 서로 분리된 단계로 다루지 않는다는 점이다. 하나의 문제를 출발점으로 삼아 PRD와 DESIGN.md를 만들고, 이를 코딩 에이전트가 실행할 수 있는 형태로 연결해 최종 서비스까지 완성한다.
코딩 경험이 없는 사람도 참여할 수 있다. UX 역시 특정 전공자나 디자이너만을 위한 전문 영역이 아니라, AI가 더 나은 결과물을 만들도록 문제와 사용자를 정의하는 실무 방법론으로 다룬다.
교육은 바이브 코딩을 경험했지만 결과물이 늘 비슷해 아쉬움을 느낀 사람, AI로 자신만의 서비스를 만들고 싶지만 어디서 시작해야 할지 모르는 사람, 기획서를 작성한 뒤 개발을 기다리는 기존 프로세스에 한계를 느끼는 UX·기획 실무자에게 적합하다. AI 시대에 기획자나 디자이너를 넘어 직접 서비스를 만드는 '빌더'로 역할을 확장하고 싶은 실무자도 주요 대상이다.
강의는 김유정 UX·HCI 박사가 맡는다. 김 박사는 서울대학교 융합과학기술대학원에서 UX·HCI 석사와 박사 학위를 취득했으며, 미국 워싱턴대학교 정보대학원 연구원과 삼성SDS CX팀 시니어 디자이너, 알고케어 프로젝트매니저·프로덕트 파트 리드 등을 거쳤다.
현재 AI 에이전트 관련 스타트업 공동 창업을 준비하며 제품 기획과 디자인, 개발, 마케팅 전반에 AI를 적용하고 있다. LG유플러스 임원과 DB그룹 임직원, 효성ITX 리더, 컬리 경영진과 리더 등을 대상으로 생성형 AI와 AI 에이전트 실무 교육을 진행했다.
자세한 교육 프로그램과 준비 사항, 참가 신청 방법은 전자신문인터넷 콘퍼런스 홈페이지(https://conference.etnews.com/conf_info.html?uid=512)에서 확인할 수 있다.
유은정 기자 judy6956@etnews.com
