Miro Prototypes – Miro 도움말 센터

실행 가능한 사용자: Miro Prototypes 애드온을 보유한 모든 멤버
사용 가능 플랜: Starter, Business, Enterprise
사용 가능 플랫폼: 브라우저, 데스크톱

Miro Prototypes는 Miro 캔버스에서 직접 유저 인터페이스를 생성할 수 있도록 합니다.

단일 및 다중 화면 흐름을 생성하고, 디자인을 세밀하게 다듬어 스타일을 적용하며, 프로토타입의 인터랙티브 시뮬레이션을 미리 볼 수 있습니다. 프로토타입의 각 요소를 생성하는 특정 프롬프트에서 디자인을 구축할 수 있습니다. 또한 시작부터 다시 하는 대신 프롬프트를 세밀하게 다듬을 수도 있습니다.

이 문서는 Miro Prototypes 기능을 사용하는 방법을 설명합니다. Miro Prototypes에 대한 일반 정보는 Miro Prototypes 개요를 참조하세요.

✏️ Prototypes 경험이 AI 팀원으로 이전되었습니다. 현재 공개 베타 상태이며, 일부 사용자는 AI 생성 프로토타입의 업데이트된 AI 팀원 입력을 이미 가지고 있습니다. 귀하의 경험이 문서와 일치하지 않는 경우, AI 팀원 베타로 프로토타입 만들기를 참조하세요. 출력물을 정제하고 반복하는 방법을 설명하는 내용은 여전히 적용 가능합니다.

추가 정보: 자주 묻는 질문을 참조하세요.

Miro AI로 프로토타입 생성하기

이 섹션에서는 Miro AI로 프로토타입을 시작하는 방법을 설명합니다. 수동으로 시작하는 방법은 프로토타이핑 라이브러리를 참조하세요.

처음부터 시작하기

Miro 캔버스에서 생성 바 위에 사이드킥을 클릭하세요.
사이드킥 패널이 열립니다.
AI 팀원 라이브러리를 클릭합니다.
AI 팀원 라이브러리에서 프로토타입 접근
형식 > 프로토타입을 클릭합니다.
텍스트 프롬프트나 스크린샷 중 시작 방법을 지정합니다.
기기 유형을 지정합니다.
단일 화면 또는 다중 화면 프로토타입을 지정합니다.
화면의 지시에 따라 프롬프트를 작성하거나 스크린샷을 업로드하세요. 응답 상자에서 선택적으로 제안 태그를 사용해 프롬프트를 시작할 수 있습니다.
프롬프트를 마친 후 Send 화살표를 클릭하거나 키보드에서 ENTER를 누릅니다.
Miro AI가 캔버스에 초안 프로토타입을 생성합니다.
(선택 사항) 생성 중지를 원하시면 프로토타입에서 Stop을 클릭합니다.
(선택 사항) 프로토타입의 반복 작업을 원하시면 Prototype 패널에서 계속 프롬프트하세요.
각 반복 작업은 초안 프로토타입의 버전을 생성합니다.
작성한 프로토타입에서 다음 중 하나를 선택하세요:
- 캔버스에 적용
  프로토타입을 캔버스에서 편집할 수 있습니다.
- 모두 삭제
  캔버스에서 초안을 제거합니다. 프롬프트를 수정하고 7-9단계를 반복할 수 있습니다.

AI 팀원(베타)으로 프로토타입 생성

일부 사용자는 이미 프로토타입을 위한 업데이트된 AI 팀원 입력을 사용할 수 있습니다. 이 섹션에서는 AI 팀원을 사용하여 프로토타이핑을 시작하는 방법을 설명합니다. 수동으로 시작하는 방법을 알고 싶다면, 프로토타이핑 라이브러리를 참조하세요.

✏️ 프로토타입을 위한 AI 팀원 업데이트가 현재 공개 베타로 진행 중입니다. 이 섹션의 설명과 경험이 일치하지 않는다면, Miro AI로 프로토타입 만들기를 확인하세요.

다음 단계를 따르세요:

