바이브 코딩 디자인 실수: AI가 만든 웹사이트는 왜 다 똑같아 보일까

당신의 랜딩 페이지를 한번 열어보세요. 보라색 그라디언트가 배경에 깔려 있지 않습니까? 스크롤할 때 섹션이 하나씩 페이드인되지 않습니까? 마우스를 올리면 뭔가 반짝이거나 따라다니지 않습니까?

만약 그렇다면, 당신의 웹사이트는 이미 "AI가 만들었구나"라는 첫인상을 주고 있을 수 있습니다. Y Combinator의 디자인 리뷰에서 Raphael Shad(Cron 공동창업자, Notion에 매각)와 Jorn Van Dijk(Framer CEO)가 실제 YC 스타트업 웹사이트들을 분석하며 밝힌 바이브 코딩 디자인의 문제점을 정리합니다.

보라색 그라디언트 증후군: LLM의 기본값이 당신의 브랜드를 지웁니다

리뷰된 거의 모든 웹사이트에 보라색 그라디언트가 있었습니다. 보라색 자체가 나쁜 것이 아닙니다. 문제는 모든 스타트업이 같은 색을 쓰고 있다는 것입니다.

예전에는 좋은 웹사이트의 디자인 트렌드가 퍼지는 데 시간이 걸렸습니다. 하지만 이제 LLM이 좋은 웹사이트의 코드를 학습하고, 다음 주에 모든 스타트업 웹사이트가 똑같아집니다. AI 도구에게 "멋진 랜딩페이지 만들어줘"라고 하면, 높은 확률로 보라색 그라디언트가 나옵니다.

브랜드를 AI의 기본값에 맡기지 마세요. 색상 팔레트부터 직접 정하고, 그것을 AI에게 입력하세요.

해결법은 간단합니다. AI에게 디자인을 시키기 전에, 당신의 브랜드 색상을 먼저 정하세요. "이 색상 팔레트를 사용해"라고 지시하면 AI는 그대로 따릅니다. AI가 뱉는 기본값에서 시작하지 말고, 당신의 브랜드에서 시작하세요.

"쉬우니까 넣었다"는 최악의 이유입니다

리뷰에서 가장 반복된 패턴이 있습니다. 스크롤을 따라가는 선, 마우스를 쫓아다니는 빛, 화면을 가로지르는 유성 효과. 이것들의 공통점은 무엇일까요?

사람이 직접 코딩했다면 절대 만들지 않았을 것들입니다.

Raphael은 이렇게 말합니다. "AI 도구가 이런 SVG 빌드업이나 트랜스폼에 능숙하기 때문에 만들어지는 것이지, 이것이 실제로 좋은 디자인이어서가 아닙니다." 일주일을 투자해서 코딩할 가치가 있는지 자문해 보세요. 아니라면, AI가 5초 만에 만들어줬다고 해서 넣을 이유도 없습니다.

• 가치 테스트: 이 요소가 방문자를 고객으로 전환하는 데 도움이 되는가?
• 비용 테스트: 직접 코딩한다면 일주일을 투자할 가치가 있는가?
• 주의 테스트: 이 요소가 핵심 메시지보다 더 많은 주의를 빼앗는가?

세 가지 중 하나라도 부정적이면, 그 요소는 삭제 대상입니다.

호버 효과의 역설: 클릭을 유도해야 할 것이 사라집니다

LLM이 만드는 호버 효과에는 이상한 패턴이 있습니다. 마우스를 올리면 요소가 사라지는 것입니다. 메뉴 항목에 마우스를 올렸는데 텍스트가 흐려지고, 버튼이 배경으로 녹아들어갑니다.

디자이너라면 절대 하지 않을 선택입니다. 브라우저는 이미 무료로 호버 효과를 제공합니다. 커서가 손 모양으로 바뀌는 것만으로도 "여기를 클릭하세요"라는 신호가 됩니다. 호버 효과를 추가한다면, 한 단계 더 밝게, 한 단계 더 눈에 띄게 만들어야 합니다. 사라지게 만들면 안 됩니다.

또 다른 문제는 호버 뒤에 핵심 기능을 숨기는 것입니다. 데스크톱에서도 비효율적이지만, 모바일에서는 아예 접근할 수 없습니다. 롱프레스는 대체 수단이 되지 못합니다. 사용자는 화면 곳곳을 꾹꾹 누르며 숨겨진 기능을 탐색하지 않습니다.

