백엔드 엔지니어가 만든 몰입형 프론트엔드 아트, 탄소 자취: 기술과 예술의 만남
백엔드 엔지니어 출신 개발자가 Canvas 2D, WebGL, GSAP, Howler.js, PixiJS 등 프론트엔드 기술을 활용하여 몰입형 인터랙티브 경험(Immersive Interactive Experience) 제작
AI 기반 코드 리뷰, CI/CD 파이프라인 구축, 685개 유닛 테스트(Unit Tests) 및 220개 E2E 테스트(E2E Tests)를 통해 프로덕션 레벨(Production Level)의 애플리케이션 개발
접근성(Accessibility)을 고려한 디자인, WCAG AA(Web Content Accessibility Guidelines AA) 준수 및 reduced motion 지원
12개의 장면(Scene)으로 구성된 내러티브(Narrative)는 탄소 순환(Carbon Cycle)을 은유하며, 각 장면은 이미지, 내레이션, 오디오, 텍스트 효과를 통합
AI를 활용한 이미지 생성, 코드 리뷰, 테스트 자동화 등 개발 생산성(Development Productivity) 향상 및 코드 품질(Code Quality) 확보
5-State Machine 기반 애플리케이션 아키텍처
본 작품은 5-State Machine(Loading → Paused → Scene Active → Transitioning → Credits)을 사용하여 애플리케이션의 전체 흐름을 제어한다. 각 장면(Scene)의 이미지, 내레이션, 오디오, 효과, 전환 설정은 scenes.json 파일에 정의되어 있어, 코드 구조 변경 없이 설정 기반(Configuration-Driven)으로 쉽게 수정 가능하다.
상태 관리(State Management): 각 상태에 따라 오디오, 캔버스 전환, PixiJS 효과, 시머 도트, GSAP 타임라인, 자동 진행 타이머(Auto-Advance Timer) 동기화
PausableTimer 유틸리티: 모든 타이머(Timer)는 일시 중지/재개(Pause/Resume) 로직을 공유하여 장면 간의 누수를 방지
오디오 시스템(Audio System): 각 장면별 감성적인 배경 음악(Ambient Track)을 위해 두 개의 Howler.js 채널(Channel)을 사용, 버퍼 복구(Buffer Recovery)를 위한 3단계 에스컬레이션(Escalation) 구현
결과적으로, 상태 머신(State Machine)은 애플리케이션의 모든 하위 시스템의 동작을 정확하게 제어하며, 유지보수성(Maintainability)과 확장성(Extensibility)을 높인다.
WebGL 및 Canvas 2D를 활용한 시각 효과
Carbon Trace는 4개의 레이어(Layer)로 구성된 시각 스택(Visual Stack)을 사용하며, 각 레이어는 독립적인 렌더링 루프(Rendering Loop)를 가진다.
렌더링 아키텍처(Rendering Architecture): Canvas 2D(이미지), PixiJS/WebGL(디스플레이스먼트 효과), Canvas 2D(시머 트레이스), DOM(텍스트, 캡션, 컨트롤)
PixiJS 효과: WebGL 기반 캔버스에서 픽셀 단위의 장면 애니메이션(Scene Animation) 구현, 오디오 주파수 데이터(Audio Frequency Data)를 기반으로 이펙트 파라미터(Effect Parameter) 조절
시머 트레이스(Shimmer Trace): GIMP로 제작된 PNG 마스크(Mask)를 사용하여 8방향 경로 찾기(Pathfinding)를 통해 움직이는 발광 도트(Glowing Dot) 구현
이러한 레이어 분리를 통해 성능 최적화(Performance Optimization)를 달성하고, WebGL 실패 시에도 정적 이미지로의 점진적 성능 저하(Graceful Degradation)를 지원한다.
GSAP를 활용한 텍스트 애니메이션 및 접근성 구현
본 작품은 GSAP 타임라인(Timeline)을 사용하여 텍스트 애니메이션(Text Animation)을 관리하고, 접근성(Accessibility)을 고려한 설계를 적용했다.
GSAP 타임라인: 캡션(Caption)을 GSAP 타임라인의 콜백(Callback)에 동기화하여 사용자가 일시 중지/재개 시 캡션도 함께 제어
접근성 표준(Accessibility Standards): aria-live="polite" 영역을 사용하여 전체 내레이션 텍스트(Narration Text)를 화면에 알림, 미디어 키보드(Media Keyboard) 네비게이션 지원, reduced motion 지원
WCAG AA 준수(WCAG AA Compliance): AI를 활용하여 접근성 표준을 연구하고 구현, 테스트를 통해 최종 결과 검증
결과적으로, GSAP를 통해 부드러운 애니메이션을 구현하고, 접근성(Accessibility)을 확보하여 더 많은 사용자가 작품을 즐길 수 있도록 한다.
AI 기반 개발 워크플로우 및 CI/CD 파이프라인
Carbon Trace는 AI를 활용한 코드 리뷰(Code Review), 테스트 자동화, CI/CD 파이프라인(CI/CD Pipeline) 구축을 통해 프로덕션 레벨의 개발 프로세스를 구축했다.
AI 활용: Claude Code, Codex, Antigravity, Copilot을 활용한 코드 리뷰, Leonardo.ai를 활용한 이미지 생성
CI/CD 파이프라인: Release Please 및 Cloud Run을 활용하여 각 기능별 배포(Deployment) 및 테스트 자동화
테스트 자동화: 685개의 유닛 테스트(Unit Tests)와 220개의 E2E 테스트(E2E Tests)를 통해 코드 품질(Code Quality) 확보
이러한 과정을 통해 개발 생산성(Development Productivity)을 향상시키고, 안정적인 애플리케이션 배포를 가능하게 한다.
프로덕션 수준의 오디오 시스템 설계
Carbon Trace는 각 장면의 감성적인 분위기를 조성하기 위해 정교한 오디오 시스템을 구축했다.
Howler.js 채널: 두 개의 독립적인 Howler.js 채널을 사용하여 배경 음악(Ambient Track)과 내레이션(Narration)을 동시 재생
오디오 믹싱(Audio Mixing): 각 사운드 효과의 볼륨(Volume) 차이를 보정하기 위해 런타임(Runtime)에서 믹싱(Mixing) 기능 구현
버퍼 복구(Buffer Recovery): nudge, reload, exhaustion의 3단계 버퍼 복구 전략(Buffer Recovery Strategy)을 통해 오디오 재생 중단 방지
결과적으로, 몰입감(Immersion)을 높이는 데 기여하며, 안정적인 오디오 재생을 보장한다.
