올리
치매환자와 보호자 모두가 일상생활이 가능하도록 돕는 케어 플랫폼
올리(Olly)는 건강한 치매 생활을 위한 도우미 앱으로, 치매 환자와 보호자가 일상생활을 안전하게 일상을 이어갈 수 있게 돕습니다. 2024 커뮤니케이션디자인 국제공모전 디지털미디어디자인 부문에서 우수상을 수상했으며, Vietnam Mobile Summit 2024에서 계원예술대학교 대표작으로 선정되어 발표한 프로젝트입니다. 소개 웹사이트의 경우 JavaScript와 CSS를 활용해 페르소나 전환, 무한 루프 슬라이더, 스크롤 기반 헤더 제어 등의 인터랙션을 구현했습니다. 그리고 AOS 라이브러리를 활용하여 부드러운 스크롤 애니메이션을 구현했습니다.
상세 내용
3단계 파일 처리 워크플로우의 진행 상태 및 데이터 유지 시스템 개발
- 파일 업로드부터 메타데이터 설정, 다운로드까지 3단계로 구성된 워크플로우에서 사용자 데이터와 진행 상태를 안정적으로 관리했습니다.
- Zustand을 상태 관리를 활용해 각 단계별 사용자 입력값과 파일 정보를 전역으로 유지하여, 사용자가 단계를 이동해도 데이터 손실 없이 작업을 이어갈 수 있도록 구현했습니다.
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로 편집할 수 있도록 하였습니다.
파일 유효성 검증 및 자연어 정렬로 안정적인 일괄 처리
•업로드된 파일의 형식과 크기를 사전에 검증하여 지원되지 않는 파일 형식이나 손상된 파일로 인한 오류를 방지했습니다. 또한 자연어 정렬 유틸 함수를 통해 파일명의 숫자 순서를 올바르게 인식하여 사용자가 예상하는 순서대로 파일이 처리되도록 구현했습니다.
Rust 기반 Biome 도입으로 개발 효율성 향상
•기존 ESLint와 Prettier 조합을 Rust 기반의 Biome으로 대체하여 린팅과 포매팅 속도를 대폭 개선했습니다. 코드 품질 검사와 자동 포매팅을 하나로 통합하고 빠른 실행 속도로 개발 워크플로우의 효율성을 높여 개발 생산성을 크게 향상시켰습니다.