국내 여행 사진을 커스텀 스티커로 재해석해 추억을 시각화하는 맞춤형 기록 솔루션 프로젝트입니다.
함뜨까 여행 사진 커스텀 스티커 앱 개발
과제: 사진을 지역 모양으로 잘라 보는 편집이 실시간이어야 하고, 주문한 원본은 제작까지 남아야 합니다.
한 것: iOS·Android 하이브리드 앱 + 관리자 웹 + API 서버 + 토스페이먼츠 결제
프로젝트 정보
- 클라이언트·업종: 함뜨까 · 커스텀 여행굿즈 커머스
- 기간: 2025.06 ~ 2025.08
- 범위: 기획 · 디자인 · 프론트엔드 · 백엔드
- 산출물: 사용자 앱 · 관리자 웹 · API 서버
- 플랫폼: iOS·Android 앱(하이브리드) · 웹
- 기술 스택: React · Capacitor · NestJS · MySQL · Toss Payments · AWS
사진을 지역 모양으로 자르는 편집을 앱 안에서 실시간으로 할 수 있나
함뜨까는 여행 사진을 다녀온 지역 모양으로 잘라 스티커로 만드는 서비스입니다. 결과물이 사진 한 장에 달려 있어 사용자는 주문 전에 결과를 봐야 하고, 그 미리보기는 손가락으로 확대·이동하는 동안 끊기면 안 됩니다. 그때 본 원본은 제작·배송까지 그대로 남아야 했습니다.
어떻게 풀었나
판단 1. 마스킹을 SVG path로 정밀하게 잡았다
지역 경계를 SVG path로 두고 사진에 마스킹해, 지역 모양 그대로 잘립니다. Canvas 클리핑에 터치 줌·팬을 붙여 사용자가 손가락을 움직이는 동안 미리보기가 바로 따라옵니다.
판단 2. 주문 시점에 원본을 아카이브했다
주문이 생기면 편집에 쓴 원본 이미지를 S3에 아카이브하고, 실패하면 트랜잭션을 되돌립니다. 제작은 주문 뒤에 시작되므로 사용자가 나중에 사진을 지우거나 바꿔도 만들 파일이 사라지지 않습니다.
판단 3. 소셜 로그인 4종을 전략 패턴으로 열어뒀다
카카오·네이버·구글·애플을 Firebase Custom Token으로 묶고 제공자별 처리를 전략 패턴으로 갈라, 하나가 더 붙어도 인증 흐름은 그대로입니다. Capacitor 브릿지로 iOS·Android 네이티브 로그인을 태워 하이브리드에서도 같은 화면을 씁니다.
이런 고민이면 이 사례가 답입니다
- 이미지 편집이 들어가는 커머스 앱 개발 업체를 찾는 중
- 하나의 코드베이스로 iOS·Android를 함께 내려는 경우
- 토스페이먼츠 결제를 붙인 커머스 첫 버전이 필요한 경우
자주 묻는 질문
Q. 결제까지 붙은 커머스 앱 첫 버전은 얼마나 걸리나
이 건은 편집 기능부터 결제·관리자까지 약 3개월이었습니다(기간 기준, 금액과 무관).
Q. 결제는 어떤 수단까지
이 건은 토스페이먼츠로 카드·가상계좌를 붙이고, 입금 확인은 Webhook으로 처리했습니다.
비슷한 프로젝트를 고민 중이라면, 상담만 받아보셔도 됩니다.
갱신 2026.09.03 · 제로스튜디오