Post

[나만무 프로젝트 회고] 나만의 온라인 가상 피팅룸 Try It On

Posted
["Try It On 프로젝트"]
Try It On 프로젝트
By sihyun 16 min read

6월 19일부터 오늘까지, 쉴 틈 없이 나만무 프로젝트를 위해 달려왔다.
그동안 함께 달려온 팀원분들과 정이 많이 들었고, 이제 내일이면 마지막 발표라는 게 아직도 믿기지 않는다.

이번 프로젝트에서 백엔드부터 프론트까지 가리지않고, 다 해볼 수 있어 좋았다.

내가 짰던 백엔드 코드 때문에 프론트에서 불편을 겪었던 적도 있고,
프론트 작업을 하면서 백엔드 코드를 수정해야 하는 상황도 여러 번 있었다.
또한 초반에 데이터베이스가 잘 설계되어야 프로젝트가 잘 굴러갈 수 있다는걸 깨달았다.
하면서 놓쳤던 부분과 이 필드도 필요하겠다. 이 필드는 필요없겠다. 하며 바뀌었기 때문이다.

DB 설계의 중요성과 백엔드 & 프론트의 협업에 대해 많이 배웠던 프로젝트였다.

TIO 프로젝트 소개

TIO는 ‘Try It On’의 줄임말로 나만의 아바타에게 가상 피팅 해볼 수 있는 서비스이다.
내가 사고 싶은 옷을 미리 입혀봐서 오~ 꽤 잘 어울리는데?, 이건 잘 안어울린다. 안사야지처럼
옷을 고를 때 걱정을 덜어 줄 수 있고, 본인의 스타일을 파악하는 데에 도움을 줄 수 있다.

TIO 홈페이지

사이트에 처음 딱 들어오게 되면 TIO가 어떤 서비스인지 한눈에 알 수 있도록 튜토리얼을 만들어두었다. 회원가입 후 로그인을 하면, 본인 사진 또는 (사진을 올리지 않을 경우) 기본 아바타 이미지가 설정되어 본격적으로 옷을 입혀볼 수 있다.

신발과 소품/악세사리 제품은 현재 착용 기능이 제공되지 않는다. 그 이유는 아바타로 등록되는 사용자 사진의 포즈나 구도가 각기 달라, 신발이나 악세사리처럼 위치가 정밀하게 맞춰져야 하는 아이템을 정확하게 입히기 어렵기 때문이다.

기술 스택 & 서비스의 주요 기능

기술 스택

  • Front : Next.js (TypeScript), Zustand, Tailwind CSS, Axios
  • Back-end : Spring Boot, JPA / MySQL, JWT, OAuth
  • FitDit api 사용
  • 버전 및 이슈관리 : Github, Github Issues
  • 협업 툴 : Notion
  • CI/CD : Git, Github Actions, AWS Codedeploy
  • Infra : AWS, RDS(MySQL 8.8), ElastiCache(Redis), Lambda, AWS CloudFront(CDN), AWS Route53(DNS)
  • 테스트 / 모니터 : nGrinder, granafa K6, AWS Cloudwatch

서비스의 주요 기능

[홈]

  • 비로그인 유저 : 첫 페이지에 착장 체험 서비스, 옷 구경, 스토리 구경
  • 로그인 유저 : 아바타 착장 (가상피팅), 스토리 작성, 옷장, 장바구니
    • 유저 프로필 정보와 행동을 기반으로 개인화 추천 알고리즘이 구현되어있다.
    • 나에게 맞는 추천 상품, 내 연령대가 많이 찾는 상품, TIO 인기 상품

[회원가입]

  • 구글 계정 또는 이메일 주소 인증 코드 6자리 입력 후, 가입이 가능하다.
  • 이메일 주소의 형식이 유효하지 않거나 이미 가입된 이메일일 경우 회원가입이 되지 않는다.
  • 비밀번호는 8자 이상으로 영문, 숫자, 특수문자를 포함해야한다.
  • 닉네임, 생년월일, 성별, 전화번호, 선호 스타일, 키 몸무게 신발 사이즈를 작성해주어야한다.
  • (자신의 아바타를 생성하기 위해) 전신이 잘 보이도록 정면에서 찍은 사진을 업로드해주어야한다.
    • 사진을 업로드하고 싶지 않거나 사진이 없을 경우 다음에 추가하기를 클릭하면 기본 아바타가 생성된다.

