[AI 활용] 생성형 AI를 활용해서 나만의 웹페이지를 만들어보자! part.1 이론편

[AI 활용] 생성형 AI를 활용해서 나만의 웹페이지를 만들어보자! part.1 이론편

웹페이지 하나쯤은 만들 줄 알아야죠. 그런데 디자인부터 코딩까지 막막하시다고요? 지금부터 생성형 AI와 함께라면 누구나 가능합니다!

안녕하세요! AI 기술 알려주는 아조씨, AIJOSSI입니다. 요즘 웹사이트 하나쯤 만들고 싶은 분들 정말 많죠? 그런데 기획부터 디자인, 프론트엔드, 백엔드, 배포까지 들으면 벌써 머리가 아프신가요? 괜찮아요. 오늘은 그걸 ChatGPT 같은 생성형 AI를 활용해서 차근차근 쉽게 풀어볼게요. 이 글은 총 2편으로 나뉘며, 이번 part.1에서는 웹사이트 개발의 전반적인 개념을 이론적으로 정리하고, 다음 part.2에서는 직접 배포까지 따라해보는 실습편이 기다리고 있어요!

목차

1. 생성형 AI로 웹사이트 만든다고? 2. 웹사이트 개발 전체 흐름 이해하기 3. 웹 기획, 왜 중요한가? 4. 프론트엔드 vs 백엔드란? 5. 웹사이트 배포 방법 총정리 6. Part.2 예고편 - Github + Vercel 실습

생성형 AI를 잘 활용하면 여러분이 원하는 걸 얼마든 만들 수 있어요!

1. 생성형 AI로 웹사이트 만든다고?

네, 맞습니다! 이제는 HTML, CSS, JavaScript를 몰라도 웹사이트를 만들 수 있는 시대가 왔어요. ChatGPT 같은 생성형 AI는 여러분이 원하는 기능, 스타일, 목적을 말만 해도 알아서 코드를 짜주고 구조를 제안해줘요. 심지어 웹사이트에 들어갈 문구까지 써준다고요!

예를 들어 “포트폴리오 웹사이트 만들어줘. 흰 배경, 검은 글씨, 상단에 내 이름, 아래에 프로젝트 목록” 이렇게만 말해도 AI가 실제 코드를 척척 만들어 줍니다. 거기에 디자인 수정을 요청하거나 기능 추가도 가능합니다.

2. 웹사이트 개발 전체 흐름 이해하기

웹사이트를 하나 만든다는 건 단순히 코드를 짜는 게 아니라 기획부터 디자인, 프론트엔드, 백엔드, 배포까지의 일련의 과정을 모두 포함해요. 아래 테이블을 통해 전체 흐름을 한번에 정리해볼게요.

단계	내용
1. 기획	웹사이트의 목적, 타겟, 콘텐츠 구조 결정
2. 디자인	컬러, 폰트, 레이아웃 등 사용자 경험 설계
3. 프론트엔드 개발	브라우저에 보이는 영역(HTML/CSS/JS) 구현
4. 백엔드 개발	서버, 데이터베이스, API 구현 등 기능 처리
5. 배포	웹사이트를 인터넷에 올려 누구나 접속 가능하게 만들기

 

가장 중요한 것은 "어떻게 만들 것인가"보다 "왜 만들것인가" 입니다.

3. 웹 기획, 왜 중요한가?

웹사이트를 만들 때 가장 중요한 첫 단계가 바로 기획입니다. 아무리 멋진 기술도, 기획이 엉망이면 산으로 가기 쉬워요. 기획 단계에서 아래 요소들을 꼭 정리해보세요.

• 웹사이트의 핵심 목적은 무엇인가? (예: 포트폴리오, 제품 소개, 블로그 등)
• 누가 방문할 것인가? (타겟 사용자)
• 무엇을 보여줄 것인가? (기능, 콘텐츠 구성)
• 어떻게 구조화할 것인가? (메뉴, 페이지 구성)

생성형 AI를 내 전용 개발자로 만드는 과정이에요!

4. 프론트엔드 vs 백엔드란?

웹사이트는 크게 프론트엔드(Front-end)와 백엔드(Back-end)로 나눌 수 있어요. 이 둘은 각자 역할이 다르면서도, 함께 움직여야만 완전한 웹이 됩니다.

