Claude Cowork로 대학 학사일정 랜딩페이지를 5분 만에 만들어 Netlify에 배포한 이야기
소개
시도하고자 했던 것과 그 이유를 알려주세요.
매 학기 초, 전주비전대학교 교직원과 학생들에게 학사일정을 안내할 때마다 고민이 있었습니다. 한글(.hwpx) 파일로 된 학사일정표는 정보가 빼곡하지만, 모바일에서 보기 불편하고 한눈에 파악하기 어렵다는 점이었죠.
그래서 이번에 Claude Cowork 모드를 활용해 학사일정 원본 파일(.hwpx)을 분석하고, K-Culture 감성의 모던 테크 랜딩페이지로 변환한 뒤, Netlify에 바로 배포하는 전 과정을 AI와 함께 진행해 봤습니다.
핵심 목표는 세 가지였습니다:
.hwpx 파일을 AI가 직접 파싱 → 수작업 데이터 정리 없이 자동 추출
K-Culture 모던 테크 디자인 → 다크 네온 글래스모피즘 스타일로 세련되게
Netlify 즉시 배포 → index.html 단일 파일로 드래그 앤 드롭 배포
진행 방법
어떤 도구를 사용했고, 어떻게 활용하셨나요?
사용 도구
Claude Cowork (Claude Opus 모델) — 파일 분석, 코드 생성, 디버깅까지 올인원
Netlify — 정적 사이트 무료 배포
Step 1. 학사일정 파일 업로드 및 데이터 추출
.hwpx 파일을 Claude Cowork에 업로드하고 아래 프롬프트를 입력했습니다.
사용 프롬프트:
첨부화일을 분석하여 전주비전대학교 학사일정에 대한 랜딩페이지를
K-Culture 모던 테크한 분위기로 만들어줘
/index.html 로 만들어줘
/netlify 에서 deploy할거야
Claude가 자동으로 수행한 작업:
.hwpx 파일이 ZIP 구조임을 파악하고 내부 XML(section0.xml)에서 텍스트 추출
1학기(1월~7월), 2학기(8월~2월) 전체 일정 데이터를 구조화
휴·보강 계획표까지 완벽하게 파싱
Step 2. K-Culture 모던 테크 랜딩페이지 생성
Claude가 단일 index.html 파일(약 1,800줄)을 생성했습니다.
구현된 디자인 요소:
다크 배경 + 퍼플/핑크/시안 네온 그라디언트
글래스모피즘(반투명 카드) + 부드러운 오브(orb) 애니메이션
그리드 배경 패턴으로 테크 감성 극대화
스크롤 시 요소가 순차적으로 나타나는 reveal 애니메이션
숫자 카운트업 애니메이션 (통계 섹션)
페이지 구성:
Hero 섹션 — 학교명, 학년도 소개 + CTA 버튼
통계 바 — 학기 수, 수업일수, 공휴일 수 등 한눈에
타임라인 — 1학기/2학기 탭 전환식, 월별 이벤트 카드
핵심 일정 — 개강, 시험, 방학 등 놓치면 안 되는 일정 카드
보강 계획 — 휴강일 → 보강일 매핑 표시
푸터 — 학교 홈페이지 링크 포함
Step 3. 내부 링크 이슈 수정
첫 결과물에서 앵커 링크(#schedule, #key-dates)가 제대로 동작하지 않는 문제를 발견했습니다. Claude에게 바로 피드백했더니 모든 내부 링크를 JavaScript scrollToSection() 함수로 전환하여 해결했습니다.
수정 프롬프트:
일정 확인하기와 주요일정 보기 누르면 외부 링크로 넘어가는데 잘 작동이 안되고 있어
Step 4. Netlify 배포
완성된 index.html 파일을 Netlify에 드래그 앤 드롭으로 배포했습니다.
배포 URL: https://jvision-2026.netlify.app/
결과와 배운 점
배운 점과 나만의 꿀팁
1. .hwpx 파일도 AI가 직접 파싱할 수 있다 한글 파일(.hwpx)은 실제로 ZIP 압축 파일이고, 내부에 XML로 텍스트가 저장되어 있습니다. Claude Cowork가 이 구조를 자동으로 파악하고 Python으로 데이터를 추출해 주었습니다. 별도의 변환 작업이 전혀 필요 없었습니다.
2. "K-Culture 모던 테크" 같은 감성 키워드가 효과적 디자인 방향을 구체적인 CSS 속성으로 설명하는 대신, 감성 키워드를 던지니 Claude가 다크 테마 + 네온 그라디언트 + 글래스모피즘이라는 구체적인 디자인 시스템으로 해석해 주었습니다.
3. Netlify 배포를 미리 언급하면 구조가 달라진다 프롬프트에 "Netlify에서 deploy할 거야"라고 명시하니, 외부 라이브러리 의존성 없이 단일 HTML 파일로 완성해 주었습니다. 배포 환경을 미리 알려주는 것이 결과물의 구조를 결정하는 핵심 팁입니다.
4. 시행착오를 바로 피드백하면 빠르게 수정된다 앵커 링크가 작동하지 않는 문제를 "잘 작동이 안되고 있어"라고 한 줄만 피드백했더니, Claude가 원인을 파악하고 JavaScript 스크롤 방식으로 전체 링크를 일괄 수정해 주었습니다.
시행착오
처음에
<a href="#schedule">방식의 앵커 링크가 특정 환경에서 외부 링크처럼 동작하는 문제가 있었습니다. →scrollToSection()JavaScript 함수로 전환하여 해결.hwpx 파일의 날짜 데이터가 XML에서 각 숫자가 개별 요소로 분리되어 있어 파싱이 까다로웠지만, Claude가 패턴을 인식하고 정확하게 재조합해 주었습니다.
앞으로의 계획
학과별 세부 일정을 추가한 버전 제작 예정
구글 캘린더 연동 기능 추가 검토
다른 학교 행정 문서(교육과정표, 시간표 등)도 같은 방식으로 랜딩페이지화 시도 예정
도움 받은 글 (옵션)
Claude Cowork 공식 문서 — Cowork 모드에서 파일 업로드 및 코드 생성 활용법 참고
Netlify 공식 문서 — 정적 사이트 드래그 앤 드롭 배포 방법
전체 소요 시간: 약 5분 (파일 업로드 → 랜딩페이지 생성 → 버그 수정 → Netlify 배포)
