Miro Prototypes

실행 가능한 사용자: 팀 구성원
사용 가능한 플랜: Business, Enterprise (Accelerate 라이선스)
사용 가능 환경: 브라우저, 데스크톱

Miro Prototypes는 Miro 캔버스에서 유저 인터페이스를 직접 만들 수 있게 해줍니다. 

단일 및 다중 화면 워크플로를 생성하고, 디자인을 다듬고 스타일을 적용하며 프로토타입의 인터랙티브한 시뮬레이션을 미리 확인할 수 있습니다. 프로토타입의 각 요소를 생성하는 여러 개의 구체적인 프롬프트로 디자인을 구성할 수 있습니다. 프롬프트를 다듬어 처음부터 다시 시작하지 않아도 됩니다.

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

참고: Miro Prototypes는 이제 Business 플랜에 포함됩니다. 이전 Business 플랜 또는 Starter 플랜을 사용 중인 경우, 변경사항을 확인하세요. Miro Prototypes는 Enterprise 플랜용 Accelerate 라이선스에 포함됩니다.

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

Miro AI로 프로토타입 만들기

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

처음부터 시작하기

1. Miro 캔버스에서, 위의 생성 바 위에서 AI 팀원을 클릭하세요.
   해당 AI 팀원 패널이 열립니다.
2. AI 팀원 라이브러리를 클릭하세요.
   AI 팀원 라이브러리에서 프로토타입에 접근 
3. 형식 > 프로토타입을 클릭하세요.
4. 텍스트 프롬프트로 시작할지 스크린샷으로 시작할지 선택하세요.
5. 기기 유형을 지정하세요.
6. 단일 화면 또는 다중 화면 프로토타입을 선택하세요.
7. 화면의 지침에 따라 프롬프트를 작성하거나 스크린샷을 업로드하세요. 응답 상자에서 제안 태그를 사용해 프롬프트를 시작할 수 있습니다.
8. 프롬프트 입력을 마친 후 보내기 화살표를 클릭하거나 키보드에서 ENTER를 누르세요.
   Miro AI가 캔버스에 초안 프로토타입을 생성합니다.
9. 선택 사항: 생성을 중단하려면 프로토타입에서 중지를 클릭하세요.
10. (선택 사항) 프로토타입을 반복하려면, Prototype 패널에서 계속 프롬프트를 입력하세요.
    각 반복은 초안 프로토타입의 버전을 생성합니다.
11. 초안 프로토타입에서 다음 중 하나를 선택하세요:
    • 캔버스에 적용
      프로토타입을 이제 캔버스에서 편집할 수 있습니다.
    • 모두 삭제
      초안이 캔버스에서 제거됩니다. 프롬프트를 다듬어 7–9단계를 다시 반복하세요.

AI 팀원과 함께 프로토타입 만들기 (베타)

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

팁: AI 팀원으로 프로토타입을 생성하면 AI 채팅 기록이 활성화되어 입력한 프롬프트를 기억하고 이전에 시도해본 옵션을 검토하거나 어느 보드에서든 이어서 작업할 수 있습니다. 자세한 내용은 Sidekicks가 Miro의 AI 제작을 발전시키는 방법 및 Miro Prototypes 개요를 참조하세요.

참고: Miro Prototypes용 AI 팀원 업데이트는 현재 공개 베타입니다. 이 섹션의 문서 내용과 사용 경험이 일치하지 않는 경우 Miro AI로 프로토타입 만들기를 참조하세요.

다음 단계를 따르세요:

1. Miro 캔버스에서 Creation bar 위에 있는 AI 팀원을 클릭하세요.
   AI 팀원 패널이 열립니다.

2. 프롬프트 상자에서 프로토타입 만들기를 클릭하세요.
   AI 팀원이 프로토타입 생성을 도울 준비가 되었습니다.
   AI 팀원 패널에서 프로토타입을 시작하세요.

   팁: 또는 AI 팀원 패널을 열고 바로 프롬프트를 입력해 시작할 수 있습니다. 프로토타입을 만들고 싶다는 것을 명확히 표현하세요. 예: "결제 흐름용 프로토타입을 만들어 주세요."

   팁: 또한 생성 바에서 도구, 미디어 및 통합(+)을 통해 프로토타입 형식에 접근할 수 있습니다.

