🎨 [웹사이트 제작 2편] 코딩 초보도 AI로 웹사이트 뼈대(프론트엔드) 쉽게 구축하는 법

🤔 프론트엔드 코딩, 코딩 지식이 없어도 할 수 있나?

📌 한 줄 요약: 프론트엔드 코딩 지식이 전혀 없어도 AI 바이브코딩을 활용하면 누구나 현실적으로 웹사이트 뼈대를 완성하고 깃허브(GitHub) 배포 파이프라인에 업로드할 수 있다.

노션으로 데이터베이스를 만들고 클라우드플레어로 배포할 준비를 마쳤다며 들떠있던 과거의 나. 하지만 막상 화면을 띄워줄 '프론트엔드(Frontend)' 코드가 없다는 사실을 깨닫고 벽에 부딪혔다. 데이터베이스와 서버 세팅을 아무리 잘해놓아도, 유저의 눈에 보일 화면이 없으면 웹사이트는 돌아가지 않는다.

하지만 포기할 필요는 없다. HTML, CSS를 전혀 몰라도 요즘 IT 업계에서 대세인 AI 바이브코딩(Vibe Coding)을 활용하면, 코딩 지식이 부족한 사람도 충분히 그럴싸한 웹사이트 뼈대를 스스로 완성할 수 있기 때문이다.

💡 프론트엔드 장벽, AI 바이브코딩으로 뚫어버리기

📌 한 줄 요약: 프론트엔드 개발 지식이 없어도 ChatGPT나 Gemini 같은 AI에게 대화하듯 명령하는 '바이브코딩'을 통해 즉시 웹사이트 뼈대 코드를 얻어낼 수 있다.

HTML, JS, CSS라는 단어만 들어도 머리가 아픈가? 나 역시 프론트엔드가 뭔지 하나도 모르는 사람이었다. 하지만 이제는 챗GPT(ChatGPT)나 제미나이(Gemini) 같은 생성형 AI의 등장으로 상황이 완전히 달라졌다.

"내 블로그 메인 화면 코드를 짜줘. 좌측엔 고정형 사이드바, 우측엔 갤러리형 글 목록이 2열로 나오게 해줘. 색상은 다크 모드를 지원해야 해."라고 대화하듯 툭툭 던지기만 하면 완벽하게 작동하는 코드가 쏟아져 나온다.

이것이 바로 요즘 IT 업계의 핵심 트렌드인 '바이브코딩(Vibe Coding)'이다.

실제로 나는 이 방법으로 빠르게 꽤 그럴싸한 초기 코드를 뽑아냈고, 만약 디자인이 틀어지거나 오류가 나면 그 화면을 그대로 캡처해서 다시 AI에게 던져주며 수정을 요청했다. 코딩은 AI가 하고, 나는 지시만 내리는 완벽한 분업인 셈이다.

▲ 실제로 구현 중 오류 화면을 캡처해 AI에게 던지고 즉시 수정 코드를 받아낸 모습

📊 AI도 막막하다면? 또 다른 선택지, '오픈소스 템플릿’

📌 한 줄 요약: .코드를 다듬는 과정조차 부담스럽다면, 전 세계 개발자들이 미리 만들어둔 노션 SSG용 오픈소스 템플릿을 내 깃허브(GitHub)로 복사(Fork)하여 활용하는 방법도 있다.

AI에게 지시를 내리고 코드를 수정하는 과정이 번거롭다면, 깃허브(GitHub) 생태계에 공개된 '오픈소스 템플릿'을 가져오는 것도 훌륭한 대안이 될 수 있다.

마음에 드는 템플릿 저장소를 찾은 뒤, '포크(Fork, 복사)' 버튼을 누르면 원본 코드 전체가 내 저장소로 고스란히 복사된다. 나는 최종적으로 AI 바이브코딩을 선택해 내 입맛대로 사이트를 구축했지만, 디자인 커스텀보다 '빠른 구축'이 목적이라면 이 방법도 고려해 볼 만하다.

🚀 깃허브(GitHub) 업로드: 노션과 서버를 잇는 심장부

