처음으로
v0.3 · 2026-05-30
VIBE · WIREFRAME STORYBOARD

바이브 기획서 내용

내용 · 모바일 와이어프레임 기획서

내용 텍스트가 들어갑니다. 본 문서의 목적과 범위, 구성 방식을 설명하는 내용입니다. 우측 하단 screen flow에서 화면 간 이동이 가능합니다.

Version
v0.3
Date
2026-05-30
Platform
내용
Scope
내용
Author
내용
히스토리 · 버전 관리
버전날짜변경 내용작성자상태
v0.32026-05-30내용 텍스트 · 변경 이력 내용입니다.내용현재
v0.22026-05-22내용 텍스트 · 변경 이력 내용입니다.내용이전
v0.12026-05-14내용 텍스트 · 최초 작성 내용입니다.내용이전
v0.3 · 2026-05-30
SCREEN INDEX

인덱스

전체 화면 목록 · 14개 화면

내용 텍스트가 들어갑니다. 전체 화면의 목록과 계층을 한눈에 확인하는 인덱스입니다. 우측 하단 screen flow 트리에서 화면 간 이동이 가능합니다.

front-gnb01
내용 › 내용

GNB01 · 내용

Wireframe 기획 예시 · 더미데이터
GNB01
hover → screen flow

9:41●●● 📶 🔋
1
내용
2
2-1
내용
000,000 내용
2-2
+000 (+0.00%) 내용
3
내용
내용 설명 텍스트
+000 ›
4
내용
내용
내용
내용
5
내용
내용 텍스트 · 내용
+000
내용
내용 텍스트 · 내용
+000
내용
내용 텍스트 · 내용
+000
탭1
탭2
탭3
탭4
탭5
넘버링 정의 · front-gnb01
1

내용

내용 텍스트가 들어갑니다. 해당 영역의 목적과 표시 정보를 설명하는 내용입니다.

2

내용

내용 텍스트가 들어갑니다. 해당 영역의 목적과 표시 정보를 설명하는 내용입니다.

2-1

내용

내용 텍스트가 들어갑니다.

2-2

내용

내용 텍스트가 들어갑니다.

3

내용

내용 텍스트가 들어갑니다. 해당 영역의 목적과 표시 정보를 설명하는 내용입니다.

4

내용

내용 텍스트가 들어갑니다. 해당 영역의 목적과 표시 정보를 설명하는 내용입니다.

5

내용

내용 텍스트가 들어갑니다. 해당 영역의 목적과 표시 정보를 설명하는 내용입니다.

front-내용01
내용 › 내용

화면 01 · 내용

Wireframe 기획 예시 · 더미데이터
화면 01
hover → screen flow

9:41●●● 📶 🔋
1
내용
2
내용
000,000
내용 텍스트 · 내용
2-1
내용
+000
2-2
내용
+000
3
내용
내용
내용
내용
4
5
내용
탭1
탭2
탭3
탭4
탭5
넘버링 정의 · front-내용01
1

내용

내용 텍스트가 들어갑니다. 해당 영역의 목적과 표시 정보를 설명하는 내용입니다.

2

내용

내용 텍스트가 들어갑니다. 해당 영역의 목적과 표시 정보를 설명하는 내용입니다.

2-1

내용

내용 텍스트가 들어갑니다.

2-2

내용

내용 텍스트가 들어갑니다.

3

내용

내용 텍스트가 들어갑니다. 해당 영역의 목적과 표시 정보를 설명하는 내용입니다.

4

내용

내용 텍스트가 들어갑니다. 해당 영역의 목적과 표시 정보를 설명하는 내용입니다.

5

내용

내용 텍스트가 들어갑니다. 해당 영역의 목적과 표시 정보를 설명하는 내용입니다.

front-내용02
내용 › 내용

화면 02 · 내용

Wireframe 기획 예시 · 더미데이터
화면 02
hover → screen flow

9:41●●● 📶 🔋
1
내용
2
내용
000
내용000
내용000
내용000
내용000
3
3-1
내용
내용 텍스트 · 내용
+000
3-2
내용
내용 텍스트 · 내용
+000
4
내용
탭1
탭2
탭3
탭4
탭5
넘버링 정의 · front-내용02
1

내용

내용 텍스트가 들어갑니다. 해당 영역의 목적과 표시 정보를 설명하는 내용입니다.

2

내용

내용 텍스트가 들어갑니다. 해당 영역의 목적과 표시 정보를 설명하는 내용입니다.

3

내용

내용 텍스트가 들어갑니다. 해당 영역의 목적과 표시 정보를 설명하는 내용입니다.

