점심 메뉴 룰렛을 lunch.html 파일 하나로 만들어줘. 돌림판이 빙글빙글 돌다가 하나를 뽑아주는 애니메이션으로. 메뉴는 김치찌개, 돈까스, 초밥, 쌀국수, 샐러드, 구내식당, 짜장면, 버거 8개. 시작 버튼은 크고 누르고 싶게.
📋 이어서 — 감질나게
당첨 순간에 폭죽 효과랑 두구두구 하는 긴장감을 추가해줘. 메뉴를 직접 추가/삭제할 수 있는 입력칸도.
🚀 더 해보기
"같은 메뉴가 3번 연속 나오면 안 되게 해줘"
👀 예상 결과
🎉 돈까스!
폭죽 + 두구두구 효과
메뉴 추가/삭제 입력칸
✅ 완료 조건
돌림판이 돌고 결과가 나온다
오늘 점심이 정해졌다 🍜
SKILL · 고쳐달라고 하는 법
수정 요청도 기술이다 — 그대로 말하면 됩니다
👀 눈에 보이는 대로
"버튼이 너무 작아, 두 배로"
"전체적으로 촌스러워, 더 고급스럽게"
"모바일에서 보면 깨져, 고쳐줘"
🎬 동작을 바꾸고 싶을 때
"누르면 소리도 나게 해줘"
"3초는 돌다가 멈추게"
"이 기능은 빼줘, 복잡해"
"더 예쁘게"도 훌륭한 지시입니다.디자이너에게, 신입사원에게 말하듯 하면 됩니다.
LAB 1-3
단위 변환기
⏱ 10분★☆☆
처음으로 업무 냄새가 나는 도구 — 매번 검색하던 단위 변환을 내 것으로.
📋 시작 프롬프트
반도체 엔지니어용 단위 변환기를 unit.html 파일 하나로 만들어줘. nm ↔ Å ↔ µm ↔ mil 길이, Torr ↔ Pa ↔ mbar 압력, °C ↔ K 온도 세 가지 탭으로. 숫자를 입력하면 실시간으로 전부 같이 변환돼서 보이게.
📋 이어서 — 검증까지 시키기
1 Å = 0.1 nm, 760 Torr = 101325 Pa 같은 알려진 값으로 변환이 정확한지 표로 검증해서 보여줘.
🚀 더 해보기
sccm ↔ slm 유량, eV ↔ nm 광자 에너지 탭 추가
👀 예상 결과
길이 · 압력 · 온도
1 Torr
= 133.322 Pa
= 1.333 mbar
760 Torr
= 101325 Pa
= 1013.25 mbar
입력하면 모든 단위가 동시에 갱신
✅ 완료 조건
세 종류 변환이 모두 동작
아는 값으로 검산해봤다 (760 Torr)
LAB 1-4
회의 타이머
⏱ 10분★★☆
요구사항 여러 개를 처음부터 번호로 정리해서 시켜봅니다.
📋 시작 프롬프트
회의 타이머를 timer.html 파일 하나로 만들어줘. 요구사항:
1. 발표 시간을 분 단위로 설정 (기본 5분)
2. 남은 시간이 화면 가득 크게 보이게
3. 1분 남으면 노란색, 다 되면 빨간색 + 깜빡임
4. 시작/일시정지/리셋 버튼
회의실 프로젝터에 띄워놓고 쓸 거야.
🚀 더 해보기
"발표자 명단을 넣으면 순서대로 돌아가게"
👀 예상 결과
00:58
⬜ 5분+ → 🟨 1분 미만 → 🟥 깜빡임
✅ 완료 조건
타이머가 돌고 색이 바뀐다
요구사항 4개를 하나씩 체크했다
💡 포인트
번호 요구사항 = 그대로 검수 체크리스트. 빠지면 "3번이 안 됐어"
LAB 1-5
보너스 — 반응속도 게임
⏱ 여유 있으면★★☆BONUS
빨리 끝난 사람용 — 옆 사람과 대결할 수 있는 것.
📋 시작 프롬프트
반응속도 측정 게임을 reaction.html로 만들어줘. 화면이 빨간색이었다가 랜덤한 순간 초록색으로 바뀌면 최대한 빨리 클릭하는 게임. 반응 시간을 ms로 보여주고, 5회 평균과 최고 기록을 기록해줘. 너무 일찍 누르면 "성급했습니다!" 하고 놀려줘.
buggy_yield.html을 열었더니 화면이 하얗게만 나와. 이 파일을 읽고 브라우저 콘솔 에러를 확인해서 고쳐줘. 차트가 뜨게만 먼저.
📋 ② 색·라벨 바로잡기 (묘사로)
이제 차트는 나와. 그런데 ①수율이 90% 이상인 랏이 빨강, 미만이 초록으로 색이 반대야. ②제목이 "두께"인데 사실 수율 데이터야. ③y축에 값 눈금이 없어. 이 세 가지를 고쳐줘.
🚀 더 해보기
"90% 기준선을 점선으로" / "고장 나기 전후를 비교 설명해줘"
👀 예상 결과
✖ 백지 + Console→ 고침 →✔ 차트 정상
저수율(빨강) LOT-03·05·08이 제대로 보임
✅ 완료 조건
백지 → 차트가 뜬다 (①)
색·제목·눈금이 맞다 (②)
에러 복붙 / 묘사 두 방법을 다 써봤다
2
PART 2 · 10:40–12:00
코딩 말고, 그냥 업무
바이브 코딩의 절반은 코딩이 아닙니다. 회의록, 보고서, 메일, 표 정리 — 매일 하는 그 일부터 맡겨봅니다.
🎯 문서 업무를 AI에게 시키는 감각🧪 실습 6개 (필수 4 + 보너스 2)
LAB 2-1
회의록 → 요약 + 액션 아이템
⏱ 10분★☆☆
중구난방 회의 메모 → 정리된 회의록.
📋 시작 프롬프트 (샘플 메모 포함)
아래 회의 메모를 정리해서 minutes.md 파일로 만들어줘. ①3줄 요약 ②결정사항 ③액션 아이템(담당자/기한 표) 순서로.
--- 메모 ---
설비팀 김프로: 3번 챔버 파티클 이슈 지난주부터 재발, 원인 미상. 정비 일정 협의 필요
공정팀: 신규 레시피 평가 지연중, 측정 장비 예약이 밀림. 다음주 화요일까지 1차 결과 공유하기로 함
품질팀 이프로: 월간 감사 준비, 각 팀 문서 목록 금요일까지 제출 요청
팀장: 파티클 이슈는 설비팀+공정팀 합동으로 이번주 목요일까지 1차 원인 분석. 레시피 평가는 우선순위 상향
🚀 더 해보기
"팀 공지용 3줄 버전도 따로" / 우리 팀 회의록 양식 틀에 맞추기
👀 예상 결과
📄 minutes.md — 요약 3줄 + 결정 2건 +
액션
담당
기한
파티클 1차 원인 분석
설비+공정
목요일
감사 문서 목록 제출
각 팀
금요일
✅ 완료 조건
요약/결정/액션이 구분돼 나온다
액션에 담당자·기한이 표로 정리됐다
LAB 2-2
메모 → 주간보고 초안
⏱ 10분★☆☆
일주일치 낙서 같은 메모 → 보고서 문체.
📋 시작 프롬프트
아래 이번 주 업무 메모로 주간보고 초안을 작성해줘. 형식: [금주 실적 / 이슈 및 리스크 / 차주 계획] 3개 섹션, 개조식 문어체("~함", "~완료")로.
- 화: 신규 장비 셋업 지원, 캘리브레이션까지 완료
- 수: 파티클 이슈 미팅. 원인 후보 2개로 좁힘 (밸브 실링 or 배기 라인)
- 목: 분석 데이터 정리하다 측정기 예약 못 잡아서 반나절 날림
- 금: 보고서 초안 작성 예정. 다음주엔 재현 실험 하려고 함
📋 이어서 — 톤 조절
"반나절 날림"처럼 부정적으로 보이는 부분은 리스크와 대응 계획 형태로 다듬어줘. 임원 보고에 들어가도 어색하지 않게.
👀 예상 결과
■ 금주 실적
· 신규 장비 셋업 및 캘리브레이션 완료
■ 이슈 및 리스크
· 계측 리소스 경합으로 분석 일정 지연 → 예약 선점으로 대응
■ 차주 계획
· 파티클 재현 실험 수행 예정
✅ 완료 조건
3개 섹션 개조식 보고서가 나왔다
톤 조절 요청까지 해봤다
LAB 2-3
영문 메일 — 장비 벤더 문의
⏱ 10분★☆☆
상황만 한국어로 설명하면 정중한 영문 메일이 나옵니다.
📋 시작 프롬프트
장비 벤더 엔지니어에게 보낼 영문 메일을 써줘. 상황: 챔버 압력 센서가 간헐적으로 이상값을 보여서 지난주에 문의했는데 아직 답이 없음. 정중하지만, 다음 주 PM 일정 전에는 꼭 답을 받아야 한다는 긴급함이 전달되게. 제목도 같이. 메일 아래에 한국어 번역도 붙여줘.
📋 이어서 — 뉘앙스 조절
더 부드러운 버전과 더 단호한 버전 두 가지로 만들고, 어떤 상황에 어떤 걸 쓰면 좋을지도 알려줘.
wafermap.csv를 읽어서 웨이퍼 맵으로 보여주는 wafermap.html을 만들어줘. 요구사항:
1. 다이를 격자로 그리고 bin별 색 구분 (bin1은 차분하게, 불량은 눈에 띄게)
2. 마우스를 올리면 좌표와 bin 표시
3. 우측에 bin별 개수와 수율(%) 요약
4. bin 번호를 클릭하면 해당 bin만 하이라이트
불량이 어디에 몰려 있는지 패턴도 한 줄로 말해줘.
spc.csv로 X-bar 관리도를 spc.html로 만들어줘.
1. CL/UCL/LCL(±3σ)과 1σ, 2σ 구역 표시
2. Western Electric rules 1~4 검사, 위반 점은 빨갛게
3. 아래에 위반 목록 표 (룰 번호 / 위치 / 설명)
목표값은 50.0이야.
② yield.csv로 dashboard.html을 시작하자. 먼저 주차별 수율 트렌드 차트만 (product별 색 구분). 다른 건 아직 만들지 마.
③ 좋아. 이제 그 아래에 불량 bin 파레토 차트를 추가해줘. 기간을 선택하면 그 기간 기준으로 갱신되게.
④ 마지막으로 상단에 KPI 카드(이번주 수율, 전주 대비, 최다 불량 bin)를 얹고 배치를 정리해줘.
🚀 더 해보기
"경영진 요약 한 문단을 자동 생성해서 맨 위에"
👀 예상 결과
✅ 완료 조건
②→③→④ 단계마다 열어서 확인했다
어떤 제품/bin이 문제인지 대시보드에서 읽힌다
🚑 막혔다면
③에서 ②가 망가짐 → "트렌드 차트가 깨졌어, 둘 다 되게 고쳐줘"
LAB 4-3
공정 계산기 3종 세트
⏱ 15분★★☆
엑셀 구석에 있던 계산식을 팀이 같이 쓰는 도구로. 식은 여러분이 제공합니다.
📋 시작 프롬프트
공정 계산기 모음을 calc.html 파일 하나로 만들어줘. 탭 3개:
1. 포토 해상도: Rayleigh 식 (R = k1·λ/NA, DOF = k2·λ/NA²). λ는 193/248/365nm 선택, k1·NA는 입력
2. 면저항: 4-point probe (Rs = 4.532×V/I), 두께 입력 시 비저항까지
3. 식각 시간: 목표 깊이, 식각 속도, 오버에치(%) → 필요 시간
각 탭에 식과 변수 설명도 같이.
🚀 더 해보기
내 업무의 계산식을 4번째 탭으로 (증착·임플란트·CMP…)
👀 예상 결과
해상도 · 면저항 · 식각 시간
λ = 193 nm
NA = 1.35
k1 = 0.30
→ R = 42.9 nm · DOF = k2·λ/NA²
값을 바꾸면 결과 즉시 갱신 + 식 표시
✅ 완료 조건
세 계산기 동작
아는 값으로 검산 — "교과서 예시로 검증해서 표로 보여줘"
💡 포인트
도메인 공식은 프롬프트에 직접 — 정확도 급상승
LAB 4-4
보너스 — 결함 패턴 시뮬레이터
⏱ 여유 있으면★★★BONUS
결함 패턴을 만들고, 구분하는 로직까지 — 퀴즈 게임으로.
📋 프롬프트 ① — 시뮬레이터
웨이퍼 결함 패턴 시뮬레이터를 defect.html로 만들어줘. 버튼을 누르면 random / scratch(직선형) / edge ring / center cluster 4가지 중 하나로 결함 맵을 생성해서 보여주는 것. 패턴 이름은 숨겨놔.
📋 프롬프트 ② — 자동 분류 퀴즈
"판별" 버튼을 추가해줘. 결함 분포를 분석해 4가지 중 뭔지 추정하고 근거 지표(가장자리 비율, 직선성, 중심 밀집도)와 함께 표시. 내가 먼저 눈으로 맞히고 답을 확인하는 퀴즈 모드로.
👀 예상 결과
✅ 완료 조건
4가지 패턴이 그럴듯하게 생성된다
판별 10회 테스트 — 몇 승 몇 패?
💡 포인트
판별이 틀리면 틀린 사례를 보여주며 지표를 고치게 — 이게 알고리즘 튜닝
PART 4 · WRAP-UP
도메인 지식 × AI = 여러분의 무기
🧠 여러분이 낸 것
WE rules라는 개념, Rayleigh라는 식
뭐가 정상이고 뭐가 이상한지의 감각
🤖 AI가 낸 것
구현 코드, 차트·UI 전부
지치지 않는 반복 수정
같은 AI라도 도메인 전문가가 시키면 결과가 다릅니다. 개발자가 되는 게 아니라, 더 강한 엔지니어가 되는 겁니다.
5
PART 5 · 16:10–17:00
매주 반복하는 그 일
한 번 만들어두면 계속 일하는 것들. 파일 정리, 리포트 생성, 요약 메일 — 수동 업무를 은퇴시키는 시간.
🎯 반복 업무 → 스크립트 → 나만의 스킬🧪 실습 4개 (+보너스) · 스킬 만들기
HOW TO SPOT
자동화 대상 찾기 — 셀프 문진표
이 중 하나라도 "예"라면 후보
매주/매일 같은 순서로 클릭하는 일이 있다
파일 열어 복사–붙여넣기–저장을 반복한다
"이건 인턴 시키면 되는데" 싶은 일이 있다
자동화 설계 공식 — 한 문장
"__(입력)__을 받아서 __(규칙)__대로 처리하고 __(출력)__을 만들어줘"
못 채우겠으면 AI에게 같이 채워달라고 하면 됩니다.
💭 잠깐: 지금 내 업무에서 후보 하나를 적어두세요 — 마지막 파트에서 그걸 만듭니다.
LAB 5-1
파일 100개 일괄 정리
⏱ 15분★★☆
이름 규칙이 엉망인 파일 무더기를 규칙대로 정리 — 손으로 1시간, 시키면 1분.
📋 프롬프트 ① — 난장판 만들기
연습용 폴더 messy_data를 만들고 가짜 측정 파일 100개를 만들어줘. 파일명 규칙이 제각각이게: "LOT123_20260701.csv", "20260702-lot124.csv", "측정결과_lot125 (final).csv" 같은 식으로 뒤죽박죽. 내용은 아무 숫자 몇 줄이면 돼.
📋 프롬프트 ② — 정리 (계획 먼저!)
messy_data의 파일들을 "LOT번호_날짜.csv" (예: LOT123_2026-07-01.csv) 형식으로 통일해서 clean_data 폴더로 정리하려고 해. 먼저 변경 계획표만 보여줘. 아직 실행하지 마. 원본은 건드리지 말고 복사본으로만 작업해.
weekly 폴더의 CSV(mon~fri)를 전부 읽어 주간 리포트를 만드는 스크립트를 작성해줘. 실행하면 weekly_report.html이 생성되는 것.
1. 장비별 주간 가동률 표 (최악 장비 강조)
2. 일별 에러 추이 차트
3. "특이사항" 자동 요약 문단
다음 주에 파일만 갈아끼우면 재사용되게. 실행 방법도 알려줘.
tool.log를 읽어서 "야간 장비 현황 아침 브리핑" 메일 초안을 만드는 스크립트를 작성해줘. 실행하면 briefing.txt가 생성되는 것. 내용: 제목 한 줄 / 밤사이 ERROR 요약(시각·모듈·횟수) / 반복 패턴 경고 / 조치 필요 체크리스트. 팀장님께 보내는 톤으로 5줄 이내.
🚀 더 해보기
"ERROR 0건인 날은 축하 멘트로" / HTML 메일 버전
👀 예상 결과
제목[야간 브리핑] ERROR 8건 — VACUUM 반복 이슈 확인 필요
요약02~04시 PG-2 게이지 타임아웃 3회 반복 발생
조치☐ PG-2 커넥터 점검 ☐ 재발 시 게이지 교체
✅ 완료 조건
briefing.txt가 그대로 보내도 될 수준
로그를 바꿔 재실행해도 동작
💡 포인트
오늘 배운 것들이 레고처럼 조립됨 — 파싱+요약+문체
LAB 5-4
엑셀 요약 자동화 .xlsx
⏱ 15분★★☆
엔지니어가 하루 종일 사는 곳 — 엑셀 파일을 읽고, 집계하고, 서식까지 갖춰 다시 저장.
lot_summary.xlsx의 raw 시트를 읽어서 summary 시트를 채워줘. 제품(product)별로 ①랏 수 ②평균 수율 ③평균 CD ④총 결함 수를 집계한 표로. 수율이 가장 낮은 제품은 셀을 빨갛게 강조하고, 헤더는 굵게. 결과를 lot_summary_done.xlsx로 저장해줘.
📋 이어서 — 재사용 가능하게
다음 달 파일도 같은 형식이면 그대로 돌아가게 스크립트로 만들어줘. 실행 방법이랑, raw 시트 컬럼이 바뀌면 어디를 고치면 되는지도 알려줘.
specs 폴더 문서들만 근거로 답해줘. 근거 문서명과 해당 구절을 반드시 인용하고, 문서에 없으면 "문서에 없음"이라고 답해.
Q1. 식각 공정 압력 상한과 그 근거는?
Q2. 인터락이 걸리는 조건을 전부 나열해줘.
Q3. 문서들 사이에 서로 모순되는 내용이 있는지 찾아줘.
🚀 더 해보기
"신입용 요약 카드 한 장으로 만들어줘"
👀 예상 결과
Q3. 모순되는 내용 있어?
있습니다. 공정 중단 압력이 120 mTorr인데 안전 인터락은 100 mTorr에서 이미 작동합니다. — etch_spec.md §3 vs safety_spec.md §3
✅ 완료 조건
답변마다 출처 인용이 붙는다
숨어 있는 모순을 찾아냈다
💡 포인트
문서 간 모순 찾기 — 사람이 제일 못하고 AI가 제일 잘하는 일
LEVEL UP · Claude Code
잘 먹힌 프롬프트, 나만의 스킬로 저장
오늘 여러 번 재사용한 그 프롬프트, 매번 다시 설명하지 마세요. 스킬(Skill)로 저장하면 다음부턴 /이름 한 줄. 팀 공유도 파일 하나. 프롬프트 자동화의 끝판입니다.
✨잘 되는 프롬프트
오늘 반복해서 쓴 그것
→
📄SKILL.md로 저장
.claude/skills/이름/
→
⌨️/이름 호출
상황 맞으면 자동으로도
→
👥팀 공유
git에 커밋하면 끝
스킬은 SKILL.md 파일 하나입니다 — 맨 위에 description(언제 쓰는지), 그 아래에 지시문.
description이 방아쇠: 그 상황이 오면 Claude가 알아서 이 스킬을 꺼내 씁니다. /이름으로 직접 부를 수도 있고요.
위치가 범위를 정합니다 — .claude/skills/(이 프로젝트만) vs ~/.claude/skills/(내 모든 프로젝트). 다른 도구 필요 없이 파일만 만들면 됩니다.
LAB 5-6
나만의 스킬 만들기
⏱ 15분★★☆재사용
매주 쓰는 주간 보고서 프롬프트를 /weekly-report 스킬로. 파일은 Claude Code에게 만들어달라고 하면 됩니다.
🤖 ① Claude Code에게 스킬로 만들어달라 하기
오늘 내가 여러 번 쓴 이 프롬프트를 재사용할 수 있게 스킬로 만들어줘. .claude/skills/weekly-report/SKILL.md 로 저장하고, description에는 "주간 보고 요청 시 자동으로 불려야 한다"는 걸 구체적으로 써줘.
프롬프트: 이번 주 한 일 목록을 주면 ①3줄 요약 ②주요 성과 ③다음 주 계획 형식의 한국어 주간 보고서로 정리해줘.
📄 ② 만들어질 SKILL.md (예시)
---
name: weekly-report
description: 주간 보고서 초안 생성. 이번 주 한 일 목록을 주면 3줄 요약·성과·다음 주 계획으로 정리. "주간 보고", "이번 주 리포트" 요청 시 사용.
---
## 하는 일
아래 형식으로 한국어 주간 보고서를 작성한다.
1. 3줄 요약
2. 주요 성과 (불릿)
3. 다음 주 계획 (불릿)
정보가 부족하면 먼저 되묻는다.
⚙️ ③ 확인하고 호출
/skills 로 목록에 떴는지 확인
새 대화에서 /weekly-report 입력 — 또는 "주간보고 써줘"라고만 해도 자동 호출
fab_runs.csv를 드래그&드롭으로 업로드하면 분석해주는 대시보드를 fab.html 파일 하나로 만들어줘. 라이브러리는 CDN으로 불러와도 돼. 먼저 업로드 영역 + CSV 파싱 + "상단 KPI 카드(총 런 수, 전체 fail율, 최다 fail 장비)"까지만. 다른 건 아직 만들지 마.
📋 프롬프트 ② → ③ — 쌓기
② 장비별 fail율 막대 차트를 추가하고, fail율이 높은 장비는 빨갛게. 이상 장비가 있으면 한 줄로 짚어줘.
③ 날짜 범위 슬라이더와 product 필터를 추가하고, 필터를 바꾸면 모든 차트가 같이 갱신되게. 장비를 클릭하면 그 장비의 런만 표로 드릴다운.
🚀 더 해보기
"필터 상태를 URL에 저장해서 링크 공유되게" / PNG로 내보내기
👀 예상 결과
✅ 완료 조건
파일을 끌어다 놓으면 KPI·차트가 뜬다
필터·드릴다운이 동작한다
숨은 문제 장비를 찾았다 (fail율 급등)
💡 포인트
골격 → 차트 → 인터랙션 순서대로 쌓기 (한 방에 X)
LAB A-2
SQLite + CRUD 관리 앱 HIGHLIGHT
⏱ 35분★★★
브라우저 안에 진짜 SQLite DB를 띄우고, 설비 자산을 CRUD하는 SPA를 만듭니다.
브라우저에서 도는 SQLite로 설비 자산 관리 앱을 assets.html 파일 하나로 만들려고 해. sql.js(SQLite WASM)를 CDN에서 불러와. 먼저 pm_assets.csv를 업로드하면 assets 테이블을 만들어 넣고, 목록을 표로 보여주는 것까지. 컬럼: asset_id, name, type, location, install_date, last_pm, pm_interval_days, status.
📋 프롬프트 ② — CRUD + 지속성
이제 CRUD를 완성해줘.
1. 추가/수정/삭제 폼 (수정은 행 클릭)
2. type·status 필터와 이름 검색
3. last_pm + pm_interval_days로 "다음 PM 예정일"을 계산해 보여주고, 지난 건 빨갛게
4. DB를 .sqlite 파일로 내보내기 / 다시 불러오기
5. 새로고침해도 유지되게 (localStorage)
웨이퍼 맵 두 개를 비교하는 diff 뷰어를 wdiff.html 파일 하나로 만들어줘. wafermap_A.csv(before)와 wafermap_B.csv(after)를 각각 업로드하면:
1. 왼쪽에 A, 오른쪽에 B 웨이퍼 맵
2. 가운데에 diff 맵 — B에서 새로 불량이 된 die는 빨강, 회복된 die는 초록, 나머지는 흐리게
3. 새 불량 개수와 위치, 그리고 "패턴이 있으면" 한 줄 코멘트
4. 슬라이더로 A↔B 오버레이 페이드
🚀 더 해보기
여러 스텝(A→B→C) 연속 비교 / 새 불량 die 목록 CSV 내보내기
👀 예상 결과
✅ 완료 조건
세 개 맵(A · diff · B)이 나란히 뜬다
B에 새로 생긴 불량 패턴을 찾았다 — 무슨 모양?
💡 포인트
"before/after 비교"는 계측·수율·불량 어디에나 재사용되는 패턴
DEPLOY · GitHub Pages
만든 앱, 링크 하나로 — 무료로 웹에 올리기
방금 만든 index.html을 내 GitHub 계정 레포에 올리면, 서버도 비용도 없이https://아이디.github.io/레포이름/ 주소가 생깁니다. 팀에게는 링크만 보내면 끝.
📦① 레포 생성
내 계정에 새 저장소 (Public)
→
⬆️② 파일 push
index.html을 main 브랜치로
→
⚙️③ Pages 켜기
Settings ▸ Pages ▸ main · /root
→
🌐④ 공개 URL
1~2분 뒤 접속 가능
배포 방식은 "Deploy from a branch" — main 브랜치의 루트(/)를 그대로 정적 서빙합니다. 빌드 서버도, 파이프라인도 없이 파일 그대로.
한 번 켜두면 이후로는 push만 하면 자동 반영. HTTPS도 자동입니다.
🔒 단, Public 레포는 전 세계에 공개됩니다 — 오늘처럼 합성/더미 데이터만. 사내 데이터는 절대 올리지 않기.
LAB A-4
GitHub Pages로 배포하기
⏱ 15분★★☆
A-1에서 만든 fab.html 대시보드를 진짜 URL로. main 브랜치 루트를 그대로 서빙합니다.
📋 ① 파일 준비 + 올리기 (터미널)
# Pages는 루트의 index.html을 먼저 엶 → 진입 파일 이름을 맞춰준다
cp fab.html index.html
git init
git add index.html
git commit -m "Add fab dashboard"
git branch -M main
# 아래 주소는 방금 GitHub에서 만든 레포로 바꾸기
git remote add origin https://github.com/<아이디>/fab-dashboard.git
git push -u origin main
🤖 또는 Claude Code에게 통째로
이 폴더를 GitHub Pages로 배포하고 싶어. fab.html을 index.html로 복사하고, git 저장소로 초기화해서 커밋해줘. 그다음 GitHub 웹에서 새 레포(Public)를 만들고 Settings에서 Pages를 켜는 방법을 단계별로 알려줘.
⚙️ ② 레포 만들고 Pages 켜기 (웹)
github.com ▸ New repository ▸ 이름 fab-dashboard ▸ Public ▸ Create (README 없이)
레포 ▸ Settings ▸ Pages
Source: Deploy from a branch
Branch: main · 폴더: / (root) ▸ Save
✅ 완료 조건
https://아이디.github.io/fab-dashboard/ 접속 시 대시보드가 뜬다
파일을 고쳐 다시 push하면 URL에 반영된다
DEPLOY · 함정 피하기
SPA를 올릴 때 자주 걸리는 것들
화면이 깨지거나 새로고침에서 404가 뜬다면 십중팔구 아래 셋 중 하나입니다.
🧭 3대 함정
진입 파일 — 루트에 index.html이 없으면 빈 화면/404. 진입 파일은 반드시 이 이름.