STORYBOARD

리틀트립 스토리보드

아이 동반 외출 코스, 지도 위에서 완성하기

스토리보드란?

서비스의 화면을 실제 모습에 가깝게 미리 그려 보는 문서입니다. 코스를 짜는 부모 회원과, 다음 날부터 직접 운영해야 하는 비개발자 운영자, 두 사람의 눈으로 화면을 정리했습니다.

지도에서 체험 프로그램과 주변 식당·카페를 함께 보고 하루 코스를 짠다
짠 코스를 저장하고 카카오톡으로 가족에게 공유한다
예약을 신청하면 관리자가 상태를 확인하고 처리한다
비개발자인 운영자도 다음 날부터 장소·예약을 직접 관리한다

마지막까지 보시면 생각하고 계신 시스템의 모습이 머릿속에 그려질 것입니다.

이용 회원 시나리오

부모 회원 여정 — 지도에서 코스 완성까지

체험 프로그램을 고르면 주변 아이 동반 가능 식당·카페가 지도에 함께 뜨고, 방문 순서를 정해 하루 코스를 완성하는 흐름입니다.

1. 지도 탐색

체험처 위치와
유아 편의시설 확인

2. 코스 구성

주변 식당·카페까지
순서를 정해 하루 코스로

3. 저장·공유

코스 저장 후
카카오톡으로 공유

4. 예약 신청

현장결제로
예약 신청

5. 현장 이용

체험처 방문 후
리뷰 작성

이용 회원 | 화면 01

지도 탐색 + 장소 상세

littletrip.kr/map
분당구 정자동 근처 체험 찾기
분당구 정자동
원본 사진
책놀이터 정자점
영업중
4.8 (212) · 독서·보드게임 체험
경기 성남시 분당구 정자로 100, 3층
10:00-19:00 주차 20대 아기의자 수유실
그린테이블 키즈카페
곧 마감
코딩키즈 판교
휴무
지도
내 코스
알림
마이페이지

[화면 개요 및 목적]

"체험 프로그램과 주변 아이 동반 가능 식당·카페를 함께 보여준다"(brief R2)는 약속의 첫 증거 화면입니다. 지도에서 마커를 탭하면 영업시간·주차·아기의자·수유실 같은 유아 편의시설 정보가 바텀시트로 뜹니다.

[핵심 기능 로직]

지도 마커는 영업중(초록)·곧마감(주황)·휴무(회색) 상태로 색이 구분되어 "지금 갈 수 있는 곳"을 한눈에 걸러낼 수 있습니다. "코스에 담기"를 누르면 다음 화면(S2 코스 구성)의 방문 목록에 바로 추가됩니다.

  • 지도 위 편의시설 한눈에
    카카오맵 API · 마커 클러스터링
  • 영업 상태 실시간 표시
    PostgreSQL 장소·운영시간 테이블
이용 회원 | 화면 02

코스 구성 — 방문 순서 정하기

littletrip.kr/course/build
정자동 하루 코스
분당구 체험처 5곳 기준
1
2
3
4
5
이동 6.8km
전 구간 도보 15분 이내 · 순서를 길게 눌러 바꿔보세요
책놀이터 정자점
10:00 - 11:30 · 체험
예약가능
브레드덕 베이커리 키즈클래스
12:00 - 13:30 · 체험
예약가능
그린테이블 키즈카페
13:30 - 14:30 · 식사
마감임박
파머스팜 키즈팜
15:00 - 16:30 · 체험
예약가능
코딩키즈 판교
17:00 - 18:00 · 체험
예약가능
장소 추가하기
총 5곳 · 이동 6.8km 예상 7시간

[화면 개요 및 목적]

brief 역제안의 핵심(R3) — "체험 프로그램 선택 시 주변 식당·카페가 지도에 함께 표시되고, 방문 순서를 바꿔가며 하루 코스를 짜는 흐름"을 그대로 구현한 화면입니다. 미니맵의 점선 경로가 순서를 바꿀 때마다 즉시 갱신됩니다.

[핵심 기능 로직]

