2026 충북 대학생 글로벌 기업탐방(미국 서부) 올인원 컴패니언 웹앱 충북대학교 소프트웨어학부 · 팀 3인
기업탐방 · 팀프로젝트 · 발표 · 네트워킹 · 관광 · 영어회화를 하나의 앱에서 관리합니다.
index.html을 브라우저로 열면 바로 실행됩니다. 서버가 필요 없습니다.
# 로컬 서버로 열면 PWA(홈 화면 추가 · 오프라인 캐시)까지 동작합니다
python3 -m http.server 8000
# → http://localhost:8000아이폰에 설치하기: Safari에서 접속 → 공유 버튼 → 홈 화면에 추가 전체화면 앱처럼 실행되고, 비행기 안에서도 오프라인으로 동작합니다. 앱을 처음 열면 화면 아래에 설치 안내 배너가 뜨고, 이후에도 설정 → 앱으로 설치에서 다시 볼 수 있습니다.
빌드 과정이 없는 정적 사이트입니다. 프로젝트 생성 시 아래처럼 설정하세요.
| 항목 | 값 |
|---|---|
| Framework preset | None |
| Build command | (비워둠) |
| Build output directory | / |
| Root directory | (비워둠) |
https://<프로젝트>.pages.dev 로 접속하면 HTTPS라 서비스워커까지 동작해
아이폰 홈 화면 추가와 오프라인 실행이 모두 정상 작동합니다.
| 탭 | 내용 |
|---|---|
| 홈 | D-Day 카운트다운, 오늘 일정, 준비 진행률, 오늘의 영어/기업 |
| 일정 | 공식 일정안(8/17~8/26) 타임라인. 카드별 메모·사진·완료 체크 |
| 준비물 | 51개 항목. 카테고리·우선순위·가격·구매링크·검색·필터 |
| 체크리스트 | 출국 전 → 공항 → 비행기 → 입국 → 호텔 → 귀국 단계별 60개 |
| 프로젝트 | 추천 주제 6개(가안) + 10개 섹션 Markdown 편집·미리보기 |
| 기업탐방 | 10개 방문지 상세(기술·제품·이슈·한국과의 관계) + 평가·기록 |
| 질문 | 방문지별 준비 질문 207개. 체크·즐겨찾기·답변 메모 |
| 영어 | 14개 카테고리 회화 + 반도체/AI 용어 + TTS 발음 + 4지선다 퀴즈 |
| 식단 | 8일치 23끼 식당·메뉴. 자유식·현장 제공 표시 |
| 가이드 | 입국심사 모범답안 · 수하물 규정 · 숙소 연락처 · 필수 앱 · 날씨 · 팁 · 치안 · 비상연락처 |
| 쇼핑 | 방문지별 기념품 리스트, 예상 금액 자동 합계 |
| 경비 | 예산 관리, 지출 기록, 카테고리별 분석, 환율 계산기 |
| 일기 | 날짜별 기분·사진·오늘 배운 것·만난 사람·한 줄 |
| 자료실 | 링크·파일 저장 + 기업/기관 공식 사이트 모음 |
| 회의 | 회의록(Markdown) + 담당자·우선순위가 있는 할 일 |
| 설정 | JSON 백업/복원, 초기화, 테마, 데이터 요약 |
전역 검색(모든 탭 통합 · ⌘K) · 다크/라이트 모드 · FAB 빠른 작업 ·
Toast · 바텀시트(스와이프로 닫기) · 자동 저장 · 진행률 · 애니메이션
| 날짜 | 지역 | 주요 일정 |
|---|---|---|
| 8/17 (월) | 인천 → SFO | 15:30 집결(T1) · 19:15 YP111 · SF 시내투어 |
| 8/18 (화) | 실리콘밸리 | 애플 비지터센터 · Google · Google Experience |
| 8/19 (수) | 실리콘밸리 | Intel Museum · 스탠퍼드 투어/연구원 네트워킹 · HP |
| 8/20 (목) | 실리콘밸리 | Genentech · MISTA 특강 + Plug and Play · LAM Research + 네트워킹 |
| 8/21 (금) | 요세미티 | 요세미티 국립공원 → 비살리아 1박 |
| 8/22 (토) | LA | 유니버설 스튜디오 |
| 8/23 (일) | LA | UCLA 캠퍼스투어 · 산타모니카 · The Getty · 그리피스 천문대 |
| 8/24 (월) | LA | 캘리포니아 사이언스 센터 · 파머스마켓 · So-Cal 멘토링 만찬 |
| 8/25 (화) | LA → 인천 | 10:50 YP102 |
| 8/26 (수) | 인천 | 15:50 도착 · 17:00 해산 |
변경 일정표(2026.08.12) 기준. 현지 연수 진행 상황에 따라 변경될 수 있습니다.
index.html 앱 셸 (마크업만)
manifest.json PWA 매니페스트
sw.js 서비스워커 (오프라인 캐시)
css/style.css 디자인 시스템 (Apple HIG · Glassmorphism · 다크/라이트)
js/
icons.js Lucide 스타일 인라인 SVG 아이콘 (CDN 없이 오프라인 동작)
data.js 시드 데이터 (일정 · 기업 · 질문 · 영어 · 가이드 …)
store.js LocalStorage 상태 관리 · 통계 · 백업
ui.js 재사용 컴포넌트 (Toast/Modal/Sheet/Progress/Markdown/사진)
views.js 화면 (1) 홈 · 일정 · 준비물 · 체크리스트 · 프로젝트
views2.js 화면 (2) 기업 · 질문 · 영어 · 가이드 · 쇼핑 · 경비 · 일기 · 자료실 · 회의 · 설정
app.js 라우팅 · 탭바 · 전역 검색 · FAB · 테마 · PWA 등록
- 빌드 도구·프레임워크 없이 바닐라 ES6+
- 각 화면은
{ title, sub, render(), mount() }인터페이스를 따르는 독립 컴포넌트 - 모든 상태는 단일 LocalStorage 키(
sv-master-v1)에 debounce 저장 - 사진은 900px로 리사이즈 후 JPEG base64 저장 (용량 절약)
- 입력값은 모두 escape 처리
모든 기록은 이 기기에만 저장됩니다. 브라우저 데이터를 지우면 사라집니다. 여행 중에는 설정 → JSON 내보내기를 주기적으로 실행해 백업하세요.