구분	프론트엔드	백엔드
설명	사용자가 직접 보는 화면을 구성 (HTML, CSS, JS)	서버, 데이터베이스, API 등 숨은 기능 담당
예시	버튼, 글꼴, 이미지, 레이아웃	로그인, 회원가입, 게시판 글 저장
도구	React, Vue, HTML/CSS, JavaScript	Node.js, Express, Django, MySQL, MongoDB

5. 웹사이트 배포 방법 총정리

웹사이트를 만들고 나면, 인터넷에 “배포”해야 누구든 주소만 알면 접속할 수 있겠죠? 웹 배포는 생각보다 다양한 방법이 있어요. 여기 대표적인 방식들을 정리해드릴게요.

• GitHub Pages: 정적 웹사이트(HTML, CSS, JS) 무료 배포
• Vercel / Netlify: React, Next.js 기반 웹사이트 쉽게 배포 가능
• Firebase Hosting: 백엔드 연동된 웹 배포 시 유용
• AWS / Azure / GCP: 대형 프로젝트에 적합한 클라우드 배포

 

💡 주요 배포 방식 상세 설명

1. GitHub Pages

GitHub에서 제공하는 정적 웹사이트 무료 호스팅 서비스입니다. HTML, CSS, JS 파일만 있으면 누구나 쉽게 배포할 수 있어요.

1. GitHub에 저장소(repository) 만들기
2. index.html 파일 업로드
3. 설정(Settings) → Pages → branch 선택 → Save
4. 자동으로 배포 주소 생성 (예: yourid.github.io/프로젝트명)

2. Vercel

Next.js 기반 웹사이트에 최적화된 배포 플랫폼으로, GitHub와 연동만 해주면 자동 배포까지 가능해요. React 프로젝트에 딱입니다.

1. GitHub에 코드 업로드
2. Vercel.com 가입 후, GitHub 계정 연동
3. “New Project” 클릭 → 원하는 저장소 선택
4. 자동 빌드 & 배포 완료 → vercel.app 주소 생성

3. Firebase Hosting

구글에서 제공하는 호스팅 서비스로, 정적 파일과 백엔드 기능(Firebase Functions)까지 함께 쓸 수 있어요.

1. Firebase 프로젝트 생성 (firebase.google.com)
2. CLI 설치: npm install -g firebase-tools
3. 터미널에서 firebase login, firebase init
4. build 폴더 선택 → firebase deploy

4. AWS S3 + CloudFront

대규모 웹사이트, 보안, 커스터마이징이 필요한 프로젝트라면 AWS가 좋습니다. 조금 복잡하지만 확장성 최고!

1. S3 버킷 생성 → 정적 웹사이트 호스팅 설정
2. HTML/CSS 파일 업로드
3. 퍼블릭 액세스 설정 → 공개 접근 허용
4. CloudFront로 도메인 연결 (선택)

플랫폼	장점	적합한 프로젝트
GitHub Pages	무료, 간단, 정적 페이지 전용	개인 블로그, 포트폴리오
Vercel	자동 배포, Next.js 최적화	React, JAMStack 기반 프로젝트
Firebase Hosting	백엔드 연동, 인증/DB 가능	SPA, 동적 기능 포함 웹앱
AWS S3 + CloudFront	보안, 확장성, 맞춤 설정	기업용 사이트, 트래픽 많은 서비스

GPT를 통해 잘 만들어놨다해도, 배포에서 막히는 상황 경험하실 거에요.

6. Part.2 예고편 - GitHub + Vercel 실습

다음 편에서는 생성형 AI(ChatGPT)를 활용해 만든 웹사이트를 GitHub에 올리고, 이를 Vercel로 배포하는 완전 실전 튜토리얼을 진행합니다. 아래의 흐름을 따라가며, 실제로 나만의 웹사이트를 세상에 공개할 수 있어요.

📌 실습 전체 흐름

• ChatGPT에게 HTML 웹사이트 코드를 생성 요청
• 로컬에서 코드 복사 → index.html 파일 생성
• GitHub 계정 만들기 및 새 저장소(repository) 생성
• 코드 업로드 (직접 업로드 or Git 명령어 사용)
• Vercel 계정 생성 및 GitHub 계정 연동
• GitHub 저장소를 선택하여 자동 배포
• vercel.app 주소 확인 → 나만의 웹사이트 완성!

