본문으로 건너뛰기

FLUTTER · 제품 제작

Make Moment

캔버스 편집부터 결제까지 이어지는 수제 케이크 주문 앱

Make Moment 대표 화면
커스텀 케이크 주문 앱
제품 이야기

커스텀 케이크 주문 앱

Make Moment는 고객이 직접 케이크 디자인을 만들고 주문하는 Flutter 앱입니다.

청년창업지원사업을 진행하던 대표님에게 수주해 제작한 프로젝트입니다.

텍스트, 스티커, 이미지를 캔버스 위에 배치해 만든 결과물을 주문·결제 단계로 연결했습니다.

핵심 사용자 흐름

직접 꾸민 케이크가 주문과 결제로 이어집니다.

텍스트·사진·장식을 직접 배치한 맞춤 케이크를 주문하는 구매자

  1. 01상품 선택
  2. 02캔버스 편집
  3. 03옵션 확인
  4. 04주문 입력
  5. 05카드 결제
  6. 06앱 복귀
Make Moment 핵심 화면
정해진 옵션 대신 캔버스 편집기

텍스트, 스티커와 이미지의 위치·크기·회전을 사용자가 직접 정합니다.

결제 뒤 주문 화면으로 복귀

WebView 카드결제를 마치면 딥링크로 앱의 주문 흐름에 돌아옵니다.

01

주문 방식을 고르는 데서 시작합니다

처음 사용하는 사람도 주문 방식을 이해할 수 있도록 안내, 케이크 유형, 기존 디자인 탐색 순서로 시작합니다.

Make Moment 서비스 시작 안내
서비스 시작 안내
Make Moment 캔버스 편집
캔버스 편집
Make Moment 디자인 둘러보기
디자인 둘러보기
02

캔버스에서 케이크를 직접 꾸밉니다

텍스트와 이미지, 스티커의 위치와 크기를 바꾸고 완성한 디자인에 주문 정보를 붙입니다.

Make Moment 케이크 꾸미기
케이크 꾸미기
Make Moment 주문 정보 입력
주문 정보 입력
Make Moment 주문 옵션 선택
주문 옵션 선택
03

완성한 디자인으로 결제합니다

사용자가 올린 이미지는 압축해 주문 데이터와 함께 전송하고, 카드결제가 끝나면 앱으로 돌아오게 연결했습니다.

Make Moment 주문 전 안내
주문 전 안내

작업 정보

담당 범위
Flutter 앱 · 캔버스 편집기 · 주문 과정 · 이미지 업로드 · WebView 결제 · 딥링크
참여 기간
2023.06 – 2024.05 · 약 12개월
제품 환경
FLUTTER
현재 상태
개발 완료 · 레거시 프로젝트
확인 자료
실제 앱 화면 · 저장소 이력
구현 범위 자세히 보기
  1. 캔버스 편집기

    텍스트·스티커·이미지 배치, 크기 조절, 회전, 자르기, 순서 변경

  2. 주문 과정

    상품 선택부터 디자인 확인, 주문 정보 입력, 결제까지 4단계 구성

  3. 이미지 처리

    사용자 이미지 압축, 업로드, 주문 데이터와 디자인 결과 연결

  4. 결제

    브라우저 카드결제 화면 내장과 딥링크 앱 복귀