r/vibecoding•2개월 전•65•10
전문 UI 디자이너 17명을 인터뷰해 알아낸, AI 결과물이 '저퀄리티'가 되지 않는 이유
I spoken with 17 PROFESSIONAL UI DESIGNERS and this is how why their website DON'T turn out as AI SLOP
핵심 요약
AI를 활용한 웹사이트 제작 시, 무작정 코딩부터 시작하지 말고 체계적인 기획 단계를 거쳐야 결과물의 퀄리티를 높일 수 있습니다.
- 기획 단계 — 브랜드 정체성과 핵심 가치를 정의하여 모든 디자인 결정의 필터로 활용함
- 콘텐츠 구조화 — 시각 요소보다 서사 구조를 먼저 설계하여 사용자 경험을 최적화함
- 무드 보드 — 브랜드 형용사에 부합하는 레퍼런스만 선별하여 창의적 방황을 방지함
- 개발 단계 — 디자인 토큰과 명확한 사양을 Claude에 전달하여 의도대로 구현함
난 항상 영감을 모아서 AI한테 던져주고 코딩부터 시키기 바빴는데, 왜 결과물이 이 모양인지 의문이었음:
- 내 스타트업의 정체성이 제대로 안 담김
- 다른 AI가 찍어낸 흔해 빠진 웹사이트랑 똑같이 생김
근데 요즘 UI 디자이너들도 개발 과정에 AI를 쓰기 시작했단 말이지. 그럼 왜 프로 디자이너들이 만든 사이트는 AI가 대충 싼 똥처럼 안 나오는 걸까?
크리에이터를 위한 워크스페이스를 만드는 프로젝트를 진행하면서, 수많은 UI 디자이너들한테 작업 방식을 물어보고 다녔음. 그 과정에서 내가 정착한 단계들을 공유해 보려고 함.
대화 끝에 내가 정한 순서는 이거임:
1. 발견 (Discovery)
클라이언트(혹은 자기 자신)를 털어서 다음 내용을 적어봐:
- 이 제품이 하는 일을 한 문장으로 정의
- 타겟 유저
- 방문자가 사이트를 떠날 때 느껴야 할 감정
- 가장 중요한 행동 딱 하나
- 경쟁사와 차별화되는 점
- 브랜드를 설명할 형용사 3개
스스로 제약을 걸기 위해 한 페이지 안에 끝내는 게 중요함. 나한테 제일 중요한 건 브랜드를 설명하는 형용사 3개임. 나중에 내리는 모든 결정이 이 형용사들을 거쳐서 필터링되거든.
2. 콘텐츠 아키텍처
아직 비주얼은 건드리지 마. 오직 서사 구조에만 집중해. 가장 단순하게, 웹사이트에 최소한으로 필요한 건 이거임:
- 카테고리 - 이게 뭔지 알려주는 거. 사용자가 이미 알고 있는 모델(캔버스, 화이트보드, 문서 등)에 대입하게 만드는 거지. 어떤 문제를 해결하는지 설명해.
- 프리미티브(Primitives) - 구성 요소. 레고 블록 같은 거임. 사용자가 보여준 예시만 보는 게 아니라, 스스로 활용 사례를 만들 수 있게 해주는 핵심 요소지.
- 인스턴스(Instance) - 프리미티브를 조립해서 만든 실제 작동 예시.
하지만 개발자나 일반적인 구조는 좀 더 명확한 심리적 흐름을 따름:
- 후크(Hook): 핵심 가치를 바로 때려 박음.
- 문제(Problem): 방문자가 겪는 고통을 정확히 짚어줌.
- 해결책(Solution): 그 고통을 해결할 제품을 제시함.
- 증명(Proof): 지표, 후기, 로고 같은 걸로 신뢰도를 높임.
- 핵심 기능과 작동 방식을 설명함.