Vercel Tips 💡
Vercel은 저장소를 연결하기만 하면 자동으로 빌드 & 배포까지 해줍니다. 별도의 설정 없이도 코드 수정 → GitHub 커밋 → 자동 재배포라는 편리한 작업 흐름을 만들 수 있어요. 또한 custom 도메인 연결, HTTPS, CDN 설정도 모두 무료로 제공된답니다.

🛠️ 준비물 체크리스트

• GitHub 계정 (github.com)
• Vercel 계정 (vercel.com)
• ChatGPT 또는 Copilot 등의 생성형 AI
• 기본 텍스트 에디터 또는 VSCode

실제 Part.2에서는 아래와 같은 ChatGPT 프롬프트로 시작할 예정이에요:

"심플한 포트폴리오 웹사이트를 만들어줘. 흰 배경에 이름, 자기소개, 프로젝트 섹션, 연락처가 포함된 HTML 코드로 작성해줘."

위 프롬프트 하나면 웹사이트의 기본 코드가 생성됩니다. 그걸 GitHub에 올리고, Vercel에서 클릭 몇 번으로 세상에 공개하는 경험! 이 모든 과정을 직관적이고 순서대로 설명해드릴 테니, 완전 초보자도 안심하고 따라오셔도 됩니다.

Q 생성형 AI로 웹사이트를 만들면 정말 코딩을 안 해도 되나요?

기본적인 지식 없이도 만들 수 있지만, 완성도 높은 결과물을 원한다면 HTML, CSS, 구조 개념 정도는 알아두면 좋아요. AI가 도와주지만 디테일은 사람이 챙겨야 하거든요.

A AI가 80%는 해주고, 나머지 20%는 당신의 센스입니다!

Q 배포 후 수정사항이 생기면 어떻게 하나요?

GitHub에 코드를 수정해 커밋하면, Vercel이나 GitHub Pages에서는 자동으로 변경 사항이 반영되어 재배포됩니다. 즉, 유지 보수도 굉장히 편리해요.

A 웹사이트도 살아있어요. 언제든 업데이트 가능!

Q 정적 사이트와 동적 사이트 차이가 뭐예요?

정적 사이트는 HTML 파일 그대로 보여주는 구조고, 동적 사이트는 데이터베이스를 연결해 실시간으로 정보가 바뀌는 구조입니다. 블로그는 정적, 쇼핑몰은 동적 사이트로 볼 수 있어요.

A 간단한 소개 페이지면 정적, 사용자 참여형이면 동적!

Q 웹사이트 배포에 도메인 연결은 어떻게 하나요?

도메인을 구입한 후(예: cafe24, 가비아, namecheap 등), Vercel 또는 GitHub Pages에서 DNS 설정을 통해 연결할 수 있어요. 설정 방법은 플랫폼별로 안내도 잘 되어 있습니다.

A 나만의 주소가 붙으면 진짜 내 웹 같죠? ✨

Q Part.2에서는 어떤 걸 배울 수 있나요?

ChatGPT를 이용해 직접 HTML 웹페이지를 생성하고, GitHub에 업로드한 뒤 Vercel로 전 세계에 배포하는 과정을 실제로 따라 해볼 수 있어요. 이론에서 실전으로 넘어가는 완벽한 흐름입니다!

A 따라만 해도 웹사이트가 탄생하는 마법! 기대해주세요 🚀

오늘은 생성형 AI를 활용해 웹사이트를 만드는 전체 흐름과 이론을 정리해봤어요. 어떻게 보면 조금 복잡해 보일 수도 있지만, 하나하나 따라가다 보면 그리 어렵지 않다는 걸 느끼실 거예요. 무엇보다 중요한 건 ‘시작’입니다. 머릿속에만 있던 아이디어, 이제 AI의 힘을 빌려 눈에 보이는 웹으로 만들어보는 거죠! 다음 Part.2에서는 직접 코드를 만들어보고 배포까지 진행해볼 예정이니, 절대 놓치지 마세요! 궁금한 점이나 원하는 내용이 있다면 언제든지 댓글로 남겨주세요. 우리, AI랑 같이 웹 하나 멋지게 만들어봅시다 :)