Wireframing Library

누가 할 수 있나요: 모든 사용자
어떤 플랜에서 사용 가능한가요: 모든 플랜
어떤 플랫폼: 브라우저, 데스크톱, 모바일

참고: Prototyping Library의 이름이 이제 Wireframing Library로 변경되었습니다. 기존에 만들어 둔 screens, components, and flows는 동일하게 작동합니다.

Wireframing Library를 사용해 Miro 캔버스에서 저충실도 Screens와 플로우를 바로 만들 수 있습니다. 이 라이브러리에는 Screens, UI components, Icons가 포함되어 있어 초기 단계에서 플로우를 스케치하고 아이디어 구조를 잡는 데 도움이 됩니다.

모든 사용자는 정적 와이어프레임을 만들 수 있습니다. Advanced components, Connector lines, 그리고 Interactive preview는 Business plan 또는 Enterprise Accelerate license가 필요합니다.

TIP: 고해상도 프로토타입이 필요하신가요? Prototypes 2.0 (HTML Prototypes)을 사용하세요. 와이어프레임을 HTML Prototype으로 변환하면 시각적 표현이 풍부해지고 AI 편집, 검토 및 인계가 가능합니다. 자세한 내용은 Prototypes 2.0 소개 및 Prototype 2.0 만들기를 참조하세요.

Wireframing Library 열기

1. 캔버스에서 생성 도구 모음의 도구, 미디어 및 통합 아이콘을 클릭합니다.
2. 검색창에 Wireframing을 입력한 뒤 Wireframing Library를 클릭합니다.
3. Wireframing Library 패널이 열립니다.

Wireframing Library에 포함된 항목

Wireframing Library는 탭으로 구성되어 있습니다. 모든 사용자는 Screens, UI components, Icons으로 정적 와이어프레임을 만들 수 있습니다.

Screens

Screens는 와이어프레임을 만들기 위한 미리 만들어진 프레임입니다. 캔버스에 Mobile, Tablet 또는 Desktop 화면을 추가한 다음 UI 요소를 화면 위로 drag합니다.

Work with screens

• Show or hide 화면 크롬을 표시하거나 숨겨 기기 프레임이나 단순 프레임처럼 보이게 합니다.
• Rotate 화면을 회전합니다.
• Resize 화면은 drag하여 높이를 늘려 크기를 조절합니다(세로만).

UI components

UI components는 버튼, 입력란, 내비게이션 바, 폼 요소 등 자주 사용하는 인터페이스 요소입니다.

다음과 같은 일을 할 수 있습니다:

• 컴포넌트를 화면으로 drag합니다.
• Resize 및 reposition으로 컴포넌트의 크기와 위치를 조정합니다.
• 텍스트와 기본 스타일을 context menu에서 편집합니다.

참고: 선택한 요소에 따라 상황별 메뉴 옵션이 달라집니다.

Business 플랜과 Enterprise Accelerate 라이선스에서는 일부 UI components가 Preview mode에서 인터랙티브합니다. 예를 들어 버튼, 슬라이더, 입력 필드, 드롭다운 메뉴는 사용자가 정의한 connector lines에 반응합니다.

Advanced components는 Business 플랜과 Enterprise Accelerate 라이선스에서만 사용할 수 있습니다.

Icons

Icons 탭에는 검색 가능한 아이콘 라이브러리가 포함되어 있습니다.

아이콘 추가 또는 교체

1. 라이브러리에서 아이콘을 캔버스로 드래그합니다.
2. 아이콘을 선택한 다음 context menu에서 색상을 변경합니다.
3. 위치나 크기를 변경하지 않고 다른 아이콘으로 바꾸려면 Replace icon을 선택합니다.

Connector lines 및 interactive preview

적용 플랜: Business, Enterprise (with Accelerate license)

Connector lines는 Screens 간 내비게이션을 정의합니다. 한 화면의 요소에서 다른 화면으로 Connector lines를 연결해 다단계 흐름을 만드세요.

Connector lines는 또한 interactive preview를 활성화합니다. Preview mode에서 연결된 Screens는 클릭 가능한 플로우처럼 작동합니다.

팁: 일부 UI 요소는 화면에 추가하면 번개 아이콘이 표시됩니다. 다중 화면 플로우에서는 번개 아이콘을 다른 화면으로 끌어 connector line을 생성하세요.

와이어프레임을 HTML Prototypes로 변환

적용 플랜: Business, Enterprise (with Accelerate license)

워크플로가 고충실도 검토나 인계에 준비되면, 위젯, 와이어프레임 또는 Screens를 HTML Prototype (Prototypes 2.0)으로 변환하세요. HTML Prototypes는 다음을 지원합니다:

• 더 풍부한 렌더링(그라디언트, 그림자, 글꼴 및 레이아웃).
• 캔버스에서의 간단한 편집.
• 인터랙티브 커넥터.
• Edit with AI.
• 공유 가능한 링크로 전체 화면 미리보기.
• HTML 또는 이미지로 내보내기.

참고: Wireframing Library Screens에서 Edit with AI를 사용하면 Miro가 새로운 Prototypes 2.0 프로토타입을 생성합니다. 원본 Screens는 변경되지 않습니다.

자주 묻는 질문