Miro Prototypes

실행 가능한 사용자: 팀 구성원
사용 가능한 플랜: Business, Enterprise(유료 애드온)
사용 가능 환경: 브라우저, 데스크톱

Miro Prototypes를 사용하면 Miro 캔버스에서 유저 인터페이스를 직접 만들 수 있습니다. 

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

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

참고: Miro Prototypes가 이제 Business 플랜에 포함되었습니다. 기존 Business 플랜이나 Starter 플랜을 사용 중인 경우, 변경 사항을 확인하세요.

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

Miro AI로 프로토타입 만들기

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

처음부터 시작하기

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

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

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

팁: AI 팀원을 사용해 프로토타입을 생성하면 AI 채팅 기록이 활성화되어 프롬프트를 기억하고 이전에 시도한 옵션을 검토하거나 어떤 보드에서든 이어서 작업할 수 있습니다. 자세한 내용은 AI 팀원이 Miro에서 AI 생성 방식을 발전시킵니다와 Miro Prototypes 개요를 참조하세요.

참고: 프로토타입용 AI 팀원 업데이트는 현재 공개 베타입니다. 사용 중인 환경이 이 섹션의 문서와 다르면 Miro AI로 프로토타입 생성을 확인하세요.

다음 단계를 따르세요:

1. Miro 캔버스에서, 생성 바 위에 있는 AI 팀원을 클릭합니다.
   AI 팀원 측면 패널이 열립니다.

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

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

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

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

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

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

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

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

캔버스를 프롬프트로 사용

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

다음 단계를 따르세요:

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

NOTE: 캔버스에 스크린샷을 하나 이상 추가하면 Miro Prototypes가 선택한 스크린샷을 기반으로 Prototype에서 여러 화면을 생성합니다.

TIP: 캔버스에서 특정 객체를 선택한 다음 프롬프트로 Miro AI에 해당 객체를 사용하라고 지시할 수 있습니다. 예: 프롬프트에 "캔버스의 스크린샷을 프로토타입 제작 가이드로 사용하세요."라고 입력할 수 있습니다. 캔버스에 유사한 객체가 많다면 Miro AI가 사용할 객체를 구체적으로 설명하세요.

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

1. Figma에서 해당 프레임을 선택하세요.
2. 프레임을 마우스 오른쪽 버튼으로 클릭한 다음 복사/붙여넣기 형식 > 선택 항목 링크 복사를 선택하세요. 
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. 작성된 프로토타입 위에서 Add to canvas를 클릭하세요.

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

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

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

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

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

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

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

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

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

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

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

프로토타입 버전 선택

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

화살표를 클릭해 버전 사이를 전환하세요. 버전을 선택한 후 Add to canvas를 클릭하면 해당 버전이 캔버스에 적용됩니다.

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

팁: 캔버스에 추가를 클릭하기 전에 원하는 버전에서 화면을 선택해 캔버스에 복사해 붙여넣을 수 있습니다. 이렇게 하면 나중에 버릴 수 있는 버전의 화면도 저장할 수 있습니다. 

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

프로토타입 미리보기

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

TIP: 완전히 인터랙티브한 프로토타입 미리보기를 얻으려면 화면 간에 커넥터 라인을 사용하세요.

프로토타입을 인터랙티브하게 만들기 위해 커넥터 라인 추가

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

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

커넥터 숨기기

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

캔버스 모드에서 프로토타입을 선택합니다. 컨텍스트 메뉴에서 점 3개(더보기) 아이콘을 클릭한 다음 커넥터 숨기기를 선택하세요.

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

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

커넥터를 표시하려면 동일한 단계를 반복하세요.

TIP: 단축키로 커넥터를 숨기거나 표시할 수 있습니다. 키보드에서 Shift + E를 누르세요. 캔버스 모드에서는 단축키를 사용하려면 프로토타입을 선택했는지 확인하세요.

집중 모드

Miro Prototypes에는 집중 모드가 포함되어 있습니다. 집중 모드로 들어가면 다른 보드 콘텐츠 없이 프로토타입 작업에만 집중할 수 있습니다.

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

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

Figma로 복사

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

프로토타입을 Figma로 복사

1. 프로토타입 프레임을 클릭하세요.
   포맷 컨텍스트 메뉴가 나타납니다.
2. 컨텍스트 메뉴에서 세로 점 3개를 클릭해 더보기 메뉴를 엽니다.
3. 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을 통해 Claude Code 프로젝트에서 Miro Prototypes를 생성합니다.

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

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

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

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

참고: 외부 사용자가 접근하려면 보드를 공개해야 합니다. 외부 사용자는 집중 모드에서만 프로토타입에 접근할 수 있으며 캔버스의 다른 내용에는 접근할 수 없습니다. 핫스팟과 프로토타입 워크플로와 상호작용할 수 있습니다. 보드 권한에서 허용하면 외부 사용자도 댓글을 달 수 있습니다.

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

프로토타입 내보내기

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

SVG로 내보내기

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

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

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

Miro MCP Server로 내보내기

코드베이스 AI 편집기(예: Cursor)로 프로토타입을 내보내려면 프롬프트에 보드 ID가 포함된 보드 URL을 포함하세요. 프로토타입을 기반으로 코드를 생성하도록 지시하는 명령을 제공하세요.

Miro MCP 사용 방법을 자세히 알아보려면 Miro MCP 서버 개요를 참조하세요.

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

자주 묻는 질문