도구

네트워크 의존성을 제거한 필름 현상 보조 웹 타이머 애플리케이션 설계

kimwontae 2026. 3. 23. 14:19

 

아날로그 필름 현상 작업이 이루어지는 암실(Darkroom)은 스마트폰을 조작하기에 매우 열악한 물리적 환경이다.

  • 조작 한계: 두꺼운 고무장갑 착용 및 수분 노출.
  • 시각적 제약: 붉은 안전등(Safelight) 외의 조명 사용 불가.
  • 기기 상태: 긴 현상 시간 동안 화면 꺼짐 발생, 네트워크 연결 불안정.

기존 상용 앱들은 인터넷 연결을 요구하거나 세밀한 터치 조작이 필요해 실사용에 부적합했다. 이를 해결하기 위해 클라우드 의존성을 배제하고 디바이스 하드웨어 API를 적극 활용하는 100% 클라이언트 사이드 PWA(Progressive Web App)를 설계했다.

[Film Development Timer 실행하기] URL: 

https://wontae.kr/filmdev/

 

FilmDev Timer (PWA)

 

wontae.kr

 

2. 핵심 UX 및 하드웨어 API 제어

물리적 제약을 극복하기 위해 프론트엔드 단에서 디바이스 API를 직접 제어하도록 구성했다.

  • 다치지 않는 터치 (Fat-Finger Friendly): 오조작 방지를 위해 메인 타이머 및 제어 버튼이 화면의 1/3 이상을 차지하도록 레이아웃을 극대화했다.
  • Haptic & Audio 피드백: 시야를 스마트폰에 고정할 수 없는 상황을 대비해 교반(Agitation) 주기에 맞춰 브라우저 진동 API(navigator.vibrate)와 비프음을 발생시킨다.
  • Screen WakeLock API: 현상이 진행되는 10~20분 동안 OS 정책에 의해 화면이 절전 모드로 진입하는 것을 강제 차단한다.
  • 고대비 시인성: 순수 블랙 배경과 네온 컬러 폰트를 사용하여 붉은 조명 아래에서도 정보 식별력을 높였다.

3. 오프라인 데이터 아키텍처 (IndexedDB)

서버 유지보수 비용과 네트워크 의존성을 제거하기 위해 백엔드 없이 브라우저 로컬 스토리지 생태계만으로 아카이빙 시스템을 구축했다.

  • Zero-Backend: 현상 레시피와 작업 일지(Logbook)는 IndexedDB(Dexie.js 활용)에 영구 저장된다.
  • 로컬 이미지 압축 (Canvas API): 현상 결과물(스캔본) 아카이빙 시, 무거운 고해상도 이미지를 HTML5 Canvas API를 이용해 클라이언트 단에서 즉시 리사이징 및 WebP 포맷(Base64)으로 압축하여 DB에 저장한다.

4. 알고리즘 및 데이터 내장

  • 빅데이터 프리셋 탑재: Kodak, Ilford 등 20여 종의 주요 필름과 약품 조합 데이터를 로컬 JSON으로 내장하여 검색 즉시 세팅이 완료된다.
  • 동적 시간 보정 로직: 표준 온도(20°C)를 벗어난 환경에서 작업 시, 약품의 화학 반응 가속도를 계산하는 온도 보정 수식을 통해 타협된 현상 시간을 실시간으로 연산하여 제공한다.

5. 기술 스택 요약

  • Frontend: React 18, Vite, TypeScript
  • Styling: Tailwind CSS (다크모드 및 CSS Variables 테마 제어)
  • Storage: IndexedDB (Dexie.js v4)
  • PWA: Service Worker 기반 오프라인 캐싱, Manifest 구성

전체 프로젝트 문서 및 아키텍처 확인 
https://wontae.kr/projects/project-film.html