Miro 캔버스에서, 생성 바 위에 있는 AI 팀원을 클릭합니다.
AI 팀원 패널이 열립니다.
프롬프트 박스에서 프로토타입 생성을 클릭하세요.
AI 팀원이 프로토타입 생성을 도와줄 준비가 되어 있습니다.
AI 팀원 패널에서 프로토타입을 시작하세요.

💡 또는 AI 팀원 패널을 열고 바로 프롬프트를 시작할 수 있습니다. 프로토타입을 생성하고자 한다는 명시적인 요청이 필요합니다. 예: "체크아웃 플로우의 프로토타입을 생성해 주세요."

💡 도구, 미디어 및 통합 (+)에서 프로토타입 형식에 접근할 수 있습니다.
생성하고자 하는 프로토타입을 설명하는 프롬프트를 작성하세요.
ENTER 키를 누르거나 위쪽 화살표를 클릭하세요.
(선택 사항) 생성을 중지하려면 프로토타입에서 중지를 클릭합니다.
(선택 사항) 프로토타입을 반복하려면 Prototype 패널에서 계속 프롬프트를 입력하세요.
각 반복은 초안 프로토타입의 버전을 생성합니다.
초안 프로토타입에서 다음 중 하나를 선택합니다:
- 캔버스에 적용하기
  프로토타입이 이제 캔버스에서 편집 가능합니다.
- 모두 삭제하기
  초안이 캔버스에서 제거됩니다. 프롬프트를 수정하고 3-6단계를 반복할 수 있습니다.

💡 작게 시작하고 구체적으로 하세요. 한 번에 생성되는 화면이 적을수록 더 정확한 결과를 빠르게 얻을 수 있습니다. 각 화면에서 원하는 주요 요소(예: 버튼, 섹션, 액션)를 명확히 명시하세요.

💡 여러 프로토타입 초안을 캔버스에 적용하세요. 디자인 결정을 비교하고 탐색하며 최적의 옵션을 계속 개선할 수 있습니다.

💡 프로토타입 생성에는 프롬프트의 복잡성과 콘텐츠 크기에 따라 1-3분이 소요될 수 있습니다. 프로토타입 생성이 더 오래 걸릴 경우, 프롬프트를 단순화하거나 화면 수를 줄이세요.

프롬프트로 캔버스 사용하기

캔버스에서 프롬프트에 사용할 콘텐츠를 선택하세요. 예를 들어, 문서나 스티커 메모에 디자인 브리프가 있는 경우입니다. 프로토타입이 콘텐츠를 컨텍스트로 사용하여 프로토타입을 생성할 수 있습니다.

다음 단계에 따라 진행하세요:

캔버스 콘텐츠를 선택합니다. 예를 들어, 문서나 스티커 메모를 선택할 수 있습니다. 여러 객체를 선택할 수도 있습니다.
미로 캔버스에서 생성 막대 위의 사이드킥스를 클릭합니다.
사이드킥 패널이 열립니다.
참고: 업데이트된...
AI 팀원 라이브러리를 클릭합니다.
AI 팀원 라이브러리에서 프로토타입 접근
형식 > 프로토타입을 클릭합니다.
텍스트 프롬프트를 선택합니다.
기기 유형을 지정한 후, 단일 화면 또는 멀티 화면을 지정합니다.
응답 상자에는 1단계에서 선택한 개체의 수가 표시됩니다.
화면의 지시에 따라 프로토타입을 생성하세요.
Miro가 사용자의 사양과 선택한 캔버스 콘텐츠를 바탕으로 프로토타입을 생성합니다.

💡 캔버스에서 특정 객체를 선택하여 Miro AI에게 사용할 객체를 지정할 수 있습니다. 예를 들어, 프롬프트에서 "캔버스의 스크린샷을 프로토타입을 구축하는 가이드로 사용하세요."라고 말씀하실 수 있습니다. 캔버스에 유사한 객체가 많을 경우, Miro AI가 사용할 객체를 명확하게 설명하세요.

프로토타입 수정

첫 초안은 완벽한 결과가 아닐 수 있습니다. 초안을 캔버스에 적용하기 전에 계속해서 수정하고 여러 버전의 프로토타입을 만들 수 있습니다.

