Portfolio

아래 두 프로젝트는 취미인 필름 사진 촬영 시 촬영 시간/위치 정보 등 촬영 데이터 관리의 불편함을 해결하기 위해
React · Zustand 기반으로 직접 설계/배포한 개인 프로젝트입니다.
두 프로젝트가 모두 필름 사진 촬영을 다루며 filo의 촬영 데이터를 fixif에서 붙여넣어 활용할 수 있는 등
맥락적/기능적으로 밀접하게 연계되어 있어 모노레포로 구성하여 Vercel을 통해 배포해 사용 중입니다.
위치 및 개인정보 이슈에서 자유로울 수 있게 서버 없이 클라이언트에서 모두 처리 가능한 구조로 구현했습니다.

filo
A Film Logbook App
filo 앱 화면 1filo 앱 화면 2

ReactTypeScriptZustandIndexedDBPWAViteVercel

  • 필름 카메라 촬영 정보(렌즈/조리개/셔터스피드/촬영일시/위치 등)를 프레임 단위로 기록하는 웹 앱
  • 촬영 현장에서 바로 입력할 수 있도록 PWA로 구성해 모바일 홈 화면 설치 및 오프라인 사용을 지원
  • 백엔드 없이 클라이언트 단독으로 동작하는 서버리스 구조로 설계하고, 데이터는 브라우저에 영속화하여 오프라인 우선으로 동작
  • Safari PWA 환경에서 localStorage 데이터가 유실되는 이슈를 확인하고, Zustand persist 미들웨어의 저장소를 localStorage 대신 IndexedDB로 교체하여 데이터 영속성을 확보
fixif
Easy EXIF Edit
fixif 앱 화면

ReactTypeScriptexifrpiexifjsViteVercel

  • 사진 파일의 EXIF 정보를 브라우저에서 직접 조회하고 수정하는 웹 앱
  • exifr(읽기)와 piexifjs(쓰기)를 조합해, 사진 파일이 서버를 거치지 않고 브라우저 내에서만 처리되도록 구현 — 로컬 브라우저 내에서 처리가 완료되어 프라이버시를 확보하고 서버 비용을 제거
  • filo에서 내보낸 촬영 데이터를 프레임 번호 기준으로 자동 매칭하여 다량의 사진 파일에 EXIF 정보를 일괄 기록 — 두 앱을 연계한 촬영 데이터 처리 워크플로우 완성

아래 프로젝트는 복잡한 규칙을 가지고 있어 까다로운 설계를 요하는 보드게임 유틸리티 앱을 에이전트 드리븐 방식으로 개발한 프로젝트입니다.
AI 에이전트를 협업 대상으로 두고 요구사항과 설계를 함께 조율해 확정했으며,
직접 작업은 배포 설정 등 꼭 필요한 부분으로 한정하고 프로젝트 하네스와 자동화 루프를 구성해 구현은 에이전트가 주도하도록 했습니다.

ronnya
리치마작 유틸리티 앱
ronnya 앱 화면 1ronnya 앱 화면 2

ReactTypeScriptViteVercel

  • 리치마작의 학습/연습 기능 및 유틸리티 기능들을 제공하는 웹 앱
  • 구성적 문제 생성 및 채점 엔진 상호 검증으로 계산상 불가능한 케이스를 사전 차단하고, 고점법 기반 부수·점수 계산을 지원하는 등 규칙이 복잡한 로직을 에이전트 기반으로 구현