Taejae University (KR)
설명
글로벌 하이브리드 대학 — 국문 신입생 모집 랜딩
기간
May 2026 - Jul 2026
역할
- 국문 랜딩페이지 전체 기획 및 UI/UX 디자인 — 섹션 서사 구성·타이포 시스템·컬러 운용.
- Next.js 기반 반응형 프론트엔드 퍼블리싱 및 스크롤·크로스페이드·비디오 플레이어 구현.
- 영상 트랜스코딩·이미지 최적화(webp)·공식 CI 적용 등 에셋 파이프라인 전담.
- Puppeteer 자동 QA 및 접근성 대비 검증, 2차 클라이언트 피드백 전면 반영.
기술
Next.js 16 (App Router) · React 19 · TypeScript · Tailwind CSS v4
Lenis · GSAP · ScrollTrigger
Supabase · Resend
FFmpeg (H.264 transcoding) · Puppeteer
Pretendard · Nanum Brush Script
프로젝트 목적
"출석만 하다 졸업할 거면, 이 대학은 아닙니다." 태재대학교는 2023년 개교한 한국 최초의 글로벌 하이브리드 대학으로, 5개국 7개 도시를 순환하며 100% 영어 라이브 토론 수업을 진행합니다. 이 페이지는 국내 수험생을 대상으로 한 전환 목적형 원페이지 랜딩입니다. 정보를 나열하는 대학 홈페이지와 달리, 수능 이후 획일화된 대학 선택지에 의문을 던지는 도발적 헤드라인을 축으로 문제 제기 → 반전 → 4가지 차별점 증명(글로벌 로테이션·토론과 프로젝트·자기설계전공·AI 미래 교육) → 인재상 → CTA를 스크롤 한 축에 배치했습니다. 입학 상담 폼에 도달했을 때 설득이 이미 끝나 있는 구조입니다.
범위
- · 국내 수험생 타깃 신입생 모집 원페이지 랜딩 기획 및 UI/UX 디자인
- · 반응형 프론트엔드 퍼블리싱 (Next.js 16 · React 19 · TypeScript)
- · Lenis·GSAP 스크롤 인터랙션 구현
- · 공식 캠퍼스 영상 자체 호스팅 인코딩 및 커스텀 비디오 플레이어
- · 브랜드 공식 CI 적용
- · 상담 문의 API(Resend·Supabase) 연동
주요 기술 특징
스크롤 서사 구조
- · Lenis 관성 스무스 스크롤과 IntersectionObserver 리빌을 결합해 11개 섹션을 하나의 흐름으로 이었습니다.
- · 히어로 헤드라인은 GSAP 어절 단위 stagger로 등장시켜, 첫 화면에서 메시지가 순차적으로 각인되게 했습니다.
- · CSS `scroll-behavior`와 Lenis의 이중 스무딩으로 발생하던 스크롤 지연은 한쪽을 걷어내는 대신 `lerp` 튜닝으로 제거했습니다.
자체 호스팅 커스텀 비디오 플레이어
- · 재학생 인터뷰 원본(1080p60·38Mbps·최대 300MB)을 FFmpeg H.264 CRF24·faststart로 재인코딩해 3.7~8.6MB로 축소하고, 유튜브 임베드 없이 자체 호스팅했습니다.
- · 자동재생을 금지하고 포스터 + 재생 버튼으로 시작하며, 재생 후 네이티브 컨트롤(사운드·전체화면)로 전환됩니다.
국가별 오버랩 크로스페이드
- · 글로벌 로테이션 섹션에서 한국·일본·미국·중국·유럽 5개국 사진을 4:3 고정 비율로 겹쳐 3.6초 주기로 크로스페이드합니다.
- · `prefers-reduced-motion`을 존중해 모션 민감 사용자에게는 정지 상태로 제공합니다.
Puppeteer 자동 검증 파이프라인
- · 프로덕션 빌드를 대상으로 5개 뷰포트(1920·1440·768·390·360)에서 콘솔 에러·HTTP 4xx/5xx·가로 오버플로·뷰포트 이탈·깨진 이미지를 자동 점검합니다.
- · 주요 텍스트의 배경 대비를 픽셀 단위로 실측해, WCAG AA 통과를 가정이 아니라 코드로 단언합니다.
디자인 포인트
공식 CI 정합
대학 공식 로고 킷의 좌우조합 기본형 SVG를 원본 그대로 적용하고, 브랜드 퍼플(#502880)을 메인·틸(#18A090)을 보조 포인트로 운용해 대학 브랜드 가이드와 웹 디자인을 일치시켰습니다.
에디토리얼 포스터 조판
Pretendard Black 기반 대형 한글 디스플레이 타이포에 자간 -0.055em·행간 1.29의 조판 규칙을 세워, 그래피티 배경 사진 위에서도 헤드라인이 하나의 덩어리로 읽히게 했습니다.
대비 검증 기반 사진 운용
실사 배경 위 흰 텍스트마다 스크림 그라데이션을 국소 설계하고 대비를 실측(히어로 6.13:1, CTA 슬로건 5.48:1)해, 사진의 색과 분위기를 살리면서 가독성을 확보했습니다.
붓글씨 강조
포스터 밴드 섹션의 핵심 키워드(실력·경험·경쟁력)를 Nanum Brush Script 코랄 붓글씨로 기울여 배치해, 정제된 그리드 위에 손글씨의 감정을 얹었습니다.