Miro AI를 사용하여 프로토타입 만들기. 캔버스에 적용하지 마세요.
프로토타입 패널의 다음 단계는 다음에 무엇을 하시겠습니까?입니다.
프로토타입 편집을 선택하세요.
다중 화면 흐름의 경우, 반복하려는 화면을 선택하십시오.
응답 상자에 원하는 변경 사항을 설명하세요.
키보드의 위 화살표를 클릭하거나 Enter를 누르세요.
Miro는 새 버전의 프로토타입을 생성합니다.

✏️ 편집은 한 번에 한 화면만 가능합니다.

💡 캔버스 컨텍스트를 사용하세요. 문서, 다이어그램, 스티커 메모 또는 다른 보드 콘텐츠를 선택하여 Miro AI를 프롬프트하세요.

비주얼 컨텍스트로 스크린샷을 사용하여 반복하기

프로토타입을 캔버스에 적용하기 전에, 스크린샷이나 이미 캔버스에 있는 다른 프로토타입을 컨텍스트로 사용하여 초안을 반복할 수 있습니다.

Miro AI로 프로토타입 생성하기. 캔버스에 적용하지 마세요.
프로토타입 패널의 다음 단계는 다음에 무엇을 하시겠습니까?입니다.
프로토타입 편집을 클릭합니다.
다중 화면 플로우의 경우, 반복할 화면을 선택하세요.
보드에서 스크린샷을 선택합니다.
응답 상자에서 선택한 스크린샷을 기반으로 원하는 변경 사항을 설명하세요.
위쪽 화살표를 클릭하거나 키보드의 Enter를 누릅니다.
Miro가 새 버전의 프로토타입을 생성합니다.

💡 이미 보드에 있는 기존 프로토타입 화면을 시각적 맥락으로 사용할 수 있습니다. 보드에 프로토타입을 생성하고 적용하십시오. 화면을 선택하세요.

AI로 편집

캔버스에 이미 적용된 프로토타입은 AI로 편집을 통해 계속 반복할 수 있습니다. AI로 편집을 사용하여 새로 고치기보다는 정교하게 다듬는 데 사용하세요. 예를 들어 기존 프로토타입의 다크 모드 버전을 만들고 싶을 때 사용합니다.

다음 단계를 따르세요:

캔버스에 적용된 프로토타입에 대해, 컨텍스트 메뉴에서 AI로 편집을 클릭하세요.
AI 팀원 패널이 열립니다.
AI로 편집을 통해 기존의 프로토타입을 다듬을 수 있습니다.

✏️ AI로 편집과 AI 팀원은 한 번에 하나의 프로토타입과만 사용할 수 있습니다. 전환하려면, AI 팀원을 닫고 대상 프로토타입에서 AI로 편집을 다시 여세요.
프롬프트 박스에 변경하고 싶은 내용을 설명하세요. 예를 들어, "어두운 테마로 변환"이라고 입력하세요.
프롬프트를 실행하려면 위쪽 화살표 버튼을 클릭하거나 키보드에서 ENTER 키를 누르세요.
AI 팀원이 개선된 프로토타입을 생성합니다.
(선택 사항) AI 팀원에게 계속 프롬프트를 주고 프로토타입을 반복적으로 수정하세요. 프로토타입을 캔버스에 적용하기 전에 버전을 선택할 수 있습니다.
작성된 프로토타입 위에서 캔버스에 추가를 클릭합니다.

✏️ Miro Prototypes에서 모든 AI 기반의 프로토타이핑 기능은 Prototypes 애드온으로만 사용할 수 있습니다.

스크린샷에서 스타일 적용하기

프로토타입을 기존 웹사이트나 제품과 일치시키고 싶다면, 스크린샷에서 스타일을 추출하여 화면에 적용할 수 있습니다.

프로토타입 만들기.
프로토타입 화면을 선택합니다.
컨텍스트 메뉴가 나타납니다.
컨텍스트 메뉴에서 Miro AI 아이콘을 클릭합니다.
이미지에서 스타일 가져오기를 선택합니다.
스타일을 가져와 프로토타입에 적용합니다
스타일을 가져올 이미지 파일을 선택하십시오.
스타일이 프로토타입에 적용됩니다.

