> For the complete documentation index, see [llms.txt](https://docs.manyfast.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.manyfast.io/plan/wireframe.md).

# 와이어프레임 (Wireframe)

와이어프레임은 유저 플로우에서 정의한 각 페이지가 실제로 어떤 UI 요소로 구성되는지를 시각화하는 문서입니다.

버튼·텍스트·입력창 같은 주요 요소의 배치와 화면 간 이동을 단순한 형태로 구현하여, 최종 디자인 이전에 **화면 구성과 사용자 흐름을 빠르게 점검**할 수 있습니다.

<figure><img src="https://3323951709-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fv0nDmWkcH3Ia4zEb82Qz%2Fuploads%2FJwAQw9uH9zC39QjAkZQ9%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202026-08-21%20%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB%2010.38.40.png?alt=media&amp;token=0700a30f-ca9d-436b-9d4a-67cbe1812ea2" alt=""><figcaption></figcaption></figure>

## 1. 와이어프레임 생성하기

와이어프레임을 생성하려면 먼저 **생성이 완료된 유저 플로우가 1개 이상** 있어야 합니다. 생성 중이거나 생성에 실패한 유저 플로우는 선택할 수 없습니다.

와이어프레임은 **유저 플로우의 페이지 노드와 페이지 간 연결**을 기준으로 생성되며, 하나의 유저 플로우에는 하나의 와이어프레임만 연결할 수 있습니다.

<figure><img src="https://3323951709-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fv0nDmWkcH3Ia4zEb82Qz%2Fuploads%2FYL35Mc5FViu3yLUp9wak%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202026-08-21%20%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB%2010.40.16.png?alt=media&amp;token=3bf3c372-0f45-4eef-bd4d-508a6f8659f5" alt=""><figcaption></figcaption></figure>

#### **생성 시작하기**

와이어프레임이 없는 경우 와이어프레임 화면에서 **와이어프레임 생성**을 누릅니다. 이미 생성된 와이어프레임이 있다면 오른쪽 패널의 **와이어프레임 선택 메뉴**에서 새로운 와이어프레임을 만들 수 있습니다.

생성 화면에서 다음 항목을 설정합니다.

* **유저 플로우 선택:** 와이어프레임의 기준으로 사용할 유저 플로우를 선택합니다. 선택한 유저 플로우에 포함된 페이지 노드와 연결 관계가 와이어프레임에 반영됩니다.
* **디바이스 유형:** 데스크탑 또는 모바일 중 와이어프레임을 생성할 화면 유형을 선택합니다.
* **생성할 페이지 선택:** 유저 플로우에 포함된 페이지 중 와이어프레임으로 만들 페이지를 선택합니다. 섹션 단위로 선택하거나 **전체 선택**과 **선택 초기화**를 사용할 수 있습니다.
* **페이지 검색:** 페이지 이름을 검색하여 생성할 페이지를 빠르게 찾을 수 있습니다.
* **추가 요청 사항:** 화면에서 강조하고 싶은 구성이나 UI 방향을 AI에 전달합니다. 기능명세서와 유저 플로우의 기획 맥락은 자동으로 참고하므로, 추가로 반영할 내용만 입력하면 됩니다.

설정이 끝나면 **와이어프레임 생성**을 눌러 생성을 시작합니다.

#### **생성 중인 페이지 확인하기**

선택한 페이지는 한 번에 모두 나타나지 않고, **생성이 완료되는 순서대로 페이지 목록에 추가**됩니다.

생성 중에도 먼저 완성된 페이지를 열어 화면 구성과 이동 경로를 확인할 수 있습니다. 오른쪽 패널에는 생성된 페이지 수가 **생성됨 6/28**과 같은 형식으로 표시되며, 아직 완성되지 않은 페이지는 비활성 상태로 표시됩니다.

#### **크레딧 안내**

와이어프레임 생성 화면 아래쪽에서 **무료 생성 페이지 수와 보유 크레딧**을 확인할 수 있습니다.

* **최초 무료 제공량:** 모든 플랜은 그룹당 처음 25페이지까지 무료로 생성할 수 있습니다.
* **Starter 플랜:** 최초 무료 25페이지를 모두 사용한 뒤에도 보유 크레딧을 사용하여 계속 생성할 수 있습니다.
* **Pro·Team 플랜:** 매일 10페이지의 무료 생성량이 추가로 제공되며, 무료 생성량은 매일 초기화됩니다.
* **크레딧 사용:** 사용할 수 있는 무료 생성량을 모두 소진하면 플랜과 관계없이 페이지당 5크레딧을 사용하여 생성합니다.

생성 화면 아래쪽에는 선택한 페이지 수와 실제로 적용될 무료 생성량 또는 보유 크레딧이 표시됩니다. 생성 전에 예상 사용량을 확인한 뒤 **와이어프레임 생성**을 진행하세요.

## 2. 생성된 페이지 확인하기

생성된 와이어프레임은 **중앙의 와이어프레임 화면**과 **오른쪽의 전체 페이지 목록**으로 구성됩니다.

와이어프레임 화면에서는 현재 페이지의 UI 구성과 상호작용을 확인할 수 있고, 오른쪽 패널에서는 유저 플로우에 포함된 전체 페이지를 섹션별로 탐색할 수 있습니다.

#### **페이지 이동 및 화면 조절하기**

와이어프레임 아래쪽의 **통합 툴바**에서 다음 작업을 수행할 수 있습니다.

* **이전·다음 페이지:** 화살표 버튼을 눌러 이전 페이지나 다음 페이지로 이동합니다.
* **현재 페이지 확인:** 17/20과 같이 현재 확인 중인 페이지와 전체 페이지 수를 확인합니다.
* **페이지 다시 생성:** 현재 페이지 하나를 AI로 다시 생성합니다.
* **직접 편집:** 현재 페이지의 요소를 선택하여 이름, 순서 등을 직접 수정합니다.
* **확대·축소:** –와 + 버튼을 눌러 와이어프레임을 확대하거나 축소합니다.
* **화면 맞춤:** 화면 맞춤 버튼을 눌러 현재 와이어프레임을 작업 영역 크기에 맞게 표시합니다.

데스크탑 와이어프레임은 가로형 화면으로, 모바일 와이어프레임은 세로형 기기 프레임으로 표시됩니다. 페이지 내용이 화면보다 길면 **와이어프레임 안에서 스크롤**하여 확인할 수 있습니다.

#### **전체 페이지 목록 사용하기**

오른쪽 패널의 **전체 페이지 목록**에는 유저 플로우에서 선택한 페이지가 섹션별로 표시됩니다.

목록에서 페이지를 선택하면 해당 와이어프레임으로 바로 이동하며, **현재 선택된 페이지는 강조된 상태로 표시**됩니다.

패널 위쪽에서는 다음 정보를 확인할 수 있습니다.

* **현재 와이어프레임의 이름**
* **와이어프레임 생성의 기준이 된 유저 플로우**
* **생성이 완료된 페이지 수**
* 연결된 유저 플로우로 이동하는 **유저 플로우 보기**
* 현재 와이어프레임을 삭제하는 **삭제 버튼**

와이어프레임에는 별도의 이름을 입력하지 않으며, **기준이 된 유저 플로우의 이름**을 사용합니다.

#### **다른 와이어프레임 열기**

오른쪽 패널 위쪽의 **와이어프레임 이름**을 누르면 현재 프로젝트에 생성된 다른 와이어프레임을 선택할 수 있습니다.

이 메뉴에서 다른 와이어프레임으로 전환하거나, 새로운 유저 플로우를 선택하여 **새 와이어프레임을 생성**할 수 있습니다.

## 3. 프로토타입 체험

와이어프레임은 단순한 이미지가 아니라 **클릭 가능한 프로토타입**입니다. 유저 플로우에서 정의한 화면 간 이동이 실제 \
서비스에서 어떻게 이어지는지 최종 디자인 전에 확인할 수 있습니다.

<figure><img src="https://3323951709-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fv0nDmWkcH3Ia4zEb82Qz%2Fuploads%2Fwlwyl6AaPVwLuBJq6y1f%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202026-08-21%20%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB%2011.10.28.png?alt=media&amp;token=19073151-5369-42e2-b87d-f71117598315" alt=""><figcaption></figcaption></figure>

#### 화면 이동하기

와이어프레임에 표시된 **버튼이나 링크 등 상호작용 요소**를 클릭하면 유저 플로우에 정의된 경로에 따라 다음 페이지로 이동합니다.

직접 편집 중에는 화면 요소를 선택하는 동작이 우선 적용됩니다. 프로토타입의 화면 이동을 확인하려면 **편집 완료**를 눌러 직접 편집을 종료하세요.

#### 클릭 가능한 요소 확인하기

와이어프레임의 빈 공간을 클릭하면 **이동하거나 상호작용할 수 있는 요소가 파란색으로 강조**됩니다.

어떤 버튼이나 링크를 클릭할 수 있는지 찾기 어려울 때 활용할 수 있습니다.

#### 화면 스크롤하기

와이어프레임은 생성할 때 선택한 디바이스 유형에 맞는 프레임으로 표시됩니다. 페이지 내용이 길면 **해당 프레임 안에서 위아래로 스크롤**하여 전체 내용을 확인할 수 있습니다.

와이어프레임은 색상·폰트·그래픽 같은 세부 디자인보다 **화면을 구성하는 요소의 배치와 페이지 간 흐름을 점검**하는 데 초점을 맞춥니다.

{% hint style="info" %}
와이어프레임 품질 : 와이어프레임은 색상·폰트 등 세부 디자인을 최소화한 단순한 형태로 그려집니다. 구성 요소의 배치와 화면 간 흐름이 의도대로 작동하는지 점검하는 데 초점이 맞춰져 있습니다.
{% endhint %}

## 4. 캔버스에서 직접 편집하기

화면 요소의 이름이나 순서처럼 범위가 작은 변경은 페이지를 다시 생성하지 않고 **와이어프레임에서 직접 수정**할 수 있습니다.

직접 편집한 내용은 **각 조작이 끝날 때마다 자동으로 저장**됩니다.

<figure><img src="https://3323951709-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fv0nDmWkcH3Ia4zEb82Qz%2Fuploads%2F1vI20E7OxMDfMZb5HUFs%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202026-08-21%20%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB%2010.44.16.png?alt=media&amp;token=e51c6826-d210-4726-9fb8-9f409b62737e" alt=""><figcaption></figcaption></figure>

#### **직접 편집 시작하기**

와이어프레임 아래쪽 툴바에서 **직접 편집**을 누릅니다.

직접 편집이 시작되면 버튼이 **편집 완료**로 변경됩니다. 화면 안의 요소를 클릭하면 선택한 요소에 파란색 테두리가 \
표시되고, 수정하거나 삭제할 수 있는 상태가 됩니다.

#### **요소 편집하기**

직접 편집 상태에서는 다음 작업을 수행할 수 있습니다.

* **이름 수정:** 화면 요소의 이름을 선택한 위치에서 바로 변경합니다.
* **순서 변경:** 요소를 드래그하여 같은 영역 안에서 표시 순서를 변경합니다.
* **요소 삭제:** 선택한 요소 오른쪽 위의 삭제 버튼을 눌러 제거합니다.

각 변경 내용은 조작할 때마다 바로 저장되므로 **별도의 저장 버튼을 누르지 않아도 됩니다.**

직접 편집은 화면 요소의 이름, 순서, 삭제처럼 작은 변경에 적합합니다. 페이지 전체 구성을 새로 만들거나 여러 요소를 한 번에 변경하려면 **페이지 다시 생성**을 사용하세요.

#### **편집 되돌리기**

직접 편집 중 내용을 변경하면 하단 툴바의 **실행 취소**가 활성화됩니다.

실행 취소는 **페이지별로 관리**됩니다. 다른 페이지로 이동했다가 돌아와도 해당 페이지에서 수행한 편집 기록이 유지되므로, 이전 화면으로 돌아가 변경 내용을 되돌릴 수 있습니다.

#### **직접 편집 종료하기**

편집을 마치면 하단 툴바의 **편집 완료**를 누릅니다.

직접 편집이 종료되면 다시 버튼과 링크를 클릭하여 페이지 이동과 상호작용을 확인할 수 있습니다.

## 5. 페이지 다시 생성 및 변경사항 반영하기

직접 편집만으로 수정하기 어려운 경우 AI에 추가 요청 사항을 전달하여 **페이지를 다시 생성**할 수 있습니다.

변경 범위에 따라 **페이지 다시 생성**, **이어서 생성**, **와이어프레임 전체 다시 생성하기**를 구분하여 사용합니다.

#### **페이지 다시 생성하기**

현재 확인 중인 페이지 하나만 새로 만들려면 와이어프레임 아래쪽 툴바의 **페이지 다시 생성**을 누릅니다.

재생성 화면에서 변경하고 싶은 내용을 **추가 요청 사항**으로 입력할 수 있습니다.

예:

* “오류 원인과 해결 방법이 더 잘 구분되도록 구성해줘.”
* “모바일에서 주요 버튼이 먼저 보이도록 정리해줘.”
* “설정 화면의 항목을 카테고리별로 나눠줘.”

페이지 다시 생성은 크레딧이 사용될 수 있는 작업이므로, 실행 전에 **확인 단계가 표시**됩니다. 내용을 확인한 뒤 재생성을 진행하세요.

#### **이어서 생성하기**

처음 선택한 페이지 중 아직 생성되지 않은 페이지가 남아 있다면 **이어서 생성**을 사용합니다.

이어서 생성은 기존 와이어프레임에 생성되지 않은 페이지를 추가합니다. **디바이스 유형은 기존 와이어프레임의 설정을 그대로 사용**하며, 이미 생성된 페이지는 다시 만들지 않습니다.

#### **전체 다시 생성하기**

페이지 구성이나 추가 요청 사항을 크게 바꾸고 싶다면 **와이어프레임 전체 다시 생성하기**를 사용합니다.

선택한 페이지 전체가 새로운 결과로 다시 생성되므로, 화면 요소 몇 개만 수정하려는 경우에는 **직접 편집**이나 **페이지 다시 생성**을 사용하는 것이 좋습니다.

#### **유저 플로우 변경사항 반영하기**

와이어프레임의 페이지 구성은 **연결된 유저 플로우의 페이지 노드**를 기준으로 합니다.

페이지를 추가하거나 삭제하려면 먼저 유저 플로우에서 페이지 노드를 수정해야 합니다. 유저 플로우를 수정한 뒤 **이어서 생성** 또는 **전체 다시 생성**을 사용하여 변경사항을 와이어프레임에 반영합니다.

**유저 플로우를 수정해도 기존 와이어프레임이 자동으로 변경되지는 않습니다.**

#### **채팅에서 와이어프레임 사용하기**

채팅에서는 생성된 와이어프레임을 읽고 화면 구성이나 내용을 참고할 수 있습니다.

현재 **채팅으로 와이어프레임 요소를 직접 수정하는 기능은 제공되지 않습니다.** 와이어프레임을 수정하려면 직접 편집하거나 페이지를 다시 생성하세요.