01. 서비스 소개

모바일 앱을 제작하려면 사전에 결정해야 할 사항이 많습니다. 그중 Front 정의와 정책 정의는 앱 화면의 구성과 동작 방식을 결정하는 핵심 단계입니다.

기존에는 안내서를 검토하신 후 "A안으로 진행합니다"처럼 문서로 회신하는 방식이었습니다. 하지만 문서만으로는 실제 UI가 어떻게 구현되는지, 스탬프 10개와 12개의 시각적 차이가 무엇인지 가늠하기 어려웠습니다.

본 빌더에서는 옵션을 선택하는 즉시 우측 모바일 화면에 실시간으로 반영됩니다. 상품을 직접 담아보고 쿠폰까지 적용해 볼 수 있어, 최종 결정 전에 화면을 명확히 검증할 수 있습니다.

본 빌더에서 결정하는 항목

• Front 정의 홈 타입, 앱 명칭, 홈 위젯, 메인 모듈, 금액 노출 여부, 주문 유형, 쿠폰 적용 기준, 등급 산정 기준
• 정책 정의 스탬프 운영 기준(판 개수·적립 조건·보상 혜택), 멤버십 체계(등급 수·등급명·승급 조건·혜택), 쿠폰 정책(유효기간·사용 채널)
• 테스트 상품 업종 카테고리별 샘플 메뉴 및 옵션 구성

본 빌더에서 다루지 않는 항목

• 브랜드 디자인 로고 원본 파일, 앱 아이콘 및 스플래시 시안 (별도 전달 · 미리보기용 로고는 1단계에서 올리실 수 있습니다)
• 외부 연동 및 계정 POS사 연동 요청, 카카오 비즈니스 계정 개설
• 인허가 및 계약 PG사 계약, 가맹점 동의서, 본인인증(KCB) 신청, 통신판매업 신고
• 실제 운영 데이터 전체 매장 정보, 전체 상품 DB, 점주 및 사용자 계정 등
• 정산 및 수수료 스탬프·쿠폰 정산금 및 본사/가맹점 분담 비율 협의

02. 전체 일정

정식 오픈까지 소요되는 총 8주의 일정 중, 첫 2주(Front 정의 및 정책 정의) 과정을 본 빌더에서 진행합니다. 이 2주 일정이 지연되면 전체 개발 착수도 연쇄적으로 지연되므로, 빠른 확정이 매우 중요합니다.

03. 홈 타입

앱 실행 시 가장 먼저 노출되는 첫 화면의 뼈대입니다. 화면 상단에 어떤 요소를 우선 배치할지에 따라 3가지 타입 중 하나를 선택하실 수 있습니다.

04. 앱명 · 로고 · 위젯

앱명

브랜드 인지도를 높이기 위해 브랜드명이 포함된 형태를 권장합니다. 보통 아래 세 가지 형태로 짓습니다.

• 브랜드명 그대로 예) 우지커피
• 브랜드명 + 오더 예) 우지커피오더
• 브랜드명 + 멤버십 / 멤버스 예) 우지커피 멤버스

위젯

휴대폰 홈 화면에서 앱을 열지 않고도 확인할 수 있는 작은 화면입니다. 가로형(보유 쿠폰·스탬프 잔여량 + 간편 주문 바로가기 4개)과 정사각형(최근 주문 메뉴 빠른 재주문) 중 선택하실 수 있습니다.

두 가지를 모두 사용하시거나, 위젯을 제공하지 않으실 수도 있습니다.

05. 사용 모듈

홈 화면에 상품을 보여주는 영역입니다. 아래 네 가지 중 최대 두 개까지 고르실 수 있습니다. 타임할인은 기본으로 들어갑니다.

모듈 금액 노출 여부

홈 화면 모듈에 상품 가격을 보여줄지 정합니다.

06. 주문 유형

어떤 방식으로 주문을 받을지 정합니다. 여러 개를 함께 쓰실 수 있습니다.

패스권이란

예를 들어 아메리카노 20잔을 30일간 사용하는 조건으로 40,000원 대신 36,000원에 미리 판매하는 방식입니다. 선구매를 유도하여 단골 고객을 확보(Lock-in)하는 효과가 있습니다. 단, 구매한 매장에서만 사용할 수 있으며 매장별로 가격을 다르게 설정할 수는 없습니다.

