인터랙티브 프로토타입 만들기

1단계 — 템플릿 열기

Community를 열고 OpenDesign Landing을 선택하세요. 미리보기를 살펴본 다음 More ways to Use를 열고 Remix를 선택하여 예제에서 편집 가능한 프로젝트를 만드세요. Use는 예제 프롬프트에서 시작하고, Remix는 예제를 편집할 수 있는 프로젝트로 복사합니다.

이 템플릿은 샘플 디자인입니다. 템플릿에 포함된 버전, 수치, 고객 후기, 링크는 모두 예시 콘텐츠이므로 실제 제품에 사용하기 전에 확인하고 교체하세요.

2단계 — 페이지의 목적을 명확히 정하기

Design Files에서 index.html을 여세요. Preview에는 페이지가 표시되고 Code에는 소스가 표시됩니다. 템플릿에서 유지할 요소를 정하세요. 예를 들면 에디토리얼 스타일의 서체, 따뜻한 종이 질감의 배경, 콜라주, 섹션의 리듬감이 있습니다. 교체할 제품 정보, 행동 유도 문구, 연결 대상을 목록으로 정리하세요.

이 랜딩 페이지를 가상의 독립 디자인 스튜디오용으로 수정하세요. 따뜻한 종이 질감, 코랄색 강조 요소, 에디토리얼 타이포그래피, 콜라주는 유지하세요. 히어로, 서비스, 주요 작업, 연락처 문구를 명확하게 가상임을 알 수 있는 샘플 콘텐츠로 교체하세요. 내비게이션이 올바른 섹션으로 이동하게 하고, 실제 계정이나 결제 흐름 대신 플레이스홀더 연결 대상을 사용하세요. 데스크톱과 390px 모바일에서 확인하세요. 편집 가능한 HTML과 이 파일에서 참조하는 에셋을 제공하세요.

이 내용은 필요에 맞게 수정할 수 있는 예시 브리프이며, 스크린샷이 이 브리프로 생성되었다는 의미는 아닙니다. 빈 프로젝트로 시작하려면 Home에서 Prototype을 선택하고 AI 설정을 완료한 다음 참고 자료와 함께 브리프를 보내세요.

3단계 — 간단한 직접 편집하기

Edit를 선택하고 히어로 영역에서 기울임꼴로 강조된 단어를 선택한 다음, Text를 taste,에서 craft,로 변경하세요. Save를 선택하세요. 편집 모드를 종료하고 새로고침하면 제목에 craft,가 그대로 표시되어야 합니다. 캔버스 편집 가이드에서 타이포그래피, 색상, 크기, 간격, 실행 취소 방법을 확인할 수 있습니다.

4단계 — 다른 뷰포트 확인하기

캔버스 위의 Desktop 메뉴에서 Mobile (390 × 844) 또는 Tablet (820 × 1180)을 선택하세요. 줄바꿈, 내비게이션, 간격, 이미지 잘림, 터치 영역을 확인하세요. 이 기능은 미리보기 크기만 전환하며 디자인을 자동으로 수정하지는 않습니다.

5단계 — 수정 범위를 명확히 지정해 요청하기

Comment를 사용해 특정 요소에 요청을 첨부하거나, Mark를 사용해 스크린샷과 메모를 보내세요. 예: “이 강조 단어를 코랄색으로 변경하세요. 기울임꼴 글꼴, 크기, 위치는 유지하세요.” 댓글을 저장하는 것만으로는 에이전트가 실행되지 않습니다. Send to chat을 선택하기 전에 선택된 피드백을 확인하세요. 피드백 도구를 참고하세요.

6단계 — 테스트하고 전달하기

내비게이션과 버튼을 테스트하기 전에 Edit, Comment, Mark를 종료하세요. 각 섹션 링크와 연결 대상을 확인한 다음 Export에서 사용 가능한 형식에 따라 PDF, 이미지, ZIP 또는 독립 실행형 HTML을 선택하세요. 참조된 에셋을 보존하고, 완성된 결과물로 간주하기 전에 클라이언트 외부에서 전달 파일을 열어 확인하세요. 다른 전달 방법은 프로젝트 파일 및 버전과 공유에서 확인할 수 있습니다.

Preview가 비어 있는 경우

미리보기가 로드될 때까지 기다린 다음 Reload Preview를 선택하세요. Code를 사용해 파일에 콘텐츠가 있는지 확인하세요. 계속 비어 있으면 Design Files에서 파일을 다시 열거나 HTML을 내보낸 뒤 에셋과 함께 브라우저에서 여세요. 클라이언트 외부에서는 작동하지만 내부에서는 실패한다면 앱 버전, 문제가 발생한 파일, 오류를 함께 보고하세요.