Taejae University (EN)
설명
글로벌 하이브리드 대학 — 영문 유학생 유치 랜딩
기간
May 2026 - Jul 2026
역할
- 영문 랜딩페이지 전체 기획 및 UI/UX 디자인 — 해외 학생 관점의 서사 재설계 포함.
- Next.js 기반 반응형 프론트엔드 퍼블리싱, 크로스페이드·아코디언·기간 비례 비교표 구현.
- 인터뷰 영상 인코딩·이미지 최적화·국기 및 로고 에셋 제작 전담.
- Puppeteer 자동 QA 및 접근성 대비 실측, 2차 클라이언트 피드백 전면 반영.
기술
Next.js 16 (App Router) · React 19 · TypeScript · Tailwind CSS v4
Lenis · GSAP · ScrollTrigger
Supabase · Resend
FFmpeg (H.264 transcoding) · Puppeteer
Anton · Playfair Display · Space Grotesk · Kaushan Script
프로젝트 목적
"The World is Your Campus." 태재대학교는 5개국 7개 도시를 순환하며 100% 영어로 수업하는 한국 최초의 글로벌 하이브리드 대학입니다. 이 페이지는 해외 지원을 희망하는 외국인 학생을 대상으로, 대학은 더 이상 '장소(place)'가 아니라 '경로(trajectory)'라는 명제를 핵심 서사로 삼았습니다. 국문판과 동일한 커리큘럼을 다루면서도, 해외 학생이 가장 알고 싶어 하는 '이 도시 이동이 현실적으로 몇 년이 걸리는가'에 답하는 기간 비례 세로 타임라인 비교표를 설계해, 전통적인 진로(학부 4년 + 워킹홀리데이 + 어학연수 + 각국 거주, 8년+)와 태재의 4년을 맞붙여 보여준 것이 이 페이지의 핵심 설득 장치입니다.
범위
- · 해외 지원 희망 유학생 타깃 영문 랜딩 기획 및 UI/UX 디자인
- · 반응형 프론트엔드 퍼블리싱 (Next.js 16 · React 19 · TypeScript)
- · Lenis·GSAP 스크롤 인터랙션 구현
- · 사진 크로스페이드 히어로·아코디언 상세 구조·기간 비례 세로 타임라인 비교표 구현
- · 자체 호스팅 인터뷰 영상 인코딩
- · 지원 문의 폼(Resend·Supabase) 연동
주요 기술 특징
기간 비례 타임라인 비교표
- · "How Long Would It Take to Do All This?" 섹션에서 태재 4년과 전통 진로 8년+를 2열 기둥으로 대조합니다.
- · CSS 변수 `--span`(6개월 단위) × `--unit`을 곱해 각 학기 바의 높이를 실제 기간에 비례하도록 바인드했습니다. flex-grow 방식에서 발생하던 '항목 수가 많은 컬럼이 기간과 무관하게 오히려 더 길어지는' 역전 현상을 구조적으로 제거했습니다.
사진 오버랩 히어로
- · 히어로 하단에 한옥 캠퍼스와 학생 생활 컷 6장을 겹쳐 크로스페이드합니다.
- · 6장×3.5초 구조에서 keyframe hold 구간이 부족해 매 주기 배경이 비쳐 보이던 문제를 hold 16.7% + `linear` 이징으로 해결하고, 24개 샘플 전 구간에서 opacity 합이 1.00으로 유지되도록 산정했습니다.
실제 높이 계산 아코디언
- · 아코디언 본문을 `max-height` 고정값으로 여는 방식은 비교표가 추가되면서 본문 하단이 잘렸습니다.
- · `ResizeObserver`로 실제 `scrollHeight`를 재어 max-height를 동적으로 설정하고 이미지 로드·리사이즈 시 재계산하도록 전환해, 본문 잘림을 0으로 만들었습니다.
무음 자동재생 인터뷰 영상
- · 해외 학생 인터뷰 4편(원본 458MB)을 오디오 트랙 제거 + 720p CRF26 faststart로 2.0~3.4MB까지 축소했습니다.
- · 질문과 답변 자막이 영상에 구워져 있는 소스 특성을 활용해 무음이어도 메시지가 전달되도록 하고, IntersectionObserver로 스크롤 진입 시에만 재생·이탈 시 정지하도록 제어했습니다.
Puppeteer 자동 검증 파이프라인
- · 프로덕션 빌드를 대상으로 320~1920px 전 구간에서 콘솔 에러·HTTP 오류·가로 오버플로·뷰포트 이탈 요소·아코디언 잘림을 자동 점검합니다.
- · 내비게이션 상태별(상단·스크롤다운·스크롤업) 동작과 텍스트 대비를 픽셀 단위로 실측합니다.
디자인 포인트
타이포그래픽 포스터 조판
Anton의 압축된 대문자와 Playfair Display 이탤릭을 대조시키고, 다크 배경 전면 포스터 섹션을 두 곳에 배치해 스크롤 리듬의 정점을 만들었습니다. 헤드라인은 각 행을 block으로 고정해 화면 폭에 따라 줄 수가 흔들리지 않도록 했습니다.
경복궁 일출 CTA
마지막 CTA는 경복궁과 남산이 겹치는 일출 사진 위에 "At Taejae University, design your own future."를 얹어, 동양적 모티프와 대학의 메시지를 한 화면에 결합했습니다. 라디얼 스크림 범위를 키워 하늘과 남산은 그대로 노출하면서도 헤딩 대비 8.68:1을 확보했습니다.
브랜드 퍼플 시스템
해외 사이트 톤에 맞춰 기존 단청 레드를 퍼플(#6C27D8) 기반으로 재조정하고, 배경은 오프화이트(#F1F4F2)로 대비시켜 에디토리얼 무드를 유지했습니다.
일관된 미디어 프레이밍
아코디언마다 라벨을 헤딩 1행으로 승격시키고 이미지 그림자를 제거해, 사진과 영상이 본문과 같은 평면에 놓이도록 정리했습니다.