💡 스타일을 먼저 또는 마지막에 적용하세요. 모든 요소가 테마에 맞도록 초기에 테마를 적용하거나 마지막 단계에서 적용하세요.

편집 가능한 프로토타입으로 스크린샷 변환하기

디자인이나 경쟁자 UI의 스크린샷을 편집 가능한 프로토타입으로 변환할 수 있습니다.

스크린샷을 Miro 보드에 추가하세요.
이미지를 클릭하여 컨텍스트 메뉴를 여세요.
Miro AI 아이콘을 선택한 후 이미지를 프로토타입으로 변환하기를 선택하세요.
디바이스 유형(모바일, 태블릿, 데스크탑)을 선택하세요.
AI가 텍스트, 버튼, 레이아웃 및 기타 요소들로 편집 가능한 프로토타입으로 재구성합니다.
이제 필요에 따라 이 버전을 수정, 추가 또는 편집할 수 있습니다.

💡 스크린샷을 편집 가능한 목업으로 변환하세요. 그런 다음 Miro AI에게 계속 편집하도록 프롬프트하세요. 프롬프트에서 스크린샷을 기준으로 사용하여 프로토타입을 생성할 수도 있습니다. 여러 스크린샷을 사용할 경우, 모든 스크린샷을 선택하고 이미지로 복사한 후, 이미지를 프롬프트에서 기준으로 사용하세요.

프로토타입 버전 선택

각각의 수정 작업은 프로토타입 버전을 생성합니다. 프로토타입을 수정하면서 버전 선택기는 프로토타입 시안 위에 나타납니다.

화살표를 클릭하여 버전을 전환하세요. 버전을 선택한 후, 캔버스에 추가를 클릭하십시오. 선택한 버전이 캔버스에 적용됩니다.

캔버스에 추가할 프로토타입의 개선된 버전이나 선택하신 버전을 선택하세요.

💡 캔버스에 추가를 클릭하기 전에, 원하는 버전의 화면을 선택하여 캔버스에 복사-붙여넣기 할 수 있습니다. 이렇게 하면 폐기될 수 있는 버전에서도 화면을 저장할 수 있습니다.

⚠️ 캔버스에 추가를 클릭하면 다른 모든 버전은 복구할 수 없습니다.

프로토타입 미리보기

프로토타입 화면을 선택합니다.
컨텍스트 메뉴가 나타납니다.
컨텍스트 메뉴에서 미리보기를 클릭합니다.
미리보기가 로드됩니다.

💡 완전한 인터랙티브 프로토타입 미리보기를 얻으려면 화면 간 연결선을 사용하세요.

프로토타입을 인터랙티브하게 만들기 위해 연결선 추가하기

미로 프로토타입에서 객체 간 연결을 추가하거나 변경하려면:

프로토타입의 요소(예: 버튼)를 클릭합니다.
연결선 아이콘을 드래그하여 연결할 화면으로 이동합니다.
미리보기 모드에서 요소를 클릭하면 사용자가 연결된 화면으로 이동합니다.

커넥터 숨기기

많은 커넥터가 있는 프로토타입의 보기를 간소화하려면 커넥터를 숨길 수 있습니다.

캔버스 모드에서 프로토타입을 선택하세요. 컨텍스트 메뉴에서 점 세 개를 클릭합니다. 그런 다음 커넥터 숨기기를 선택하세요.

집중 모드에서, 왼쪽 상단에 있는 숨기기 | 표시 커넥터 버튼을 클릭하세요.

집중 모드에서 커넥터 숨기기 또는 표시하기.

커넥터를 표시하려면 동일한 단계를 반복합니다.

💡 커넥터를 숨기거나 표시하려면 단축키를 사용하세요. 키보드에서 Shift + E를 누릅니다. 캔버스 모드에서 단축키를 사용하려면 프로토타입을 선택한 상태여야 합니다.

집중 모드

Miro Prototypes에 집중 모드가 포함되어 있습니다. 다른 보드 콘텐츠 없이 프로토타입 작업에만 집중할 수 있는 환경을 제공하여 방해받지 않고 작업할 수 있습니다.

