스냅픽
팝업스토어를 손쉽게 관리하고 이용할 수 있는 금융 커머셜 모바일 애플리케이션입니다. 판매자는 자신만의 팝업스토어를 등록하고 관리할 수 있으며, 소비자는 간편하게 팝업스토어를 검색하고 상품을 구매할 수 있습니다. SnapPick을 통해 팝업스토어와 관련된 모든 것을 간편하게 해결하세요!
개요
MZ 세대는 이색적인 경험을 중시하며, 이를 SNS에 공유하고자 하는 욕구가 큽니다. 팝업스토어는 이러한 트렌드를 반영하여, 한정된 시간과 공간에서 운영되는 독특한 매장으로 MZ 세대의 큰 호응을 얻고 있습니다. 네이버 데이터랩에 따르면, 최근 7년 동안 ‘팝업스토어’ 검색량이 486% 증가하는 등 그 인기는 꾸준히 상승 중입니다.
그러나 기존의 결제 및 매장 관리 시스템은 팝업스토어 운영의 유연성을 지원하기에 부족하여, 운영자와 소비자 모두에게 불편을 초래하고 있습니다. 이를 해결하기 위해 팝업스토어의 등록, 관리, 검색, 구매, 방문 처리를 통합하여 간편하게 운영할 수 있는 모바일 애플리케이션으로 기획되었습니다.
주요 기능
QR 코드를 통한 팝업스토어 상품 결제
사용자는 스토어에서 제공한 QR을 인식하고 해당 스토어의 장바구니 페이지로 이동
사용자가 구매할 총 금액에 비해 잔고가 부족하거나, 등록된 카드가 없을 경우 카드 설정 페이지 이동
카드 추가 또는 변경 확인 후 장바구니 상태 유무에 따라 결제 페이지로 재 이동
팝업스토어 상품 등록 및 실시간 재고 조회 등의 관리
팝업스토어 검색 및 인기 팝업스토어 조회
1원 송금 검증을 통한 인증 및 계좌 생성
시스템 아키텍쳐
Frontend
Backend
CI / CD
Collaboration
담당 구현
소셜 로그인
Oauth를 통한 카카오 간편 로그인 구현, 리다이렉트 페이지에 파라미터로 실린 토큰 추출 후 서비스로 리다이렉트
회원 가입
기본 정보, 간편 비밀번호, 계좌 정보 단계 설정. useRef를 적극 활용한 입력 UX 개선
QR 결제
QR 코드 인식을 통한 결제 진행, 결제 실패 상황에 따른 처리(등록 카드 부재 및 카드 잔액 부족 등) 세분화
팝업스토어 조회
조회 수에 따른 인기 팝업스토어 처리 및 pulling을 통해 주기적인 데이터 갱신
스타일 구조화
커스텀 테마 설정 및 플러그인 활용 및 확장, 컴포넌트 기반 아키텍쳐 결합을 통해 일관된 스타일 유지 및 재 사용성 증가
디자인
keyframe 애니메이션을 활용한 blob, confetti 효과와 clip-path를 적용한 쿠폰, 하단 바 디자인
서비스 대표 화면
팝업스토어
인기 팝업스토어 및 검색을 통해 팝업스토어를 찾아볼 수 있습니다.
QR 결제
팝업스토어 QR을 인식하고 장바구니에 상품을 담아 간편하게 결제할 수 있습니다.
계좌 및 결제 내역
서비스에 계좌를 등록하고 주 계좌로 지정할 수 있으며 결제 내역을 확인할 수 있습니다.
성과 또는 배운 점
QR 코드 활용
이번 프로젝트를 통해 QR 코드에 대해 깊이 이해하게 되었고, 이를 기반으로 서비스를 구현하는 과정이 매우 흥미로웠습니다. QR 코드의 활용 가능성에 대해 새롭게 인식하며, 실용적인 서비스를 창출하는 데 큰 만족감을 느꼈습니다.
Typescript
기존 프로젝트에서 NaN이나 Null 값으로 인한 에러를 해결하는 데 많은 시간을 소모했으며, 이러한 문제가 코드 안정성에 미치는 영향을 실감했습니다. 이를 개선하기 위해 타입스크립트를 도입, 변수의 타입을 명확히 정의하고 컴파일 타임에 오류를 사전 파악함으로써 코드 품질을 향상시키고 더 신뢰할 수 있는 시스템을 구축할 수 있었습니다.
시간 관리
이 프로젝트는 해커톤으로 진행되었기 때문에 시간 관리의 중요성을 절실히 느낄 수 있었습니다. 사전 개발 기간 동안 주 단위, 일 단위로 목표를 설정하고 철저히 지키며, 해커톤 당일에는 시간 단위로 세분화하여 각 단계 별로 끝까지 완성도 높은 프로젝트를 구현하기 위해 최선을 다했습니다. 이를 통해 시간 관리가 프로젝트 성공에 얼마나 중요한지 깨닫게 되었습니다.