AI-Powered Web Dev | AI 도구를 활용한 초고속 웹 개발 스터디 (30분컷)

6-Step Workflow

AI와 함께라면 아이디어가 현실이 되기까지 단 몇 시간이면 충분합니다.

1단계: NotebookLM

막연한 아이디어를 구체화합니다. 자료를 기반으로 생각 정리 및 전체적인 기획서를 작성합니다.

1 & 2. 기획 및 프롬프트 생성

NotebookLM은 단순한 챗봇이 아니라 자료를 근거로 답변하는 것이 강점입니다.

Tip: 본인의 경력기술서, 좋아하는 디자인 스타일의 캡처본, 웹사이트에 들어갈 문구 메모 등을 소스(Source)로 먼저 업로드하세요.

프롬프트 요청 예시

"업로드한 내 경력 데이터를 바탕으로, 개발자 포트폴리오 사이트를 만들 거야. Google Antigravity가 한 번에 코드를 짤 수 있도록 구체적인 기능, 섹션 구성, 디자인 테마(Tailwind CSS 사용 등)를 포함한 상세 프롬프트를 작성해줘."

2단계: Prompt Engineering

AI의 성능을 극대화합니다. 정교한 프롬프트를 설계하여 최상의 코딩 결과를 유도합니다.

3단계: Antigravity

바이브 코딩으로 빠르게 빌드하고 수정합니다. AI 에이전트와 함께 코드를 즉시 생성하고 검증합니다.

3. 홈페이지 제작

Google Antigravity(현재 주로 IDX 또는 내부 AI 코딩 툴의 연장선)를 활용해 실시간 코딩을 진행합니다.

실행: NotebookLM에서 생성해준 프롬프트를 복사하여 입력합니다.

체크리스트

반응형 디자인(모바일에서도 잘 보이는지) 확인
이미지 경로가 올바른지 확인

4단계: GitHub

소스 코드를 관리합니다. 버전 제어와 협업을 위해 원격 저장소에 코드를 안전하게 저장합니다.

4. 소스 관리 및 연동

코드의 버전 관리와 Cloudflare 배포를 위한 필수 관문입니다.

연결 과정

1 GitHub에서 Public 또는 Private 저장소 생성
2 연결 URL 또는 명령어 복사하기

HTTPS https://github.com/xxxxxx/sample.git

SSH git@github.com:xxxxxx/sample.git

CLI gh repo clone xxxxxx/sample
3 Antigravity 터미널에서 다음 명령어로 연결 (또는 GUI 활용):

Antigravity 프롬프트 입력창

https://github.com/사용자아이디/저장소이름.git 연결해줘

"입력 한 번으로 모든 설정이 자동으로 완료됩니다."

5단계: Cloudflare

전 세계에 서비스를 배포합니다. Pages와 Workers를 활용해 초고속 배포 환경을 구축합니다.

5. 서버 배포 및 확인

가장 빠르고 안정적인 무료 호스팅 서비스 중 하나인 Cloudflare Pages를 이용합니다.

GitHub 와 Cloudflare 를 연결하여 자동으로 빌드/배포합니다.

1 CloudFlare 회원가입 하기

2 Build > Compute > Workers & Pages 메뉴로 이동

3 [Create Application] 버튼 클릭

4 하단 "Looking to deploy Pages?" 섹션의 [Get started] 클릭 (무료 플랜)

5 Import an existing Git repository 영역의 [Get started] 버튼 클릭

6 GitHub 계정 연결 및 소스 Repository 선택 후 [Begin setup]

7 Project name 설정 (기본값 유지 또는 변경 가능)

8 [Save and Deploy] 버튼 클릭하여 배포 시작

단계/설정	내용	비고
Framework Preset	None 또는 HTML/CSS	프레임워크 미사용 시
Build Command	(비워둠)	순수 HTML일 경우 불필요
Output Directory	/ (루트)	최상위 경로 기준

6단계: Launch

서비스를 공개하고 확인합니다. 사용자 반응을 살피며 지속적인 고도화 단계를 준비합니다.

6. 서비스 오픈 확인 하기

배포가 완료되면 자신만의 도메인 주소로 즉시 접속할 수 있습니다.

보통 아래와 같은 형식으로 주소가 자동 생성됩니다.

https://Projectname.pages.dev

내 홈페이지 지금 확인하기

PRO TIPS

💡 추가로 알면 좋은 꿀팁

지금 보시는 홈페이지도 위에 설명한 방법으로 AI를 활용해 만들었습니다.

작성하신 프로세스대로 진행하시다가 특정 단계에서 막히는 부분이 생기면 언제든 물어봐 주세요! 어떤 스타일의 홈페이지를 만드실 계획인가요?

커스텀 도메인

pages.dev 주소 대신 본인이 소유한 .com이나 .me 도메인을 Cloudflare 설정에서 아주 쉽게 연결할 수 있습니다.

자동 업데이트

코드 수정 후 GitHub에 Push만 하면 Cloudflare가 자동으로 홈페이지를 업데이트(CI/CD) 해줍니다. 다시 배포 버튼을 누를 필요가 없어요!

이미지 최적화

홈페이지에 고화질 사진을 넣고 싶다면, Cloudflare의 이미지 최적화 기능을 활용해 로딩 속도를 높여보세요.

언제든 질문하세요

어떤 스타일의 홈페이지를 계획 중이신가요? 기술적인 고민부터 디자인 방향까지 무엇이든 도와드릴 수 있습니다.

NotebookLM에서 Cloudflare까지,
AI로 30분만에
웹 제작에서 배포까지

6-Step Workflow

1단계: NotebookLM

1 & 2. 기획 및 프롬프트 생성

2단계: Prompt Engineering

3단계: Antigravity

3. 홈페이지 제작

4단계: GitHub

4. 소스 관리 및 연동

5단계: Cloudflare

5. 서버 배포 및 확인

6단계: Launch

6. 서비스 오픈 확인 하기

💡 추가로 알면 좋은 꿀팁

커스텀 도메인

자동 업데이트

이미지 최적화

언제든 질문하세요

Empowered by Global Tech

NotebookLM에서 Cloudflare까지, AI로 30분만에웹 제작에서 배포까지

6-Step Workflow

1단계: NotebookLM

1 & 2. 기획 및 프롬프트 생성

2단계: Prompt Engineering

3단계: Antigravity

3. 홈페이지 제작

4단계: GitHub

4. 소스 관리 및 연동

5단계: Cloudflare

5. 서버 배포 및 확인

6단계: Launch

6. 서비스 오픈 확인 하기

💡 추가로 알면 좋은 꿀팁

커스텀 도메인

자동 업데이트

이미지 최적화

언제든 질문하세요

Empowered by Global Tech

NotebookLM에서 Cloudflare까지,
AI로 30분만에
웹 제작에서 배포까지