집중 모드로 들어가려면 Miro Prototype를 선택합니다. 컨텍스트 메뉴에서 집중 모드를 클릭하세요.

집중 모드는 방해 없는 Miro Prototypes 경험을 제공합니다.

Figma로 복사

프로토타입을 Figma에서 수동으로 다시 만들지 않고 디자이너에게 제공하세요. 프로토타입 전체나 개별 스크린을 복사할 수 있습니다.

프로토타입을 Figma로 복사

프로토타입 프레임을 클릭합니다.
형식 컨텍스트 메뉴가 나타납니다.
컨텍스트 메뉴에서 세로로 된 점 세 개를 클릭해 더보기 메뉴를 엽니다.
Figma로 복사를 클릭합니다.
프로토타입이 클립보드에 복사됩니다.
프로토타입을 Figma로 복사하세요.
Figma에서 프로토타입을 붙여넣습니다. (Windows) Ctrl + V 또는 (MacOS)커맨드 + V 단축키를 사용할 수 있습니다.
프로토타입이 Figma에 붙여넣어집니다.

Figma로 프로토타입 화면 복사

프로토타입에서 프로토타입 화면을 클릭해 선택하세요.
위젯 컨텍스트 메뉴가 나타납니다.
컨텍스트 메뉴에서 세로로 된 점 세 개를 클릭해 더 보기 메뉴를 엽니다.
Figma에 복사를 클릭합니다.
Miro가 프로토타입 화면을 클립보드에 복사합니다.
Figma에 프로토타입을 붙여넣습니다. (Windows) Ctrl + V 또는 (MacOS) Command + V 단축키를 사용할 수 있습니다.
프로토타입 화면이 Figma에 붙여넣어집니다.

프로토타입 내보내기

프로토타입을 SVG로 내보낼 수 있습니다. 또한 Miro 모델 컨텍스트 프로토콜(MCP) 서버를 사용하여 코드베이스 AI 편집자로 내보낼 수 있습니다. 팀은 내보내기를 통해 실제 작동하는 코드를 생성하여 개발을 가속화할 수 있습니다.

SVG로 내보내기

보드 바에서 세로로 된 점 세 개를 클릭합니다.
보드 > 내보내기 > 이미지로 내보내기를 클릭합니다.
선택 창과 이미지로 내보내기 모달이 열립니다.
선택 창을 조정하여 프로토타입을 포함하도록 만듭니다.
이미지로 내보내기 모달에서 벡터 – SVG를 선택합니다.
내보내기를 클릭합니다.

💡 컨텍스트 메뉴에서 개별 화면을 SVG로 내보낼 수 있습니다. 프로토타입에서 화면을 선택하세요. 컨텍스트 메뉴에서 세로 세 점 아이콘을 클릭한 다음 이미지로 내보내기를 클릭합니다. 이미지로 내보내기 창이 열리고, 벡터 – SVG를 선택합니다.

✏️ 이미지가 포함된 프로토타입 SVG를 내보낼 때, Figma와 같은 다른 소프트웨어에 SVG를 가져와 편집하면 이미지가 플레이스홀더로 대체됩니다.

Miro MCP 서버로 내보내기

프로토타입을 코드베이스 AI 편집자로 내보내려면, 예를 들어 Cursor와 같은 경우, 보드 ID가 포함된 보드 URL을 프롬프트에 포함해야 합니다. 프로토타입 기반으로 코드를 생성하라는 지시사항을 제공해야 합니다.

Miro MCP 사용법에 대한 자세한 내용은 Miro MCP 서버 개요를 참조하세요.

Cursor와 같은 코드베이스 AI 편집자는 Miro 보드 ID가 포함된 URL을 받아 프로토타입을 기반으로 코드를 생성합니다.

자주 묻는 질문

Miro Prototypes란 무엇인가요?