3. AI 팀원이 생성할 프로토타입을 설명하는 프롬프트를 작성하세요. 
4. 위쪽 화살표를 클릭하거나 키보드에서 ENTER 키를 누르세요.
5. 선택 사항: 생성을 중지하려면 프로토타입에서 Stop을 클릭하세요.
6. 선택 사항: 프로토타입을 반복하려면, 계속해서 Prototype 패널에 프롬프트를 입력하세요.
   각 반복은 초안 프로토타입의 버전을 생성합니다.
7. 초안 프로토타입에서 다음 중 하나를 선택하세요:
   • 캔버스에 적용
     프로토타입을 이제 캔버스에서 편집할 수 있습니다.
   • 모두 삭제
     초안이 캔버스에서 제거됩니다. 프롬프트를 다듬은 후 3–6단계를 반복할 수 있습니다.

TIP: 작게 시작하고 구체적으로 작성하세요. 한 번에 생성하는 화면 수를 줄이면 더 짧은 시간에 더 정확한 결과를 얻을 수 있습니다. 각 화면에 버튼, 섹션 또는 동작과 같은 핵심 요소를 명시하세요.

TIP: 여러 프로토타입 초안을 캔버스에 적용해 보세요. 디자인 결정을 비교하고 탐색하며 최적안을 계속 다듬을 수 있습니다.

팁: 프로토타입은 프롬프트 복잡도와 콘텐츠 크기에 따라 1–3분이 걸릴 수 있습니다. 생성 시간이 더 오래 걸리면 프롬프트를 단순화하거나 화면 수를 줄이세요.

팁: 프롬프트에 URL을 포함하고 AI 팀원에게 연결된 사이트의 스타일을 적용하도록 지시할 수 있습니다.

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

캔버스에서 프롬프트로 사용할 콘텐츠를 선택하세요. 예: Doc에 있는 디자인 브리프나 스티커 메모. 프로토타입은 해당 콘텐츠를 문맥으로 사용해 생성할 수 있습니다. 

다음 단계를 따르세요.

1. 캔버스 콘텐츠를 선택하세요. 예: Doc 또는 스티커 메모. 여러 개체를 선택할 수도 있습니다.
2. Miro 캔버스에서, Creation bar 위에 있는 Sidekicks를 클릭하세요.
   Sidekick 패널이 열립니다.
3. 프롬프트 상자 하단의 Prototype 아이콘을 클릭하세요.
4. 프롬프트 상자의 화면 지시에 따라 프로토타입을 생성하세요.
   Miro는 지정한 사양과 선택한 캔버스 콘텐츠를 바탕으로 프로토타입을 생성합니다.

참고: 캔버스에 스크린샷을 하나 이상 추가하면, 선택한 스크린샷을 바탕으로 Miro Prototypes가 프로토타입의 여러 화면을 생성합니다.

팁: 캔버스에서 특정 객체를 선택하면 Miro AI가 해당 객체를 사용하도록 프롬프트를 작성할 수 있습니다. 예를 들어 프롬프트에 “캔버스의 스크린샷을 프로토타입 제작 가이드로 사용하세요”라고 입력할 수 있습니다. 캔버스에 비슷한 객체가 많은 경우에는 Miro AI가 사용할 객체를 명확히 설명하세요.

임베드된 Figma 프레임을 Miro Prototypes로 변환

1. Figma에서 해당 프레임을 선택합니다.
2. 프레임을 우클릭하고 Copy/Paste as > Copy link to selection를 선택합니다. 
3. Miro 보드로 이동합니다.
4. Figma에서 복사한 링크를 붙여넣습니다.
5. 아직 연결하지 않았다면 Figma를 연결합니다.
6. 캔버스에서 Figma 임베드를 선택합니다.
7. 임베드의 컨텍스트 메뉴에서 Convert to를 클릭합니다.
8. 프로토타입을 다음으로 변환 메뉴에서 선택하세요.
9. Miro AI가 임베드된 Figma 프로토타입을 편집 가능한 Miro 프로토타입으로 변환합니다.

