바이브코딩 심화 워크 · 디자인편 (M31)

AI가 만든 티 나는 사이트를 나만의 사이트로

대상 사이트 한 사이클(기획~다듬기) 돌려본 분

도구 Antigravity + 최고 모델(thinking 모드)

오늘의 산출물 히어로 확정본 1개 + 내 와우 모먼트 한 줄

1오늘의 길 한 줄로 10분

"홈페이지 만들어줘"는 AI에게 "보고서 잘 써와"라고 하는 것과 같습니다. 같은 상사, 같은 나인데도 시키는 방법이 다르면 결과물이 전혀 달라집니다. 오늘은 AI에게 재료를 먼저 주는 5가지 원칙을 히어로(첫 화면) 하나로 손에 익힙니다.

오늘 가장 중요한 한 문장. 전체 페이지를 만들지 않습니다.
첫 화면(히어로) 하나만 붙잡고 방향을 정합니다. 다 만들고 나서 "마음에 안 드는데"가 가장 끔찍합니다.

주의. 이 워크지는 이미 사이트를 한 번 만들어본 분용입니다. 처음이라면 오늘은 원칙 ①·⑤(조사·와우 모먼트)만 개념으로 듣고, 나머지는 눈으로 따라오세요.

2원칙 ① 세 갈래 조사 — 코딩부터 하지 않는다 25분

AI에게 전체 흐름을 줄 재료를 먼저 모읍니다. 화면은 잠깐 내려두고 아래 세 칸을 손으로 채웁니다. 이걸 건너뛰면 어디서 본 듯한 공장식 디자인이 나옵니다.

① 대상 조사 — 이 사이트 주인공은 누구, 뭘 하는 사람?

예) 소상공: "정리수납 전문가 · 인스타에 Before/After 사진 다수 · 강점은 하루 완성과 유지 코칭" | 강사·전문가: "스피치 강사 · 강의·방송 15년 · 1:1 코칭 · 강점은 '말근육' 트레이닝식 커리큘럼"

② 도메인 조사 — 이 업종 사이트의 목적 한 줄

예) 소상공: "구경이 아니라 '예약·문의 전화'가 오게 만드는 사이트" | 강사·전문가: "결제보다 신뢰. '강의·컨설팅 문의'가 오게 만드는 사이트" ← 이 한 줄이 구조를 바꿈

③ 컴포넌트 조사 — 필요한 부품을 섹션별로

예) "히어로 / 시공 갤러리 / 전후 비교 / 후기 카드 / 전화 버튼(고정)"

① [대상] 리서치 해줘. 블로그·인스타·포트폴리오 전부 조사해서
   강점·고객·후기·경쟁사 대비 차별점을 보고서로. 이 결과가 홈페이지 문구가 될 거야.
② [업종] 홈페이지 벤치마킹 해줘. 국내 상위 사이트 구조 + awwwards 같은
   수상 사이트의 공통 패턴 + 인접 업종까지.
③ 이 조사 결과로 shadcn/ui·Magic UI로 구현 가능한 컴포넌트를
   섹션별(히어로·갤러리·후기)로 매핑해줘.

"이 사이트는 파는 게 아니라 전화 오게 만드는 사이트"처럼 — 구조를 바꾸는 한 줄이 조사에서 나오면 성공입니다.

3원칙 ② 내 눈으로 직접 고르기 15분

1단계는 AI가 찾아왔다면, 이번엔 내 감각으로 고릅니다. 결과물에 내가 들어갑니다.

3-1. 쇼룸에서 부품 고르기7분

컴포넌트 라이브러리 모음 쇼룸(예: 21st.dev)에서 마음에 드는 부품을 눈으로 고릅니다. Open → 코드 복사해서 그대로 씁니다.

내가 고른 것:

3-2. 남의 사이트 뜯어오기 (진짜 유용)8분

웹서핑하다 "이 부분 좋다" 싶은 사이트에서:

개발자도구 열기 (F12 또는 우클릭 → 검사)
왼쪽 위 요소 선택 화살표 클릭 → 마음에 드는 영역 클릭
그 요소 우클릭 → Copy → Copy element
AI 채팅창에 붙여넣고 "이 구조를 참고해서 내 사이트에 맞게 만들어줘"

