안녕하세요. 포인투랩 YC 입니다. 오늘은 Gemini Canvas 등 바이브코딩을 위해 만든 간단한 웹 앱이나 웹사이트를 GitHub Pages 기능을 통해 쉽게 배포하는 방법에 대해 알려드리려 합니다. GitHub는 세계에서 가장 유명한 코드 공유와 버전 관리 시스템이라고 보면 될텐데요, 여기 올려둔 html 파일을 깃허브 페이지라는 기능을 통해 웹사이트 형태로 배포가 가능합니다. GitHub Pages로 올릴 수 있는 웹사이트는 대부분 정적인 웹사이트 형태이지만, 백엔드나 데이터베이스는 Google Sheet, Apps Script API 등을 이용해 서버리스 방식으로 동적인 웹사이트를 구현하는 것도 가능합니다.
일단 Gemini를 이용해 간단한 웹앱을 하나 만들어봐야겠죠? 저는 크롬북의 접근성 기능을 정말 사랑하는데요, 그 중 참 유용한 기능 중 하나인 음성 기록 (Voice Typing) 기능을 이용한 게임을 만들어 종종 연수나 학생들과의 활동에 사용하곤 해요. Gemini의 Canvas 기능을 이용해 간단하게 만들어두었고, Google 사이트에 보통 업로드하여 사용했습니다. 소스만 복사해서 구글 사이트의 “삽입” – “코드 삽입” 기능을 이용해 바로 붙여넣을 수 있거든요. 다만 구글 사이트에 웹앱을 넣을 때엔 iframe 형태로 들어가기 때문에 전체 사이즈 웹앱을 배포하는데엔 조금 불편함이 있고, 싱글페이지 HTML만 삽입 가능하므로 자바스크립트나 CSS 등을 별도의 파일로 관리하지 못하는 아쉬움이 있었습니다. 고로 오늘은 GitHub Pages 기능을 이용해 심플한 웹앱이나 웹사이트를 무료로 호스팅하는 방법을 보여드릴거에요.
구글 사이트 버전의 음성입력 Tongue Twister는 다음 사이트 주소에서 확인할 수 있습니다. https://sites.google.com/poin2.com/twister/home
이제 GitHub Pages 사이트 배포를 위해 GitHub로 함께 이동해보시죠.
저는 Sign up을 눌러 구글 계정으로 로그인 하였습니다. 깃허브의 언어는 브라우저의 언어를 따라가도록 되어있다 하는데요, 저는 영어로 되어있어 그런지 영문으로 나오더라구요. 한글 UI가 필요한 경우 크롬 익스텐션을 설치하는 방법도 있다고 합니다.
로그인이 완료 되었으면 왼쪽 상단의 new 버튼을 눌러 새로운 리포지토리를 하나 만들어줄게요.
이름은 마음대로 지어도 좋지만 배포 페이지의 URL이 될 예정이니 심플하고 간결하게, 그리고 단번에 이해할 수 있도록 지어주면 더 좋습니다. GitHub Pages 기능을 사용하기 위해 Visibility는 Public으로 바꿔주시고 .gitignore 또는 license 설정은 필요없을 것 같습니다.
Create repository를 누르고나면 이 repo로 파일을 업로드하는 다양한 방법이 소개되는데요, 저희는 굳이 SSH 연결이라던지, CLI 명령어를 통한 push 등은하지 않을 것이기 때문에 화면 중간 쯤 하늘색 박스 안에 보이는 “Create a new file” 링크를 눌러줍니다.
그럼 우리에게 익숙한 (?) 코드 에디터가 나타나게 되는데요, 파일 이름은 index.html 로 지정해주고 Gemini Canvas를 통해 작성한 코드를 통으로 붙여넣어주세요. 그리고 우측 상단의 Commit Changes 버튼을 누른 후, 이번 저장에 어떤 내용이 바뀌었는지 살짝 적어주시면 나중에 버전을 되돌릴 때 알아보기 쉽습니다.
이제 거의 모든 준비가 끝났습니다. 화면 상단에 위치한 Settings 버튼을 눌러주시구요.
좌측에 위치한 Pages 메뉴를 클릭 후 Branch 부분의 None 으로 되어있는 곳을 main, 디렉토리는 / (root) 으로 설정 후 Save를 눌러줍니다.
그럼 아래쪽에 custom URL을 넣을 수 있는 필드가 나타나고 페이지를 새로고침 하면 아래와 같이 현재 사이트가 배포된 주소를 볼 수 있습니다. 한번 들어가볼까요? 링크
이와 같이 쉽게 웹사이트 / 웹앱을 GitHub Pages를 통해 배포하는 방법을 알아보았습니다. Vercel, Netlify와 같이 무료로 웹앱 호스팅을 제공하는 다양한 서비스들이 있지만 간단한 웹사이트를 배포하기에는 GitHub Pages도 꽤나 쉽고 유용하게, 그리고 비용 걱정 없이 사용이 가능할 것 같아요.
그럼 다음 팁으로 또 만나요 🙂
