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