디지털 집 짓기 바이브코딩 해설
AI툴이 발달하면서 정말 "딸깍" 하면 "뚝딱" 하고 웹사이트 하나가 만들어지는 세상이 됐습니다.
HTML을 몰라도 CSS를 몰라도 AI와 대화하듯 이것 만들어줘, 저것 만들어줘 하기만 하면 됩니다.
디자인도 최근에 나온 구글의 스티치를 이용하면 초안을 잡는데 아주 쉽고, 이것을 피그마로 가져가면 보다 더 정밀하게 디자인할 수도 있습니다. (물론 스티치에서 만든 디자인만으로도 웹사이트 만드는데 문제가 없습니다.)
혹시 내가 원하는 웹디자인이 있다면 핀터레스트 같은 곳이나 실제 웹사이트를 캡처해 던져주기만 해도 비슷한 스타일의 디자인을 만들어줍니다.
그렇게 만든 웹사이트를 다른 사람들에게 보여주려면 "배포" 라는 것을 해야합니다.
흔히 깃허브에 올려놓으면 "Page"라는 기능을 통해 외부에 공개가 가능합니다.
아니면 Vercel같은 배포 사이트를 이용할 수도 있죠.
거기에 나만의 URL을 갖고 싶다면 연결만 해주면 됩니다.
참 쉽죠?
https://youtu.be/uiBVFeFmpcc?si=sXfigvOL8Oe5_QXr
AI를 활용해 전문가 수준의 웹사이트를 제작하려면 목적에 맞는 AI 도구의 선택과 체계적인 기획, 그리고 단계적인 빌드업이 필수적입니다. 다음은 코딩 지식이 없어도 완성도 높은 웹사이트를 구축하는 구체적인 방법입니다.
1. 영감 수집 및 명확한 가이드라인 설정 단순히 텍스트 명령만 내리기보다는 시각적 자료를 제공하는 것이 중요합니다. Dribbble, Awwwards, Pinterest와 같은 사이트에서 영감을 얻을 수 있는 레퍼런스 스크린샷을 수집하여 AI에게 시각적 취향과 원하는 최종 디자인의 방향성을 명확히 전달해야 합니다. 또한, 어떤 테마와 섹션을 구성할지, 어떤 애니메이션과 기술 스택을 사용할지 명확한 가이드라인을 AI에게 제공해야 전문가 디자이너가 만든 것 같은 결과물을 얻을 수 있습니다.
2. 프로젝트 성격에 맞는 AI 도구 조합
- 구글 생태계 (Stitch + AI Studio): Google Stitch로 UI를 먼저 디자인한 뒤, Google AI 스튜디오로 내보내어 코드로 빌드하는 워크플로우가 매우 효율적입니다. 스티치(Stitch)는 텍스트나 스케치만으로 UI를 생성해주며, 나노바나(Nano Banana) 프로 모델을 활용해 디자인을 수정할 수 있습니다. 이후 생성된 결과물을 AI 스튜디오로 넘겨 제미나이(Gemini) 모델을 통해 세부 로직을 추가하고 리액트(React) 코드로 완성할 수 있습니다.
- 클로드 코드 (Claude Code): AI 특유의 획일적인 디자인을 탈피하려면 '프론트엔드 디자인(Frontend Design)'이나 'UI UX Pro Max'와 같은 전용 디자인 스킬을 설치하여 AI의 디자인 역량을 한 단계 끌어올려야 합니다. 프롬프트 작성 시 **"명확히 하기 위한 질문을 해주세요"**라는 문구를 넣으면, AI가 디자인 작업을 시작하기 전에 스타일, 섹션 구성, 기술 스택 등을 역으로 질문하여 훨씬 구체적인 뼈대를 잡을 수 있습니다.
- 러버블(Lovable) & 젠스파크(Genspark): 러버블을 활용해 목표와 페르소나를 정의하고, 개인 이력서 PDF나 프로필 사진을 업로드하여 맞춤형 포트폴리오를 빠르게 구축할 수 있습니다. 젠스파크의 AI 개발자 에이전트에게 개발 요청서와 이미지를 전달해 단일 페이지 웹사이트나 심리 테스트 사이트 등을 생성하는 것도 좋은 방법입니다.
3. 단계별 반복 개선 (바이브 코딩) 프롬프트 한 번으로 전체 웹사이트를 완성하려 하면 에러 발생 확률이 높아집니다. 뼈대를 먼저 만든 후, 단계별로 반복 개선을 진행해야 결과물의 퀄리티가 올라갑니다. 말로 설명하기 어려운 디자인은 마음에 드는 웹사이트의 스크린샷이나 이미지를 업로드하여 "이 이미지처럼 섹션 부분을 만들어 줘"라고 지시하는 것이 훨씬 효과적입니다.
4. 하이엔드 퀄리티를 위한 디테일 추가
- 3D 요소 및 애니메이션: Spline(스플라인)을 활용해 3D 디자인 요소를 만들고 임베드(embed) 코드를 복사해 넣거나, 21st.dev 같은 라이브러리에서 스크롤 효과 컴포넌트를 가져와 AI에게 적용을 지시할 수 있습니다. 또한, 비디오의 배경을 투명하게 지우고 WebM 파일로 변환하여 스크롤에 따라 반응하는 동적인 인터랙티브 웹사이트를 구현할 수도 있습니다.
- 미세한 상호작용 (Micro-interactions): 밋밋한 섹션마다 AI에게 "섬세한 미세 움직임과 마우스 커서 상호작용을 추가해 줘"라고 요청하되, 거슬리지 않도록 은은하고 세련되게 다듬어야 합니다.
- 절제된 타이포그래피와 카피: AI가 흔히 사용하는 기본 폰트(예: Inter)를 가독성 높은 다른 폰트(예: Geist)로 교체하고, AI 특유의 수식어가 많고 장황한 텍스트를 전문가가 쓴 것처럼 절제되고 감각적인 문구로 수정해야 합니다.
- 모바일 최적화: 단순히 데스크톱 화면의 크기를 줄이는 것이 아니라, 작은 화면에서 숨길 것과 크기를 조절할 것을 AI에게 명시하여 모바일 버전을 특별히 다시 디자인해달라고 요청해야 합니다.
5. 배포 및 호스팅 (Deployment) 완성된 웹사이트를 인터넷에 공개하려면 코드를 실제 서버에 올려야 합니다. 가장 추천하는 무료 방법은 생성된 코드를 GitHub(깃허브)에 저장(Commit)한 후, Vercel(버셀)과 같은 플랫폼에 연동하여 배포하는 것입니다. 이 방식을 사용하면 소스 코드 유출 없이 독립적인 URL을 갖출 수 있으며, 코드를 수정할 때마다 자동으로 배포가 갱신(CI/CD)됩니다. 단순한 정적 사이트라면 Hostinger와 같은 호스팅 업체를 이용해 압축 파일(zip)을 업로드하고 맞춤 도메인에 연결하는 방법도 있습니다.
