와이어프레임 (Wireframe)

와이어프레임은 유저플로우에서 정의된 각 페이지가 실제로 어떤 UI 요소로 구성되는지를 시각화하는 문서입니다. 버튼·텍스트·입력 같은 주요 요소의 배치와 화면 간 이동만 단순하게 구현하여, 최종 디자인 이전에 구성과 흐름을 가장 빠르게 점검할 수 있습니다.

1. 와이어프레임 생성

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

생성 시작하기

생성 모달에서 다음 항목을 설정합니다.

• 유저플로우 선택 : 와이어프레임이 참조할 유저플로우 버전을 고릅니다. 유저플로우에서 정의된 페이지 노드와 페이지 간 연결을 바탕으로 와이어프레임이 생성되며, 와이어프레임은 유저플로우 1개당 1개만 만들 수 있습니다.

• 디바이스 선택 : 데스크탑 또는 모바일 중 하나의 화면 유형을 선택합니다.

  • 데스크탑 : 가로형 화면으로, 상단 메뉴와 사이드 메뉴를 사용합니다.

  • 모바일 : 세로형 화면으로, 하단 메뉴바를 사용합니다.

• 페이지 선택 : 유저플로우에 포함된 페이지 중 와이어프레임으로 만들 페이지를 선택합니다. 섹션 단위로 한번에 선택하거나, '전체 선택' / '선택 초기화'도 가능합니다.

• 추가 요청사항 (선택) : AI에 전달할 추가 지시사항을 자유롭게 입력할 수 있습니다. AI가 기능명세서와 유저플로우를 함께 참고하여 생성하므로 기획 맥락을 다시 입력할 필요는 없으며, 필요에 따라 추가 요청사항만 입력하면 됩니다.

생성 중 확인

페이지는 한 번에 모두 나타나지 않고, 완성되는 순서대로 하나씩 목록에 추가됩니다. 생성이 진행되는 동안에도 이미 완성된 페이지는 먼저 열어볼 수 있습니다.

크레딧 안내

와이어프레임은 모든 그룹에 처음 25페이지까지 무료로 제공되며, 이후로는 PRO 플랜에서만 생성 가능합니다. 생성 다이얼로그 우측 하단에서 현재 남은 무료 페이지 수를 확인할 수 있습니다.

• 그룹당 처음 25페이지까지 무료로 생성할 수 있습니다.

• 25페이지를 모두 사용하면 PRO 플랜에서만 계속 생성할 수 있습니다.

• PRO 플랜은 매일 10페이지를 무료로 제공합니다.

• 무료 페이지 초과 시 1페이지당 5크레딧이 소모됩니다.

2. 와이어프레임 조회

생성된 와이어프레임은 좌측 캔버스와 우측 패널로 구성된 뷰어에서 확인할 수 있습니다.

좌측 캔버스

• 페이지 정보 : 캔버스 우측 상단의 '페이지 정보' 버튼을 누르면 현재 선택된 페이지의 이름과 설명, 그리고 이 페이지의 이전 경로 · 다음 경로를 확인할 수 있습니다. '페이지 수정' 버튼을 통해 페이지를 다시 생성할 수 있습니다.

• 페이지 이동 : 캔버스 중앙 하단의 < > 버튼으로 이전/다음 페이지로 이동합니다.

• 확대 / 축소 : 캔버스 좌측 하단 우측의 - + 버튼으로 화면을 크게 보거나 작게 볼 수 있으며, fit 버튼으로 뷰어 크기에 맞게 화면을 맞출 수 있습니다.

우측 패널

• 유저플로우 연결 정보 : 패널 상단에 이 와이어프레임이 기반으로 삼은 유저플로우 이름이 표시되며, '유저플로우 보기' 버튼을 눌러 해당 유저플로우로 바로 이동할 수 있습니다.

• 와이어프레임 목록 : 패널 우측 상단의 리스트 아이콘을 누르면 이 프로젝트에 생성된 와이어프레임 목록을 볼 수 있고, 새 와이어프레임을 만들 수도 있습니다.

• 와이어프레임 재생성 : 유저플로우 정보 아래에 '와이어프레임 전체 다시 생성하기' 버튼이 있습니다. 아직 생성되지 않은 페이지가 남아있다면 '이어서 생성하기' 버튼도 함께 표시됩니다.

• 전체 페이지 목록 : 패널 하단에 전체 페이지 목록이 노출됩니다. 이는 유저플로우의 페이지 노드 목록과 동일하며, 섹션 구분 역시 유저플로우의 섹션을 그대로 따릅니다. 각 페이지를 누르면 해당 화면을 바로 볼 수 있습니다.

와이어프레임 목록

이 프로젝트에 생성된 와이어프레임 목록을 확인하고 새 와이어프레임을 만들 수 있는 페이지입니다.

• 상단의 '와이어프레임 생성하기' 버튼을 눌러 새 와이어프레임을 만들 수 있습니다.

• 와이어프레임에는 별도의 이름이 없고 기반이 된 유저플로우 이름을 그대로 따라갑니다.

• 항목 옆의 메뉴 버튼을 누르면 해당 와이어프레임을 삭제하거나 연결된 유저플로우로 이동할 수 있습니다.

3. 프로토타입 체험

와이어프레임은 단순한 이미지가 아니라 클릭 가능한 프로토타입으로, 기획한 서비스가 실제 화면에서 어떻게 이어지는지를 최종 디자인 이전에 가장 빠르게 체험해보는 데 목적이 있습니다.

• 화면 이동 : 캔버스에 그려진 버튼·링크 등 상호작용 요소를 클릭하면 유저플로우에 정의된 경로를 따라 다음 화면으로 이동합니다.

• 클릭 가능한 요소 찾기 : 화면 아무 곳이나 클릭하면 클릭/이동 가능한 요소들이 파란색으로 강조되어, 어디를 클릭할 수 있는지 한눈에 확인할 수 있습니다.

• 화면 스크롤 : 생성 시 선택한 디바이스에 맞는 고정된 크기의 프레임으로 표시되며, 내용이 길 경우 해당 프레임 안에서 스크롤하여 확인할 수 있습니다.

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

4. 와이어프레임 재생성

와이어프레임은 AI에게 추가 요청사항을 전달하여 다시 생성하는 방식으로 수정합니다. 개별 요소를 직접 편집하는 기능은 아직 제공되지 않으며, 상황에 따라 아래와 같이 재생성 범위를 선택할 수 있습니다.

• 페이지 수정하기 (페이지 단일 재생성) : 특정 페이지 하나만 다시 생성합니다. 일부 페이지만 수정이 필요할 때 사용합니다. 캔버스 우측 상단의 '페이지 정보' 버튼을 눌러 재생성할 수 있습니다.

• 이어서 생성하기 : 기존 버전에 아직 생성되지 않은 페이지를 추가로 생성합니다. 디바이스 타입은 기존 버전을 그대로 따릅니다.

• 와이어프레임 전체 다시 생성하기 : 선택한 페이지 전체를 새 버전으로 다시 생성합니다. 구조적으로 큰 변경이 필요하거나 추가 요청사항을 바꾸고 싶을 때 사용합니다.

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

채팅으로 와이어프레임을 직접 수정하는 기능은 현재 제공되지 않으며, 채팅은 생성된 와이어프레임을 읽어 내용을 참고하는 용도로만 활용됩니다.