하단 탭 바 구성

앱 하단에 항상 고정되는 영역입니다. 하단 탭 메뉴 3칸을 선택하고, 중앙 원형 버튼 기능을 지정합니다. 고객이 가장 자주 누르는 기능을 배치하는 것이 좋습니다.

• 세 칸 홈 · 주문 · 혜택 · 전체메뉴 · 매장찾기 · 공지 중에서 고릅니다
• 가운데 버튼 여섯 곳 중 네 곳이 QR주문이고, 두 곳은 결제와 브랜드 로고로 바꿨습니다
• 이름 칸마다 이름을 바꾸실 수 있습니다. 에그드랍은 다섯 칸을 전부 새로 지었습니다

07. 스탬프 정책

시행 기준

그 밖에 정하실 것

08. 멤버십 등급

등급 개수

기본으로 제공하는 등급명은 Basic · Silver · Gold · Platinum · VIP입니다. 원하시는 이름으로 변경하실 수 있으며, 제공 등급명을 사용하시면 아이콘도 함께 전달해 드립니다. 직접 제작하신 아이콘을 사용하실 경우, 게이지 바에 적용할 색상값도 함께 전달해 주셔야 합니다.

등급 산정 기준

• 구매액 결제 금액 기준으로 판정합니다(쿠폰 사용액 제외)
• 스탬프 수 누적 스탬프 개수로 판정합니다

등급 조건 예시

등급 혜택과 유지 기간

혜택은 등급이 오를 때 한 번 주거나 등급 유지 중 매월 한 번 줄 수 있습니다. 정액 할인, 정률 할인, 제품 교환권 모두 가능합니다.

• 등급 상승 유지 기간과 관계없이 조건을 채우면 다음 날 올라갑니다
• 등급 하락 유지 기간이 지난 뒤 등급 산정일에 조건 미달이면 다음 날 내려갑니다

09. 쿠폰 정책

스탬프 완성, 등급 상승, 생일 등으로 나가는 쿠폰의 규칙을 정합니다.

쿠폰 사용 기준

장바구니에 여러 상품을 담았을 때 쿠폰을 몇 장 쓸 수 있는지 정합니다.

• 상품 기준 5개 상품을 담으면 상품마다 1장씩, 최대 5장까지 사용
• 주문 기준 5개 상품을 담아도 주문 전체에 1장만 사용

오프라인 적립과 사용

POS 및 키오스크에서도 멤버십을 적립하고 쿠폰을 사용하게 하려면 별도의 연동 개발이 필요합니다.

• 적립 멤버십 바코드 또는 휴대폰 번호로 적립
• 쿠폰 사용 앱 안의 쿠폰 바코드를 읽어 사용. 바코드 리더기가 있어야 합니다

10. 다른 브랜드는 이렇게 골랐습니다

현재 운영 중인 6개 브랜드 앱의 실제 화면 구성과 채택 비중입니다. 브랜드가 어떤 요소를 강조하고 싶은지에 따라 선택이 달라질 수 있으니 참고해 보시기 바랍니다.

홈 타입 채택 현황

B안이 가장 많습니다. 상단바를 브랜드 색으로 채우고 배너를 맨 위에 두는 구성입니다. 브랜드 색을 강하게 쓰면서 신메뉴를 계속 알리기 좋습니다. 반대로 A안은 등급 카드를 맨 위에 둡니다. 멤버십을 자주 확인하게 만들고 싶을 때 고릅니다.

브랜드별로 고른 것

고른 홈 타입끼리 묶어 놓았습니다. 카드를 누르면 그 브랜드 앱의 실제 화면을 보실 수 있습니다.

여기서 읽을 수 있는 것

