Challenge 1
대량의 이미지 데이터 최적화
거래 목록에서 썸네일이 많아질수록 첫 화면 진입이 느려졌고, 수집가가 빠르게 스캔해야 하는 핵심 경험이 무너질 수 있었습니다.
Solution
이미지 Lazy Loading 및 최적화
Intersection Observer를 기반으로 목록 진입 시점에는 필요한 썸네일만 우선 로드하도록 구성해 탐색 시작 속도를 방어했습니다.
POCAZ Remake
분산된 포토카드 리셀 거래를 검색·찜·채팅 중심 단일 경험으로 재구성한 리메이크 프로젝트
Period
2025.12 -
Team
1인 프로젝트
Role
풀스택 개발 (Next.js, 상태관리, API 연동)
Project Overview
Background
포토카드 리셀 수요는 커졌지만 실제 거래는 트위터, 번개장터, 당근마켓처럼 맥락이 분산된 플랫폼에 흩어져 있었습니다. 구매자는 원하는 카드의 상태와 가격을 비교하기 어렵고, 판매자는 거래 진행 상황을 한눈에 관리하기 어려운 문제가 있었습니다.
Goal
수집가가 원하는 카드를 더 빨리 찾고, 판매자는 등록부터 대화와 거래 관리까지 하나의 흐름 안에서 처리할 수 있도록 전문 리셀 경험을 재설계하는 것이 목표였습니다.
Key Features
- 포토카드 등록, 상태 표기, 거래 진행 상태를 한 화면에서 관리하는 판매 흐름
- 아이돌, 앨범, 멤버 기준으로 좁혀 들어가는 검색 및 필터링
- 구매자와 판매자가 바로 대화를 시작할 수 있는 실시간 채팅
- 사용자 프로필, 거래 히스토리, 찜 목록을 묶은 개인화 영역
- 거래 이탈을 줄이기 위한 알림 및 신고 흐름
Tech Stack
ReactNext.jsStyleXElysia.jsPostgreSQLPrismaSupabaseBun.js
Technical Challenges & Solutions
Challenge 2
실시간 채팅 기능 구현
사용자에게는 즉시성 있는 대화가 필요했지만, 상태 동기화와 읽음 처리까지 포함한 실시간 흐름을 안정적으로 설계해야 했습니다.
Solution
Socket.io를 활용한 실시간 통신
실시간 채팅과 읽음 상태를 Socket 기반으로 묶어 거래 문의가 다른 메신저로 새지 않도록 제품 내부에서 끝나는 대화 경험을 설계했습니다.
Challenge 3
복잡한 필터링 로직
아이돌, 앨범, 멤버, 가격대가 동시에 바뀌는 필터 조합이 늘어나며 상태 동기화가 빠르게 복잡해졌습니다.
Solution
필터 상태를 탐색 시나리오 기준으로 재조합
복잡한 상태를 단순한 조건 객체로 정리하고 필터 변경 순서를 명확히 해, 검색 조건이 늘어나도 예측 가능한 탐색 흐름을 유지했습니다.
Achievements
Key Metrics
개발 상태
진행 중
팀 규모
1명
등록된 카드
100+
User Feedback
- •원하는 멤버와 앨범 기준으로 바로 좁혀갈 수 있어 탐색이 편했습니다.
- •채팅이 제품 안에서 이어져 거래 문의 흐름이 끊기지 않았습니다.
- •검색과 찜 기능이 함께 있어서 비교가 쉬웠습니다.
Learnings / Next Steps
- ✓리메이크에서는 전문 거래 제품이 되려면 탐색 속도와 거래 대화의 연결성이 가장 먼저 확보되어야 한다는 점을 배웠습니다.
- ✓이미지와 필터 로직은 초기부터 성능 예산을 두고 설계해야 이후 기능 추가가 쉬워진다는 기준을 세웠습니다.
- ✓다음 단계에서는 결제/안전거래 같은 신뢰 기능을 붙여 실제 거래 완료 경험까지 확장할 계획입니다.