[영단어 어플 만들기] STEP 6. 깃허브(GitHub)로 평생 무료 앱 배포 & 1초 자동 업데이트 세팅

안녕하세요! 全자동입니다.

지난 STEP 5에서 AI 바이브코딩의 힘으로 화려한 프론트엔드 결과물을 얻어내셨죠?

PC 화면에서 예쁘게 돌아가는 앱을 보며 짜릿함을 느끼셨을 겁니다.

하지만 아직 '진짜' 앱이라고 부르기엔 부족합니다.

오늘은 대망의 마지막 편!

우리가 만든 이 파일을 개발자들의 성지인 '깃허브(GitHub)'에 올려서 전 세계 어디서든 접속할 수 있는 앱 주소를 만들고, 스마트폰 바탕화면에 설치해 보겠습니다.

1. 🐙 왜 깃허브(GitHub)를 사용하나요? (핵심!)

파일을 인터넷에 올리는(호스팅) 방법은 여러 가지가 있지만, 우리가 깃허브를 선택한 이유는 '미친 유지보수성' 때문입니다.

• 평생 무료: 서버 유지비가 1원도 들지 않습니다.
• 바이브코딩과의 찰떡궁합: 나중에 AI에게 "앱에 타이머 기능 추가해 줘!"라고 해서 새로운 코드를 받으면? 깃허브에 있는 코드만 쓱~ 덮어쓰기(Commit) 하면 끝입니다.
• 1초 자동 연동(배포): 깃허브에서 코드를 수정하고 저장하는 순간, 내 스마트폰에 깔린 앱에도 자동으로 업데이트 내용이 실시간 반영됩니다. 앱을 다시 깔 필요가 없죠!

2. 🚀 깃허브로 나만의 앱 URL 만들기 (3분 컷)

자, 이제 깃허브에 우리의 파일을 올려보겠습니다. 천천히 따라오세요!

[깃허브 Pages 무료 호스팅 방법]

1. github.com에 접속해서 무료 회원가입 후 로그인합니다.
2. 좌측 상단의 초록색 [New] 버튼을 눌러 새로운 저장소를 만듭니다. (이름은 my-voca-app 등으로 짓고, Public 체크 후 Create repository 클릭)
3. [uploading an existing file]을 누르고, 지난 시간에 받은 HTML 파일의 이름을 index.html로 변경하여 드래그 앤 드롭으로 올립니다. 그리고 초록색 [Commit changes]를 누릅니다.
4. 이제 주소를 만들 차례입니다! 상단 메뉴의 [Settings] -> 좌측 [Pages] 탭으로 들어갑니다.
5. Source 밑에 있는 Branch를 [None]에서 [main]으로 바꾸고 [Save]를 누릅니다.
6. 짠!🎉 1~2분 정도 얌전히 기다렸다가 새로고침을 해보면, 화면 상단에 https://내아이디.github.io/my-voca-app/ 이라는 나만의 앱 주소(URL)가 나타납니다!

3. 📱 내 폰으로 전송 & 바탕화면 '앱' 설치!

이제 방금 만든 인터넷 주소를 내 스마트폰으로 보낼 차례입니다.

PC 카카오톡의 '나에게 쓰기'를 통해 방금 생성된 깃허브 주소를 전송해 주세요.

스마트폰에서 그 주소를 열 때, 카카오톡 내장 브라우저가 아닌 아이폰은 'Safari(사파리)', 갤럭시는 '삼성 인터넷' 또는 '크롬(Chrome)'으로 앱을 띄워야 합니다.

💡 바탕화면 아이콘 1초 생성법

🍎 아이폰 (Safari 기준)

화면 맨 아래 가운데에 있는 [공유(네모 안에서 화살표가 위로 나가는 모양)] 아이콘을 누른 뒤,

스크롤을 살짝 내려 [홈 화면에 추가]를 누릅니다.

🤖 안드로이드 갤럭시 (크롬 기준)

화면 우측 상단에 있는 [점 3개(메뉴)] 아이콘을 누른 뒤, [홈 화면에 추가]를 누릅니다.

---

"코딩 1도 모르는 초보 아빠의 무료 어플 만들기 프로젝트, 완벽하게 성공하셨습니다!"

스마트폰 바탕화면으로 나가 보세요.

수많은 상용 어플들 사이에 여러분이 직접 만든 '맞춤형 영단어 앱' 아이콘이 당당하게 자리 잡고 있을 것입니다!

아이콘을 터치하면 브라우저 주소창 없이 진짜 어플처럼 전체 화면으로 실행됩니다.

구글 스프레드시트라는 주방(서버)부터, 챗GPT를 활용한 프론트엔드 포장지 만들기,

그리고 깃허브를 통한 평생 무료 배포와 자동 업데이트까지!

이제 엑셀에 새로운 단어를 추가하거나 깃허브에 코드를 업데이트하기만 하면, 여러분의 앱은 스마트폰에서 스스로 진화할 것입니다.

세상에 하나뿐인 나만의 맞춤형 어플을 마음껏 즐겨보세요!