Miro Prototypes

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

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

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

프로토타입을 통해 단일 및 다중 화면 워크플로를 생성하고, 디자인을 수정하며 스타일을 적용하고, 프로토타입의 인터랙티브한 시뮬레이션을 미리 볼 수 있습니다.

✏️ 프로토타입 기능이 AI 팀원으로 이동되었습니다. 현재 일부 사용자는 AI 생성 프로토타입에 대한 업데이트된 AI 팀원 입력을 가지고 있습니다. 사용 중인 환경이 문서와 다를 경우, AI 팀원으로 프로토타입 만들기(베타)를 참조하십시오. 결과를 정교화하고 반복하는 내용은 여전히 적용됩니다.

프로토타입의 각 요소를 생성하는 여러 개의 구체적인 프롬프트로 디자인을 빌드하세요. 프롬프트를 정교화하여 처음부터 다시 시작하지 않도록 할 수도 있습니다.

더 많은 정보: 자주 묻는 질문을 참조하세요.

Miro AI로 프로토타입 만들기

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

처음부터 시작하기

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

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

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

✏️ 프로토타입용 AI 팀원 업데이트가 현재 퍼블릭 베타 버전으로 제공되고 있습니다. 사용 경험이 이 섹션의 문서와 일치하지 않는 경우, Miro AI로 프로토타입 생성하기를 참조하세요.

다음 단계를 따르세요:

1. Miro 캔버스 상단의 생성 바 위에 있는 AI 팀원을 클릭하세요.
   AI 팀원 패널이 열립니다.

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

   💡 또는 AI 팀원 패널을 열고 바로 프롬프트를 시작할 수 있습니다. 프로토타입을 만들고 싶다고 명시적으로 말씀하세요. 예: "체크아웃 워크플로 프로토타입 생성."

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

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

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

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

💡 프로토타입은 프롬프트의 복잡성이나 콘텐츠의 크기에 따라 생성하는 데 1~3분이 걸릴 수 있습니다. 프로토타입 생성에 시간이 더 오래 걸린다면, 프롬프트를 단순화하거나 화면 수를 줄여보세요.

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

캔버스에서 사용할 콘텐츠를 선택합니다. 예를 들어, 문서나 스티커 메모에 디자인 브리프가 있을 수 있습니다. 프로토타입은 콘텐츠를 맥락으로 사용하여 프로토타입을 생성할 수 있습니다. 

다음 단계를 따르세요:

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

💡 Miro AI에게 특정 캔버스 객체를 사용하도록 프롬프트할 수 있습니다. 예를 들어, 프롬프트에서 "캔버스의 스크린샷을 프로토타입 구축 가이드로 사용하세요."라고 말할 수 있습니다. 캔버스에 유사한 객체가 많다면, Miro AI가 사용해야 할 객체를 명확히 설명하세요.

프로토타입 반복

첫 번째 초안이 완벽한 결과가 아닐 수도 있습니다. 초안을 캔버스에 적용하기 전에 계속 반복하고 여러 버전을 생성할 수 있습니다.

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

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

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

화면 캡처를 시각적 배경으로 사용해 반복하기

프로토타입을 캔버스에 적용하기 전에, 화면 캡처나 이미 캔버스에 있는 다른 프로토타입을 맥락으로 사용해 초안을 반복할 수 있습니다.

1. Miro AI로 프로토타입 생성하기. 캔버스에는 적용하지 마세요.
   프로토타입 패널의 다음 단계는 다음에 무엇을 하시겠습니까?입니다.
2. 프로토타입 편집을 클릭하세요.
3. 다중 화면 흐름의 경우, 반복하고자 하는 화면을 선택하세요.
4. 보드에서 스크린샷을 선택하세요.
5. 응답 상자에 선택한 스크린샷을 기반으로 변경하고 싶은 내용을 설명하세요.
6. 키보드에서 위쪽 화살표를 클릭하거나 Enter를 누르세요.
   Miro에서 프로토타입의 새로운 버전을 생성합니다. 

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

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

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

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

💡 스타일은 처음이나 마지막에 적용하세요. 강력한 테마를 유지하려면, 프로토타입 디자인 초기에 테마를 적용하거나 최종 단계에서 적용하세요.

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

디자인이나 경쟁사의 사용자 인터페이스 스크린샷을 수정 가능한 프로토타입으로 변환할 수 있습니다.

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

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

프로토타입 버전 선택

각 세부 조정은 프로토타입 버전을 만듭니다. 프로토타입을 세부 조정할 때, 버전 선택기는 프로토타입 초안 위에 있습니다. 

화살표를 클릭하여 버전 간에 토글하세요. 원하는 버전을 선택한 후, 캔버스에 추가를 클릭하세요. 선택한 버전이 캔버스에 적용됩니다.

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

💡 캔버스에 추가를 클릭하기 전에, 어떤 버전에서든 화면을 선택하여 캔버스에 복사하여 붙여 넣을 수 있습니다. 이는 버전을 폐기할 경우에도 화면을 저장할 수 있도록 합니다. 

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

프로토타입 미리보기

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

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

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

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

1. 프로토타입에서 버튼과 같은 요소를 클릭합니다.
2. 커넥터 라인 아이콘을 연결해야 할 화면으로 드래그합니다.
3. 미리보기 모드에서 요소를 클릭하면 사용자가 연결된 화면으로 이동합니다.

커넥터 숨기기

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

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

집중 모드에서 왼쪽 위에 있는 숨기기 | 표시 버튼을 클릭합니다.

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

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

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

집중 모드

Miro Prototypes에는 집중 모드가 포함되어 있습니다. 다른 보드 콘텐츠가 보이지 않도록 하여 방해 없이 프로토타입 작업을 할 수 있도록 집중 모드에 들어가세요.

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

집중 모드는 방해 없는 Miro Prototypes 작업을 가능하게 합니다.

프로토타입 내보내기

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

SVG로 내보내기

1. 보드 바에서 세 개의 세로 점을 클릭합니다.
2. 보드 > 내보내기 > 이미지로 내보내기를 클릭합니다.
   선택 창과 이미지로 내보내기 모달이 열립니다.
3. 선택 창을 조절하여 프로토타입을 덮도록 합니다.
4. 이미지로 내보내기 모달에서 벡터 - SVG를 선택합니다.
5. 내보내기를 클릭합니다. 

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

✏️ 이미지가 포함된 프로토타입 SVG 내보내기의 경우, Figma와 같은 다른 소프트웨어로 SVG를 가져오면 이미지가 플레이스홀더로 대체됩니다.

Miro MCP 서버로 내보내기

프로토타입을 코드베이스 AI 편집자인 예를 들어 Cursor로 내보내기 위해서는, 프롬프트에 보드 ID가 포함된 보드 URL을 추가하십시오. 프로토타입을 기반으로 코드를 생성하도록 지침을 제공해야 합니다.

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

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

자주 묻는 질문