Miro Prototypes는 제품 팀이 초기 아이디어를 더 빨리 인터렉티브 프로토타입으로 전환하여 디자인이나 코드 작업 전 명확한 방향으로 나아갈 수 있도록 돕습니다.
팁: AI 팀원을 사용하여 프롬프트를 기억하는 AI 채팅 기록을 활성화해 보드를 탐색하며 이전에 탐험한 옵션을 리뷰 및 재개할 수 있도록 프로토타입을 생성하세요. 자세한 내용은 AI 팀원으로 Miro 내 AI 생성 발전시키기와 Miro Prototypes 개요를 참조하세요.
이 가이드는 AI 기반 프로토타입 작업에 성공적인 팀들이 어떻게 사고하고 작업하는지를 보여줍니다: 맥락을 이해하며 계획하기, 의도적으로 생성하기, 팀으로서 반복하며 수정하기, 그리고 중요 지점을 테스트하기. Miro Prototypes의 기본 원리를 파악하고 나면, 전문적으로 사용하는 방법은 다음과 같습니다:
1단계: 맥락을 이해하기
최고의 AI 프롬프트는 실제 작업에서 시작됩니다. 스티커 메모, 제품 요구 문서, 사용자 워크플로, 스크린샷, 또는 팀의 사고를 포착하는 모든 산출물을 선택하여 캔버스를 기반으로 사용하세요.
팀이 마지막으로 멈춘 지점에서 시작하기
당신의 아이디어를 정의하는 캔버스 콘텐츠를 선택하세요. AI는 이 컨텍스트를 사용해 구조와 논리를 형성합니다. 이 프롬프트를 사용해 시작할 수 있습니다. 단지 특정 선택에 맞게 콘텐츠를 조정하세요.
프롬프트 예시:
“선택된 PRD와 기회 맵을 기반으로 한 5개의 화면을 가진 모바일 목업을 만들어라.”
기존 제품을 반복 개선
제품 스크린샷을 넣으세요. Miro AI가 이를 편집 가능한 목업으로 변환해 처음부터 다시 시작하지 않고도 변경사항과 개선을 할 수 있습니다.
💡 스크린샷을 선택하고, 컨텍스트 메뉴에서 이미지를 프로토타입으로 변환을 사용하세요. 프롬프트는 필요하지 않습니다.
또한, AI 채팅에서 다음 반복 작업의 컨텍스트로 스크린샷이나 선택한 프로토타입을 사용할 수도 있습니다..
프롬프트 예시:
"선택된 스크린샷은 오늘의 주식 지수 및 가격 변동을 보여줍니다. 현재 리스트 아래에 가장 큰 암호화폐의 유사한 가격 변동 리스트를 추가한 버전의 화면을 만드세요. 현재 화면 디자인의 나머지는 그대로 유지되어야 합니다. 새로운 리스트 구간을 위해 푸터를 확장하는 것을 잊지 마세요. 전체 화면의 텍스트 출력을 영어로 변경해 주세요."
스크린샷에서 만들어지고 수정된 프로토타입
더 나아가기
- 단계 구성: 스티커 메모나 다이어그램으로 여정을 대략적으로 스케치하고 원하는 화면의 수를 정합니다 (예를 들어, 가입 → 대시보드 → 결제).
- 분위기나 테마 설정: AI가 원하는 외관과 톤에 맞도록 참조 스크린샷이나 스타일 가이드를 추가합니다.
- 상세한 프롬프트가 더 나은 결과를 가져옵니다: 프롬프트가 자세할수록 생성된 프로토타입이 원하는 것과 가까워집니다. 다양한 요소의 색상에 대해 특정한 헥스 코드를 제공할 수 있습니다.
예시 프롬프트:
"선택된 PRD와 기회 매핑 연습을 기반으로 5개의 화면이 있는 모바일 프로토타입을 만드세요. 디자인의 스타일과 테마는 선택된 스크린샷의 스타일과 정확히 일치해야 합니다."
2단계: 배치하기 전에 잠시 멈추기
시각적인 요소는 처음 프롬프트로 완전히 맞추기 어렵기 때문에 몇 번 수정하고 반복할 준비를 하세요. 프롬프트가 길 필요는 없지만, Miro AI는 가능한 한 프롬프트에 맞는 화면을 생성합니다. 구조, 색상, 시각적 계층 등이 중요하다면 명확히 사용하는 것이 도움이 될 수 있습니다.
단계별 반복
스테이징 구역은 여러분의 실험장입니다. 클릭하는 요소는 유지하고, 그렇지 않은 것은 다시 생성하세요. 프레임 중 하나를 선택하고, Miro AI를 사용해 배치하기 전에 변경하세요.
예시:
“이 레이아웃을 단순화하고 주요 작업을 강조하세요.”
방향 비교하기
- 버전 전환: 각 반복 버전을 클릭해 최상의 방향을 선택하세요.
- 나란히 비교: 한 버전을 복사하여 다른 버전 옆에 붙여 넣어 시각적으로 비교할 수 있습니다.
더 나아가기
- 반복 작업: 생성 → 개선 → 공유. 처음 시도에서 완벽함을 기대하지 마세요.
- 배경을 위한 메모 추가: 배치를 하기 전에 테스트하거나 탐색했던 내용을 캡처하기 위해 스티키 메모를 만드세요.
✏️ 팀에게 아이디어를 전달하기 전에 AI를 활용해 자유롭게 반복하세요. 모두가 보고 편집할 준비가 되면 캔버스에 적용을 클릭하세요.
3단계: 팀으로 반복하기
프로토타입이 보드 위에 놓이면, AI 또는 수작업으로도 다 함께 아이디어를 정검, 다듬고 발전시켜 무엇이 효과적이고 그 이유가 무엇인지 조율하세요.
함께 살펴보기
- 화면 연결을 통해 논리적 격차와 다음 단계를 드러냅니다.
- 프로토타입 포맷과 집중 모드를 사용해 전체 보드의 방해 없이 프로토타입만 공유합니다. 보드를 열 때 다른 사용자가 포맷을 자동으로 열 수 있도록 고정합니다.
- 미리보기 모드로 전환하여 발표 시 모두 같은 흐름을 따라갈 수 있도록 하고, 전체 맥락은 클릭 한 번으로 확인할 수 있게 합니다.
화면에 직접 의견을 남기고, 스티커로 반응하며, 잘된 점과 그렇지 않은 점을 기록하세요. 주석은 팀 전체가 일치된 이해를 갖도록 돕습니다.
중요할 때는 직접 편집
모든 변화가 새로운 프롬프트를 필요로 하지는 않습니다. 때로는 스스로 간단히 수정하는 것이 더 빠르고 명확합니다. 프로토타이핑 라이브러리를 사용하여 구성 요소를 바꿔보고, 간격을 조정하거나, 텍스트를 다시 작성하세요.
팀의 누구든지 통제권을 잡아 수정하고 아이디어를 발전시킬 수 있습니다.
더 나아가기
- 목적성을 가진 스타일링 — 프롬프트에 브랜드 색상을 포함시키세요. 또는 제품 스크린샷을 업로드하여 AI가 자동으로 스타일을 적용도록 하세요. 이렇게 하면 프로토타입이 진짜처럼 보이게 됩니다.
예시 프롬프트:
"우리 브랜드 지침을 사용하세요: 주요 작업에 #0052CC"
💡 화면을 선택하고, 이미지에서 스타일을 가져오기를 컨텍스트 메뉴에서 한 번에 선택하세요. 이미지 테마를 적용하세요.
- 비동기 피드백을 위한 Talktrack 추가하기: 회의를 대신하거나 회의 전 사전 작업으로 여러분의 생각을 설명하고 피드백을 받기 위해 빠르게 설명을 녹화하세요.
- 결정을 댓글로 기록하기: 중요한 피드백이나 다음 단계의 요약을 보드에 바로 기록하여 Slack이나 이메일 스레드에서 정보가 사라지지 않도록 하세요.
4단계: 테스트 및 개선
검토를 진행하고, 인사이트를 수집하며, 배운 점을 적용하세요.
AI 팀원에게 물어보기
디자인이나 개발로 넘어가기 전에 AI 팀원과 빠른 팀 리뷰를 통해 개념을 검증하세요. 다른 관점에서 빠르게 검토할 수 있도록 UX 연구원 AI 팀원이나 콘텐츠 디자이너 AI 팀원을 활용하세요. 이 부분은 경량 사용자 테스트로 생각하세요.
UX 연구원 AI 팀원을 위한 프로프트 예시:
"선택한 프로토타입을 분석하고 가장 중요한 사용성 문제 다섯 가지와 이를 해결하기 위한 명확한 권장 사항을 포함한 보고서를 작성하십시오.
다섯 개의 권장 사항을 소견으로 요약하여 각 권장 사항에 대한 한 줄 요약을 맨 위에 첨부하십시오."
배운 내용을 적용하기
레이아웃을 세부적으로 조정하고, 문구를 다듬으며, 마찰 지점을 수정하여 이야기가 자연스럽게 이어지도록 합니다. 디자인 프로토타입 AI 팀원을 사용해 반복 작업을 진행해보세요.
예시:
"선택한 보고서의 주요 권장사항이 구현된 새 버전의 선택된 프로토타입을 생성해 주십시오."
워크플로를 사용하여 작업을 연결하여 유지하기
AI 워크플로를 사용하여 반복 작업을 자동화하고, 프로세스를 간소화하며, Miro 캔버스에서 생산성을 직접 향상시킵니다. 팀의 아이디어를 인터랙티브한 비주얼로 전환하여, 번역 버전처럼 테스트하고 공유하며 나란히 비교할 수 있습니다.
시험해 보세요 로컬라이즈 프로토타입 템플릿으로 직접 테스트해 보세요.
5단계: 공유하고 반복하기
논리가 튼튼할 때 이양
Miro Prototypes를 사용하여 디자이너가 디자인 도구로 전환하거나 개발자가 개발을 시작하기 전에 방향을 맞춰보세요. 이것은 비용이 많이 드는 재작업을 방지하고, 정밀한 작업에 많은 시간을 투자하기 전에 모두가 솔루션에 동의하도록 해줍니다.
💡 전체 보드의 산만함을 제거하고 프로토타입만 공유하려면 프로토타입 포맷과 집중 모드를 사용하세요.
요점
프로토타이핑은 픽셀 단위로 완벽한 최종 디자인을 만드는 것이 아닙니다. 사용 가능한 제품으로 발전해 나가는 것입니다. Miro Prototypes는 팀이 아이디어를 더 빨리 보고, 빠르게 맞추고, 함께 올바른 것을 구축하도록 돕습니다.
팀이 아이디어를 빨리 파악할수록, 올바른 솔루션을 함께 구축하기 위해 방향을 맞출 수 있습니다.