Seoul Meetup Atlas

Overview

Meetup Lab에서 함께한 밋업들에 대한 애정으로 직접 만든 비공식 팬 페이지. 서울에서 열린 170번의 밋업 밤을 홀로그래픽 서울 지도 위에 올리고, 스크롤에 따라 카메라가 각 밋업 장소로 따라 들어가며 이야기를 풀어내는 단일 페이지 3D 비주얼라이제이션이다. 백엔드·DB·API·인증 없이 Next.js 한 페이지와 Three.js 씬만으로 구현했고, 시안 프로젝션 플레이트·구별 외곽선·한강 리본·밋업 비콘·팔로우 카메라까지 직접 만들었다. 공식 서비스(meetuplab.com)와는 무관한 개인 프로젝트다.

My Work

• ▸서울 밋업 장소 데이터 정리와 3D 씬·스크롤 내러티브 기획
• ▸React Three Fiber(drei·postprocessing)로 홀로그래픽 지도와 포스트FX 구현
• ▸데스크톱/모바일 카메라 프레이밍, reduced-motion 폴백, 반응형 타이포 대응
• ▸Vitest 단위 테스트 + Vercel 배포까지 단독 진행

Features

• 스크롤에 따라 각 밋업 장소로 들어가는 시네마틱 팔로우 카메라
• 홀로그래픽 서울 시스템 뷰 (프로젝션 플레이트·구별 라벨·한강 리본)
• 밋업별 내러티브 카드와 인트로/아웃트로 에디토리얼 구성
• WebGL 컨텍스트 손실·저전력 환경 폴백 처리

Highlights

• 서울 170개 밋업 밤을 담은 스크롤 구동 3D 아틀라스
• 홀로그래픽 서울 지도 — 구별 외곽선·한강·밋업 장소 노드·팔로우 카메라
• 백엔드/DB/API 없이 Next.js 16 + React 19 + Three.js 단일 페이지
• reduced-motion·모바일 카메라 프레이밍 등 접근성·반응형까지 직접 설계

Timeline

Tech Stack

</>Next.js 16 · React 19 · Three.js(R3F·drei·postprocessing) · Tailwind v4 · Vercel

Links