필름 메타데이터 앱

상세 내용

• 3단계 파일 처리 워크플로우의 진행 상태 및 데이터 유지 시스템 개발

  • 파일 업로드부터 메타데이터 설정, 다운로드까지 3단계로 구성된 워크플로우에서 사용자 데이터와 진행 상태를 안정적으로 관리했습니다.
  • React의 useReducer를 활용해 각 단계별 사용자 입력값과 파일 정보를 중앙 집중식으로 관리하여, 사용자가 단계를 이동해도 데이터 손실 없이 작업을 이어갈 수 있도록 구현했습니다.

• File System Access API와 Web Streams API를 활용한 최적화된 파일 다운로드 구현

  • File System Access API를 활용해 사용자가 직접 저장 위치를 선택할 수 있는 파일 다운로드 기능을 구현했습니다.
  • File System Access API를 지원하지 않는 브라우저 환경에서는 Web Streams API 기반의 폴백 패턴을 구현했습니다. 이를 통해 대용량 파일 처리 시 메모리 부족 문제를 방지하고, 스트림 기반 처리로 브라우저 성능 저하 없이 안정적인 파일 처리를 구현했습니다.

• piexifjs 라이브러리를 활용한 EXIF 메타데이터 읽기/쓰기 처리 구현

  •

  JavaScript 환경에서 EXIF 메타데이터를 다루기 위해 piexifjs 라이브러리를 도입하여 필름 사진의 메타데이터를 읽고 편집할 수 있는 기능을 구현했습니다. 카메라 모델, 촬영 날짜, ISO, 초점 거리, 조리개값 등 다양한 EXIF 정보를 사용자 친화적인 UI로 편집할 수 있도록 하였으며, react-hook-form과 zod를 통해 각 입력값의 유효성을 실시간으로 검증합니다.

• CSS 변수 기반 시맨틱 컬러 시스템 및 다크/라이트 모드 구현

  • next-themes를 활용해 다크/라이트 모드 전환과 시스템 테마 연동을 구현하고, FOUC(Flash of Unstyled Content) 없이 즉시 올바른 테마가 적용되도록 했습니다.
  • CSS Custom Properties 기반의 시맨틱 컬러 토큰 체계를 설계하여 전체 컴포넌트의 색상을 중앙에서 관리하며, 모든 텍스트·배경 조합이 WCAG AA 대비율 기준을 충족하도록 검증했습니다.

• 메타데이터 프리셋 저장/불러오기 및 JSON 내보내기/가져오기 기능 구현

  •

  자주 사용하는 카메라·렌즈·필름 설정 조합을 프리셋으로 localStorage에 저장하고 원클릭으로 불러올 수 있는 기능을 구현했습니다. JSON 형식으로 프리셋을 내보내고 가져올 수 있어 기기 간 설정 이동이 가능하며, 파일 유효성 검증을 통해 잘못된 형식의 파일 가져오기를 방지합니다.

• 파일 유효성 검증 및 자연어 정렬로 안정적인 일괄 처리

  •

  업로드된 파일의 형식과 크기를 사전에 검증하여 지원되지 않는 파일 형식이나 손상된 파일로 인한 오류를 방지했습니다. 또한 자연어 정렬 유틸 함수를 통해 파일명의 숫자 순서를 올바르게 인식하여 사용자가 예상하는 순서대로 파일이 처리되도록 구현했습니다.

• Rust 기반 Biome 도입으로 개발 효율성 향상

  •

  기존 ESLint와 Prettier 조합을 Rust 기반의 Biome으로 대체하여 린팅과 포매팅 속도를 대폭 개선했습니다. 코드 품질 검사와 자동 포매팅을 하나로 통합하고 빠른 실행 속도로 개발 워크플로우의 효율성을 높여 개발 생산성을 크게 향상시켰습니다.