Vercel Ship 2025 컨퍼런스 플랫폼 설계와 구현

Vercel의 Brand, Engineering, Marketing 팀이 Ship 2025 컨퍼런스 플랫폼을 Next.js + Postgres + Payload CMS로 재구축한 과정을 다룬다. 3D 페로플루이드 애니메이션에 ray-marching 렌더링을 적용하고, ISR + PPR + `after()` 전략으로 성능과 동적 콘텐츠를 동시에 확보했다.

핵심 포인트

스택 단순화: 기존 분산된 외부 도구와 캐시 레이어를 Next.js + Postgres + Payload CMS로 통합. 데이터 중복/싱크 로직/엔지니어링 개입 없이 콘텐츠 업데이트 가능.
3D 렌더링: 메시 기반 시뮬레이션 대신 ray-marching 채택. 폴리곤 없는 매끄러운 페로플루이드 표면 구현. 유체 시뮬레이션 결과를 셰이더에서 계산 후 ray-marching 씬에 입력.
ISR + PPR: CMS 편집 시 on-demand 캐시 무효화. 홈페이지는 빌드 시 정적 생성(PPR) + 동적 CTA/로그인 상태만 클라이언트 렌더링.
`after()` 함수로 확인 이메일·등록 로그 등 체크아웃 후 작업을 비동기 처리해 응답 속도 유지.
v0로 UI 컴포넌트(등록 플로우, 일정, 갤러리)를 프롬프트로 직접 생성해 목업→코드 전환 없이 실제 컴포넌트 핸드오프.

상세 정리

비주얼 방향: Ship 2024 자기 파티클 미학을 발전시켜 페로플루이드(NASA 개발 자성 액체)를 컨셉 채택. Flux, Google Veo 2, Runway, Ideogram으로 1만 5천장 이상 이미지/영상 생성 후 반복 선별.
디자인 문제 해결: 초기 페로플루이드 시각화가 일부 시청자 trypophobia 반응 유발. 학습된 AI 모델로 형태 제어·반복해 스파이크 제거 후 메탈릭 액체 미학으로 수렴.
3D 구현 발전 단계: 메시 변위 시뮬레이션 → 병렬 유체 시뮬레이션 → ray-marching 포털 기법(중앙 프리즘 충돌 감지 포함) 순으로 진화.
렌더링 파이프라인: 유체 시뮬레이션을 첫 셰이더에서 계산 후 결과를 ray-marching 씬에 입력. 빛이 액체 표면을 통과하는 효과를 폴리곤 없이 구현.
데이터 아키텍처: Payload CMS, Ship 사이트, Vercel 에코시스템을 단일 도메인 공유. 모노레포에서 로고, 디자인 토큰 등 공유 자산 직접 참조.
`use cache` + `cacheLife` 함수로 콘텐츠 타입별 캐시 신선도 개별 조정.
스크롤 애니메이션: Motion for React `useTransform` + sticky 컨테이너 + 커스텀 줌 수학 조합. `mix-blend-mode`로 라이트/다크 섹션 전환. clip-path 대신 사용해 크로스 섹션 호환성 단순화.
이메일: React Email + Payload CMS 통합. 마케팅 팀이 CMS에서 직접 트랜잭션 이메일 미리보기/편집 가능. 엔지니어링 개입 불필요.
로컬 개발 문제: Postgres 세팅·마이그레이션·데이터 시딩 오버헤드가 UI 작업 중 마찰 지점. 자동화 계획 중.

왜 읽나Next.js ISR/PPR/after() 최신 렌더링 전략과 ray-marching 3D 애니메이션을 실제 프로덕션 컨퍼런스 사이트에 적용한 End-to-End 케이스 스터디. 고성능 이벤트 사이트 또는 AI+디자인 워크플로우를 구축하는 팀에게 유용.

Vercel Blog 블로그

원문은 여기서 이어서 읽을 수 있어요

원문 읽기

읽음 (0)

·takedown 요청

Vercel Ship 2025 컨퍼런스 플랫폼 설계와 구현

이 글과 비슷한

Chat SDK의 Discord Components V2 지원 추가

Flags SDK, 플래그 평가 속도 10배 개선

AI로 웹 엔지니어 없이 LINE 앱 안에서 그룹 영상 통화 서비스 만들기