Web Vibe Coding에서의 Design Homogenization 문제 분석

Interrogating Design Homogenization in Web Vibe Coding

Mar 13, 2026•Donghoon Shin, Alice Gao, Rock Yuren Pang +3•View PDF

TL;DR Highlight

LLM으로 웹사이트를 뚝딱 만드는 'vibe coding'이 인터넷을 서구 중심의 획일적 디자인으로 도배할 수 있다는 경고.

Who Should Read

ChatGPT, Lovable, v0 같은 툴로 웹사이트를 만들거나, AI 코딩 도구를 프로덕트에 도입하려는 프론트엔드/풀스택 개발자. 또는 AI 기반 창작 도구를 설계하는 프로덕트 매니저나 디자이너.

Core Mechanics

Vibe coding이란 코드 없이 자연어 프롬프트만으로 LLM이 웹사이트를 통째로 만들어주는 방식 — ChatGPT Canvas, Claude Artifacts, Lovable, v0, Replit 등이 대표 툴
LLM은 영어·서구 중심 데이터로 훈련되어 있어서, '일본 소매점 웹사이트' 요청에도 미니멀한 서구 스타일을 기본값으로 내뱉음 — 문화적 다양성이 묻혀버림
빠른 결과물에 익숙해지면 '이 정도면 됐지' 함정에 빠짐 — 인지 과부하, 자신감 저하, AI 과의존이 겹쳐서 사용자가 기본 출력을 그냥 수용하게 됨
Bootstrap, Tailwind CSS 같은 CSS 프레임워크가 이미 웹 디자인을 획일화하고 있었는데, vibe coding이 이를 훨씬 빠르고 광범위하게 증폭시킴
AI가 만든 균일한 웹사이트들이 인터넷을 채우면, 미래 AI 모델은 더 획일적인 데이터로 학습 — 'model collapse(모델 붕괴)'로 이어지는 악순환 가능성
해결책으로 'productive friction(의도적 마찰)' 제안 — 즉시 생성 대신 AI가 중간에 문화적 맥락·브랜드 정체성을 물어보고 대안을 제시하도록 설계해야 함

Evidence

6개 주요 vibe coding 툴(ChatGPT Canvas, Gemini Canvas, Claude Artifacts, Lovable, v0, Replit) 직접 워크스루 + 학술 13편·그레이 문헌 50편 총 63개 소스 분석
Agarwal et al. 2025 연구에서 LLM 글쓰기 어시스턴트가 사용자 출력물을 서구 스타일로 균질화하고 문화적 뉘앙스를 감소시킨다는 것을 실증적으로 확인
Kumar et al. 2025 CHI 연구에서 LLM 지원이 단기 창의성은 높이지만 장기적으로 독립적 창의 능력을 저하시킨다는 것을 확인
Nature 2024 논문(Shumailov et al.)에서 재귀적으로 생성된 데이터로 학습할 때 AI 모델이 붕괴(model collapse)함을 실험적으로 입증

How to Apply

v0나 Lovable로 UI를 빠르게 뽑을 때, 생성된 결과물을 그대로 쓰지 말고 '이게 우리 브랜드/문화에 맞는가?'를 체크하는 리뷰 단계를 파이프라인에 추가하면 됨 — 예: 생성 후 디자인 시스템 토큰과 비교하는 자동화 스크립트
AI 코딩 도구를 내부에 도입할 때, 프롬프트 창 앞에 브랜드 가이드북 URL이나 기존 디자인 시스템 문서를 컨텍스트로 자동 삽입하도록 설정하면 LLM이 generic 패턴 대신 브랜드 스타일을 따를 확률이 높아짐
LoRA(적은 파라미터만 학습하는 기법) 스타일 어댑터를 선택하는 UI를 vibe coding 도구 앞단에 노출해서, 사용자가 '기본값' 대신 특정 문화권/미학적 스타일을 선택하도록 유도하는 인터랙션 패턴을 실험해볼 수 있음

Code Example

snippet

# Productive Friction 적용 예시: 생성 전 문화/브랜드 컨텍스트 수집 프롬프트

