kimwontae

개요 (Project Overview)

Film Development Timer는 흑백 및 컬러(C-41/E-6) 필름 현상에 필요한 복합 단계 통제, 온도 데이터 변환, 개인 현상 레시피 관리, 결과물 아카이빙을 단일 환경에서 처리하는 프로그레시브 웹 앱(PWA)이다.

물기 많은 암실 환경의 물리적 제약을 고려하여 거대한 UI 타겟, 촉각 진동(Haptics), 화면 꺼짐 방지(WakeLock) 기술을 적용했다. 또한 클라우드 의존성을 배제한 100% 클라이언트 사이드 오프라인 DB 아키텍처로 설계되었다.

주요 기능 (Core Features)

• 멀티 스텝 타이머 & 햅틱 교반 알림: 현상(Developer), 정지(Stop), 정착(Fixer), 수세(Wash) 과정을 제어. 교반(Agitation) 간격에 맞춰 시각 펄스, 오디오 비프, 진동 API를 통한 햅틱 피드백을 제공하여 시각 의존도를 낮춤.
• 오프라인 일지 & 결과물 아카이빙: 백엔드 서버 없이 브라우저 내 IndexedDB에 레시피 및 현상 기록을 영구 저장. 스캔 이미지 첨부 시 Canvas API를 통해 초경량 WebP Base64 에셋으로 클라이언트 단에서 압축하여 DB에 결합.
• MDC (Massive Dev Chart) 프리셋 탑재: Kodak, Ilford 등 20개 이상의 필름과 약품 조합 데이터를 로컬 JSON으로 내장. 키워드 검색 시 최적 데이터(ISO, 온도, 교반 시간 등) 자동 세팅(Autofill).
• 동적 시간 보정: 표준 온도(20°C) 외의 환경에서 작업 시, ILFORD 시간/온도 보정 계수 수식을 연산하여 실시간으로 타협 시간을 도출.
• 지식 백과 & 실패 진단 툴킷: 망상 현상(Reticulation), 황록색 캐스트 등 현상 실패 원인을 분석하는 문서 수록. 육안으로 확인 가능한 결함을 기반으로 역추적 진단하는 체크리스트 탭 제공.

디자인 철학 및 방향성

• 다치지 않는 터치 (Fat-Finger Friendly): 두껍고 젖은 고무장갑 착용 상태를 고려해 조작부를 화면 1/3 이상 크기로 설계.
• 시인성 확보 (Extreme Visibility): 짙은 흑백 대비와 네온 컬러 폰트를 적용해 암실의 붉은 안전등(Safelight) 아래에서도 식별력을 극대화.
• 영원한 백업 (Immutable Local Archives): 외부 서버 수명과 무관하게 브라우저 캐시 내에서 자전적 아카이빙 유지 가능.

기술 스택 (Tech Stack)

• Frontend & UI: React 18 (SPA), Vite, TypeScript, TailwindCSS v4, Lucide React
• Data & Storage: IndexedDB (Dexie.js), HTML5 Canvas API (Resizing & WebP Compression), UUID
• Web API: navigator.vibrate(), navigator.share(), Screen WakeLock API