1차 MVP는 분당 한정, 체험처 4~5곳(brief R8) 범위로 검증합니다. 항목을 길게 눌러 순서를 드래그로 바꾸면 ①②③④ 번호와 경로선이 다시 그려지며, "부모가 실제 이 방식으로 코스를 짜는지"를 확인하는 1차 가설 검증의 핵심 화면입니다.

  • 체험+식당 한 지도에 함께
    카카오맵 API · 경로 오버레이
  • 순서 변경 즉시 반영
    React 상태관리(Zustand)
이용 회원 | 화면 03

코스 저장 완료 + 카카오톡 공유

littletrip.kr/course/1042/share
코스가 저장되었습니다
이든이와 정자동 나들이
8월 30일 (일) · 4곳 · 5시간 30분
저장됨
SJ-014
BD-021
GT-007
FP-033
littletrip.kr/c/8f3k2p
카카오톡 공유 미리보기
이든이와 정자동 나들이 · 리틀트립
체험 2곳 · 식사 1곳 · 8월 30일(일) 코스를 확인해보세요
공유하기
카카오톡
링크복사
문자
코스함
내 코스함
이든이와 정자동 나들이 저장됨
판교 주말 코스 임시저장

[화면 개요 및 목적]

brief show 항목 2번 "짠 코스를 저장하고 카카오톡으로 공유"(R4)의 증거 화면입니다. 저장 즉시 고유 URL이 발급되고, 카카오톡·문자·링크복사로 가족·양육자에게 바로 전달할 수 있습니다.

[핵심 기능 로직]

코스는 "저장됨"과 "임시저장" 두 상태로 관리되어 여러 코스를 짜 보다가 마음에 드는 것만 완료할 수 있습니다. 공유 링크는 로그인 없이도 열람 가능해 양육자 간 공유 허들을 없앱니다.

  • 카카오톡으로 바로 공유
    Kakao SDK Share
  • 코스별 고유 링크 발급
    NestJS REST API
이용 회원 | 화면 04

예약 신청 — 현장결제

littletrip.kr/reserve/new
예약 신청
책놀이터 정자점
8월 30일 (일) 10:00
마감임박
날짜 선택
8/29(토)
8/30(일)
8/31(월)
인원 선택
성인
2
아동
1
현장결제 · 계좌이체 불가
1인 12,900원 × 3 38,700원
요청사항
돌잡이 아기 동반이라 유모차 진입 가능한지 확인 부탁드려요
이용 안내
실내화 · 양말 지참 필수
체험 사진은 종료 후 앨범으로 전달
전날 오후 6시까지 무료 취소 가능

[화면 개요 및 목적]

brief R6 "예약 신청(결제 없이 현장결제, 수동 전달)"의 증거 화면입니다. 온라인 결제 연동 없이 날짜·인원만 확정해 신청하고, 실제 결제는 현장에서 이루어집니다.

[핵심 기능 로직]

날짜 칩은 선택됨(coral)·미선택(회색) 2가지 상태로 구분됩니다. 신청이 접수되면 다음 화면(S6 관리자 대시보드)의 예약 목록에 "대기중" 상태로 즉시 나타나 관리자가 확인·확정합니다.

  • 현장결제 예약 접수
    NestJS REST API
  • 예약 상태 실시간 반영
    PostgreSQL 트랜잭션
이용 회원 | 화면 05

마이페이지 — 로그인 · 내 리뷰

littletrip.kr/mypage
김도윤 님
K 카카오 연동됨 N 네이버 연동가능
4
저장한 코스
7
작성한 리뷰
2
진행중 예약
저장한 코스
내 리뷰
전체 7개 최신순
그린테이블 키즈카페 노출중
5.0 · 3일 전
아기 의자랑 놀이 공간이 따로 있어서 편했어요 ㅎㅎ 재방문 의사 있습니다
파머스팜 키즈팜 노출중
4.5 · 9일 전
동물 먹이주기 체험이 아이가 정말 좋아했어요. 다만 대기시간이 좀 길었어요
코딩키즈 판교 블라인드
3.0 · 12일 전
신고 처리로 다른 회원에게 보이지 않는 리뷰입니다
책놀이터 정자점 노출중
4.8 · 18일 전
보드게임 종류가 다양해서 좋았어요. 다음에도 또 방문할게요
리뷰 3개 더 쓰면 다음 코스 10% 할인
진행률 7/10
지도
내 코스
알림
마이페이지

