반응형
AI 주식 분석 앱을 스마트폰 홈화면에 앱 아이콘으로 설치하는 방법. manifest.json, sw.js 파일 만들기부터 안드로이드/아이폰 설치까지 완전 가이드.
마지막 단계! 진짜 앱처럼 스마트폰에서 실행됩니다 📱
| 6편에서 할 일 |
| □ manifest.json 파일 만들기 (앱 정보 설정) |
| □ sw.js 서비스워커 파일 만들기 |
| □ 앱 아이콘 이미지 준비 (icon-192.png, icon-512.png) |
| □ index.html에 PWA 설정 코드 추가 |
| □ Cloudflare에 파일 4개 재배포 |
| □ 스마트폰 홈화면에 'AI주식' 앱 아이콘 설치! |
PWA란 무엇인가요?
PWA(Progressive Web App)는 웹사이트를 스마트폰 앱처럼 설치할 수 있게 해주는 기술입니다.
| 구분 | 일반 웹사이트 | PWA ✅ |
| 설치 방법 | 북마크만 가능 | 홈화면에 아이콘으로 설치 |
| 실행 방식 | 브라우저 주소창 있음 | 전체화면 앱처럼 실행 |
| 앱스토어 | 등록 불필요 | 등록 불필요 |
| 비용 | 무료 | 무료 |
| 업데이트 | URL 접속마다 최신 | 파일 수정시 자동 반영 |
| ✅ 핵심 포인트 앱스토어 심사 없이 바로 설치 가능! 코드 수정 후 재배포하면 자동으로 업데이트됩니다. |
필요한 파일 4가지
| PWA를 위해 추가할 파일 |
| ① manifest.json — 앱 이름, 아이콘, 색상 등 앱 정보 설정 파일 |
| ② sw.js — 서비스워커 (오프라인 캐시 처리) |
| ③ icon-192.png — 홈화면 아이콘 이미지 (192x192 픽셀) |
| ④ icon-512.png — 홈화면 아이콘 이미지 (512x512 픽셀) |
| + index.html 수정 — PWA 연결 코드 추가 |
PART 1 — manifest.json 만들기
| 1 | 새 파일 만들기 VS Code에서 stock-ai-app 폴더 열기 새 파일 아이콘 클릭 → 파일 이름: manifest.json |
 |
| 2 | 아래 코드 붙여넣기 후 저장 아래 코드 전체 복사 → manifest.json에 붙여넣기 앱 이름은 원하는 대로 수정 가능 Ctrl+S로 저장 |
| { "name": "AI 주식 분석", "short_name": "AI주식", "description": "실시간 주가 기반 AI 주식 분석 앱", "start_url": "/", "display": "standalone", "background_color": "#0a0e1a", "theme_color": "#0a0e1a", "orientation": "portrait", "icons": [ { "src": "icon-192.png", "sizes": "192x192", "type": "image/png", "purpose": "any maskable" }, { "src": "icon-512.png", "sizes": "512x512", "type": "image/png", "purpose": "any maskable" } ] } |
 |
- C:\Users\dscho\OneDrive\바탕 화면\stock-ai-app 폴더 안에 manifest.json 파일이 저장된 것을 확인하세요.
 |