SYSTEM_PROMPT = """
You are a web design assistant. Before generating any code, you MUST ask the user the following clarifying questions:
1. What is the primary cultural/regional context for this website? (e.g., Japanese, Brazilian, Korean)
2. Does the user have an existing brand guideline or design system? If yes, ask for the URL or key tokens.
3. Present 3 distinct aesthetic directions (with brief descriptions) and ask the user to choose or combine.

Do NOT generate code until these questions are answered.
After receiving answers, explicitly state the design assumptions you are making before generating.
"""

user_prompt = "일본 소매 체인점을 위한 랜딩 페이지를 만들어줘"

# Bad: 즉시 생성 (homogenization 위험)
# response = llm.generate(user_prompt)

# Good: Productive Friction 적용
response = llm.generate(
    system=SYSTEM_PROMPT,
    user=user_prompt
)
# → LLM이 먼저 문화적 맥락과 브랜드 정체성을 물어봄

Terminology

Vibe Coding코드를 전혀 몰라도 '이런 느낌의 웹사이트 만들어줘'라고 말하면 LLM이 알아서 HTML/CSS/JS까지 다 짜주는 방식. 레고 조립 대신 '레고 성 만들어줘'라고 말하면 로봇이 다 만들어주는 것과 비슷.

Design Homogenization다양한 디자인이 점점 비슷해지는 현상. AI가 학습 데이터의 '평균'을 뱉다 보니 전 세계 웹사이트가 똑같이 미니멀한 서구 스타일로 수렴되는 것.

Model CollapseAI가 AI가 만든 데이터로 다시 학습하면 점점 다양성이 사라지고 품질이 저하되는 현상. 복사본의 복사본을 계속 만들다 보면 원본 품질이 사라지는 것과 같음.

Productive Friction일부러 약간의 불편함을 디자인에 넣는 전략. '즉시 생성' 대신 중간에 '정말 이 방향이 맞나요?' 같은 질문을 끼워 넣어 사용자가 한 번 더 생각하게 만드는 것.

Frictionless Generation사용자가 프롬프트를 치면 AI가 아무런 중간 과정 없이 즉시 결과물을 만들어주는 방식. 편리하지만 창의적 판단을 AI에게 완전히 맡기는 부작용이 있음.

LoRA모델 전체를 다시 학습시키지 않고 작은 어댑터 모듈만 끼워서 특정 스타일이나 능력을 추가하는 기법. 안경처럼 끼웠다 뺐다 할 수 있어서 '한국 전통 미학 스타일 어댑터' 같은 식으로 활용 가능.

Sociotechnical Risk기술 자체의 문제뿐 아니라 그 기술이 사회·조직·사람과 상호작용하면서 생기는 복합적인 위험. 코드 버그가 아니라 '이 도구를 쓰는 방식이 사회에 어떤 영향을 미치는가'의 문제.

Grey Literature학술 논문이 아닌 블로그 포스트, 레딧 스레드, SNS 등 비공식 출처. 새로운 기술 트렌드는 학술지보다 여기에 먼저 나타나서 연구에 활용됨.

Related Resources

Original Abstract (Expand)

Generative AI is known for its tendency to homogenize, often reproducing dominant style conventions found in training data. However, it remains unclear how these homogenizing effects extend to complex structural tasks like web design. As lay creators increasingly turn to LLMs to 'vibe-code' websites -- prompting for aesthetic and functional goals rather than writing code -- they may inadvertently narrow the diversity of their designs, and limit creative expression throughout the internet. In this paper, we interrogate the possibility of design homogenization in web vibe coding. We first characterize the vibe coding lifecycle, pinpointing stages where homogenization risks may arise. We then conduct a sociotechnical risk analysis unpacking the potential harms of web vibe coding and their interaction with design homogenization. We identify that the push for frictionless generation can exacerbate homogenization and its harms. Finally, we propose a mitigation framework centered on the idea of productive friction. Through case studies at the micro, meso, and macro levels, we show how centering productive friction can empower creators to challenge default outputs and preserve diverse expression in AI-mediated web design.