AI Coding Agent를 활용해 2D에서 3D로 리뉴얼한 인터랙티브 ASMR 웹서비스
Overview
모닥불, 달빛호수, 불꽃놀이, 오로라 4개 3D 장면 제공
드래그와 휠로 장면을 둘러보고 확대 및 축소
장면별 환경음 재생과 음량 조절
Technology
1인 개발이라 구현은 기능 단위로 맡기고, 요구사항과 기술 결정, 결과 검증에 집중했습니다. 스타일과 폴더 구조 규칙, 결정 근거와 성능 측정 결과를 문서로 남겨 에이전트가 작업해도 같은 기준을 유지하도록 했습니다.
카메라, 원근 투영, 조명 등 3D 기반 기능을 활용해 4개 장면을 빠르게 구성했습니다. 드래그로 중심점을 기준으로 카메라를 회전시키고, 휠과 핀치로 거리를 조절하는 시점 조작을 구현했습니다. 움직임은 프레임 속도와 무관하게 부드럽게 보간하고, 카메라가 지면 아래로 내려가지 않도록 제한했습니다.
장면마다 독립 URL과 제목, 소개, FAQ가 검색 엔진에 노출되도록 빌드 시 HTML과 메타데이터를 생성했습니다. 로그인 등 서버 기능이 없어 Static Export로 정적 파일만 배포해 서버 운영 부담을 없앴습니다.
장면마다 환경음을 재생하고 음량을 조절해, 시각과 함께 소리로도 휴식하는 경험을 구성했습니다. 단순 반복 재생과 달리, 음원의 끝과 시작을 2초간 겹쳐 이어 소리가 끊기지 않도록 구현했습니다.
장면 소개 글을 장면 ID 기준의 Record 타입으로 정의해, 장면을 추가하고 소개 글을 빠뜨리면 컴파일 단계에서 바로 드러나도록 했습니다. 한국어와 영어 공간 목록도 같은 Space 타입을 따르도록 강제해 두 언어의 데이터 형태가 어긋나지 않게 했습니다.
장면 위에 떠 있는 컨트롤 UI를 유틸리티 클래스로 작성하고, 장면별 색상을 테마 토큰으로 정의해 일관된 화면을 유지했습니다.
Static Export로 만든 정적 결과물을 서버 없이 그대로 배포했습니다. 정적 파일을 전 세계 CDN에서 바로 제공해 장면 스크립트와 환경음 파일을 빠르게 불러올 수 있고, 별도 서버 비용 없이 도메인 비용만으로 운영할 수 있었습니다.
Key Points
1920×1080 환경에서 오로라 장면의 시점을 조작하는 동안 화면이 끊기는 현상을 발견했습니다.
측정 결과 전체 프레임 간격 중 약 15%가 정상 간격(16.7ms)의 두 배인 33ms로 늘어나 있었습니다.
조작 중 CPU 처리 시간 p95는 1.7ms였지만, GPU 처리 시간 p95는 17.0ms로 60Hz 예산(16.7ms)을 넘었습니다. 그래서 GPU 작업 중 장면을 한 번 더 그리는 반사 렌더링을 원인으로 판단했습니다.
메인 화면 해상도는 유지한 채 반사 렌더링 해상도만 절반으로 줄였습니다(픽셀 수 1/4).
같은 조건에서 재측정한 결과, 33ms로 늘어난 프레임 간격이 약 15%에서 0%로 줄었습니다.
GPU 처리 시간 p95는 17.0ms에서 11.5ms로 개선됐습니다.
Gallery