[검색기능]

  • 브랜드명과 제품명을 검색 조건으로 하여 검색어 필터링
  • 유저가 검색을 하면 자동완성 결과를 최대 6개 띄워준다. (제품명 기준)

[아바타 가상 피팅]

  • 마음에 드는 옷을 발견하면 아바타 아이콘을 눌러 옷을 입힐 수 있다.
    • 옷을 다 입게 되면 Desktop에서는 왼쪽 아바타 영역에서 바로 확인할 수 있으며, 알림으로도 알려준다.
    • 모바일에서는 알림으로 확인할 수 있다.
  • 입혀본 옷의 정보(카테고리명, 제품명)가 표시된다.
  • 유저가 한번 입혀본 옷은 캐싱을 적용하여 나중에 또 입혀보게 되면 빠르게 입혀진다.
    • 상의 단일 피팅 or 하의 단일 피팅 : 각각 상의 또는 하의 정보로 캐시 키를 부여하여 캐시 이미지를 저장
    • 상의 착용 중, 하의 변경 : 상/하의 정보로 캐시 키 부여하여 캐시 이미지를 저장
    • 하의 착용 중, 상의 변경 : 상/하의 정보로 캐시 키 부여하여 캐시 이미지를 저장

[옷장]

  • 옷장에 추가 버튼을 통해 (최대 10개) 저장한 착장들을 볼 수 있다.
  • 하트(찜하기) 버튼을 누른 제품들 목록들이 카테고리별로 조회할 수 있다.

[스토리]

  • 기본적으로 스토리 페이지는 인기순으로 정렬되어있다.
  • 저장한 착장들 중 마음에 드는 것을 골라 스토리에 작성할 수 있다.
    • 배경 제거 기능을 활용하여 제거 후 배경색 선택하여 본인만의 스타일로 스토리를 게시할 수 있다.
  • 스토리를 구경하며, 그 스토리에 올라온 착장 정보도 확인할 수 있다.
  • 댓글 작성 기능을 활용하여 붙이고 싶은 위치에 댓글을 남길 수 있다.
  • 스토리 관리 기능을 통해, 본인이 올린 스토리를 삭제할 수 있는 기능도 있다.

[결제]

  • 장바구니에 담은 상품들을 구매할 수 있다.
  • 주문서에 배송지 정보를 설정 후, 결제 방법(토스페이, 네이버페이 등)을 선택해 결제하기를 진행 할 수 있다.
    • 현재 테스트 환경이기에 실제로 결제되지는 않는다.


자세한 내용은 프로젝트 깃허브 README.md에 작성되어져있습니다.

역할 분담

로그인 사용자에 따른 데이터 분기 처리, 아바타 이미지 표시, 무한 스크롤, 알림 시스템, 검색 기능까지
제품 페이지 전반의 백엔드와 프론트를 설계하고 구현하였다.

1. 도메인 분석 및 테이블 기반 기능 설계

  • Product : 상품 기본 정보
  • ProductVariant : 상품 옵션 (색상, 사이즈 등)
  • Category : 상위, 하위 구조의 카테고리
  • WishlistItem : 사용자의 찜 기능 관리
  • Member : 사용자 정보

이 테이블들을 기반으로 백엔드 API 구조 설계, DTO 생성, 프론트 타입 정의하였다.

2. 로그인 사용자 전용 상품 목록 조회

로그인 여부에 따라 상품 목록 분기 및 찜 여부, 아바타 정보 포함 응답 구현

3. 상품 상세 조회 기능

4. 옷장 기능 설계 및 리팩토링

  • 옷장 전용 테이블 ClosetAvatar 설계
  • 사용자별 최대 10개 착장 제한
  • 찜/저장 기능 분리
  • 아바타 착장 저장 및 조회 기능 API 개발

