개인 프로젝트 · 제작 중

Zeravue

Night Sky, Aurora Night, 깊은 숲의 비까지 확장한 조용한 몰입형 디지털 테마 플랫폼입니다.

서비스 방향

몰입형 테마 플랫폼

프론트엔드

React + Vite

렌더링

Three.js + R3F

배포 흐름

dev / main CI-CD

프로젝트 목표

Zeravue는 기능을 많이 보여주는 대시보드보다, 사용자가 장면을 열고 잠시 머물 수 있는 조용한 몰입 공간을 목표로 합니다. Night Sky를 기준 테마로 삼고, Aurora Night와 깊은 숲의 비까지 확장하면서도 한 제품처럼 읽히는 감상 경험을 만드는 데 집중했습니다.

프론트엔드의 감상 흐름, 3D 장면 렌더링, FastAPI 백엔드, 익명 방문/세션 분석, Docker/Nginx/GitHub Actions 배포를 하나의 제품 구조로 연결했고, dev/main 브랜치 분리와 운영 배포 안정화도 함께 다뤘습니다.

구현 포인트

몰입형 테마 뷰어

전체 화면 감상 흐름을 우선하고, 감상 중에는 제어 UI를 최소화해 장면 자체가 먼저 보이도록 구성했습니다. 테마마다 개별 연출을 두되, 무드 도크와 하단 조작 규칙은 공통으로 정리해 제품 완성도를 맞췄습니다.

Night Sky 테마

HYG 기반 하늘 장면, 별자리 초점/검색/추적/즐겨찾기, 태양·달·행성 하이라이트, 저장 가능한 스케치 우주 캔버스를 구성했습니다. 단순 정보 도구보다 조용히 머무는 감상 경험으로 다듬는 데 집중했습니다.

Aurora Night 테마

오로라 중심의 파노라마 감상 장면과 레이어드 대기 효과를 구성했고, 직접 생성한 설산 바람 루프 wav를 붙여 화면과 사운드가 같은 장소를 가리키도록 다듬었습니다.

깊은 숲의 비 테마

정글 속 소나기 브리프를 기준으로 사진 베이스 장면, 전용 캔버스 비 레이어, 로컬 빗소리/천둥 샘플을 결합해 별도 분위기 테마를 만들었습니다. 창가 비에서 시작한 아이디어를 더 설득력 있는 방향으로 재설계한 사례이기도 합니다.

분석과 배포 운영

Supabase 기반 익명 방문/세션 분석과 로컬 fallback, Docker Compose, Nginx reverse proxy, GitHub Actions 배포 흐름을 구성했습니다. dev/prod 분리와 main 기준 배포 흐름, 운영 nginx API 프록시 이슈 수정까지 함께 다뤘습니다.

기술 구성

React Vite Three.js React Three Fiber FastAPI HYG Sky Data Web Audio API Supabase Docker Compose Nginx GitHub Actions Oracle Server

배운 점

Zeravue를 다듬어 오면서 단일 기능보다 제품의 감정선과 확장 구조가 더 중요하다는 점을 배웠습니다. 한 테마의 장면, 사운드, 조작 흐름이 같은 방향을 바라보게 만들고, 동시에 운영 배포 안정화까지 챙기면서 풀스택 제품의 균형을 더 깊게 익혔습니다.