스크롤 재킹: 방문자를 볼모로 잡지 마세요

여러 웹사이트에서 스크롤이 "납치"되는 현상이 반복됐습니다. 스크롤하면 브라우저의 기본 스크롤 대신 JavaScript가 개입해서 애니메이션이 빌드업되는 동안 화면에 갇히게 됩니다.

Raphael의 표현이 인상적입니다. "당밀 속을 걷는 느낌."

스크롤은 이미 움직임입니다. 스크롤 위에 또 다른 움직임을 얹을 필요가 없습니다.

스크롤 재킹은 세 가지 문제를 동시에 만듭니다.

• 페이지 위치 감각 상실: 방문자는 자신이 페이지의 어디쯤에 있는지 알 수 없습니다
• 콘텐츠 누락: 빠르게 스크롤하면 타이머 기반 페이드인이 시작되기 전에 지나쳐버립니다
• 조급함 유발: 애니메이션이 끝날 때까지 기다려야 하는 경험은 "이 페이지를 닫고 싶다"는 충동을 만듭니다

타이포그래피 계층이 5단계를 넘으면 혼란입니다

Sphinx 웹사이트 리뷰에서 흥미로운 패턴이 드러났습니다. 로고 타입, 별도의 브랜드 라벨, H1, 서브텍스트, 그리고 추가 스타일까지. 한 화면에 5가지 이상의 텍스트 스타일이 혼재하고 있었습니다.

사람이 디자인했다면 이런 선택은 나오지 않습니다. LLM이 "영리하게" 추가 라벨을 만들어내는 것입니다. 하지만 스타일이 많아질수록 정보 계층은 복잡해지고, 방문자는 어디를 먼저 봐야 할지 혼란스러워합니다.

원칙은 단순합니다. H1, 서브텍스트, 본문. 이 세 가지면 충분합니다. AI가 네 번째, 다섯 번째 스타일을 제안하면, 거절하세요.

H1이 "무엇을, 누구를 위해, 왜"를 답하지 못하면 실패입니다

시각적 효과에 시간을 쏟는 동안, 정작 중요한 것이 빠지는 경우가 많습니다. 리뷰어들은 여러 웹사이트를 스크롤한 뒤 이렇게 말했습니다. "이 회사가 뭘 하는 곳인지 모르겠습니다."

랜딩페이지의 히어로 섹션은 세 가지 질문에 답해야 합니다.

• 무엇인가: 이 제품은 무엇을 하는가?
• 누구를 위한 것인가: 타겟 사용자는 누구인가?
• 왜 관심을 가져야 하는가: 어떤 문제를 해결하는가?

이 세 가지와 CTA 버튼이 스크롤 없이 보이는 영역(above the fold)에 있어야 합니다. 화려한 애니메이션으로 이 공간을 채우면, 전환율은 떨어집니다.

AI 디자인 슬롭을 피하는 인디 파운더의 체크리스트

AI 디자인 도구는 역사상 가장 강력한 웹사이트 제작 도구입니다. 문제는 도구가 아니라 도구의 출력을 무비판적으로 수용하는 것입니다.

Raphael은 이렇게 요약합니다. "당신은 이제 편집자입니다. AI가 제안하면 당신이 판단하세요. 'Yes, Accept All'을 누르는 순간, 당신의 브랜드는 사라집니다."

• 브랜드 먼저: AI에게 디자인을 시키기 전에, 색상 팔레트와 톤을 결정하세요
• 1주일 테스트: 직접 코딩해도 만들 가치가 있는 요소만 남기세요
• QA는 직접: AI가 만든 모든 인터랙션을 직접 클릭해보세요. 원샷으로 만든 페이지일수록 놓치는 버그가 많습니다
• 일관성 점검: 섹션마다 다른 비주얼 언어를 쓰고 있지 않은지 확인하세요
• 모바일 테스트: 호버에 의존하는 기능이 모바일에서 접근 가능한지 확인하세요

랜딩 페이지는 예술 작품이 아닙니다. 고객 획득 채널입니다. AI로 시간을 절약한 만큼, 그 시간을 메시징과 전환율 최적화에 투자하세요. 화려한 효과보다 명확한 가치 제안이 고객을 데려옵니다.

이 글은 Y Combinator의 영상 Common Mistakes With Vibe Coded Websites을 기반으로 작성되었습니다.