자동화가 어려워 포기했다면, 젠스파크 워크플로우부터 시작하세요
make, n8n, zapier가 너무 어려워서 자동화를 포기했던 분들을 위한 젠스파크 워크플로우 튜토리얼. 채팅 한 줄로 뉴스레터 요약, X 트렌드 분석, 유튜브 채널 모니터링까지 세팅하는 방법을 정리했습니다.
AI, 바이브코딩으로 만든 홈페이지는 왜 다 비슷해질까?
AI 바이브코딩으로 만든 홈페이지가 비슷해지는 이유와, design.md·레퍼런스·취향을 활용해 차별화된 디자인을 만드는 워크플로우를 정리했습니다.
바이브코딩으로 홈페이지를 만들어보면 처음에는 꽤 놀랍니다. 말로 설명했을 뿐인데 hero section이 나오고, 버튼이 생기고, 카드형 섹션이 정리되고, 반응형까지 어느 정도 잡힙니다. 예전 같으면 디자이너, 퍼블리셔, 개발자가 며칠씩 맞춰야 했던 초안이 몇 분 만에 나와요.
근데 몇 번 만들어보면 이상한 느낌이 옵니다.
결과물이 어딘가 본 사이트랑 비슷합니다. 큰 그라데이션 배경, 둥근 카드, 살짝 떠 있는 3D 오브젝트, 과한 glow 효과, 비슷한 CTA 버튼. 처음엔 멋있어 보였던 디자인이 어느 순간 AI가 만든 홈페이지 같은 느낌으로 보이기 시작합니다.
저도 바이브 코딩을 하며 느낀 문제이기도 합니다. 그래서 최근에 제작한 nslink 사이트는 AI느낌을 줄이기 위해 스티치를 활용해서 제작했어요. 디자인 가이드없이 요청했을 때랑은 전혀 다른 디자인이 나왔어요. AI에게 홈페이지를 맡길수록 이젠 사용자의 관점과 취향이 중요하단 생각이 듭니다.
얼마 전에 봤던 유튜브 영상(My AI Design Workflow That Doesn't Ship Slop)에서 큰 공감을 했는데요, 이번 글은 Meng이 말한 바이브 코딩에서 디자인을 어떻게 개선해나갈 지 영상 내용을 바탕으로 담아봤습니다.
영상의 핵심은 단순합니다. AI로 만든 결과물이 다 비슷해지는 이유는 AI가 부족해서가 아니라, 우리가 충분한 디자인 DNA를 주지 않았기 때문입니다.
AI 홈페이지가 비슷해지는 이유
서두에 이야기한 것처럼 요즘 AI에이전트로 앱/웹을 만들지만, 보라색 그라데이션이 깔린 흔한 바이브코딩 웹사이트는 바로 AI Slop처럼 느껴집니다. 영상에 나온 Meng To도 비슷한 문제를 짚습니다. 요즘 디자인의 기본 수준은 높아졌지만, 동시에 기본값 자체가 너무 일반화됐다는 겁니다. 예전에는 멋져 보였던 보라색 그라데이션도 이제는 너무 많이 쓰여서 오히려 흔한 느낌이 됐다고요.
AI는 기본적으로 가장 그럴듯한 평균값을 잘 냅니다. 홈페이지 제작을 요청하면 이미 인터넷에 많이 존재하는 패턴을 조합합니다. SaaS 랜딩페이지, 스타트업 소개 페이지, 앱 다운로드 페이지, AI 툴 홈페이지에서 자주 보이는 구조들이 섞여 나오는 거죠.
평균값이 나쁘다는 게 아닙니다. 초안으로는 아주 좋습니다. 다만 평균값에 머무르면 차별화가 되지 않죠. 사용자는 홈페이지를 보고 이 회사만의 느낌을 받아야 하는데, AI가 만든 흔한 느낌이 있으면 신뢰도가 떨어집니다.
바이브코딩 홈페이지 제작에서 진짜 차이는 코드를 얼마나 빨리 뽑느냐가 아니라, AI에게 어떤 취향과 기준을 주느냐에서 생깁니다.
design.md는 디자인의 레시피
Meng To가 영상에서 소개한 핵심 개념은
design.md입니다. 그는 design.md를 디자인의 영혼을 에이전트에게 전달하기 위한 파일로 설명합니다. 색상, 타이포그래피, 여백, 효과처럼 디자인을 아름답게 만드는 요소를 MD 파일에 담고, 이를 프롬프트에 참고하도록 하면 일관된 디자인을 만들 수 있다는 겁니다.HTML은 완성된 요리에 가깝고, MD 파일은 레시피, skills는 재료에 가깝다고 Meng은 비유를 들었는데요, 딱 맞는 비유라 생각했어요.
이 관점으로 보면 바이브코딩 홈페이지가 왜 비슷해지는지 명확해집니다. 우리는 AI에게 마치 안성탕면같이 누구나 똑같이 끓여서 만들 수 있는 라면만 요구하고 있었던 겁니다.
예를 들면 이런 식입니다.
AI 홈페이지 제작 서비스 소개 페이지 만들어줘. 깔끔하고 세련되게. CTA도 넣어줘.
이렇게 요청하면 AI는 깔끔하고 세련된 평균값을 냅니다. 당연히 비슷해질 수밖에 없습니다. 반대로 디자인 레시피를 먼저 주면 결과가 달라집니다. 이 브랜드는 어떤 분위기인지, 어떤 색은 쓰지 않을 것인지, 카드의 그림자는 얼마나 절제할 것인지, 문장은 얼마나 짧게 가져갈 것인지, 이미지는 실사에 가까운지 일러스트에 가까운지, 버튼은 강하게 밀어붙이는지 조용히 안내하는지까지 기준을 주는 겁니다.
홈페이지 제작에서 design.md 같은 문서는 단순한 디자인 가이드가 아닙니다. AI에게 우리 브랜드의 감각을 전달하는 운영 문서에 가깝습니다.
핵심은 레퍼런스!
Meng의 워크플로우는 이렇게 진행됩니다.
- 먼저 reference에서 시작하고, 생성하고, 살펴본다.
design.md로 문서화한다.
- 실행하며 개선한다.
- 충분히 만족스러워지면 전체 적용한다.
여기서 핵심은 reference입니다. 많은 분들이 AI로 홈페이지를 만들 때 바로 프롬프트부터 씁니다.
반면에 디자이너들은 어떻게 시작할까요?비슷한 업계의 좋은 사례를 보고, 다른 업계의 멋진 시각 언어를 보고, 내가 만들 브랜드와 맞는 질감을 찾습니다.
저도 nslink 사이트를 만들 때 스티치를 활용하면서 이렇게 적용했습니다. 제가 원하는 느낌의 레퍼런스를 먼저 정했습니다. Gumroad라는 사이트같은 디자인을 원했어요.
Stitch로 가서 Gumroad를 벤치마킹하고 제 브랜드 컬러를 반영한 목업 페이지를 요청했어요.
아무 기준 없이 생성만 반복하면, 결과물은 빨리 늘어나지만 방향은 흐려집니다. 그래서 제가 추천하는 방식은 프롬프트를 쓰기 전에 레퍼런스 보드를 먼저 만드는 겁니다.
같은 업종의 홈페이지만 모으면 또 비슷해지기 쉽습니다. 오히려 업종 밖에서 가져오는 게 좋습니다. 예를 들어 B2B AI 홈페이지를 만든다면, AI SaaS 페이지만 보는 게 아니라 프리미엄 편집숍, 건축 스튜디오, 잡지형 미디어, 고급 컨설팅 회사 사이트를 같이 봅니다.
그 다음 하나씩 분해합니다. 이 사이트의 여백이 좋은지, 타이포그래피가 좋은지, 사진 톤이 좋은지, 섹션 전환이 좋은지, CTA가 좋은지 따로 봐야 합니다. 홈페이지 전체를 통째로 따라 하면 표절에 가까워지고, 요소를 분해해서 우리 맥락에 맞게 재조합하면 우리만의 디자인 언어가 됩니다.
바이브코딩 홈페이지 워크플로우
바이브코딩으로 홈페이지를 만들 때 저는 이제 바로 완성본을 요청하지 않는 쪽이 맞다고 봅니다.
먼저 브랜드의 기준을 정해야 합니다. 이 홈페이지가 신뢰감을 줘야 하는지, 감각적이어야 하는지, 친근해야 하는지, 전문적이어야 하는지부터 정해야 합니다.
여기서 하나의 팁은 추상적인 단어를 구체화하는 과정입니다. 신뢰감이라는 말 대신 어떤 신뢰감인지 정해야 해요. 회계법인 같은 신뢰감인지, 실리콘밸리 SaaS 같은 신뢰감인지, 1인 전문가의 진정성 있는 신뢰감인지 다릅니다.
그다음 레퍼런스를 모읍니다. 최소한 다른 업계 포함하여 5개 정도는 모아야 합니다. 같은 업계는 정보 구조를 참고하고, 다른 업계는 감각을 참고합니다.
그다음 디자인 DNA를 문서화합니다. 색상, 폰트, 여백, 버튼, 이미지, 애니메이션, 섹션 구성, 금지할 표현까지 적어둡니다. 예를 들어 보라색 그라데이션 금지, 유리 카드 남발 금지, AI 일러스트 남발 금지 같은 제한도 필요합니다. AI는 하지 말아야 할 것을 알려줬을 때 훨씬 안정적으로 움직입니다.
이후 Stitch나 다른 AI 디자인 도구로 화면 초안을 만듭니다. 여기서는 완성보다 방향을 봐야 합니다. 이 단계에서 중요한 건 많이 생성하는 게 아니라, 좋은 방향과 나쁜 방향을 빠르게 구분하는 겁니다. 경험상 이 부분은 목업 페이지를 보다 보면 직관적으로 판단이 서며 취향에 따라 결정을 할 수 있게 됩니다.
그다음 클로드 코드같은 도구로 코드를 짭니다. 어떤 도구를 쓰든 중요한 건 처음 만든 디자인 DNA가 코드 단계에서도 유지되게 하는 겁니다. 디자인 도구에서 예뻤는데 실제 웹으로 옮기는 순간 평범해지는 경우가 많기 때문인데요, 코드 작성시 design.md 파일을 참고하도록 세팅하고 체크해야 합니다.
마지막으로 검수하며 개선하는 과정을 거칩니다. 영상에서도 generate, inspect, systematize, iterate의 흐름을 강조합니다. 한 번에 끝내려고 하면 AI 기본값으로 돌아가기 쉽습니다. 실제로는 10번, 20번, 많게는 훨씬 더 많은 판단이 들어가야 합니다. 말이 딸깍이지 시장에 내놓기 위해선 딸깍을 최소 20회 이상은 해야 합니다.
남들과 다른 디자인을 구현하는 방법
바이브코딩 결과물이 비슷해지는 가장 큰 이유는 시각적 선택지가 좁기 때문입니다. 다르게 만들고 싶다면 프롬프트에 멋있게 만들어줘라고 쓰는 대신, 선택지를 구체적으로 좁혀야 합니다.
예를 들어 컬러부터 다르게 가져갈 수 있습니다. AI 홈페이지에서 흔한 보라색, 파란색 glow를 피하고, 브랜드가 가진 실제 맥락에서 색을 가져오는 겁니다. 공간을 다루는 브랜드라면 건축 자재의 색에서, 교육 브랜드라면 노트와 종이의 질감에서, B2B 브랜드라면 문서와 대시보드의 차분한 색에서 출발할 수 있습니다.
타이포그래피도 중요합니다. 대부분의 AI 랜딩페이지는 큰 헤드라인과 짧은 서브카피 구조로 비슷하게 나옵니다. 이때 제목의 크기, 자간, 행간, 한글과 영문 혼용 방식만 바꿔도 분위기가 달라집니다. 한글 홈페이지라면 특히 영문 SaaS 템플릿을 그대로 가져오면 어색해지는 경우가 많습니다. 한글은 밀도가 높기 때문에 여백과 줄바꿈을 더 신경 써야 합니다.
이미지 스타일도 다르게 잡아야 합니다. AI 오브젝트 하나를 hero에 크게 띄우는 방식은 이제 너무 흔합니다. 대신 실제 작업 화면, 제작 과정, 와이어프레임, 손으로 정리한 메모, 고객의 before/after 구조를 시각화하는 편이 더 설득력 있습니다. 특히 홈페이지 제작 서비스라면 완성된 mockup보다 어떤 사고 과정을 거쳐 화면이 나왔는지를 보여주는 게 더 신뢰를 줍니다.
섹션 구성도 바꿀 수 있습니다. 대부분의 AI 홈페이지는 hero, 기능 3개, 프로세스, 후기, 가격, FAQ로 갑니다. 이 구조가 나쁜 건 아니지만, 모든 사이트가 이 순서를 따르면 금방 지루해집니다. 예를 들어 문제 상황을 먼저 보여주고, 실제 화면 변화 과정을 보여준 뒤, 제작 워크플로우를 설명하고, 마지막에 상담 CTA로 이어가는 구조는 훨씬 경험 기반으로 보입니다.
마지막으로 micro interaction을 조심스럽게 써야 합니다. 움직임이 많다고 좋은 디자인이 되는 건 아닙니다. 중요한 건 효과 자체가 아니라 일관성입니다. 버튼 hover, 섹션 전환, 이미지 등장 방식이 모두 같은 성격을 가져야 사이트가 하나의 브랜드처럼 느껴집니다.
스티치를 쓸 때도 기준이 먼저입니다
구글 스티치, 클로드 디자인 같은 도구는 바이브코딩 홈페이지 제작에서 좋은 출발점이 될 수 있습니다.
저 역시 이제는 바이브 코딩을 시작할 때 스티치에서 시작합니다. 좋았던 점은 구현된 화면을 보고 빠르게 방향을 정할 수 있다는 겁니다. 머릿속에 있는 구조를 말로 풀고, 바로 시각적인 초안을 확인할 수 있으니 기획과 디자인 사이의 거리가 줄어듭니다.
하지만 스티치가 알아서 우리 브랜드를 다르게 만들어주지는 않습니다. 이건 중요합니다. 도구는 빠르게 만들어주지만, 다르게 만들어주려면 기준이 필요합니다. 어떤 레퍼런스를 넣을지, 어떤 스타일은 피할지, 어떤 문장 톤을 유지할지, 어떤 화면은 더 단순하게 만들지 판단해야 합니다.
스티치를 쓸 때도 먼저 이런 식의 짧은 디자인 맥락을 담는 게 좋습니다.
이 사이트는 AI 기술 회사처럼 차갑게 보이면 안 된다. 대신 1인 기업과 작은 팀이 안심하고 맡길 수 있는 실용적인 제작 파트너처럼 보여야 한다. 배경은 과한 그라데이션보다 밝고 정돈된 톤을 쓴다. 카드 UI는 최소화하고, 실제 제작 흐름과 결과 화면을 중심으로 보여준다. 카피는 과장된 혁신보다 문제 해결 중심으로 쓴다.
이 정도만 있어도 결과가 달라집니다. AI는 막연한 멋보다 구체적인 제약을 훨씬 잘 따릅니다.
차이는 취향을
시스템으로 만드는 과정에서 납니다.
영상 후반에서 가장 인상적이었던 표현은 취향(taste)가 해자(moat)라는 말이었습니다. Meng To는 지금의 차별점은 무엇이 새롭게 나오고 있는지 따라잡고, 빠르게 판단하고, 자기만의 취향을 쌓는 데 있다고 말합니다.
기억하면 좋을 인사이트
Greg은 많은 사람들이 노트나 회의록을 위한 세컨드 브레인은 가지고 있지만, 디자인 영감을 위한 세컨드 브레인은 없다고 말합니다. 좋은 디자인을 봤을 때 저장해두고, 나중에 새로운 것을 만들 때 다시 참고할 수 있어야 한다는 이야기입니다.
저도 이 부분에 동의합니다. 앞으로 웹/앱 솔루션 제작 과정에서 중요한 역량은 코드를 짜는 능력은 아닙니다. AI가 만든 결과물을 보고 이건 너무 흔하다, 이건 우리 브랜드와 안 맞다, 이건 한글에서 어색하다, 이 섹션은 신뢰를 주지 못한다는 판단을 빠르게 내리는 능력이 더 중요해집니다.
영상에서는 분당 판단 횟수(judgment per minute)이라는 표현으로 설명합니다. 예전의 디자인 일이 사각형을 옮기고 크기를 조절하는 일이었다면, 이제는 훨씬 더 많은 판단을 분당 내려야 한다는 겁니다.
AI가 코드를 써주고 화면을 만들어줄수록 사람의 역할은 사라지는 게 아니라 바뀝니다. 직접 픽셀을 옮기는 시간은 줄어들지만, 어떤 방향이 맞는지 판단하는 시간은 더 중요해집니다.
취향이 더 중요해지는 이유
AI가 홈페이지 제작의 속도를 바꿨다면, 사람의 취향과 판단은 홈페이지의 차이를 만듭니다. 여기서 말하는 취향은 단순히 예쁜 것을 고르는 감각이 아닙니다. 좋은 디자인을 내 관점으로 다시 해석하고, 그것을 우리 브랜드의 언어로 표현하는 능력에 가깝습니다.
취향은 어떻게 견고해질까요. 많이 보고, 많이 써보고, 많이 만들어보는 수밖에 없습니다. 좋은 웹사이트를 보고 왜 좋아 보이는지 분해해보고, 별로인 결과물을 보고 왜 흔해 보이는지 설명해보고, 직접 만든 결과물을 다시 고쳐보는 경험이 쌓여야 합니다.
바이브코딩의 진짜 경쟁력은 코드를 대신 쓰게 하는 데서 끝나지 않습니다. 우리 브랜드만의 디자인 DNA를 만들고, 그것을 반복 가능한 워크플로우로 바꾸는 데서 시작됩니다.
바이브 코딩 강의 문의
추천 글 보기
AI 에이전트와 함께 성장하는 회사 만드는 법 by YC
AI 에이전트가 일을 잘하게 만들려면 먼저 회사의 대화, 결정, 반복 업무, 노하우가 AI가 읽을 수 있는 형태로 기록되어야 합니다. 컴퍼니 브레인은 문서 정리가 아니라 회사가 스스로 개선되기 위한 기반입니다.
바이브코딩 홈페이지 퀄리티 높이는 라이브러리 추천 리스트!
바이브코딩 홈페이지 퀄리티를 높이는 라이브러리 가이드입니다. Tailwind CSS, shadcn/ui, 아이콘셋, 디자인 시스템, 인터랙션 도구까지 실무에 바로 쓸 수 있는 추천 도구를 정리했습니다.
Made with Bullet