5. 프론트엔드 : 제품 페이지 전체 구현

Home(메인), 카테고리 탭 페이지 전반을 담당했다.

  • ProductCard 공통 컴포넌트 구현
  • 메인/카테고리 탭별 상품 조회 API 연동
  • react-query 기반 무한 스크롤 적용
  • 찜 기능 및 서버와 상태 동기화
  • 아바타 아이콘 클릭 시 Try-on 결과 모달 표시
  • 반응형 레이아웃 구성 (PC / 모바일)

6. 무한 스크롤 + Lazy Loading

  • 카테고리 탭에서는 최초 10개만 불러오고 스크롤 시 추가 로딩
  • 이미지 Lazy loading 적용 → 렌더링 최적화
  • react-query와 IntersectionObserver를 활용한 커스텀 훅 구성

7. 아바타 착장 알림 시스템

  • 아바타 착장이 변경되었을 경우 알림 점 UI 표시
  • Zustand 전역 스토어에서 이전 착장 vs 현재 착장 비교
  • 사용자 행동 흐름을 놓치지 않도록 알림 연동 처리

8. 검색 기능 구현 (자동완성 & 검색 페이지)

  • useDebounce 훅 생성 (사용자 입력 debounce 처리)
  • 외부 클릭 시 자동완성 창 닫기 처리
  • 검색 결과 없음 UI 처리
  • 검색 페이지 구현 (query param 기반 검색)
  • 인증 없이도 사용 가능한 검색 API 구성

나만무 프로젝트를 돌아보며 …

한달 간 기획부터 MVP 제작, 폴리싱 단계까지 거치며, 하나하나 기능을 완성해나갈 때 느꼈던 성취감이 아직도 생생하다.

그 중에서도 가장 뜻깊었던 경험은 백엔드부터 프론트까지 전 과정을 직접 이어가며 구현해본 것이었다.
내가 짠 백엔드 코드를 프론트에서 호출했을 때, “분명 응답이 와야 하는데 왜 안 오지?” 같은 오류를 겪으며 실제 API 흐름을 깊이 이해할 수 있었고, UI를 구현하면서 “이게 사용자 입장에서 더 편하지 않을까?” 하는 고민을 자연스럽게 하게 되었다.

또한, 나와 다른 시각을 가진 팀원분들과의 협업은 큰 자산이었다.
“이 방식이 더 나을 것 같은데요?”, “이렇게 상태 관리하면 어떨까요?”하며 함께 고민을 나눠주셔서 생각치 못한 부분을 발견하게 되기도 하고, 더 나은 방향으로 발전할 수 있었다.

이번 프로젝트를 통해 내 작업 스타일과 강점도 알게 되었다.
나는 무엇을 해야 하는지 명확히 정의된 상태에서 가장 빠르고 정확하게 작업할 수 있었다.
반대로 구현 목표가 모호하거나 이해가 부족한 상태에서는 자연스럽게 방황하게 되었고, 효율도 떨어졌다.

그래서 앞으로는 어떤 기능이든 먼저 명확하게 정의하고 이해하는 시간을 충분히 확보한 뒤에 작업에 착수하는 게
가장 빠르고 나에게 맞는 작업 방식이라는 걸 직접 체득할 수 있었다.

정글 10기 분께서 연락주신 메일

저희 팀은 프로젝트 최종 발표 당일에 오시는 분들께 기억해줬으면 하는 마음에 명함을 만들었었다.
그 명함을 포스터 세션에 오시는 분들께 드렸었는데, 그 명함을 보고 정글 10기 교육생분께서 메일로 연락을 주셨다.
너무 정성스럽게 연락을 주셔서 한동안 감동을 받았었다.

메일_오신_내용

나의 답변이 도움이 되었으면 하는 마음이며, 덕분에 프로젝트 전반을 돌아보며
내가 뭘 얻어 갔는지 다시한번 정리해볼 수 있는 기회였던 것 같다.

KraftonJungle
jungle

© sihyun. Some rights reserved.