앱을 기획하고(1탄), 뼈대를 깎고 디자인하고(2탄), 코드 저장소를 만들고(3탄), 데이터베이스 연결(4/5탄) 에 이어 오늘은 마지막 6탄 입니다. 앱을 전 세계 사람들이 내 주소(URL)를 입력해서 들어올 수 있도록 인터넷 세상에 정식으로 발행(배포)하는 마지막 단계입니다.
우리가 선택한 무기는 바로 Vercel(버셀)입니다!
1. 깃허브 Pages도 있는데, 굳이 Vercel을 쓰는 이유? 🤔
3탄 글에서 깃허브 Pages로도 주소 만들 수 있다고 했는데 왜 귀찮게 Vercel을 또 가입해야 할까요?
우리가 만든 앱이 단순한 그림 한 장이 아니라,진짜 앱처럼 작동하려면 Vercel의 강력한 엔진이 필요하기 때문입니다.
Vercel을 쓰면 얻는 장점 4가지 :
🚀 1. 전 세계 0.1초 로딩 (속도)
Vercel은 전 세계 곳곳에 서버를 두고 있습니다. 중국에 있는 대원이 접속하면 상하이나 홍콩 서버가 응답하고, 미국에서 접속하면 미국 서버가 즉시 응답합니다. GitHub Pages보다 압도적으로 빠릅니다.
🤫 2. API 키 완벽 보안 (가장 중요!)
4/5탄에서 배운 Firebase나 Supabase의 비밀 열쇠(apiKey) 기억하시죠? 이걸 그냥 HTML에 적어두면 누구나 훔쳐볼 수 있습니다. Vercel의 '환경 변수' 기능을 쓰면 이 비밀 열쇠를 코드에서 완전히 분리해서 서버 깊숙이 숨길 수 있습니다. 보안의 필수 코스입니다! 깃허브 Pages에서는 이런 보안 기능을 사용할 수가 없습니다.
📱 3. 주소창 없는 '진짜 앱'의 탄생 (PWA 최적화)
Vercel은 우리 앱을 단순한 홈페이지가 아닌, 스마트폰에 설치된'진짜 앱'처럼 보이게 옷을 입혀줍니다.
• 전체 화면 모드: 앱을 실행했을 때 지저분한 웹 브라우저 주소창(http://...)과 메뉴들이 싹 사라집니다. 화면 전체를 우리 앱으로만 꽉 채워주니, 친구들이 보면 앱스토어에서 내려받은 정식 앱인 줄 알 거예요! ✨
• 나만의 앱 아이콘: 내가 정성껏 만든 로고를 폰 홈 화면에 딱 박아둘 수 있습니다.
• 최적의 환경 제공: 이런 '앱 같은 느낌(PWA)'이 부드럽게 돌아가려면 서버 설정이 중요한데, Vercel은 클릭 몇 번으로 이 모든 최적화를 알아서 다 잡아준답니다. 이제 웹사이트가 아니라 진짜 '나만의 앱' 이 되는거죠!!
✅ 4. 코딩 실수 방지 (미리보기)
코드를 수정해서 깃허브에 올리기 전에, Vercel은 나에게만 보이는 '미리보기 전용 주소'를 하나 더 만들어줍니다. 거기서 테스트해 보고 완벽할 때만 정식 업데이트를 할 수 있습니다. 대원들에게 망가진 앱을 보여주는 대참사를 막아주죠!
2. Vercel 가입부터 깃허브 연동까지, 1분 컷 가이드 ⏱️
자, 이제 장점을 알았으니 바로 시작해 볼까요?
1️⃣ Vercel.com 접속 및 가입:
메인 화면에 보이는 [Sign Up] 버튼을 누릅니다.
2️⃣ 반드시 [Continue with GitHub] 클릭!:
가장 중요한 단계입니다! 이메일 가입 말고 반드시 우리 코드 저장소가 있는 GitHub 계정으로 가입하세요. 그래야 둘이 마법처럼 연결됩니다.
3️⃣ 권한 승인:
GitHub 로그인 창이 뜨면 로그인을 하고, Vercel이 내 저장소를 볼 수 있도록 승인(Authorize) 버튼을 눌러주세요. 끝!
3. 내 저장소 불러와서 첫 배포하기 (도킹 시작!) 🛰️
가입이 끝났다면 이제 내가 GitHub 에 올린 파일을 Vercel로 가져와서 인터넷에 띄워봅시다.
1️⃣ 대시보드에서 [Add New...] -> [Project] 클릭!
2️⃣ Import Git Repository:
방금 연결한 GitHub 저장소 리스트가 쫙 나타납니다. 그중 우리가 만든 앱 저장소(예: cnation-final-app) 옆에 있는[Import] 버튼을 누르세요.
3️⃣ 설정 및 환경 변수 (꿀팁):
프로젝트 이름 등을 확인하고, 만약 Firebase/Supabase를 썼다면 여기서 [Environment Variables] 칸을 열어 코드에 숨겨둔 API Key들을 적어줍니다. (자세한 방법은 4/5탄 댓글 참고!)
4️⃣ 대망의 [Deploy] 버튼 꾹!:
화면 아래 초록색 Deploy 버튼을 누르면 끝입니다! 이제 Vercel이 알아서 코드를 분석하고, 서버에 올리고, 주소까지 뚝딱 만들어줍니다.
4. 마법의 자동 업데이트: 코드만 고치면 배포는 Vercel이 알아서! ✨
이게 바로 Vercel을 쓰는 진짜 이유입니다. 이젠 귀찮게 배포 과정을 반복할 필요가 없어요.
🌟 마법의 룰:
1. 내가 VS Code에서 코드를 수정합니다.
2. 3탄에서 배운 대로 깃허브에 Git Push를 합니다.
3. 끝! Vercel이 깃허브에 새로운 코드가 온 걸 0.1초 만에 감지하고, 알아서 배포를 다시 해줍니다.
코딩 작성자는 코드만 고쳐서 깃허브에 밀어넣으면 전 세계(?) 모든 사용자들은 1초 뒤에 최신 앱을 보게 됩니다! 😎
📱 5. 주소창 없는 '진짜 앱' (PWA 최적화) 자세히 알아보기
마지막으로 진짜 앱 같은 느낌', 바로 PWA(Progressive Web App) 기능에 대해 조금 더 자세히 이야기 해보겠습니다. Vercel은 이 기능을 구현하기에 최적의 환경을 제공합니다.
먼저, 중급자를 위해 코드를 살짝 구경 시켜 드리겠습니다. 하지만 초보분들도 걱정 마세요, 아래 설명할 코드 따위 몰라도 전혀 걱정 없으니까요 (초보분들은 이 설명 건너뛰고, 제일 아래 초보팁으로 gogo!!)
🛠️ 블로그용 PWA 구현 코드 예시
1. 앱의 '신분증' 만들기: manifest.json
가장 먼저 만들어야 할 파일입니다. 앱의 이름은 무엇인지, 아이콘은 어떤 걸 쓸지, 그리고 실행했을 때 주소창을 없앨지 말지를 결정하는 '설정 파일'이에요.
```json
{
"name": "cnation PDF 매니저",
"short_name": "cnation 앱",
"start_url": "index.html",
"display": "standalone", // ⬅️ 이 줄이 주소창을 없애주는 마법의 코드!
"background_color": "#ffffff",
"theme_color": "#4A90E2",
"icons": [
{
"src": "cnation-icon-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "cnation-icon-512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
```
2. HTML과 연결하기: index.html
위에서 만든 신분증(manifest.json)을 내 웹사이트가 인식할 수 있게 연결해줘야 합니다. <head> 태그 안에 아래 코드를 넣어줍니다.
```html
<link rel="manifest" href="manifest.json">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```
3. 앱 설치를 가능하게 하는 '설치 기사': service-worker.js
스마트폰이 "이 사이트 앱으로 설치할래?"라고 물어보게 하려면, 배경에서 몰래 일하는 '설치 기사'가 필요합니다. 아주 간단하게라도 이 파일이 있어야 설치 버튼이 활성화돼요!
```javascript
// service-worker.js (가장 기초적인 형태)
self.addEventListener('fetch', function(event) {
// 지금은 특별한 일을 하지 않아도, 존재만으로 설치를 도와줍니다!
});
```
💡 (초보를 위한 꿀팁) 코딩 못 해도 괜찮아요! AI가 1초 만에 해줍니다 🤖
위에서 보여드린 코드들, 직접 타이핑하려니 벌써 눈앞이 캄캄하시죠? 🤯 하지만 걱정 마세요! 우리에겐 24시간 대기 중인 천재 코딩 비서들이 있잖아요.
ChatGPT, Gemini, Claude에게 내가 짠 코드를 보여주며 이렇게 한 줄만 말해보세요!
"내가 만든 이 앱에 PWA 기능을 추가해줘. 홈 화면 설치 아이콘이랑 주소창 없는 전체 화면 모드가 작동하게 'manifest.json'이랑 'service-worker' 코드도 같이 짜줘!"
그러면 AI가 알아서 '앱 신분증'과 '설치 기사' 코드를 뚝딱 만들어 줄 뿐만 아니라, index.html의 어느 위치에 코드를 붙여넣어야 하는지도 친절하게 알줍니다.
우리는 그저 AI가 정성껏 차려준 코드를 [복사]해서 [붙여넣기]만 하면 끝!
'인공지능(AI) & IT 트렌트 따라잡기' 카테고리의 다른 글
| 삼성전자·SK하이닉스가 앞으로도 계속 잘 나갈 수 밖에 없는 이유 (1) | 2026.05.09 |
|---|---|
| 무료로 뮤직비디오 만들기 (직접 만든 2편 기반으로 작성) (1) | 2026.05.09 |
| 누구나 나만의 앱 만들기 시리즈 5탄 (중국에서도 빠른 데이터 저장 Supabase) (1) | 2026.04.19 |
| 윈도우 정품키 초저가로 구매하고 설정하기! (0) | 2026.04.18 |
| 누구나 나만의 앱 만들기 시리즈 4탄 (데이터 관리 Firebase) (1) | 2026.04.18 |