3-1

내용

내용 텍스트가 들어갑니다.

3-2

내용

내용 텍스트가 들어갑니다.

4

내용

내용 텍스트가 들어갑니다. 해당 영역의 목적과 표시 정보를 설명하는 내용입니다.

front-내용03
내용 › 내용

화면 03 · 내용

Wireframe 기획 예시 · 더미데이터
화면 03
hover → screen flow

9:41●●● 📶 🔋
1
내용
2
3
내용내용내용
4
4-1
내용
000
4-2
내용
000
5
내용
내용 텍스트 · 내용
+000
내용
내용 텍스트 · 내용
+000
내용
내용 텍스트 · 내용
+000
탭1
탭2
탭3
탭4
탭5
넘버링 정의 · front-내용03
1

내용

내용 텍스트가 들어갑니다. 해당 영역의 목적과 표시 정보를 설명하는 내용입니다.

2

내용

내용 텍스트가 들어갑니다. 해당 영역의 목적과 표시 정보를 설명하는 내용입니다.

3

내용

내용 텍스트가 들어갑니다. 해당 영역의 목적과 표시 정보를 설명하는 내용입니다.

4

내용

내용 텍스트가 들어갑니다. 해당 영역의 목적과 표시 정보를 설명하는 내용입니다.

4-1

내용

내용 텍스트가 들어갑니다.

4-2

내용

내용 텍스트가 들어갑니다.

5

내용

내용 텍스트가 들어갑니다. 해당 영역의 목적과 표시 정보를 설명하는 내용입니다.

front-내용04
내용 › 내용

화면 04 · 내용

Wireframe 기획 예시 · 더미데이터
화면 04
hover → screen flow

9:41●●● 📶 🔋
1
내용
2
내용
내용
000,000 내용
+000 (+0.00%) 내용
3
3-1
내용
3-2
내용
4
내용
내용 설명 텍스트
내용
내용 설명 텍스트
5
내용
탭1
탭2
탭3
탭4
탭5
넘버링 정의 · front-내용04
1

내용

내용 텍스트가 들어갑니다. 해당 영역의 목적과 표시 정보를 설명하는 내용입니다.

2

내용

내용 텍스트가 들어갑니다. 해당 영역의 목적과 표시 정보를 설명하는 내용입니다.

3

내용

내용 텍스트가 들어갑니다. 해당 영역의 목적과 표시 정보를 설명하는 내용입니다.

3-1

내용

내용 텍스트가 들어갑니다.

3-2

내용

내용 텍스트가 들어갑니다.

4

내용

내용 텍스트가 들어갑니다. 해당 영역의 목적과 표시 정보를 설명하는 내용입니다.

5

내용

내용 텍스트가 들어갑니다. 해당 영역의 목적과 표시 정보를 설명하는 내용입니다.

front-내용05
내용 › 내용

화면 05 · 내용

Wireframe 기획 예시 · 더미데이터
화면 05
hover → screen flow

9:41●●● 📶 🔋
1
내용
2
3
3-1
내용
3-2
내용
4
내용000
내용000
합계000,000
탭1
탭2
탭3
탭4
탭5
넘버링 정의 · front-내용05
1

내용

내용 텍스트가 들어갑니다. 해당 영역의 목적과 표시 정보를 설명하는 내용입니다.

2

내용

내용 텍스트가 들어갑니다. 해당 영역의 목적과 표시 정보를 설명하는 내용입니다.

3

내용

내용 텍스트가 들어갑니다. 해당 영역의 목적과 표시 정보를 설명하는 내용입니다.

3-1

내용

내용 텍스트가 들어갑니다.

3-2

내용

내용 텍스트가 들어갑니다.

4

내용

내용 텍스트가 들어갑니다. 해당 영역의 목적과 표시 정보를 설명하는 내용입니다.

front-내용06
내용 › 내용

화면 06 · 내용

Wireframe 기획 예시 · 더미데이터
화면 06
hover → screen flow

9:41●●● 📶 🔋
1
내용
2
2-1
내용
000,000 내용
2-2
+000 (+0.00%) 내용
3
내용
내용 설명 텍스트
+000 ›
4
내용
내용
내용
내용
5
내용
내용 텍스트 · 내용
+000
내용
내용 텍스트 · 내용
+000
내용
내용 텍스트 · 내용
+000
탭1
탭2
탭3
탭4
탭5
넘버링 정의 · front-내용06
1

내용

내용 텍스트가 들어갑니다. 해당 영역의 목적과 표시 정보를 설명하는 내용입니다.