📌 한 줄 요약: AI로 뽑아낸 코드든 포크(Fork)한 템플릿이든, 이 프론트엔드 파일들은 반드시 깃허브에 저장되어야 자동화 배포 파이프라인이 완성된다.

여기서 절대 잊지 말아야 할 핵심 관문이 있다. AI로 만들어낸 코드든, 남의 것을 복사해 온 템플릿이든, 프론트엔드 파일들은 무조건 '깃허브(GitHub) 레포지토리(저장소)'에 안전하게 업로드되어 있어야 한다.

왜 굳이 깃허브일까? 단순히 코드를 백업하는 용도가 아니다. 우리가 구축할 '서버리스 생태계'에서 깃허브는 뇌(Brain)이자 심장(Heart) 역할을 하기 때문이다.

앞서 1편에서 설명한 아키텍처를 떠올려보자. 깃허브 액션(GitHub Actions)이라는 도구가 노션 API를 호출하여 글 데이터를 가져오고, 그것을 HTML 페이지로 변환(빌드)하는 핵심 자동화 작업을 수행한다. 즉, 깃허브에 뼈대 코드가 잘 세팅되어 있어야만 다음 단계인 '노션(DB)'의 데이터를 예쁘게 입히고, '클라우드플레어(서버)'를 통해 전 세계로 뿌리는 파이프라인이 온전히 작동하게 된다.

🙋‍♂️ 블로그 뼈대 구축, 나도 했던 고민들 (Q&A)

(👉 질문을 클릭하면 자세한 답변이 펼쳐집니다)

📚 웹사이트 제작 9부작 시리즈 전체 목차

Pixoas에서는 웹사이트 제작을 쉽게 따라 할 수 있도록 9편의 튜토리얼로 쪼개어 연재한다.
차근차근 따라오면 어느새 나만의 개인 웹사이트가 완성되어 있을 것이다.

• 💡 [웹사이트 제작 1편] 유지비 0원? 워드프레스 대신 노션 택한 이유
• 🎨 [웹사이트 제작 2편] AI로 코딩 없이 웹사이트 뼈대 구축하기 (현재 글)
• 📝 [웹사이트 제작 3편] 노션을 내 웹사이트의 무료 DB(CMS)로 쓰는 법
• ☁️ [웹사이트 제작 4편] 요금 0원! 클라우드플레어 무료 호스팅 세팅
• ⚙️ [웹사이트 제작 5편] 노션 글 자동 발행! 깃허브 액션 연동 가이드
• 🚨 [웹사이트 제작 6편] 노션 사이트 이미지 엑스박스(깨짐) 완벽 해결
• 📈 [웹사이트 제작 7편] 구글 SEO 상위 노출 세팅 및 커스텀 도메인
• 💰 [웹사이트 제작 8편] 구글 애드센스 승인: 가치 없는 콘텐츠 피하기
• 🤖 [웹사이트 제작 9편] 챗GPT로 수익형 블로그 기획 및 글감 확장

이 시리즈는 특정 서비스를 무조건 추천하기 위한 글이 아니다. 내가 직접 여러 방법을 비교하고 운영하면서 선택한 구조를 공유하는 기록에 가깝다. 이어지는 3편에서는 만들어진 뼈대에 실제 노션 데이터베이스(CMS)를 연결하여 생명을 불어넣는 과정을 공유할 예정이다.

✅ 마무리 정리

1. 웹사이트가 실제로 유저에게 보여지기 위해서는 뼈대가 되는 프론트엔드(화면) 코드가 반드시 필요하다.
2. 코딩 지식이 없더라도 AI 바이브코딩(Vibe Coding)을 활용해 명령을 내리거나, 이미 검증된 오픈소스 템플릿을 포크(Fork)하면 빠르게 뼈대를 구축할 수 있다.
3. 이렇게 완성된 코드는 노션(DB)과 클라우드플레어(서버)를 이어주는 핵심 자동화 허브인 '깃허브(GitHub) 레포지토리'에 필수적으로 저장되어야 한다.