| 주요 설정 값 설명 (manifest.json) |
| name: 앱 설치 시 표시되는 전체 이름 |
| short_name: 홈화면 아이콘 아래 표시되는 짧은 이름 (4~5글자 권장) |
| display: standalone = 주소창 없이 앱처럼 전체화면 실행 |
| background_color: 앱 로딩 시 배경색 (#0a0e1a = 진한 네이비) |
| theme_color: 상단 상태바 색상 |
PART 2 — sw.js 서비스워커 만들기
| 1 | 새 파일 만들기 VS Code에서 새 파일 → 파일 이름: sw.js |
 |
| 2 | 아래 코드 붙여넣기 후 저장 코드를 이해할 필요 없습니다! 전체 복사 → sw.js에 붙여넣기 → Ctrl+S |
| const CACHE_NAME = 'stock-ai-v1'; const STATIC_ASSETS = ['/', '/index.html', '/manifest.json']; self.addEventListener('install', event => { event.waitUntil( caches.open(CACHE_NAME).then(cache => cache.addAll(STATIC_ASSETS)) ); self.skipWaiting(); }); self.addEventListener('activate', event => { event.waitUntil( caches.keys().then(keys => Promise.all(keys.filter(k => k !== CACHE_NAME).map(k => caches.delete(k))) ) ); self.clients.claim(); }); self.addEventListener('fetch', event => { const url = new URL(event.request.url); // API 호출은 캐시 안 함 if (url.hostname.includes('workers.dev')) return; event.respondWith( caches.match(event.request).then(cached => { return cached || fetch(event.request); }) ); }); |
 |
- C:\Users\dscho\OneDrive\바탕 화면\stock-ai-app 폴더 안에 sw.js 파일이 저장된 것을 확인하세요.
 |
PART 3 — 앱 아이콘 이미지 준비
홈화면에 표시될 아이콘 이미지가 필요합니다. 두 가지 크기가 필요합니다.
| 아이콘 준비 방법 3가지 중 선택 |
| 방법 1 (추천): 이 시리즈와 함께 제공된 icon-192.png, icon-512.png 파일 사용(첨부) |
| 방법 2: canva.com에서 192x192, 512x512 크기로 직접 디자인 |
| 방법 3: 기존 이미지를 squoosh.app에서 원하는 크기로 변환 |
- 첨부된 파일을 C:\Users\dscho\OneDrive\바탕 화면\stock-ai-app 폴더 안에 저장하세요
icon-192.png
0.00MB
icon-512.png
0.00MB
| ⚠️ 주의 파일 이름은 반드시 icon-192.png, icon-512.png 로 저장해야 합니다. manifest.json의 파일명과 정확히 일치해야 합니다. |
| ✅ 핵심 포인트 아이콘은 정사각형 이미지를 사용하세요. 중요한 내용은 가운데에 배치하세요 (원형으로 잘릴 수 있음). |
PART 4 — index.html에 PWA 코드 추가
- index.html에 두 가지 코드를 추가해야 합니다. 추가할 위치를 정확히 확인하세요.
- 추가 1 — <head> 안에 메타태그 추가
<title>AI 주식 분석</title> 바로 아래에 추가:
| <meta name="theme-color" content="#0a0e1a"> <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="apple-mobile-web-app-title" content="AI주식"> <link rel="manifest" href="manifest.json"> <link rel="apple-touch-icon" href="icon-192.png"> |
 |
- 추가 2 — </body> 바로 앞에 서비스워커 등록 코드 추가
</body> 태그 바로 앞에 추가:
| <script> if ('serviceWorker' in navigator) { window.addEventListener('load', () => { navigator.serviceWorker.register('sw.js') .then(() => console.log('SW registered')) .catch(() => console.log('SW failed')); }); } </script> |
 |
 |
| ✅ 핵심 포인트 VS Code에서 Ctrl+F로 검색하면 첫 번째 추가 위치를, 검색하면 두 번째 위치를 빠르게 찾을 수 있습니다! |
PART 5 — Cloudflare에 파일 재배포
새로 만든 파일 4개를 Cloudflare에 올려야 합니다.
| 1 | Cloudflare 재배포 화면 접속 dash.cloudflare.com → Workers & Pages 4편에서 만든 프로젝트 클릭 (예: purple-bonus-730d ) '새 배포' 버튼 클릭 |
 |
 |
| 2 | 파일 5개 한꺼번에 업로드 아래 5개 파일을 드래그 앤 드롭으로 한번에 업로드: ① index.html (PWA 코드 추가된 버전) ② manifest.json ③ sw.js ④ icon-192.png ⑤ icon-512.png |
 |
| 3 | 배포 완료 확인 '배포' 버튼 클릭 1~2분 대기 URL 접속 후 앱 화면 정상 확인 |
PART 6 — 스마트폰 홈화면에 앱 설치
안드로이드 (Galaxy 등) — Chrome 브라우저
| 안드로이드 설치 방법 |
| ① Chrome으로 앱 URL 접속 |
| ② 주소창 오른쪽에 '앱 설치' 아이콘 자동으로 나타남 |
| ③ '앱 설치' 탭 → '설치' 확인 |
| ④ 홈화면에 'AI주식' 아이콘 생성! |
| ※ 아이콘이 안 보이면: 점 3개 메뉴 → '홈 화면에 추가' |
 |
 |
아이폰 — Safari 브라우저
| 아이폰 설치 방법 |
| ① Safari로 앱 URL 접속 (Chrome이 아닌 Safari 사용!) |
| ② 하단 가운데 공유 버튼(□↑) 클릭 |
| ③ '홈 화면에 추가' 클릭 |
| ④ 이름 확인 후 '추가' 클릭 |
| ⑤ 홈화면에 'AI주식' 아이콘 생성! |
| ⚠️ 주의 아이폰은 반드시 Safari 브라우저를 사용해야 홈화면 추가가 됩니다. Chrome에서는 홈화면 추가 기능이 제한됩니다. |
아이콘 문제 해결
| 아이콘이 이상하게 보일 때 |
| 현상: 흰색 또는 깨진 아이콘 표시 |
| 원인: 아이콘 파일이 정상적으로 업로드되지 않은 것 |
| 해결 1: 브라우저에서 URL/icon-192.png 접속 → 이미지 뜨는지 확인 |
| 해결 2: 이미지가 안 뜨면 Cloudflare에 아이콘 파일 재업로드 |
| 해결 3: 기존에 설치된 앱 삭제 후 재설치 |
6편 완료 체크리스트
| □ | manifest.json 파일 생성 완료 |
| □ | sw.js 파일 생성 완료 |
| □ | icon-192.png 준비 완료 |
| □ | icon-512.png 준비 완료 |
| □ | index.html 메타태그 추가 완료 |
| □ | index.html 서비스워커 등록 코드 추가 완료 |
| □ | Cloudflare에 파일 5개 재배포 완료 |
| □ | 스마트폰 홈화면에 앱 아이콘 설치 완료 |
| □ | 앱 전체화면 실행 및 분석 작동 확인 |
전체 시리즈 총정리
| 6편을 통해 완성한 것들 |
| 1편 — 전체 구조 이해: API, Worker, 데이터 흐름 파악 |
| 2편 — 준비 완료: Anthropic·DART·GitHub·Cloudflare 계정 + API 키 발급 |
| 3편 — 앱 파일 완성: index.html 작성 + 로컬 테스트 |
| 4편 — 인터넷 배포: GitHub + Cloudflare 무료 배포 + 나만의 URL |
| 5편 — 실시간 연동: Yahoo Finance 주가 + Naver 뉴스 + API 키 보안 |
| 6편 — 스마트폰 앱: PWA 설정 + 홈화면 아이콘 설치 |
| 향후 업그레이드 아이디어 |
| 💡 한국투자증권 API 연동 → 진짜 실시간 체결가 |
| 💡 TradingView 차트 위젯 추가 |
| 💡 포트폴리오 저장 기능 (Firebase 연동) |
| 💡 관심 종목 주가 알림 (푸시 알림) |
| 💡 이 구조로 날씨 앱, 뉴스 앱, 부동산 앱 등 응용 무한! |
| 🎉 시리즈 완료! 진심으로 수고하셨습니다! ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 이 시리즈를 완료한 여러분은 ✅ Claude API + Yahoo Finance + DART 실시간 데이터 연동 ✅ 전체 2,500개+ 종목 자동검색 구현 ✅ Cloudflare Worker로 API 키 완전히 보호 ✅ GitHub + Cloudflare로 무료 배포 완료 ✅ PWA로 스마트폰 홈화면 앱까지 완성 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 이 기술로 주식 앱 외에도 뉴스 요약, 날씨 분석, 부동산 앱 등 무엇이든 AI 앱으로 만들 수 있습니다. 가능성은 무한합니다! 🚀 |
⚠️ 본 글은 교육 목적으로 제작되었으며 투자 권유가 아닙니다. 모든 투자 결정과 손실에 대한 책임은 투자자
본인에게 있습니다.
반응형
'직장인 Claude 활용법-Claude 기초 교실' 카테고리의 다른 글
| AI 주식 분석 앱 만들기 5편 - 실시간 주가·뉴스 연동 + API 키 보안 완성 (0) | 2026.05.17 |
|---|---|
| AI 주식 분석 앱 만들4편 - GitHub 업로드 + Cloudflare 무료 배포 (0) | 2026.05.16 |
| AI 주식 분석 앱 만들기시리즈 3편앱 파일 만들기 + 로컬 테스트 (0) | 2026.05.15 |
| AI 주식 분석 앱 만들기시리즈 2편-계정 가입 + API 키 발급 완전 가이드 (1) | 2026.05.12 |
| AI 주식 분석 앱 만들기시리즈 1편 - 코딩 실전 준비단계 (0) | 2026.05.11 |
