AI 웹 디자인이 다 비슷해 보이는 이유와 실전 해법

AI 코딩 에이전트에게 "모던한 랜딩페이지 만들어줘"라고 던지면 열에 아홉은 보라색 그라데이션 배경에 Inter 폰트, 카드 네 개가 나란히 놓인 화면이 나온다. 클코단에서도 똑같은 질문이 나왔다 — AI가 만든 웹 디자인 특유의 어색함을 어떻게 줄일 수 있느냐는 것이다. 레퍼런스를 구체적으로 주는 법, GPT 이미지 생성으로 레퍼런스를 시각화해 전달하는 법, DESIGN.md 서비스와 shadcn 같은 대안이 방에서 오갔다. 이 방법들이 실제로 "AI스러움"을 지우는지, 지운다면 어떻게 지우는지를 따라가 본다.

AI가 만든 웹사이트가 비슷해 보이는 이유

앤트로픽이 공개한 프런트엔드 미학 프롬프팅 쿡북은 원인을 명확히 짚는다. 별다른 지침이 없으면 클로드는 생성형인 만큼 안전하고 보수적인, 즉 평균적인 디자인으로 수렴한다는 것이다. "모던한 느낌"이라는 요청은 학습 데이터의 평균을 뽑아 달라는 요청과 다르지 않다. 그 평균이 바로 그 밋밋한 화면이다.

색상 쏠림에는 좀 더 구체적인 계보가 있다. Tailwind CSS가 기본 강조색을 인디고 계열로 잡은 뒤, 그 색을 쓴 튜토리얼과 예제 코드가 수년에 걸쳐 웹 전체에 퍼졌고 AI 모델 학습 데이터에도 그대로 흡수됐다는 분석이 여러 개발 블로그에서 나온다. 그러니 모델 입장에서는 보라·남색 그라데이션이 "버튼은 원래 이런 색"이라는 통계적 사실에 가깝다. 폰트도 마찬가지로 Inter나 Roboto처럼 어디서나 쓰이는 서체가 기본값으로 튀어나온다.

불만은 방에서도 나왔다. 텍스트 프롬프트만으로는 에이전트가 스스로 취향을 만들어내지 못한다. 방향을 정하는 몫은 결국 프롬프트를 쓰는 사람에게 넘어온다는 이야기였다. 써본 사람들 사이에서도 비슷한 인식이 퍼져 있다 — AI가 잘못 만드는 게 아니라, 무엇을 원하는지 말해주지 않았을 때 안전한 선택으로 도망친 결과라는 쪽이다.

텍스트 대신 이미지로 레퍼런스를 못박는다

레퍼런스를 명확히 주는 것, 그리고 GPT 이미지 생성으로 그 레퍼런스를 더 구체적인 그림으로 만들어 에이전트에 넘기는 것 — 방에서 나온 첫 번째 해법이다. 실제로 이 방식은 최근 화면 생성 워크플로우에서 하나의 패턴으로 자리 잡는 분위기다. GPT 이미지 계열 모델로 먼저 목표 화면의 목업을 만들고 그 이미지를 코딩 에이전트에게 넘겨 그대로 구현하게 하는 방식이다.

이 접근이 통하는 이유는 단순하다. 형용사로 이뤄진 프롬프트는 에이전트가 매번 다르게 해석할 여지를 남기지만 이미지는 레이아웃과 간격, 타이포그래피 조합까지 눈으로 확인할 수 있는 계약서 역할을 한다. 에이전트가 타고난 안목을 발휘하길 바라는 대신, 검토 가능한 구체물을 쥐여주는 쪽이 실패 확률이 낮다는 논리다.

다만 이 방법에는 전제 조건이 있다. 좋은 레퍼런스를 고르는 안목 자체는 대체되지 않는다. 이미지 생성 도구가 그럴듯한 목업을 뽑아준다고 해도, 그 목업이 이미 흔한 스타일이면 결과물도 흔해진다. 이 방법이 제안된 맥락도 방에서는 "레퍼런스를 구체화해서 전달"이라는 순서였지, 이미지 생성 자체가 마법처럼 결과를 바꿔준다는 취지는 아니었다.

