Connection-health
사용 기술
- React
- 컴포넌트 기반의 선언적 UI 구성과 효율적인 상태 관리를 위해 사용했습니다.
- TypeScript
- 컴파일 단계에서 발생할 수 있는 오류를 사전에 감지하여 코드의 안정성을 향상시키고 버그 발생 가능성을 줄이기 위해 사용하였습니다.
- React Router
- SPA(Single Page Application)의 라우팅 관리 및 사용자에게 끊김 없는 페이지 전환 경험을 제공을 위해 사용되었습니다.
- Styled-components
- 컴포넌트 단위의 스타일 캡슐화와 동적 스타일링으로 유연한 디자인 구현을 위해 선택하였습니다.
- Axios
- HTTP 요청을 간결하게 처리하고, 자동 JSON 데이터 파싱, 에러 처리 및 재시도 로직을 구성하기 위해 선택했습니다.
- Vite
- ES 모듈을 기반으로 하는 개발 서버와 Rollup을 활용한 최적화된 프로덕션 빌드로 빠른 개발과 효율적인 배포 과정을 위해 선택했습니다.
- Naver Api
- 네이버 OCR 기능을 사용하기 위해 사용했습니다.
- Chat GPT
- 텍스트에서 원재료명 및 사용자의 건강상태를 바탕으로 섭취 가능 여부 및 성분 특징을 추출하기 위해 사용했습니다.
- Eslint
- 팀원과의 코드 품질과 일관성을 유지하기 위해 코드 린팅 도구로 사용하였습니다.
- Vercel
- 프론트엔드 애플리케이션을 배포하기 위해 사용하였습니다.
디자인
개발 과정
이미지 크롭 기능
- 사용자가 이미지를 업로드하고, 해당 이미지에서 원재료 정보를 포함하는 부분만을 선택하여 크롭하는 기능을 제공했습니다. 이 과정에서 이미지를 자유롭게 회전시키거나 원하는 영역을 정확히 지정하여 크롭할 수 있습니다. 이미지를 조정하는 과정에서 사용자의 연속적인 입력(예: 회전 조절)에 대응하여 성능 저하 없이 빠르게 반응할 수 있도록 디바운스(debounce) 기법을 사용해 불필요한 처리를 줄이고 성능을 향상시켰습니다.
- 이 기능은 사용자가 제품 구매 후 원재료 명을 수동으로 입력하는 대신 이미지를 통해 원재료의 이름을 쉽게 추출할 수 있게 해줍니다. 주요 목적은 사용자 편의성을 최대화해서 제품 관련 원재료 정보를 신속하고 정확하게 수집하는 데 있습니다.
원재료 명 추출 및 OCR 기능
- 사용자가 업로드한 이미지에서 텍스트를 추출하는 과정은 Naver OCR API를 통해 진행했습니다. 이 API의 활용으로, 업로드된 이미지 내에 포함된 텍스트가 세밀하게 식별되며, 이에 따라 추출된 텍스트 결과가 사용자에게 제공됩니다. 이러한 과정 동안 사용자가 대기하는 시간이 지루하지 않도록, 이미지가 스캔되는 것처럼 느껴지게 하는 시각적 애니메이션을 구현하여 사용자 경험을 향상시켰습니다. 이는 사용자가 과정의 완료를 기다리는 동안 긍정적인 경험을 할 수 있도록 함으로써, 사용자의 이탈률을 감소시키는 데 중점을 두었습니다.
- 출력된 텍스트에 오류가 발생할 가능성을 고려해, 사용자가 추출된 원재료명을 직접 수정할 수 있는 기능을 추가함으로써, 사용자에게 더욱 정확한 정보를 제공합니다. 사용자가 입력을 통해 결과를 조정할 수 있는 이러한 유연성은 사용자 만족도를 증진시키는 중요한 요소이기에 사용자 인터페이스를 통해 직관적이고 간편하게 이루어질 수 있도록 설계했습니다.