구글 AI 스튜디오 홈페이지 배포 2탄: 깃허브 페이지로 보내는 실전 가이드(핵심배포전략)
1. AI가 만든 코드를 살아있는 웹사이트로!
구글 AI 스튜디오에서 멋진 결과물을 얻었다면, 이제 이 파일들을 전 세계 누구나 볼 수 있는 주소(URL)로 변환할 차례입니다. 깃허브 페이지(GitHub Pages)는 별도의 서버 비용 없이 무료로 홈페이지를 호스팅해주는 가장 신뢰받는 서비스입니다.
복잡한 개발 도구 설치 없이 웹 브라우저에서 파일 업로드만으로 배포를 끝내는 최적의 동선을 알려드립니다.
2. 3가지 핵심 단계로 끝내는 배포 방법 (How-to)
섹션 1: 구글 AI 스튜디오 결과물 준비
먼저 AI가 생성한 코드를 내 컴퓨터로 가져와야 합니다.
파일 다운로드: 구글 AI 스튜디오 화면에서 제공하는 'Download' 또는 'Export' 기능을 통해 제작된 소스 코드를 ZIP 파일 형태로 내려받습니다.
압축 해제: 다운로드한 ZIP 파일의 압축을 풉니다. 이때 폴더 안에
index.html파일이 반드시 포함되어 있는지 확인하세요.- 중요 체크:
index.html파일은 웹사이트의 '대문' 역할을 합니다. 만약 파일명이 다르다면index.html로 이름을 바꿔주세요.
섹션 2: 깃허브(GitHub) 웹 인터페이스로 파일 전송
터미널(명령어 입력창)을 쓰지 않고 웹사이트에서 직접 파일을 올리는 방법입니다.(파일을 담아둘 온라인 공간을 생성하는 과정입니다.)
GitHub 로그인:
GitHub.com 새 저장소 생성: 오른쪽 상단 [+] 버튼을 누르고 New repository를 클릭합니다.
정보 입력: * Repository name:
my-ai-site같이 원하는 이름을 영어로 입력합니다.Public 선택: 누구나 접속할 수 있도록 Public에 체크합니다.
생성 완료: 맨 아래 초록색 Create repository 버튼을 누릅니다.
섹션 3: 무설치 파일 업로드 및 배포 설정
터미널(검은 창) 없이 웹사이트에서 직접 파일을 올리는 핵심 단계입니다.
업로드 링크 클릭: 새로 만든 저장소 화면 중앙에 작게 써진 'uploading an existing file' 파란색 글씨를 클릭합니다.
파일 드래그앤드롭: 아까 압축을 푼 폴더 안의 모든 파일과 폴더를 마우스로 끌어서 웹 화면에 놓습니다.
저장 확정(Commit): 파일 목록 아래 Commit changes 버튼을 누릅니다. (이때 Stage & Commit 과정이 자동으로 처리됩니다.)
Pages 설정 진입: 상단 메뉴에서 Settings 탭을 클릭한 뒤, 왼쪽 메뉴에서 Pages를 선택합니다.
배포 활성화: * Source: 'Deploy from a branch' 확인
Branch: 'None'이라고 되어 있는 버튼을 눌러 main으로 바꾸고 바로 옆의 Save를 클릭합니다.
쿨팁이해: 깃허브 페이지(GitHub Pages) 활성화는 뭐지?
올려둔 파일들을 실제 '웹 주소'와 연결하는 최종 단계입니다. 앞서진행한 과정을 말하줘!
Settings 진입: 리포지토리 상단 메뉴에서 Settings(설정) 탭을 클릭합니다.
Pages 설정: 왼쪽 메뉴 바에서 Pages를 선택합니다.
브랜치 지정: Build and deployment 항목의 Branch 설정에서
main혹은gh-pages를 선택하고 Save를 누릅니다. 여기서 우리는 main을 선택했습니다.배포 확인: 1~3분 뒤 페이지 상단에 "Your site is live at..."와 함께 파란색 주소가 나타납니다. 이 주소가 바로 여러분의 홈페이지 주소입니다!
3. 클로징: 이제 나만의 사이트가 전 세계로 퍼져나갑니다
이제 구글 AI 스튜디오와 깃허브만 있다면 누구나 자신만의 전문적인 웹사이트를 가질 수 있습니다. 별도의 유지비가 들지 않기 때문에 개인 포트폴리오나 랜딩 페이지를 운영하기에 최적의 조합입니다.
지금 바로 완성된 주소를 친구들이나 커뮤니티에 공유해 보세요! 배포 중에 막히는 부분이 있거나 화면이 제대로 나오지 않는다면 댓글로 남겨주세요. 해결책을 함께 찾아드리겠습니다.
SEO #태그 #구글AI스튜디오배포 #깃허브페이지사용법 #GitHubPages #무료호스팅 #홈페이지만들기 #노코드배포 #웹사이트무료배포 #AI홈페이지 #포트폴리오사이트제작 #구글AI사이트배포
댓글 쓰기
0댓글