최근에 홈페이지를 만들 일이 있어 시도해보았습니다.
늘 이론적으로는 알았지만, 이렇게 잘 만들어주는지는 저도 처음알았네요. ㅋ
물론 여러가지 팁들이 있지만, 홈페이지는 제가 하는 식으로 하면 거의 성공입니다. ^^
단, 혹시라도 그냥 랜딩페이지가 아니라 데이터베이스에 연결하는 구조를 사용한다면 반드시 보안 부분은 주의하셔야 합니다.
대부분의 바이브 코딩은 보안을 신경쓰지 않고 그냥 코딩해주거든요.
바이브코딩도 프로그램 경험이 많으면 많을 수록 좋은 결과를 가져오는게 맞습니다.
홈페이지 기획에서 제작까지
1단계: 기획안(프롬프트) 준비하기
웹사이트를 만들기 전, 어떤 내용을 담을지 정리한 '문서(기획안)'가 반드시 필요합니다.
• 준비물: 내 이력서, 회사 소개서, 혹은 포트폴리오에 들어갈 내용 (이름, 직업, 경력, 서비스, 핵심 강점 등).
• 이 내용들을 메모장에 잘 정리해 둡니다. 이 기획안이 AI에게 전달할 '명령어(프롬프트)'의 핵심이 됩니다.
2단계: AI로 웹사이트 뼈대 만들기 (제미나이 활용)
• 구글 제미나이(Gemini)에 접속하여 새 채팅을 엽니다.
• 필수 설정: 입력창 옵션에서 도구를 '캔버스(Canvas)'로 선택합니다.
• 명령하기: 1단계에서 준비한 내 정보와 함께 "이 내용을 바탕으로 멋지고 화려한 포트폴리오 사이트를 만들어 줘. 코드는 index.html 형식으로 짜줘"라고 입력합니다.
• 잠시 기다리면 제미나이가 알아서 코드를 작성하여 웹사이트의 기본 뼈대를 만들어 줍니다.
3단계: 남의 디자인 합법적으로 베끼기 (Mobbin 활용)
생성된 기본 웹사이트가 밋밋하다면, 벤치마킹을 통해 디자인을 업그레이드합니다.
• 레퍼런스 찾기: 웹/앱 디자인 모음 사이트인 '모빈(Mobbin)'에 접속합니다.
https://mobbin.com/discover/sites/latest
Discover sites | Mobbin — UI & UX design inspiration for mobile & web apps
Browse and search across hundreds of sites for UI & UX research.
mobbin.com
• 이미지 캡처: 마음에 드는 홈페이지 디자인을 찾아 이미지를 캡처하거나 다운로드합니다.
• AI에게 지시하기: 제미나이 채팅창에 방금 다운받은 이미지를 업로드하고, "첨부한 이미지를 참고해서 내 홈페이지 디자인을 비슷하고 세련되게 수정해 줘"라고 지시합니다. AI가 이미지를 분석하여 디자인을 싹 바꿔줍니다.
4단계: 3D 애니메이션 효과 넣기 (Spline 활용)
웹사이트를 더 고급스럽게 만들기 위해 마우스에 반응하는 3D 효과를 넣습니다.
• 소스 찾기: 3D 디자인 사이트인 '스플라인(Spline)' 커뮤니티에 접속합니다.
• 코드 복사: 마음에 드는 3D 효과를 고른 뒤, [Remix] -> [Export] 메뉴를 눌러 '아이프레임 인베드(iframe embed)' 링크 코드를 복사합니다.
• AI에게 교체 지시: 제미나이에게 "아래 인베드 링크 코드를 내 홈페이지의 메인 타이틀(맨 위쪽) 위치에 넣어줘"라고 지시합니다.
• (고급 팁) 만약 AI가 위치를 잘 못 찾는다면, 내 웹사이트 화면을 캡처한 뒤 그림판으로 교체할 위치에 '빨간색 네모 테두리'를 그리고 "이 빨간색 테두리 위치에 코드를 넣어줘"라고 시각적으로 지시하면 훨씬 정확합니다.
5단계: 내 웹사이트 무료로 인터넷에 올리기 (GitHub 활용)
완성된 코드를 남들도 볼 수 있게 실제 인터넷 주소(URL)로 배포하는 과정입니다.
• 코드 저장: 제미나이가 짜준 최종 코드를 복사하여 메모장에 붙여넣고, 파일 이름을 반드시 index.html로 저장합니다.
• 기트업(GitHub) 가입 및 저장소 생성: 개발자들의 저장소인 GitHub에 가입한 후, [New Repository]를 눌러 새 저장소(예: homepage)를 만듭니다 (반드시 Public으로 설정).
• 파일 업로드: 만들어진 공간에 uploading an existing file을 눌러 아까 저장한 index.html 파일을 올리고 Commit changes를 누릅니다.
• 홈페이지 주소 만들기: GitHub 메뉴의 [Settings] -> [Pages]로 들어갑니다. 'Branch' 항목을 'main'으로 선택하고 저장(Save)합니다.
• 새로고침을 몇 번 하면 나만의 고유한 홈페이지 주소(링크)가 발급됩니다! 이제 이 주소를 명함에 넣거나 남들에게 공유할 수 있습니다.
💡 [비교 분석] 웹사이트 생성 도구: 구글 AI 스튜디오 vs 제미나이
강의 중 강사님이 두 가지 툴을 모두 테스트하셨으며, 초보자에게는 제미나이(Gemini) 사용을 더 권장합니다.
비교 항목
구글 제미나이 (Gemini)
구글 AI 스튜디오 (AI Studio)
코드 생성 방식
HTML 기반 파일 하나로 깔끔하게 생성.
React 기반의 복잡한 프레임워크로 생성.
도구 설정
'캔버스(Canvas)' 도구를 명시적으로 선택해야 함.
기본적으로 캔버스 형태로 구동됨.
무료 배포(호스팅)
GitHub Pages를 통해 쉽게 무료 배포 가능.
코드가 복잡해 GitHub에서 바로 구동이 불가능함.
안정성 (강의 기준)
오류 없이 빠르고 세련되게 결과물을 잘 뱉어냄.
권한 오류(Permission denied) 등 잦은 에러 발생.
📝 핵심 요약
과거에는 이런 디자인과 3D 효과가 들어간 웹사이트를 만들려면 개발자와 디자이너에게 최소 수십에서 수백만 원을 줘야 했습니다.
하지만 이제는 "종이 한 장짜리 기획서(내용)"만 확실하게 준비되어 있다면, AI에게 지시(바이브 코딩)하고 기존 소스(Mobbin, Spline)를 짜깁기하여 누구나 10분 만에 전문가 수준의 웹사이트를 구축할 수 있습니다.
# 프롬톡 랜딩페이지 (문의내용은 데이터베이스에 저장기능)
www.promptalk.ai
