사진 공유 앱 개발의 함정: 개발자로서의 교훈

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

- 초보 개발자 및 프로토타입 개발에 관심 있는 사람들

- 난이도 관점: 실무 경험 부족한 개발자가 예상보다 복잡한 문제에 직면했음을 강조

핵심 요약

• "개발자라면 직접 만들 수 있다"는 오만이 예상보다 10배 더 많은 시간을 소요했다
• Intersection Observer + requestAnimationFrame으로 스크롤 성능 최적화
• Nuxt Image를 사용한 이미지 압축 및 캐시 문제 해결
• 모바일 UX에서 네이티브 스와이프 제스처와의 충돌 대응

섹션별 세부 요약

1. 초기 접근: 클라우드플레어 R2 사용

• 3000개 고해상도 이미지 처리 시 성능 저하 발생
• Cloudflare Image Service 사용 고려 (5,000개 변환 포함, 이후 $5/10만 이미지)
• Nuxt 3 + Vue 3 + TypeScript 기반 프레임워크 선택

2. 이미지 렌더링 성능 문제

• 100개 이상 이미지 시 브라우저 렌더링 지연 발생
• vue-virtual-scroller 사용 실패 후 Intersection Observer + 빈 div 렌더링으로 대체
• requestAnimationFrame(applyPendingUpdates)를 통해 DOM 업데이트 배치 처리

3. Nuxt Image 활용과 캐시 문제

• Nuxt Image 라이브러리로 이미지 압축 및 리사이징
• In-memory 캐시 사용으로 배포 시마다 변환 재실행
• WebP 포맷으로 이미지 전환 (sharp 라이브러리 사용)

4. 모바일 UX 문제점

• 백 버튼 클릭 시 스크롤 위치 재설정 문제 발생
• 스와이프 제스처와 브라우저 기본 제스처 충돌
• 네이티브 앱 대비 웹 앱의 UX 한계점 인식

5. Nuxt 버그와 배포 문제

• Nuxt 버그로 앱 크래시 발생 (2일 전 버전 업데이트로 해결)
• 이미지 회전 문제 (메타데이터 제거로 인한 오류)
• Cloudflare 캐시 미처리로 인한 재업로드 지연

6. 대규모 이미지 업로드 처리

• 업로드 제한 미설치로 서버 메모리 오버플로우 발생
• 로컬 서버에서 직접 업로드 처리
• sliplane.io를 통한 Docker 기반 저비용 배포

결론

• "간단한 기능"은 예상보다 복잡하다 → Virtual DOM + Intersection Observer 활용 필수
• Nuxt Image 사용 시 In-memory 캐시 대신 Persistent Cache 구현 필요
• 모바일 UX에서 네이티브 제스처와의 충돌은 무시할 수 없음
• sliplane.io는 DevOps 없이 Docker 배포를 위한 이상적인 플랫폼