프로토타입 반복하기

첫 번째 초안이 완벽하지 않을 수 있습니다. 초안을 캔버스에 적용하기 전에 계속 반복해 여러 버전의 프로토타입을 만들 수 있습니다.

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

참고: 편집은 한 번에 한 화면씩만 할 수 있습니다.

팁: 캔버스 컨텍스트를 사용하세요. 문서, 다이어그램, 스티커 메모 또는 기타 보드 콘텐츠를 선택해 Miro AI에 프롬프트를 제공하세요.

스크린샷을 시각적 컨텍스트로 사용해 반복하기

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

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

팁: 기존 보드에 있는 프로토타입 화면을 시각적 컨텍스트로 사용할 수 있습니다. 프로토타입을 생성해 보드에 적용한 후 화면을 선택하세요.

AI로 편집

캔버스에 이미 적용된 프로토타입은 AI로 편집을 통해 계속해서 개선할 수 있습니다. 처음부터 다시 만들기 대신 AI로 편집해 다듬으세요. 예: 기존 프로토타입을 다크 모드 버전으로 만들고 싶을 때.

다음 단계를 따르세요:

1. 캔버스에 적용된 프로토타입에서 컨텍스트 메뉴에서 AI로 편집을 클릭합니다.
   AI 팀원 패널이 열립니다.
    
   AI로 편집을 사용하면 기존 프로토타입을 정교하게 다듬을 수 있습니다.

   참고: AI로 편집과 AI 팀원은 한 번에 하나의 프로토타입에서만 사용할 수 있습니다. 전환하려면 AI 팀원 패널을 닫고 대상 프로토타입에서 AI로 편집을 다시 엽니다.

2. 프롬프트 상자에 변경할 내용을 설명합니다. 예: “다크 테마로 변환”.
3. 프롬프트를 실행하려면 위쪽 화살표 버튼을 클릭하거나 키보드에서 ENTER를 누르세요.
   AI 팀원이 정제된 프로토타입을 생성합니다.
4. (선택 사항) 계속해서 AI 팀원에게 프롬프트를 보내 프로토타입을 반복하세요. 프로토타입을 캔버스에 적용하기 전에 버전을 선택할 수 있습니다.
5. 작성된 프로토타입 위에서 캔버스에 추가를 클릭하세요.

URL에서 프로토타입 스타일 적용

기존 URL의 스타일을 프로토타입에 적용하려면:

1. 프로토타입 생성.
2. 프로토타입 화면을 선택하세요.
   컨텍스트 메뉴가 나타납니다.
3. 컨텍스트 메뉴에서 AI로 편집을 클릭해 AI 팀원 패널을 엽니다.
4. 프롬프트 입력창에 포함된 URL의 스타일을 적용하라고 AI 팀원에게 지시하세요. 전체 URL을 반드시 포함하세요.
5. AI 팀원은 URL의 시각적 스타일을 보드에 있는 프로토타입의 업데이트된 버전에 적용합니다.

스크린샷에서 프로토타입 스타일 적용

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

1. 프로토타입 생성.
2. 프로토타입 화면을 선택합니다.
   컨텍스트 메뉴가 나타납니다.
3. Miro AI 아이콘을 컨텍스트 메뉴에서 클릭합니다.
4. 이미지에서 스타일 가져오기를 선택합니다.
   스타일을 가져와 프로토타입에 적용합니다
5. 스타일을 가져올 이미지 파일을 선택합니다.
6. 스타일이 프로토타입에 적용됩니다.

팁: 스타일을 먼저 적용하거나 마지막에 적용하세요. 프로토타입의 모든 요소가 테마에 맞도록 하려면 디자인 초기에 테마를 적용하거나 마지막 단계에서 적용하세요.

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

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