• 상단바 색은 홈 타입을 따라갑니다. B안을 고른 세 곳은 모두 브랜드 색으로 채웠고, A안과 C안을 고른 세 곳은 흰색입니다.
• 가운데 버튼은 QR 고정이 아닙니다. 여섯 곳 중 두 곳이 결제와 브랜드 로고로 바꿨습니다. 고객이 가장 자주 누르는 기능을 넣습니다.
• 패스를 쓰는 곳은 이름에 브랜드명을 붙입니다. 영패스 · 그린패스 · 포트캔패스 세 곳 모두 그랬습니다.
• 등급은 네 단계가 가장 많습니다. 다섯 곳 중 네 곳이 4단계이고, 에그드랍만 3단계입니다.
• 등급명은 섞여 있습니다. 표준(Welcome · Silver · Gold · Platinum · VIP)을 그대로 쓰는 곳이 많지만, 샐러리아는 베이비그린 · 프레시그린 · 딥그린 · 골드그린으로 전부 새로 지었습니다.
• 홈 아이콘 칸 수가 브랜드마다 다릅니다. 두 칸부터 여덟 칸까지 있습니다.

11. 상품과 옵션

앱 화면 테스트를 위해 상품을 등록합니다. 화면 구성을 확인하는 용도이므로 카테고리당 대표 메뉴 2~3개만 등록하시면 충분합니다. 실제 전체 메뉴는 4주 차 수급 단계에서 POS 코드와 함께 일괄 등록합니다.

기본 카테고리

카테고리 이름은 브랜드에 맞게 바꾸시거나 새로 만드실 수 있습니다.

옵션

• 하나만 고르는 옵션 사이즈, 얼음량, 맵기 등
• 개수를 더하는 옵션 샷 추가, 시럽 추가처럼 하나씩 늘리는 것
• 여러 개 고르는 옵션 사이드 메뉴, 소스 추가 등

옵션마다 필수인지 선택인지, 몇 개까지 고를 수 있는지를 정하실 수 있습니다.

12. 미리보기와 확정

구성을 마치면 우측 시뮬레이터 화면에서 실제 앱의 동작 흐름(상품 선택 › 옵션 구성 › 쿠폰 적용 › 주문 완료)을 직접 테스트해 보실 수 있습니다. 최종 확정 시 개발팀에 전달할 화면 정의서(.md)와 항목표(.csv)가 자동 생성됩니다.

주문을 한 바퀴 돌려보실 수 있습니다

주문한 결과가 앱 전체에 반영됩니다

• 스탬프가 한 칸 채워지고, 다 채우면 설정하신 혜택 쿠폰이 발급됩니다
• 등급 진행바가 올라가고, 다음 등급까지 남은 금액이 줄어듭니다
• 사용한 쿠폰이 쿠폰함에서 사라집니다
• 홈 화면의 쿠폰 · 스탬프 숫자가 바뀝니다

확정하면 이렇게 전달됩니다

진행률은 두 가지로 보여드립니다

개발이 시작되면 진행 상황을 확인하실 수 있습니다. 숫자가 두 개인 이유는 하나만 보면 오해하기 쉽기 때문입니다.

• 진행률 전체 화면 중 몇 개를 끝냈는지. 개수만 셉니다
• 공정률 전체 작업량 중 얼마나 했는지. 무거운 화면이 더 큰 비중을 차지합니다

가벼운 화면부터 끝내면 진행률은 40%인데 공정률은 15%일 수 있습니다. 아직 무거운 작업이 남았다는 뜻입니다. 두 숫자를 함께 보시면 실제 상황이 정확히 보입니다.

어디서 보시나요

이 화면 맨 위의 [내 앱 현황 보기]를 누르시면 됩니다. 구성하신 기기에서는 바로 열리고, 다른 기기나 동료 분이 여시면 세 가지를 물어봅니다.

• 브랜드명 처음에 알려주신 그 이름입니다
• 담당자 성함 처음에 알려주신 그 이름입니다
• 연락처 뒤 네 자리 처음에 남기신 번호의 끝 네 자리입니다

연락처까지 받는 이유가 있습니다. 브랜드명은 누구나 아는 이름이고 담당자 성함도 명함 한 장이면 알 수 있어서, 둘만으로는 다른 회사가 귀사의 개발 현황과 화면정의서를 열어볼 수 있습니다. 뒤 네 자리는 그것을 막습니다. 여러 번 맞지 않으면 잠시 막히니, 확실하지 않으시면 담당자에게 물어봐 주세요.

13. 자주 묻는 질문