🧺 Sokuri

iOS | Server | Crawler | WebView | Notion

소쿠리(Sokuri)는 사용자가 URL만 입력하면 가방 사이즈를 기반으로 물건을 넣어볼 수 있는 IOS 애플리케이션입니다. 실제 가방이 없어도, 모바일 기기에서 다양한 물건을 넣어보며 수납 가능 여부를 시각적으로 확인할 수 있습니다.

Table of contents

• Motivation
  • 온라인 쇼핑에서 겪은 불편함을 개선해보자
  • 앱 환경에 맞는 사용자 경험을 직접 설계하고 구현하다
• Preview
• Tech stack
  • 어플리케이션
  • 서버 및 크롤링
  • 머신러닝 및 이미지 분석
• Development
  • 1. 후기 이미지에서 어떻게 실제 사이즈를 추정할 수 있을까?
    • 1.1 후기 이미지를 크롤링하고 분석해 실제 사이즈를 추정
    • 1.2 후기 이미지가 없는 경우 사용가 직접 입력하도록 보완
    • 1.3 매번 사용자가 아이템을 등록해야 할까?
  • 2. React Native에서 3D 시뮬레이션 구현이 가능할까?
    • 2.1 문제: React Native는 3D 시뮬레이션에 적합하지 않다
    • 2.2 기술 선택 과정: WebView를 선택한 이유
      • 방법1. React Native 전용 3D 엔진을 사용
      • 방법2. 네이티브 모듈을 직접 구현
      • 방법3. React Native 안에 WebView를 연결하기
    • 2.3 구현: WebView와 React Native 간 양방향 통신 구조
    • 2.4 결과: RN 앱에서도 실시간 3D 시뮬레이션이 가능해졌다
• Trouble Shooting
  • 1. WebView 내 3D 시뮬레이터가 화면 밖에 렌더링되는 문제
  • 2. WebView가 메세지에 응답하지 않는 문제
• User Experience
  • 어떤 기준으로 사용자 흐름을 설계할까?
  • 1. 메인 화면에서 바로 검색 가능하도록 구현
  • 2. 정보를 카드 UI로 요약해 한눈에 파악가능
  • 3. 제스쳐 기반으로 아이템 변경 및 삭제
  • 4. 사이즈 수정 후에도 시뮬레이터와 항상 동기화되도록 적용
  • 5. 애니메이션으로 부드러운 화면 전환
• Retrospective

Motivation

온라인 쇼핑에서 겪은 불편함을 개선해보자

기획 과정에서 온라인 쇼핑 중 가방 구매 시 겪었던 불편함이 떠올랐습니다. 대부분의 쇼핑몰은 가방의 가로 · 세로 · 높이 수치나 착용 이미지가 제공되지만, 물건들이 들어가는지는 확인하기 어렵습니다. 리뷰를 참고하거나, 직접 구매 후 확인하는 수밖에 없었습니다.

이러한 불편함을 줄이기 위해, 기능을 직접 개발해보기로 결정했습니다. 사용자가 URL을 입력하면 가방의 실제 사이즈를 추정하고, 다양한 물건을 넣어보는 시뮬레이션 기능을 통해 수납이 가능한지 확인할 수 있도록 구성했습니다.

앱 환경에 맞는 사용자 경험을 직접 설계하고 구현하다

가방을 구매할 때, 모바일 환경에서 가방 정보를 확인하고, 비교하여 구매를 결정하는 일이 많았습니다. 이런 사용흐름을 고려했을 때, 앱에서 바로 링크를 붙여넣고 수납 여부를 확인할 수 있는 구조가 자연스럽고 편리하다고 생각했습니다.

앱은 터치와 제스처를 중심으로 작동하기 때문에, 사용자는 화면을 누르면 곧바로 반응이 돌아오기를 기대합니다. 이러한 기대를 충족시키기 위해서는 빠르고 직관적인 피드백 설계가 필요하다고 느꼈고, 개발 과정에서 차이를 직접 체감해보고 싶었습니다.

이번 개인 프로젝트는 세 가지를 주요 목표로 설정했습니다.