# 예산이나 개발자 없이 구현한 인터랙티브 90년대 TV 타임라인: 기술적 구현
디자이너와 편집자 팀이 내부 개발자 한 명 없이 러시아 TV의 진화를 다룬 대규모 웹 프로젝트를 만들었습니다. 108개의 창문이 있는 인터랙티브 집, 역방향 스크롤링, 그리고 맞춤형 CMS를 제로 예산으로 순수 JavaScript만 사용해 불과 6개월 만에 구축했습니다. Safari에서도 안정적인 성능을 제공한 기술 솔루션을 분석해 보겠습니다.
프레임워크 없는 아키텍처: React를 버린 이유
이 프로젝트는 현대 프론트엔드 프레임워크를 의도적으로 거부하며 시작되었습니다. 주요 이유는? 팀에 전문 개발자가 없었기 때문입니다. 기술 구현을 담당한 디자인 리더는 코드 생성의 주요 도구로 신경망을 사용했습니다. AI 생성 코드의 품질을 제어할 수 있는 유일한 방법은 순수 JS였습니다.
주요 아키텍처 결정 사항:
flex-direction: column-reverse를 통한 역방향 스크롤링- 피시아이 효과를 적용한 동적 타임라인
- 번들 대신 ES6 모듈
- 서드파티 의존성 없는 맞춤형 비디오 플레이어
이 접근 방식은 핵심 이점을 제공했습니다: 수분화나 런타임 오버헤드 없이 브라우저에서 직접 모듈 로드. 초기 렌더링 시 패키지 크기는 47 KB에 불과하며, 일반적인 React 앱의 200+ KB와 비교됩니다. 그래픽 요구사항이 높은 프로젝트에서 성능을 위해 필수적이었습니다.
미디어 콘텐츠 최적화: 35초에서 2.5초로
초기 사이트 로드 시간은 108개의 고품질 내부 이미지 때문에 35초에 달했습니다. 해결책은 다단계 처리였습니다:
- 관리 패널에서 업로드 시 PNG를 자동으로 WebP/AVIF로 변환
- 즉각적인 시각 피드백을 위한 블러업 미리보기(50px 너비) 생성
- 메모리 버퍼링 대신 스트리밍 이미지 처리
- 병렬 변환을 2개 프로세스로 제한
// Fish-eye effect for timeline
const distanceFromCenter = Math.abs(timelineCenterY - elementCenterY);
if (distanceFromCenter < fishEyeRadius) {
const ratio = 1 - (distanceFromCenter / fishEyeRadius);
const scale = 1.0 + (maxScale - 1.0) * ratio;
element.style.transform = `scale(${scale})`;
}Kubernetes의 OOM Killer가 병렬 AVIF 처리 중 Sharp가 메모리 한계를 초과해 발생한 문제였습니다. 해결책은 effort 매개변수를 2로 낮추고 스트리밍 처리로 전환하는 것이었습니다. 결과: 4.7 MB PNG를 152 KB WebP(31배 압축)로 줄였으며, 품질 손실 없이.
컨셉의 일부인 프리로더
TV 스태틱이 포함된 테마틱 프리로더는 비디오 파일 대신 Canvas를 사용해 구현되었습니다. 이는 세 가지 주요 이점을 제공했습니다:
- 눈에 띄는 루프 없음(Math.random()으로 노이즈 생성)
- 더 작은 크기(310줄 JS vs WebM 5+ MB)
- 재사용 가능한 로직
// Generating static for the headline
function generateHeadlineNoise() {
const frames = [];
for (let i = 0; i < 4; i++) {
frames.push(generateNoiseFrame());
}
document.documentElement.style.setProperty('--noise-frames', frames.join(','));
}프리로더는 인터페이스를 표시하기 전에 모든 무거운 에셋을 수집해 기술적 도전을 해결합니다. 집은 텍스처 블러 없이 즉시 나타납니다. 동일한 노이즈 생성 알고리즘은 헤더 호버 시 이스터 에그를 구동합니다.
백엔드: JSON 파일에서 Kubernetes로
초기 설정은 $5 VPS의 data.json에 데이터를 저장했습니다. 엔터프라이즈 인프라로 확장하려면:
- JSON을 MariaDB로 교체
- 로컬 스토리지 대신 MinIO 통합
- Nginx를 리버스 프록시로 설정
- GitLab CI/CD 파이프라인에 적응
관리 패널의 시각적 에디터는 디자이너가 그리드에서 직접 콘텐츠를 편집할 수 있게 합니다—창문을 클릭해 매개변수 조정. 비기술적 팀원에게 필수적입니다. 모든 미디어 파일은 자동 처리: Sharp가 WebP, AVIF, 블러업 미리보기 생성.
주요 교훈
- 역방향 스크롤링은 column-reverse를 통해 JS 애니메이션보다 구현 비용이 적고 모든 브라우저에서 작동
- 스트리밍 이미지 처리는 약한 서버에서도 OOM 충돌 방지
- 비디오 대신 Canvas는 동적 효과에서 대역폭 절약과 지각 품질 향상
- 라이브러리 없는 맞춤형 비디오 플레이어는 번들 크기를 120 KB 줄임
- 블러업 미리보기는 실제 대역폭을 절약하면서 즉시 로딩 착시 효과
기술 부채는 최소: 신경망이 첫 시도에서 92% 코드를 정확히 생성, 나머지 8%는 Safari 수동 수정. 현대 도구(Kubernetes, AVIF) 도입은 기업 인프라 덕에 예산 증가 없이. 큰 교훈: 적절한 스택과 자원 최적화에 집중하면 비기술 팀도 복잡한 웹 프로젝트를 만들 수 있습니다.
— Editorial Team
아직 댓글이 없습니다.