프로젝트 배경
1) 문제점
- 기존 수집품 거래 플랫폼은 상품 정보가 부족하고, 등급화가 불명확하여 거래의 신뢰도가 낮음.
- 실시간 경매 기능이나 커뮤니케이션 기능이 미비하여 사용자 간 실시간 소통 및 거래가 어려움.
2) 프로젝트 목표
- 수집품의 등급화를 통해 거래의 신뢰도를 높이고, 사용자 간 실시간 경매와 채팅 기능을 통해 커뮤니티 기반의 거래를 활성화.
- 수집가들의 편의성과 전환율을 고려한 모바일 중심 UX 구현.
3) 주안점
- 상품 등급, 카테고리, 태그 기반 탐색 UX 강화
- 실시간 기능(경매, 채팅, 알림)의 정확성과 성능 확보
- 운영자가 쉽게 통계와 유저를 관리할 수 있도록 관리자 시스템 최적화
- 기존 수집품 거래 플랫폼은 상품 정보가 부족하고, 등급화가 불명확하여 거래의 신뢰도가 낮음.
- 실시간 경매 기능이나 커뮤니케이션 기능이 미비하여 사용자 간 실시간 소통 및 거래가 어려움.
2) 프로젝트 목표
- 수집품의 등급화를 통해 거래의 신뢰도를 높이고, 사용자 간 실시간 경매와 채팅 기능을 통해 커뮤니티 기반의 거래를 활성화.
- 수집가들의 편의성과 전환율을 고려한 모바일 중심 UX 구현.
3) 주안점
- 상품 등급, 카테고리, 태그 기반 탐색 UX 강화
- 실시간 기능(경매, 채팅, 알림)의 정확성과 성능 확보
- 운영자가 쉽게 통계와 유저를 관리할 수 있도록 관리자 시스템 최적화
프로젝트 성과
경매 기능 안정화
실시간 타이머와 자동 입찰 처리 로직을 구현하여 안정적인 경매 환경 제공
결제 전환율 상승
3단계 내 결제 완료 UX 설계로 사용자 이탈 최소화
관리 효율성 증가
관리자 페이지에서 조건별 검색, 유저/상품 상태 변경, 통계 파악이 가능하여 운영 효율 향상
실시간 소통 활성화
실시간 채팅 및 알림 기능을 통해 커뮤니티 기반 소통과 거래 유도
핵심 기능
실시간 경매 기능
경매 타이머, 자동 입찰, 마감 알림 등 실시간 참여 시스템 구성
카드 등급화 기반 상품 등록
수집품 등급에 따라 검색 필터링, 상품 정보 강화
실시간 채팅
1:1 채팅 및 문의 대응 시스템, 알림센터와 연동
결제 및 배송 관리
결제수단 등록, 계좌인증, 배송지 선택, 구매 완료 후 추적 기능
관리자 페이지
상품 등록, 사용자 관리, 통계 분석, 콘텐츠 관리 등 백오피스 기능 제공
진행 단계
Kick-off – 방향성 설정
2024.06.
수집가 중심 거래 플랫폼 필요성 도출, 실시간 UX 구조 기획 착수
Define – 기획 작성
2024.06.
등급 기준, 경매 흐름, 채팅 구조, 관리자 기능 정의 및 IA 설계
Design – UI/UX 설계
2024.07.
모바일 중심 화면 설계, 카드 정보 강조 UI, 관리자 인터페이스 설계
Develop – 기능 개발
2024.07.
Flutter 기반 사용자 앱, Next.js 관리자 페이지, Node.js 백엔드 동시 개발 진행
QA – 테스트 및 수정
2024.09.
기능별 QA, 실시간 기능 부하 테스트, 시나리오 기반 버그 수정
프로젝트 상세
1) 포트폴리오 소개 :
BREAK는 카드 수집가들을 위한 온라인 그레이딩 & 경매 플랫폼으로, 수집품의 상태에 따라 가치를 매기고 실시간으로 판매·경매할 수 있는 구조를 제공합니다. 특히 스포츠/트레이딩/포토카드 등 다양한 카테고리를 포함하며, 수집 커뮤니티 특유의 빠른 소통을 위한 실시간 채팅, 실시간 경매, 실시간 알림 기능이 함께 탑재된 커머스 앱입니다.
서비스 카테고리: 리셀/수집품 중개 플랫폼, 경매 커머스
메인 타깃: 스포츠 카드·포토카드 수집가, 리셀러, 마니아층
2) 작업 범위 :
- 전체 웹/앱 프론트엔드 및 관리자 페이지 개발 (Next.js, React, Flutter)
- Node.js 기반 백엔드 기능 개발 (인증, 결제, 경매 API 등)
- 전 기능 QA 테스트 및 릴리즈 준비 지원
- UI 컴포넌트 정의부터 관리자 기능까지 설계 및 구현 주도
- 스프린트 기반 주간 기능 개발 진행 및 단계별 QA 피드백 적용
3) 주요 업무 :
- 상품 등록 및 경매 시스템 구현: 등급표시 기반 경매 기능, 예약어/카테고리 선택, 이미지 등록, 타이머 설정
- 실시간 채팅 및 알림 기능 개발: 구매자-판매자 간 1:1 채팅, 실시간 메시지 전달, 알림센터 구성
- 장바구니 및 결제 로직: 결제단계 간소화, 계좌 인증, 카드 등록 및 배송지 관리 기능 포함
- 검색 및 필터 UX 최적화: 무한스크롤 검색, 필터링, 관심 카테고리/태그별 탐색 기능
- 관리자 시스템 구축: 조건별 검색, 사용자 등급 관리, 콘텐츠 등록, 통계 파악 기능 제공
4) 주안점 :
- 수집가를 위한 탐색 구조 설계: 관심 제품을 쉽게 찾고 즉시 구매/경매 참여가 가능한 UX 제공
- 실시간 기능 중심 설계: 경매와 채팅을 실시간으로 처리할 수 있도록 서버-클라이언트 구조 최적화
- 사용자 이탈 최소화를 고려한 결제 UI: 마지막 단계 UX를 간결하게 구성하여 전환율 향상
- 관리자 페이지의 단순화 및 가독성 향상: 복잡한 검색 조건과 사용자 분류 기능을 누구나 쉽게 사용 가능하도록 설계
BREAK는 카드 수집가들을 위한 온라인 그레이딩 & 경매 플랫폼으로, 수집품의 상태에 따라 가치를 매기고 실시간으로 판매·경매할 수 있는 구조를 제공합니다. 특히 스포츠/트레이딩/포토카드 등 다양한 카테고리를 포함하며, 수집 커뮤니티 특유의 빠른 소통을 위한 실시간 채팅, 실시간 경매, 실시간 알림 기능이 함께 탑재된 커머스 앱입니다.
서비스 카테고리: 리셀/수집품 중개 플랫폼, 경매 커머스
메인 타깃: 스포츠 카드·포토카드 수집가, 리셀러, 마니아층
2) 작업 범위 :
- 전체 웹/앱 프론트엔드 및 관리자 페이지 개발 (Next.js, React, Flutter)
- Node.js 기반 백엔드 기능 개발 (인증, 결제, 경매 API 등)
- 전 기능 QA 테스트 및 릴리즈 준비 지원
- UI 컴포넌트 정의부터 관리자 기능까지 설계 및 구현 주도
- 스프린트 기반 주간 기능 개발 진행 및 단계별 QA 피드백 적용
3) 주요 업무 :
- 상품 등록 및 경매 시스템 구현: 등급표시 기반 경매 기능, 예약어/카테고리 선택, 이미지 등록, 타이머 설정
- 실시간 채팅 및 알림 기능 개발: 구매자-판매자 간 1:1 채팅, 실시간 메시지 전달, 알림센터 구성
- 장바구니 및 결제 로직: 결제단계 간소화, 계좌 인증, 카드 등록 및 배송지 관리 기능 포함
- 검색 및 필터 UX 최적화: 무한스크롤 검색, 필터링, 관심 카테고리/태그별 탐색 기능
- 관리자 시스템 구축: 조건별 검색, 사용자 등급 관리, 콘텐츠 등록, 통계 파악 기능 제공
4) 주안점 :
- 수집가를 위한 탐색 구조 설계: 관심 제품을 쉽게 찾고 즉시 구매/경매 참여가 가능한 UX 제공
- 실시간 기능 중심 설계: 경매와 채팅을 실시간으로 처리할 수 있도록 서버-클라이언트 구조 최적화
- 사용자 이탈 최소화를 고려한 결제 UI: 마지막 단계 UX를 간결하게 구성하여 전환율 향상
- 관리자 페이지의 단순화 및 가독성 향상: 복잡한 검색 조건과 사용자 분류 기능을 누구나 쉽게 사용 가능하도록 설계