2

내용

내용 텍스트가 들어갑니다. 해당 영역의 목적과 표시 정보를 설명하는 내용입니다.

2-1

내용

내용 텍스트가 들어갑니다.

2-2

내용

내용 텍스트가 들어갑니다.

3

내용

내용 텍스트가 들어갑니다. 해당 영역의 목적과 표시 정보를 설명하는 내용입니다.

4

내용

내용 텍스트가 들어갑니다. 해당 영역의 목적과 표시 정보를 설명하는 내용입니다.

5

내용

내용 텍스트가 들어갑니다. 해당 영역의 목적과 표시 정보를 설명하는 내용입니다.

front-gnb02
내용 › 내용

GNB02 · 내용

Wireframe 기획 예시 · 더미데이터
GNB02
hover → screen flow

9:41●●● 📶 🔋
1
내용
2
내용
000,000
내용 텍스트 · 내용
2-1
내용
+000
2-2
내용
+000
3
내용
내용
내용
내용
4
5
내용
탭1
탭2
탭3
탭4
탭5
넘버링 정의 · front-gnb02
1

내용

내용 텍스트가 들어갑니다. 해당 영역의 목적과 표시 정보를 설명하는 내용입니다.

2

내용

내용 텍스트가 들어갑니다. 해당 영역의 목적과 표시 정보를 설명하는 내용입니다.

2-1

내용

내용 텍스트가 들어갑니다.

2-2

내용

내용 텍스트가 들어갑니다.

3

내용

내용 텍스트가 들어갑니다. 해당 영역의 목적과 표시 정보를 설명하는 내용입니다.

4

내용

내용 텍스트가 들어갑니다. 해당 영역의 목적과 표시 정보를 설명하는 내용입니다.

5

내용

내용 텍스트가 들어갑니다. 해당 영역의 목적과 표시 정보를 설명하는 내용입니다.

front-내용07
내용 › 내용

화면 07 · 내용

Wireframe 기획 예시 · 더미데이터
화면 07
hover → screen flow

9:41●●● 📶 🔋
1
내용
2
내용
000
내용000
내용000
내용000
내용000
3
3-1
내용
내용 텍스트 · 내용
+000
3-2
내용
내용 텍스트 · 내용
+000
4
내용
탭1
탭2
탭3
탭4
탭5
넘버링 정의 · front-내용07
1

내용

내용 텍스트가 들어갑니다. 해당 영역의 목적과 표시 정보를 설명하는 내용입니다.

2

내용

내용 텍스트가 들어갑니다. 해당 영역의 목적과 표시 정보를 설명하는 내용입니다.

3

내용

내용 텍스트가 들어갑니다. 해당 영역의 목적과 표시 정보를 설명하는 내용입니다.

3-1

내용

내용 텍스트가 들어갑니다.

3-2

내용

내용 텍스트가 들어갑니다.

4

내용

내용 텍스트가 들어갑니다. 해당 영역의 목적과 표시 정보를 설명하는 내용입니다.

front-내용08
내용 › 내용

화면 08 · 내용

Wireframe 기획 예시 · 더미데이터
화면 08
hover → screen flow

9:41●●● 📶 🔋
1
내용
2
3
내용내용내용
4
4-1
내용
000
4-2
내용
000
5
내용
내용 텍스트 · 내용
+000
내용
내용 텍스트 · 내용
+000
내용
내용 텍스트 · 내용
+000
탭1
탭2
탭3
탭4
탭5
넘버링 정의 · front-내용08
1

내용

내용 텍스트가 들어갑니다. 해당 영역의 목적과 표시 정보를 설명하는 내용입니다.

2

내용

내용 텍스트가 들어갑니다. 해당 영역의 목적과 표시 정보를 설명하는 내용입니다.

3

내용

내용 텍스트가 들어갑니다. 해당 영역의 목적과 표시 정보를 설명하는 내용입니다.

4

내용

내용 텍스트가 들어갑니다. 해당 영역의 목적과 표시 정보를 설명하는 내용입니다.

4-1

내용

내용 텍스트가 들어갑니다.

4-2

내용

내용 텍스트가 들어갑니다.

5

내용

내용 텍스트가 들어갑니다. 해당 영역의 목적과 표시 정보를 설명하는 내용입니다.

front-내용09
내용 › 내용

화면 09 · 내용

Wireframe 기획 예시 · 더미데이터
화면 09
hover → screen flow

