누가 사용할 수 있나요: 모든 사용자
어떤 플랜: 모든 플랜
어떤 플랫폼: 브라우저, 데스크톱, 모바일
참고: 프로토타이핑 라이브러리는 이제 와이어프레이밍 라이브러리로 불립니다. 기존 화면, 구성 요소, 플로우는 동일하게 작동합니다.
와이어프레이밍 라이브러리를 사용하여 Miro 캔버스에서 저충실도 화면과 플로우를 직접 만들 수 있습니다. 이 라이브러리에는 화면, UI 구성 요소, 아이콘이 포함되어 있어 플로우를 스케치하고 초기 아이디어 구조를 정리하는 데 도움이 됩니다.
모든 사용자는 정적 와이어프레임을 만들 수 있습니다. 고급 구성 요소, 연결선, 그리고 대화형 미리보기는 Business 플랜 또는 Enterprise Accelerate 라이선스가 필요합니다.
TIP: 높은 해상도의 프로토타입이 필요하신가요? 와이어프레임을 HTML Prototype으로 변환하면 더 풍부한 시각 효과, AI 편집, 검토 및 인수인계를 할 수 있습니다. 자세한 방법은 Miro Prototypes을 참조하세요.
Wireframing Library 열기
- 캔버스에서, Creation bar의 Tools, Media and Integrations 아이콘을 클릭합니다.
- Wireframing을 검색한 다음 Wireframing Library를 클릭합니다.
- Wireframing Library 패널이 열립니다.
Wireframing Library의 구성
Wireframing Library는 탭으로 구성되어 있습니다. 모든 사용자는 화면, UI 구성 요소, 아이콘을 사용해 정적 와이어프레임을 만들 수 있습니다.
화면
화면은 와이어프레임을 만들기 위한 미리 준비된 프레임입니다. 추가로 Mobile, Tablet 또는 Desktop 화면을 캔버스에 추가한 다음 UI 요소를 끌어다 놓습니다.
화면 작업
- 화면 크롬 표시 또는 숨기기로 기기 프레임처럼 보이거나 단순 프레임으로 전환
- 화면 회전
- 드래그해 높이 확장으로 화면 크기 조절(세로 방향만)
UI 컴포넌트
UI 컴포넌트는 버튼, 입력 필드, 내비게이션 바 및 폼 요소와 같은 일반적인 인터페이스 요소입니다.
다음과 같은 작업을 할 수 있습니다:
- 컴포넌트를 화면으로 끌어다 놓기
- 컴포넌트 크기 조절 및 위치 변경
- 컨텍스트 메뉴에서 텍스트와 기본 스타일 편집
참고: 선택한 요소에 따라 컨텍스트 메뉴 옵션이 달라집니다.
Business 플랜과 Enterprise Accelerate 라이선스에서는 일부 UI 컴포넌트가 Preview 모드에서 상호작용합니다. 예를 들어 버튼, 슬라이더, 입력 필드, 드롭다운 메뉴는 정의한 커넥터 라인에 반응합니다.
고급 컴포넌트는 Business 플랜과 Enterprise Accelerate 라이선스에서만 사용할 수 있습니다.
아이콘
아이콘 탭에는 검색 가능한 아이콘 라이브러리가 포함되어 있습니다.
아이콘 추가 또는 교체
- 라이브러리에서 아이콘을 캔버스로 드래그하세요.
- 아이콘을 선택하고 컨텍스트 메뉴에서 색상을 변경하세요.
- 위치나 크기를 변경하지 않고 다른 아이콘으로 바꾸려면 아이콘 교체를 선택하세요.
커넥터 라인 및 인터랙티브 미리보기
해당 플랜: Business, Enterprise (Accelerate 라이선스 포함)
커넥터 라인은 화면 간 내비게이션을 정의합니다. 한 화면의 요소에서 다른 화면으로 커넥터 라인을 그려 다단계 흐름을 구성하세요.
커넥터 라인은 인터랙티브 미리보기도 가능하게 합니다. 미리보기 모드에서 연결된 화면은 클릭 가능한 흐름처럼 작동합니다.
팁: 일부 UI 요소는 화면에 추가하면 번개 아이콘이 표시됩니다. 다중 화면 흐름에서는 번개 아이콘을 다른 화면으로 드래그하면 커넥터 라인이 생성됩니다.
와이어프레임을 HTML 프로토타입으로 전환
해당 플랜: Business, Enterprise (Accelerate 라이선스 포함)
워크플로가 고충실도 검토나 인수인계 준비가 되면 위젯, 와이어프레임 또는 화면을 HTML Prototype으로 변환하세요.
HTML Prototype은 다음을 지원합니다:
- 더 풍부한 렌더링(그라디언트, 그림자, 글꼴 및 레이아웃).
- 캔버스에서 간단한 편집.
- 인터랙티브 연결선.
- AI로 편집.
- 공유 가능한 링크가 있는 전체 화면 미리보기.
- HTML 또는 이미지로 내보내기.
참고: Wireframing Library 화면에서 AI로 편집을 사용하면 Miro가 새 프로토타입을 생성합니다. 원래 화면은 변경되지 않습니다.
자주 묻는 질문
네. Wireframing Library로 만든 모든 항목은 보드에 그대로 남아 있으며 이전처럼 작동합니다.
아니요. 보드에는 사용자 지정 콘텐츠를 추가할 수 있지만 Wireframing Library에는 새 요소를 추가할 수 없습니다.
예. 모든 플랜에서 편집 권한이 있는 사용자는 정적 와이어프레임을 만들 수 있습니다. 고급 컴포넌트, 연결선, 인터랙티브 미리보기는 Business 플랜 또는 Enterprise Accelerate 라이선스가 필요합니다.
기존 Wireframe 라이브러리의 요소는 Wireframes 탭에 있으며, 기존에 만든 와이어프레임은 계속 작동합니다.
와이어프레임을 HTML 프로토타입으로 변환하거나 Claude Code나 Cursor 같은 도구에서 HTML을 가져올 수 있습니다. 이 기능은 Business 플랜 및 Enterprise Accelerate 라이선스에서 이용할 수 있습니다. 자세한 내용은 Miro Prototypes를 참고하세요.