Miro Prototypes는 Miro 캔버스에서 바로 클릭 가능한 인터랙티브 프로토타입을 만들 수 있는 유료 애드온입니다. AI가 스티커 메모, 스크린샷, 다이어그램, 텍스트 프롬프트 등 캔버스의 콘텐츠를 기반으로 화면을 생성합니다. 그다음 드래그 앤 드롭 컴포넌트와 브랜드 스타일을 활용해 다듬고, 여러 화면을 핫스팟으로 연결해 흐름을 구성할 수 있습니다. 완성된 프로토타입은 전체 화면으로 미리 보고 피드백을 받을 수 있습니다. 팀이 아이디어를 빠르게 탐색하고, 조기에 조율하며, 디자인이나 개발에 앞서 자신 있게 의사결정할 수 있도록 설계되었습니다.

Miro Prototypes는 누구에게 적합한가요?

프로덕트 매니저, 디자이너, 개발자, 컨설턴트, 마케팅 담당자 등 제품 개발에 관여하는 사람이라면 누구나 사용할 수 있습니다. 특히 디자이너가 아닌 사람이 아이디어를 시각화하는 데 유용하며, 디자이너에게는 다양한 방향을 빠르게 탐색하는 데 도움이 됩니다.

Figma 같은 툴과 어떻게 다른가요?

Miro Prototypes는 제품 개발의 초기 단계를 위해 설계되었습니다. 프로덕트 매니저, 엔지니어, 마케터, 디자이너 등 팀원 누구나 캔버스의 메모, PRD, 워크플로 등을 클릭 가능한 프로토타입으로 즉시 전환할 수 있습니다. 일부러 낮은 정밀도로 설계되어 있어, 아이디어를 빠르게 실험하고 다양한 의견을 모으며, 가치와 방향성에 대한 합의를 빠르게 도출한 다음 Figma에서의 세련된 디자인 작업으로 넘어갈 수 있습니다.

바이브 코딩 툴과는 어떻게 다른가요?

바이브 코딩 툴은 실제 서비스 배포가 가능한 프로덕션 수준의 애플리케이션을 화면 단위로 생성하며, 기술적 설정이나 디버깅이 필요합니다. 반면, Miro Prototypes는 다른 목적을 위해 설계되었습니다. 팀이 전체 워크플로를 빠르게 맵하고 시각화하며, 함께 클릭하여 검토해 코드를 작성하기 전에 올바른 솔루션을 조율할 수 있도록 합니다. 이를 통해 협업이 쉬워지고, 합의가 빨라지며, 나중에 발생할 수 있는 비용이 많이 드는 수정 작업을 피할 수 있습니다.

Miro AI를 활성화하지 않고도 Miro Prototypes를 사용할 수 있나요?

Miro AI를 활성화하면 프로토타입을 가장 빠르게 생성하고 다듬는 방법을 사용할 수 있습니다. Miro AI를 사용하지 않아도 편집, 연결, 미리보기할 수 있지만, 이를 활성화하면 더 강력한 AI 생성 및 반복 개선 기능을 사용할 수 있습니다.

내 데이터가 AI 모델을 훈련하는 데 사용되나요?

아니요. 사용자의 콘텐츠는 비공개로 안전하게 유지됩니다. Miro는 고객의 프롬프트나 결과물을 AI 모델 학습에 사용하거나 제3자 AI 제공업체와 공유하지 않습니다. Free 플랜 사용자의 AI 상호작용 데이터만 Miro의 AI 기능 개선에 활용될 수 있습니다. 이는 Education, Starter, Business, Enterprise 플랜 사용자에게는 해당되지 않습니다. 자세한 내용은 Miro AI 품질 개선을 참조하세요.

요금제는 어떻게 구성되어 있나요?

Miro Prototypes는 Starter, Business, Enterprise 플랜용 유료 애드온입니다. 요금제에는 기본 요금과 팀 규모에 맞게 조정 가능한 AI 크레딧이 포함됩니다. 이 크레딧은 Prototypes를 포함한 모든 Miro AI 기능에서 공유됩니다. 요금제 옵션을 확인하세요.

프로토타입 내 위젯을 정확하게 조정할 수 있는 방법이 있습니까?

네, 집중 모드에서 픽셀 단위로 위젯 크기를 정밀하게 조정할 수 있습니다. 추가 정보: 정밀 크기 조정을 참조하세요.

이 섹션의 문서