📌 태재대학교 (Taejae University) - 국문 신입생 모집 원페이지 랜딩페이지 구축
🔹 프로젝트 개요
🔹 프로젝트 목적
태재대학교는 2023년 개교한 한국 최초의 글로벌 하이브리드 대학으로, 5개국 7개 도시를 순환하며 100% 영어 라이브 토론 수업을 진행합니다. 본 프로젝트는 "출석만 하다 졸업할 거면, 이 대학은 아닙니다."라는 도발적 헤드라인을 축으로, 수능 이후 획일화된 대학 선택지에 의문을 던지고 태재의 4가지 차별점(글로벌 로테이션·토론과 프로젝트·자기설계전공·AI 미래 교육)으로 설득을 완결하는 전환 목적형 원페이지 랜딩페이지를 목표로 했습니다. 정보 나열형 대학 홈페이지와 달리, 스크롤 한 축에 문제 제기 → 반전 → 차별점 증명 → 인재상 → CTA의 서사를 배치해 입학 상담 전환을 유도했습니다.
🔹 핵심 기술 및 구현 기능 (Key Technical Features)
Scroll-driven Narrative Structure (스크롤 서사 구조):
Lenis 관성 스무스 스크롤과 IntersectionObserver 리빌을 결합해 11개 섹션을 하나의 흐름으로 잇고, 히어로 헤드라인은 GSAP 어절 단위 stagger로 등장시켜 첫 화면에서 메시지가 순차적으로 각인되도록 설계했습니다. CSS scroll-behavior와 Lenis의 이중 스무딩으로 발생하던 스크롤 지연은 lerp 튜닝으로 제거했습니다.
Self-hosted Video Player (자체 호스팅 커스텀 비디오 플레이어):
재학생 인터뷰 원본(1080p60·38Mbps·최대 300MB)을 FFmpeg H.264 CRF24·faststart로 재인코딩해 3.7~8.6MB로 축소하고, 유튜브 임베드 없이 자체 호스팅했습니다. 자동재생을 금지하고 포스터 + 재생 버튼으로 시작하며, 재생 후 네이티브 컨트롤(사운드·전체화면)로 전환되는 플레이어를 구현했습니다.
Country Rotation Crossfade (국가별 오버랩 크로스페이드):
글로벌 로테이션 섹션에서 한국·일본·미국·중국·유럽 5개국 사진을 4:3 고정 비율로 겹쳐 3.6초 주기 크로스페이드하고, prefers-reduced-motion을 존중해 모션 민감 사용자에게는 정지 상태로 제공했습니다.
Automated QA Pipeline (Puppeteer 자동 검증 파이프라인):
프로덕션 빌드를 대상으로 5개 뷰포트(1920·1440·768·390·360)에서 콘솔 에러·HTTP 4xx/5xx·가로 오버플로·뷰포트 이탈·깨진 이미지를 자동 점검하고, 주요 텍스트의 배경 대비를 픽셀 단위로 실측해 WCAG AA 통과를 코드로 단언하는 검증 스크립트를 구축했습니다.
🔹 디자인 포인트
🔹 담당 역할