1. 스크린샷을 Miro 보드에 추가합니다.
2. 이미지를 클릭해 컨텍스트 메뉴를 엽니다.
3. 변환 버튼을 클릭한 다음 프로토타입을 클릭합니다.
4. 하위 메뉴에서 기기 유형을 선택합니다(모바일, 태블릿, 데스크톱, 사용자 지정).
5. AI가 텍스트, 버튼, 레이아웃 등 요소를 재구성해 편집 가능한 프로토타입으로 만듭니다.
6. 이제 필요에 따라 이 버전을 수정하거나 요소를 추가할 수 있습니다.

TIP: 스크린샷을 편집 가능한 목업으로 변환한 다음 Miro AI에 계속 편집하라고 프롬프트를 입력하세요. 또한 스크린샷을 프롬프트의 컨텍스트로 사용해 프로토타입을 생성할 수 있습니다. 여러 스크린샷을 사용하려면 모든 스크린샷을 선택해 이미지로 복사한 후 그 이미지를 프롬프트의 컨텍스트로 사용하세요.

프로토타입 버전 선택

정제할 때마다 프로토타입 버전이 생성됩니다. 프로토타입을 정제하면 버전 선택기가 프로토타입 초안 위에 표시됩니다. 

화살표를 클릭해 버전 간을 전환하세요. 원하는 버전을 선택했으면 캔버스에 추가를 클릭하세요. 선택한 버전이 캔버스에 적용됩니다.

프로토타입의 각 정제(또는 버전) 중 캔버스에 추가할 버전을 선택하세요.

팁: Add to canvas를 클릭하기 전에 어떤 버전에서든 화면을 선택해 캔버스에 복사해 붙여넣을 수 있습니다. 이렇게 하면 버전을 버리더라도 해당 화면을 저장할 수 있습니다. 

팁: 버전을 캔버스에 추가한 후에는 AI 채팅 기록에서 이전 버전에 접근할 수 있습니다.

프로토타입 미리보기

프로토타입 컨텍스트 메뉴에서 Preview를 클릭합니다. 미리보기가 열립니다.

팁: 완전한 상호작용형 프로토타입 미리보기를 보려면 화면 간 커넥터를 사용하세요.

프로토타입을 인터랙티브하게 만들려면 커넥터를 추가하세요

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

1. 프로토타입에서 버튼 등 요소를 클릭하세요.
2. 커넥터 아이콘을 연결할 화면으로 드래그하세요.
3. 미리보기 모드에서 요소를 클릭하면 연결된 화면으로 이동합니다.

커넥터 숨기기

커넥터가 많은 프로토타입에서는 보기를 단순화하기 위해 커넥터를 숨길 수 있습니다.

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

In 집중 모드, 왼쪽 상단에서 숨기기 | 표시 커넥터 버튼을 클릭합니다.

집중 모드에서 커넥터를 숨기거나 표시합니다.

커넥터를 표시하려면 같은 단계를 반복하세요.

팁: 커넥터를 숨기거나 표시하려면 단축키를 사용하세요. 키보드에서 Shift + E를 누르세요. 캔버스 모드에서는 단축키를 사용하려면 프로토타입을 선택하세요.

집중 모드

Miro Prototypes에는 집중 모드가 포함되어 있습니다. 집중 모드에 들어가면 다른 보드 콘텐츠가 보이지 않는 상태에서 방해받지 않고 프로토타입 작업에 집중할 수 있습니다.

집중 모드로 들어가려면 Miro 프로토타입을 선택하세요. 컨텍스트 메뉴에서 집중 모드를 클릭하세요.

집중 모드는 방해 요소 없이 Miro Prototypes를 사용할 수 있게 해줍니다.

Figma로 복사

디자이너가 Figma에서 수동으로 다시 만들 필요 없도록 프로토타입을 제공할 수 있습니다. 프로토타입 전체 또는 개별 화면을 복사할 수 있습니다.

프로토타입을 Figma로 복사

1. 프로토타입 프레임을 클릭합니다.
   Format 컨텍스트 메뉴가 나타납니다.
2. 컨텍스트 메뉴에서 세로 점 세 개를 클릭해 More 메뉴를 엽니다.
3. Copy to Figma를 클릭합니다.
   Miro가 프로토타입을 클립보드로 복사합니다.
   프로토타입을 Figma로 복사합니다. 
