실행 가능한 사용자: 모든 사용자
사용 가능 플랜: 모든 플랜
사용 가능 환경: 브라우저, 데스크톱, 모바일
프로토타이핑 라이브러리를 사용해 Miro 캔버스에서 직접 프로토타입 레이아웃을 만드세요. 라이브러리에는 화면, UI 구성요소, 아이콘이 포함되어 초기 단계에서 워크플로를 시각화하고 아이디어 구조를 잡는 데 도움이 됩니다.
프로토타이핑 라이브러리를 사용해 정적 프로토타입을 만들 수 있습니다. 고급 구성요소, 연결선, 대화형 미리보기와 같은 기능은 Business 플랜 또는 Enterprise 플랜의 경우 Miro Prototypes 애드온 이 필요합니다.
프로토타입 라이브러리는 Miro에서 단일 및 다중 화면 흐름을 직접 만들 수 있는 모든 요소를 제공합니다
프로토타입 라이브러리 열기
- 캔버스에서, 만들기 바 에서 도구, 미디어 및 통합 (
)을 클릭합니다.
- 검색해 프로토타이핑을 찾은 다음, 그런 다음 프로토타입 라이브러리를 클릭합니다.
- 프로토타입 라이브러리 패널이 열립니다.
프로토타입 라이브러리 구성
프로토타입 라이브러리는 탭으로 구성되어 있습니다. 모든 사용자는 스크린, UI 구성 요소, 아이콘을 사용해 정적 프로토타입 레이아웃을 구성할 수 있습니다.
💡 AI로 생성한 프로토타입과 인터랙티브 워크플로를 만들려면 프로토타이핑 라이브러리를 Miro Prototypes와 함께 사용하세요.
화면
화면은 프로토타이핑 워크플로용으로 미리 만들어진 프레임입니다. 캔버스에 모바일, 태블릿 또는 데스크톱 화면을 추가한 다음 UI 요소를 드래그해 레이아웃을 구성할 수 있습니다.
화면으로 작업하기
- 표시/숨기기 화면 크롬을 표시하거나 숨겨 기기 프레임 또는 단순 프레임처럼 보이게 할 수 있습니다
- 회전 화면을 회전
- 크기 조절 드래그해 높이만 세로 방향으로 확장
UI 컴포넌트
UI 컴포넌트는 버튼, 입력 필드, 내비게이션 바, 폼 요소 등 화면에 드래그해 추가할 수 있는 일반적인 인터페이스 요소입니다.
다음과 같은 작업을 할 수 있습니다:
- 컴포넌트를 화면에 드래그해 추가
- 컴포넌트 크기 조절 및 위치 변경
- 컨텍스트 메뉴에서 텍스트와 기본 스타일을 편집
✏️ 선택한 요소에 따라 컨텍스트 메뉴 옵션이 달라집니다.
Miro Prototypes를 사용하면 일부 UI 컴포넌트는 미리보기 모드에서 상호작용 가능해집니다. 예를 들어 버튼, 슬라이더, 입력 필드, 드롭다운 메뉴는 정의한 연결선에 따라 사용자 동작에 반응합니다.
일부 컴포넌트 세트(예: 고급 컴포넌트)는 Miro Prototypes에서만 사용할 수 있습니다. 사용 권한이 없으면 해당 컴포넌트가 라이브러리에 표시 아이콘과 함께 나타날 수 있습니다.
아이콘
아이콘 탭에는 프로토타입에서 사용할 수 있는 검색 가능한 아이콘 라이브러리가 포함되어 있습니다.
아이콘 추가 또는 교체
- 라이브러리에서 아이콘을 끌어 캔버스에 놓으세요.
- 아이콘을 선택한 다음 컨텍스트 메뉴에서 색상을 변경하세요.
- 위치와 크기를 변경하지 않고 다른 아이콘으로 교체하려면 아이콘 교체를 선택하세요.
와이어프레임(레거시)
The Wireframes tab contains legacy wireframe elements. These elements remain available and editable for existing boards, but newer prototypes should use screens and UI components from the Prototyping library.
연결선 및 상호작용 (Miro Prototypes)
연결선은 프로토타입에서 화면 간 내비게이션을 정의할 수 있게 합니다. Miro Prototypes를 사용하면 요소와 화면 사이에 연결선을 만들어 다단계 흐름을 구성할 수 있습니다.
연결선은 인터랙티브 미리보기도 지원합니다. 미리보기 모드에서는 연결된 화면이 클릭 가능한 흐름처럼 작동하며, 화면이 뷰포트 범위를 벗어나면 수직으로 스크롤됩니다. Miro Prototypes가 없으면 연결선과 인터랙티브 동작을 사용할 수 없습니다.
💡 일부 UI 요소는 화면에 추가하면 번개 아이콘이 표시됩니다. 다중 화면 흐름에서는 번개 아이콘을 드래그해 화면 간 연결선을 만듭니다.