9:41●●● 📶 🔋
1
내용
2
내용
내용
000,000 내용
+000 (+0.00%) 내용
3
3-1
내용
3-2
내용
4
내용
내용 설명 텍스트
내용
내용 설명 텍스트
5
내용
탭1
탭2
탭3
탭4
탭5
넘버링 정의 · front-내용09
1

내용

내용 텍스트가 들어갑니다. 해당 영역의 목적과 표시 정보를 설명하는 내용입니다.

2

내용

내용 텍스트가 들어갑니다. 해당 영역의 목적과 표시 정보를 설명하는 내용입니다.

3

내용

내용 텍스트가 들어갑니다. 해당 영역의 목적과 표시 정보를 설명하는 내용입니다.

3-1

내용

내용 텍스트가 들어갑니다.

3-2

내용

내용 텍스트가 들어갑니다.

4

내용

내용 텍스트가 들어갑니다. 해당 영역의 목적과 표시 정보를 설명하는 내용입니다.

5

내용

내용 텍스트가 들어갑니다. 해당 영역의 목적과 표시 정보를 설명하는 내용입니다.

front-내용10
내용 › 내용

화면 10 · 내용

Wireframe 기획 예시 · 더미데이터
화면 10
hover → screen flow

9:41●●● 📶 🔋
1
내용
2
3
3-1
내용
3-2
내용
4
내용000
내용000
합계000,000
탭1
탭2
탭3
탭4
탭5
넘버링 정의 · front-내용10
1

내용

내용 텍스트가 들어갑니다. 해당 영역의 목적과 표시 정보를 설명하는 내용입니다.

2

내용

내용 텍스트가 들어갑니다. 해당 영역의 목적과 표시 정보를 설명하는 내용입니다.

3

내용

내용 텍스트가 들어갑니다. 해당 영역의 목적과 표시 정보를 설명하는 내용입니다.

3-1

내용

내용 텍스트가 들어갑니다.

3-2

내용

내용 텍스트가 들어갑니다.

4

내용

내용 텍스트가 들어갑니다. 해당 영역의 목적과 표시 정보를 설명하는 내용입니다.

front-내용11
내용 › 내용

화면 11 · 내용

Wireframe 기획 예시 · 더미데이터
화면 11
hover → screen flow

9:41●●● 📶 🔋
1
내용
2
2-1
내용
000,000 내용
2-2
+000 (+0.00%) 내용
3
내용
내용 설명 텍스트
+000 ›
4
내용
내용
내용
내용
5
내용
내용 텍스트 · 내용
+000
내용
내용 텍스트 · 내용
+000
내용
내용 텍스트 · 내용
+000
탭1
탭2
탭3
탭4
탭5
넘버링 정의 · front-내용11
1

내용

내용 텍스트가 들어갑니다. 해당 영역의 목적과 표시 정보를 설명하는 내용입니다.

2

내용

내용 텍스트가 들어갑니다. 해당 영역의 목적과 표시 정보를 설명하는 내용입니다.

2-1

내용

내용 텍스트가 들어갑니다.

2-2

내용

내용 텍스트가 들어갑니다.

3

내용

내용 텍스트가 들어갑니다. 해당 영역의 목적과 표시 정보를 설명하는 내용입니다.

4

내용

내용 텍스트가 들어갑니다. 해당 영역의 목적과 표시 정보를 설명하는 내용입니다.

5

내용

내용 텍스트가 들어갑니다. 해당 영역의 목적과 표시 정보를 설명하는 내용입니다.

front-내용12
내용 › 내용

화면 12 · 내용

Wireframe 기획 예시 · 더미데이터
화면 12
hover → screen flow

9:41●●● 📶 🔋
1
내용
2
내용
000,000
내용 텍스트 · 내용
2-1
내용
+000
2-2
내용
+000
3
내용
내용
내용
내용
4
5
내용
탭1
탭2
탭3
탭4
탭5
넘버링 정의 · front-내용12
1

내용

내용 텍스트가 들어갑니다. 해당 영역의 목적과 표시 정보를 설명하는 내용입니다.

2

내용

내용 텍스트가 들어갑니다. 해당 영역의 목적과 표시 정보를 설명하는 내용입니다.

2-1

내용

내용 텍스트가 들어갑니다.

2-2

내용

내용 텍스트가 들어갑니다.

3

내용

내용 텍스트가 들어갑니다. 해당 영역의 목적과 표시 정보를 설명하는 내용입니다.

4

내용

내용 텍스트가 들어갑니다. 해당 영역의 목적과 표시 정보를 설명하는 내용입니다.

5

내용

내용 텍스트가 들어갑니다. 해당 영역의 목적과 표시 정보를 설명하는 내용입니다.