DESIGN.md, 매번 새로 설명하지 않아도 되는 디자인 언어

두 번째로 언급된 getdesign.md는 색상·타이포그래피·간격·컴포넌트 규칙과 그 이유를 한 장의 마크다운 파일에 담아 코딩 에이전트에 넘기는 서비스다. 이 파일 형식 자체는 구글이 공개한 오픈 스펙 design.md를 따른다. 코드로 읽을 수 있는 YAML 프런트매터로 정확한 토큰 값을 주고 그 아래 산문으로 왜 그 값을 골랐는지 설명을 붙이는 구조다.

getdesign.md는 Apple, Figma, Stripe, Shopify 등 실제 브랜드의 디자인 시스템을 역설계해 정리한 무료 카탈로그를 300개 넘게 제공하고 Claude, ChatGPT, Cursor, Gemini 등 주요 도구와 함께 쓸 수 있다고 안내한다. 유료 옵션으로는 브랜드에 맞춘 개인화 DESIGN.md 제작도 있다.

이 방식이 앞선 이미지 레퍼런스 방법과 다른 지점은 지속성이다. 이미지 한 장은 그 세션의 결과물에만 영향을 준다. DESIGN.md 파일은 다르다 — 프로젝트에 계속 남아 다음 세션, 다음 페이지, 심지어 다른 에이전트로 넘어가도 같은 시각 언어를 유지하게 한다. 매번 "보라색 말고", "Inter 말고"를 반복해서 설명해야 하는 부담을 파일 하나로 줄이는 셈이다.

부품 기본값이 된 shadcn, 그리고 그 한계

shadcn도 대안으로 방에서 나왔다. 실제로 이 라이브러리는 이미 AI 코딩 생태계의 사실상 기본값이다. GitHub 스타 수는 2026년 3월 기준 10만 개를 넘겼고 v0, Lovable, Bolt, Cursor, 클로드 코드까지 대부분의 AI 도구가 별다른 지정 없이도 shadcn 컴포넌트를 우선 생성한다. 복잡한 추상화 레이어 없이 그대로 프로젝트에 복사되는 순수 코드이다 보니, 에이전트가 읽고 고치기에도 오류가 적다는 점이 채택 이유로 꼽힌다.

역설적인 지점은 여기서 생긴다.

거의 모든 AI 도구가 같은 컴포넌트 라이브러리를 기본값으로 삼으면, 그 자체로 또 하나의 "평균"이 만들어진다. 써본 사람들 사이에서는 shadcn을 그대로 쓰면 레이아웃 구조까지 비슷해지기 쉽다는 지적도 나온다. 컴포넌트 뼈대는 shadcn에 맡기고 색상·타이포그래피·간격 같은 표층은 DESIGN.md나 레퍼런스 이미지로 따로 눌러줘야 차별화가 남는다는 절충안이 커뮤니티 곳곳에서 나온다.

1인 개발자나 소규모 팀 입장에서는 이 조합이 현실적인 선택지에 가깝다. shadcn으로 컴포넌트를 빠르게 조립하고 무료로 풀린 DESIGN.md 카탈로그에서 원하는 브랜드에 가까운 파일을 하나 가져와 프로젝트 루트에 심어두는 정도로도 "그 AI 느낌"의 상당 부분을 걷어낼 수 있다는 뜻이다. 별도 디자이너 없이도 시각적 일관성을 파일 하나로 관리할 수 있다는 점은 인력을 따로 둘 여유가 없는 팀일수록 체감이 크다.

남는 질문은 이 조합이 얼마나 오래 차별점으로 남을 수 있느냐다. DESIGN.md 카탈로그도, 레퍼런스 이미지를 먼저 그려주는 워크플로우도 이미 여러 서비스가 비슷하게 따라 하고 있다. 지금은 남들과 다른 화면을 만드는 방법이다. 하지만 이 방법 자체가 표준이 되는 순간 다시 같은 질문으로 돌아올 가능성이 크다.