"디자인의 뼈만 가져오고 살은 AI가 붙인다" — 인터넷의 모든 사이트가 내 레퍼런스가 됩니다.

딱 맞는 게 없으면 억지로 찾지 마세요. 다음 단계에서 "레퍼런스 없이 이 맥락으로"도 같이 요청합니다.

4원칙 ③ 히어로 5개 만들기 (드디어 코딩, 근데 히어로만) 35분

전체 페이지 X. 첫 화면 하나로 방향을 정합니다. 두 번에 나눠서 — 먼저 테마, 그다음 색상.

1라운드 — 테마 정하기 (토큰 아끼지 않기)

히어로 섹션을 5가지 테마로 만들어줘. 상단에 토글 버튼으로 전환되게.
- ①·②에서 나온 레퍼런스·소재를 참고한 것들
- 레퍼런스 없이 이 맥락으로만 만든 것도 섞어서
5개를 눌러보면서 고를 거야.

눌러보고 고른 테마: ___번 / 고른 이유:

2라운드 — 색상 정하기

○번 스타일로 확정. 이 스타일 안에서 컬러 조합 5가지를 만들어줘.
같은 레이아웃·구조, 컬러만 다르게. 아까처럼 토글로 전환.

확정 컬러:

외주 팁. 이 토글 링크를 클라이언트에게 보내면 직접 눌러보고 고릅니다. 1라운드=큰 방향, 2라운드=디테일. 한 번에 다 정하려 하면 오히려 결정을 못 합니다.

5원칙 ④ 미디어와 캔버스 — 깔끔함 ≠ 임팩트 20분

코드만으론 "깔끔"까지입니다. 와는 움직이는 배경에서 나옵니다(애플 사이트처럼). 아래에서 내 상황에 맞는 방법을 하나 고릅니다.

내 상황	방법	AI에게 이 한 줄
영상 있음 · 분위기	배경 자동재생	`히어로 배경에 영상 자동재생`
영상 있음 · 제품	스크롤 연동	`애플 스타일로 스크롤 위치에 따라 영상 재생`
영상 없음	Canvas 동적 배경	`캔버스로 인터랙티브한 배경 (마우스·스크롤 반응)`

내 사이트에 쓸 방법:

영상 소스: 직접 촬영본 > AI 생성 > Pexels·Pinterest 무료 소스

강사·전문가 실전: 야경 도시+빛나는 강줄기 풀스크린 배경 → 신뢰감. 후기 영상 삽입 → 설득력. (강의 문의형 랜딩의 단골 카드)

6원칙 ⑤ 와우 모먼트 — 이 사이트만의 정체성 15분

업종·주제의 본질을 시각화하는 장치 하나. 설명 안 해도 "아, ○○ 사이트구나" 하게 만듭니다.

사례. 정리수납 → 스크롤하면 어질러진 방이 정돈된 방으로 바뀜(Before/After) / 동네 꽃집 → 스크롤하면 꽃봉오리가 하나씩 피어남 (3초 만에 체감)
강사·전문가 사례. 스피치 강사 → 스피치를 "말근육 트레이닝"으로 시각화 / 브랜딩 컨설턴트 → "Before(나) → After(브랜드)" 전환 애니메이션

내 업종·주제의 본질은 한마디로?

그걸 화면에서 어떻게 보여줄까? (혼자 못 떠올려도 됨)

[업종]의 핵심 가치를 웹에서 코드로 시각화할 수 있는 방법 5가지를 제안해줘.
사용자가 '와' 하고 느낄 인터랙션으로.

본질 하나를 찾아 넣으면 → "AI가 만든 사이트"가 아니라 그 사람만의 사이트가 됩니다. 이게 킥입니다.

가져갈 문장 3개.

"'만들어줘'는 '보고서 잘 써와'다. 재료를 먼저 준다."
"전체 페이지 X. 히어로 하나로 테마→컬러 두 번에 확정."
"도구는 바뀌어도 원칙은 남는다. 업종의 본질 한 줄이 나만의 사이트를 만든다."