Miro Prototypes

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

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

단일 및 다중 화면 플로우를 생성하고, 디자인을 정교화하여 스타일을 적용하며, 프로토타입의 인터랙티브 시뮬레이션을 미리 볼 수 있습니다. 여러 가지 특정 프롬프트를 통해 프로토타입의 각 요소를 생성하며 디자인을 빌드할 수 있습니다. 또한, 프롬프트를 정제하여 처음부터 다시 시작하지 않도록 할 수 있습니다.

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

참고: 프로토타입 경험이 AI 팀원으로 이동했습니다. 현재 공개 베타로, 일부 사용자들은 AI 생성 프로토타입을 위한 AI 팀원을 이미 사용하고 있습니다. 경험이 문서와 일치하지 않는다면, AI 팀원을 사용한 프로토타입 생성 (베타)를 참조하세요. 결과물의 수정 및 반복에 대한 설명은 여전히 유효합니다.

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

Miro AI로 프로토타입 만들기

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

처음부터 시작하기

1. Miro 캔버스에서 Creation bar 위에 있는 Sidekicks를 클릭합니다.
   Sidekick 패널이 열립니다.
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 팀원 패널에서 프로토타입을 시작하세요.

   TIP: 대신 AI 팀원 패널을 열고 즉시 프롬프트를 시작할 수 있습니다. 프로토타입을 만들고 싶다는 점을 명확히 설명하세요. 예를 들어 "결제 흐름에 대한 프로토타입 생성"이라고 말합니다.

   TIP: 프로토타입 형식에 액세스하려면 생성 바에서 툴, 미디어 및 통합 (+)을 이용하세요.

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

팁: 소규모로 시작하고 구체적으로 설명하세요. 한 번에 생성되는 스크린이 적을수록 더 정확한 결과를 짧은 시간에 얻을 수 있습니다. 각 스크린에 원하는 주요 요소(버튼, 섹션, 액션 등)를 명확하게 명시하세요.

팁: 여러 프로토타입 초안을 캔버스에 적용하세요. 다양한 디자인 결정을 비교하고 가장 적합한 옵션을 계속 수정할 수 있습니다.

팁: 프롬프트의 복잡성과 콘텐츠의 크기에 따라 프로토타입 생성에는 1-3분 정도 소요될 수 있습니다. 생성 시간이 길어지면 프롬프트를 단순화하거나 화면 수를 줄이세요.

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

캔버스를 프롬프트로 사용

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

다음 단계를 따르세요:

1. 캔버스의 콘텐츠를 선택하세요. 예를 들어, Doc 또는 스티커 메모입니다. 여러 개체를 선택할 수도 있습니다.
2. Miro 캔버스에서 Creation bar 위쪽에서 Sidekicks를 클릭합니다.
   Sidekick 패널이 열립니다.
   참고: 업데이트된...
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가 프로토타입의 새 버전을 생성합니다. 

힌트: 보드에 이미 있는 기존 프로토타입 화면을 시각적 문맥으로 사용할 수 있습니다. 보드에 프로토타입을 생성하고 적용한 뒤 화면을 선택합니다.

AI로 편집

이미 캔버스에 적용된 프로토타입에 대해서는 계속해서 AI로 편집할 수 있습니다. AI로 편집을 사용하여 새로 만들기보다는 기존 프로토타입 예를 들어 어두운 모드 버전으로 변경할 때 사용하는 것이 좋습니다.

다음 단계를 따르세요:

1. 캔버스에 적용된 모든 프로토타입을 선택한 후, 컨텍스트 메뉴에서 AI로 편집을 클릭하세요.
   AI 팀원 패널이 열립니다.
   AI로 편집을 사용하면 기존의 프로토타입을 세밀하게 수정할 수 있습니다.

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

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

참고: Miro Prototypes의 경우 모든 AI 기반 프로토타이핑 기능은 Prototypes 애드온에서만 사용할 수 있습니다.

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

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

1. 프로토타입 생성하기.
2. 프로토타입 화면을 선택하세요.
   컨텍스트 메뉴가 나타납니다.
3. 컨텍스트 메뉴에서 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. 이제 필요한 대로 이 버전을 수정, 추가 또는 편집할 수 있습니다.

팁: 스크린샷을 편집 가능한 목업으로 변환한 후, Miro AI에 프롬프트를 입력해 편집을 이어가세요. 스크린샷을 프롬프트의 맥락으로 사용할 수도 있으며, 이를 통해 프로토타입을 생성할 수 있습니다. 여러 스크린샷을 사용할 때는 모든 스크린샷을 선택하고 이미지를 복사해 프롬프트의 맥락으로 사용합니다.

프로토타입 버전 선택

각 수정 작업은 프로토타입 버전을 생성합니다. 프로토타입을 수정할 때 버전 선택기는 프로토타입 초안 위에 표시됩니다. 

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

캔버스에 추가할 프로토타입의 수정본이나 버전을 선택하세요.

팁: "캔버스에 추가"를 누르기 전에, 모든 버전에서 화면을 선택하여 캔버스에 복사-붙여넣기할 수 있습니다. 이렇게 하면, 포기할 수 있는 버전에서 화면을 저장할 수 있습니다. 

경고: "캔버스에 추가"를 클릭하면 다른 모든 버전을 다시 가져올 수 없습니다.

프로토타입 미리보기

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

팁: 완전히 상호작용이 가능한 프로토타입 미리보기를 얻으려면 화면 간 연결선을 사용하세요.

프로토타입을 상호작용적으로 만들기 위해 연결선 추가하기

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

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

연결선 숨기기

여러 연결선을 가진 프로토타입의 경우, 프로토타입의 보기를 단순화하기 위해 연결선을 숨길 수 있습니다.

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

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

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

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

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

집중 모드

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

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

집중 모드는 Miro Prototypes를 방해 없이 경험할 수 있습니다.

Figma로 복사

디자이너에게 프로토타입을 Figma에서 수동으로 다시 빌드하지 않고 제공합니다. 프로토타입 전체나 개별 화면을 복사할 수 있습니다.

Figma로 프로토타입 복사

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

Figma로 프로토타입 화면 복사하기

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

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

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

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

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

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

프로토타입 내보내기

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

SVG로 내보내기

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

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

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

Miro MCP 서버로 내보내기

프론트엔드 AI 편집기로 프로토타입을 내보내려면, 프롬프트에 보드 ID가 포함된 보드 URL을 포함하세요. 프로토타입을 기반으로 코드를 생성하도록 지시하세요.

Miro MCP 사용에 대한 더 많은 정보를 알아보려면 Miro MCP Server 개요를 참조하세요.

Cursor와 같은 코드베이스 AI 편집자는 Miro 보드 URL과 보드 ID를 사용하여 프로토타입에 기반한 코드를 생성합니다.

자주 묻는 질문