4. Figma에서 프로토타입을 붙여넣습니다. (Windows)에서는 Ctrl + V 또는 (MacOS)에서는 커맨드 + V 단축키를 사용할 수 있습니다.
   프로토타입이 Figma에 붙여넣어집니다.

프로토타입 화면을 Figma로 복사

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

Miro Prototypes용 Claude Code 연결

Model Context Protocol(MCP)을 통해 Claude Code 프로젝트에서 Miro Prototypes를 생성할 수 있습니다.

1. 다음 지침에 따라 Miro의 MCP 서버에 연결하세요.
2. 연결되면 AI 도구에 다음 명령을 복사해 실행하세요:
   "이 디자인 파일을 가져와 디자인의 관련 부분을 구현하세요. [관련 Miro 보드 링크]"
3. Miro 보드에서 Miro 프로토타입을 볼 수 있으며 터미널 창에서 Claude Code를 확인할 수 있습니다.

프로토타입 링크 공유(베타)

Miro 계정이 없어도 팀원이나 외부 이해관계자와 공유할 수 있는 고유 링크를 복사할 수 있습니다. 

1. 프로토타입 컨텍스트 메뉴에서 세로 점 세 개를 클릭해 더보기 메뉴를 엽니다.
2. 공유 및 내보내기 > 프로토타입 공유를 클릭합니다.
   프로토타입 공유 모달이 열립니다.
3. 링크 복사를 클릭합니다.
4. 선택 사항: 링크를 받은 사용자가 프로토타입을 어떻게 보는지 확인하려면 브라우저에서 미리보기를 클릭합니다.
5. 링크를 공유합니다.

참고: 외부 사용자가 액세스하려면 보드가 공개여야 합니다. 외부 사용자는 집중 모드에서만 프로토타입에 접근할 수 있으며 캔버스의 다른 콘텐츠는 볼 수 없습니다. 핫스폿과 프로토타입 워크플로를 통해 상호작용할 수 있습니다. 보드 권한이 허용되면 외부 사용자도 댓글을 남길 수 있습니다.

팁: 집중 모드에서도 공유 가능한 링크를 복사할 수 있습니다. 오른쪽 상단에서 세로 점 세 개를 클릭한 다음 프로토타입 공유를 클릭합니다. 그리고 미리보기 모드에서는 오른쪽 상단에서 프로토타입 공유를 클릭합니다.

프로토타입 내보내기

프로토타입을 SVG로 내보낼 수 있습니다. 또한 Miro의 Model Context Protocol (MCP) Server를 사용해 코드베이스 AI 편집기로 내보낼 수 있으며, 팀은 이를 통해 작동하는 코드를 생성하고 개발을 가속화할 수 있습니다.

SVG로 내보내기

1. 프로토타입 컨텍스트 메뉴에서 세로 점 세 개(더보기) 아이콘을 클릭하세요.
2. 공유 및 내보내기 > 이미지로 내보내기를 클릭하세요.
   선택 창과 이미지로 내보내기 모달이 열립니다.
3. 선택 창이 프로토타입을 모두 포함하도록 조정하세요.
4. 이미지로 내보내기 모달에서 벡터 – SVG를 선택하세요.
5. 내보내기를 클릭하세요. 

팁: 컨텍스트 메뉴에서 단일 화면을 SVG로 내보낼 수 있습니다. 프로토타입에서 화면을 선택하세요. 컨텍스트 메뉴에서 세로 점 3개를 클릭한 다음 Export as image를 클릭하세요. Export as image 모달이 열리면 Vector – SVG를 선택하세요.

참고: 이미지가 포함된 프로토타입 SVG를 편집용으로 Figma 같은 다른 소프트웨어에 가져오면, 이미지가 플레이스홀더로 대체됩니다.

Miro MCP Server로 내보내기

예: Cursor 같은 코드베이스 AI 편집기로 프로토타입을 내보내려면 프롬프트에 보드 ID가 포함된 보드 URL을 넣고, 프로토타입을 기반으로 코드를 생성하라는 지침을 제공하세요.

Miro MCP 사용 방법에 대해 자세히 알아보려면 Miro MCP Server 개요를 참조하세요.

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

자주 묻는 질문