[화면 개요 및 목적]

brief R1(회원가입·마이페이지·소셜로그인)과 R5(리뷰 작성/열람)를 한 화면에 묶어 화면 수를 압축했습니다. 카카오·네이버 로그인 연동 상태와 내가 쓴 리뷰를 함께 확인합니다.

[핵심 기능 로직]

리뷰는 노출중·블라인드 2가지 상태를 가집니다. 관리자(S6)가 신고 처리로 블라인드 전환하면 이 화면에도 즉시 반영되어, 관리자 화면과 이용 화면이 하나의 데이터로 연결되어 있음을 보여줍니다.

  • 카카오·네이버로 바로 로그인
    OAuth 2.0 · 카카오·네이버 로그인 API
  • 내 리뷰 한곳에서 관리
    NestJS REST API
운영자 | 관리자 화면

관리자 대시보드 — 예약·장소·회원·리뷰 관리

admin.littletrip.kr/reservations
리틀트립 Admin
대시보드
장소 관리
프로그램 관리
회원 관리
리뷰 관리
예약 관리
정하늘 운영자
비개발자 운영 계정
예약 관리
예약자·체험처 검색
실시간 접속 3명
오늘 예약
6건
+2 어제대비
대기중 처리
2건
확인 필요
이번달 신규회원
48명
+11 이번주
등록 체험처
4곳
분당구 한정
예약자
체험처
일시
인원
상태
처리
김*준 010-****-5678
책놀이터 정자점
8/30(일) 10:00
성인2·아동1
대기중
상태 변경
박*연 010-****-2231
파머스팜 키즈팜
8/30(일) 15:00
성인1·아동2
확정
상태 변경
정*우 010-****-9012
브레드덕 베이커리
8/31(월) 12:00
성인2
확정
상태 변경
최*희 010-****-4423
그린테이블 키즈카페
8/29(토) 13:00
성인1·아동1
취소
-
한*아 010-****-7788
책놀이터 정자점
8/28(금) 11:00
성인2·아동2
완료
-

[화면 개요 및 목적]

brief R7(장소·프로그램 등록/수정, 회원조회·리뷰관리·예약상태변경)의 대표 증거 화면입니다. "비개발자도 이어받아 운영할 수 있는 관리자 화면"이라는 신뢰 메시지의 실물입니다.

[핵심 기능 로직]

예약은 대기중(주황)→확정(초록)/취소(빨강)→완료(회색) 4단계로 상태가 관리됩니다. "상태 변경" 드롭다운 하나로 처리하도록 설계해, 전산 담당 없는 1인 창업자도 다음 날부터 직접 운영할 수 있게 합니다.

  • 비개발자도 바로 조작
    React Admin 대시보드
  • 예약 상태 변경 즉시 반영
    NestJS API + PostgreSQL
  • 발주사 명의로 안전하게 운영
    AWS 또는 NCP 신규 구성
썸네일 · 단순판

지도 탐색 (단순판)

littletrip.kr/map
분당구 정자동
책놀이터 정자점
영업중
4.8 (212)
10:00-19:00
정자로 100, 3층
아기의자 수유실 주차
다음: 그린테이블 키즈카페 마감임박

[내부용]

위시켓 포트폴리오 썸네일(480×480, 실제 노출 150px)용 단순판입니다. 큰 요소 4~5개만 남겨 축소돼도 무슨 화면인지 읽히도록 했습니다. 클라이언트에게 보이는 덱에는 노출되지 않습니다.

NEXT STEP

화면 하나하나를
함께 확인하겠습니다

사전 미팅에서 여섯 화면을 같이 짚어보며 범위를 확정합니다. 체험처 4~5곳 데이터 확보와 정부지원 자격 서류는 미리 준비해 주시면 45일 일정에 여유가 생깁니다.

체험처 4~5곳 섭외 확정
정부지원 자격 서류 준비
10월 오픈 일정 확정

"부모가 실제 이 방식으로 코스를 짜는지" — 이번 1차 MVP가 검증할 단 하나의 질문입니다.