📌 Taejae University (태재대학교) - 해외 지원자 유치 영문 원페이지 랜딩페이지 구축
🔹 프로젝트 개요
🔹 프로젝트 목적
태재대학교는 5개국 7개 도시를 순환하며 100% 영어로 수업하는 한국 최초의 글로벌 하이브리드 대학입니다. 본 프로젝트는 해외 지원을 희망하는 외국인 학생을 대상으로, "The World is Your Campus" — 대학은 더 이상 '장소(place)'가 아니라 '경로(trajectory)'라는 명제를 핵심 서사로 삼았습니다. 국문판과 동일한 커리큘럼을 다루면서도, 해외 학생이 가장 알고 싶어 하는 '이 도시 이동이 현실적으로 몇 년이 걸리는가'에 답하는 기간 비례 세로 타임라인 비교표를 설계해, 전통적인 진로(학부 4년 + 워킹홀리데이 + 어학연수 + 각국 거주)와 태재의 4년을 맞붙여 보여준 것이 이 페이지의 핵심 설득 장치입니다.
🔹 핵심 기술 및 구현 기능 (Key Technical Features)
Duration-proportional Timeline Chart (기간 비례 타임라인 비교표):
"How Long Would It Take to Do All This?" 섹션에서 태재 4년과 전통 진로 8년+를 2열 기둥으로 대조합니다. CSS 변수 --span(6개월 단위) × --unit을 곱해 각 학기 바의 높이를 실제 기간에 비례하도록 바인드해, flex-grow 방식에서 발생하던 '항목 수가 많은 컬럼이 오히려 더 길어지는' 역전 현상을 구조적으로 제거했습니다.
Photo Crossfade Hero (사진 오버랩 히어로):
히어로 하단에 한옥 캠퍼스와 학생 생활 컷 6장을 겹쳐 크로스페이드합니다. 6장×3.5초 구조에서 keyframe hold 구간이 부족해 매 주기 배경이 비쳐 보이던 문제를 hold 16.7% + linear 이징으로 해결하고, 24개 샘플 전 구간에서 opacity 합이 1.00으로 유지되도록 산정했습니다.
Self-measuring Accordion (실제 높이 계산 아코디언):
아코디언 본문을 max-height 고정값으로 여는 방식은 비교표가 추가되면서 본문 하단이 잘렸습니다. ResizeObserver로 실제 scrollHeight를 재어 max-height를 동적으로 설정하고 이미지 로드·리사이즈 시 재계산하도록 전환해, 본문 잘림을 0으로 만들었습니다.
Muted Autoplay Interview Videos (무음 자동재생 인터뷰 영상):
해외 학생 인터뷰 4편(원본 458MB)을 오디오 트랙 제거 + 720p CRF26 faststart로 2.0~3.4MB까지 축소했습니다. 질문과 답변 자막이 영상에 구워져 있는 소스 특성을 활용해 무음이어도 메시지가 전달되도록 하고, IntersectionObserver로 스크롤 진입 시에만 재생·이탈 시 정지하도록 제어했습니다.
Automated QA Pipeline (Puppeteer 자동 검증 파이프라인):
프로덕션 빌드를 대상으로 320~1920px 전 구간에서 콘솔 에러·HTTP 오류·가로 오버플로·뷰포트 이탈 요소·아코디언 잘림을 자동 점검하고, 내비게이션 상태별(상단·스크롤다운·스크롤업) 동작과 텍스트 대비를 픽셀 단위로 실측합니다.
🔹 디자인 포인트
🔹 담당 역할