프롬프트 작성

화면 설명하기

디자이너에게 브리핑하듯이 화면의 용도와 들어갈 내용을 작성하세요. Vibr가 현실적인 샘플 콘텐츠를 채워 주므로 문구를 직접 쓸 필요는 없습니다.

• 좋은 예: "KPI 카드와 최근 주문 표가 있는 분석 대시보드"
• 더 좋은 예: "커피 로스터리를 위한 분석 대시보드: 매출, 주문 수, 평균 주문액, 재구매 고객을 보여 주는 KPI 카드 네 개, 주간 매출 차트, 상태 칩이 있는 최근 주문 표"

Enter를 누르면 보내고, Shift+Enter를 누르면 줄이 바뀝니다. 터치스크린에서는 Return 키가 줄을 바꾸고 보내기 버튼으로 보냅니다.

요청이 너무 모호해서 계획을 세울 수 없으면 Vibr는 추측하는 대신 질문합니다. 입력란에 답하면 그 지점부터 실행이 이어집니다.

Vibr는 인터페이스만 디자인합니다. 상식 질문이나 에세이처럼 만들 것이 없는 요청에는 대신 만들 수 있는 인터페이스 아이디어를 담은 한 줄 답변이 돌아오고, 계획 이후 단계는 실행되지 않습니다. 페이지, 앱, 화면이 될 수 있는 것이라면 주제와 상관없이 만들어집니다. 작업 공간에 초안이 있으면 초안에 대해 질문할 수도 있으며("왜 이 글꼴인가요?", "이 대비는 접근성을 충족하나요?"), Vibr는 초안을 바꾸지 않고 채팅으로 답합니다.

이미지에서 시작하기

스케치, 스크린샷 또는 목업이 있나요? 요청에 추가하면 Vibr가 이미지에 담긴 내용을 바탕으로 만듭니다. 입력란 아래의 **+**에서 파일 추가를 선택하거나, 입력란에 이미지를 붙여넣거나 끌어다 놓으세요. 요청당 최대 3개까지, PNG, JPEG, WebP, GIF, AVIF 또는 SVG로 추가할 수 있습니다.

• "이 스케치를 가입 페이지로 만들어 줘"
• "이 스크린샷의 레이아웃을 따라 자전거 가게 콘텐츠로 만들어 줘"
• 텍스트 없이 이미지만 보내면 이미지에 담긴 것을 만듭니다.

초안은 디자인 시스템의 컴포넌트와 타이포그래피로 만들어지므로, 픽셀을 복사하는 대신 이미지의 레이아웃과 위계를 따릅니다. 이미지 속 텍스트는 콘텐츠로 다뤄지며 지시로 받아들여지지 않습니다.

각 이미지는 전송 전에 크기를 줄여 다시 그려지므로 메타데이터가 제거되고, 라이브러리에 추가하는 이미지와 마찬가지로 기기에서 검사됩니다. 이미지는 해당 요청과 함께 AI 공급자에게만 전송됩니다. 라이브러리에 저장되거나 대화와 함께 보관되지 않으므로 이후 요청에서 다시 전송되지 않습니다.

문서 첨부하기

브리프, 리서치 메모, 디자인 과제, 지난 분기 수치 등 문서를 첨부하면 Vibr가 그것을 바탕으로 디자인합니다. 입력란 아래의 **+**에서 파일 추가를 선택하거나, 입력란에 붙여넣거나 끌어다 놓으세요. 요청당 최대 3개까지 첨부할 수 있습니다.

• PDF
• Word, PowerPoint, Excel(.docx, .pptx, .xlsx)
• CSV, TSV, Markdown, 일반 텍스트

Google 문서, 프레젠테이션, 스프레드시트는 먼저 이 형식 중 하나로 다운로드하세요(파일, 다운로드).

Vibr는 각 문서를 브라우저에서 읽습니다. 모델은 텍스트(프레젠테이션의 발표자 노트와 표로 정리한 스프레드시트 행 포함)와 일부 이미지(PDF의 첫 페이지들, Word 파일이나 프레젠테이션의 첫 이미지들)를 받습니다. 요청 하나에 텍스트는 최대 30,000자까지 전송되며, 넘으면 잘리고 칩에 그렇게 표시됩니다. 문서 칩을 선택하면 전송되는 내용을 그대로 볼 수 있고, 문서의 이미지를 라이브러리에 저장할 수도 있습니다. 이후 요청에서도 문서를 쓰려면 미리 보기에서 라이브러리에 저장을 선택한 다음 @doc으로 멘션하세요.

모든 문서는 읽기 전에 검사됩니다. 매크로를 실행할 수 있는 파일(.docm, .pptm, .xlsm 또는 매크로 프로젝트를 숨긴 문서), 압축을 풀면 크기보다 훨씬 커지는 압축 파일, 암호로 보호된 PDF는 거부됩니다. 문서 안의 어떤 것도 실행되지 않습니다. 스크립트, 링크, 양식 필드, 수식, 포함된 개체는 무시되고, 스프레드시트 셀은 저장된 값으로 들어옵니다. 텍스트는 입력한 내용과 같은 정리와 검사를, 이미지는 참고 이미지와 같은 검사를 거치며, 모델은 문서를 지시가 아닌 디자인 재료로 다루도록 안내받습니다.

문서는 해당 요청에만 함께 전송됩니다. 라이브러리에 저장되거나 대화와 함께 보관되지 않습니다.

기존 초안 수정하기

초안이 생기면 입력란에 "개선할 점이나 새 섹션을 설명하세요…"라고 표시됩니다. 각 요청은 캔버스의 초안을 수정하여 새 버전이 되므로 언제든지 이전 버전으로 돌아갈 수 있습니다. 예:

• "Pro 요금제를 돋보이게 하고 FAQ를 추가해 줘"
• "데스크톱에서는 2단 레이아웃을 사용해 줘"
• "휴대폰에서는 표를 카드로 바꿔 줘"

새 버전이 작성되는 동안 현재 초안은 캔버스에 그대로 남아 있으며, 새 버전을 그릴 수 있을 만큼 준비되면 캔버스가 전환됩니다.

한 부분만 변경하기

나머지는 그대로 두고 요소 하나만 변경하려면 다음과 같이 합니다.

1. 요소 선택(캔버스 위의 포인터 아이콘)을 선택합니다.
2. 변경할 부분을 클릭합니다. 입력란 위의 칩에 선택한 요소와 코드 내 위치가 표시됩니다.
3. 변경 내용을 설명합니다. "이것", "여기", "이 부분" 같은 말은 해당 요소를 가리킵니다.

선택을 멈추려면 Esc를 누르고, 선택을 해제하려면 칩의 X를 선택하세요.

요소가 페이지에서 반복되면(목록의 카드나 각 요금제의 제목처럼) 칩 아래에 선택지가 나타납니다. 이것만은 클릭한 사본만 바꾸고, N개 모두는 모든 사본을 바꿉니다. 기본값은 '이것만'입니다. 캔버스에는 바뀔 사본이 테두리로 표시됩니다.

여러 부분을 함께 변경하기

Shift를 누른 채 다른 요소를 클릭하면 최대 8개까지 한 번의 요청으로 함께 변경할 수 있습니다. 작업 공간에서 각 요소에 번호가 붙고, 칩에 목록이 표시됩니다. 그런 다음 "이것들을 맞춰 줘", "같은 간격으로 해 줘"처럼 서로의 관계를 설명하세요. 선택한 요소를 다시 Shift+클릭하면 빠집니다.

터치스크린에서는 칩의 더 추가를 선택한 뒤 요소를 탭하세요. 키보드에서는 포커스된 요소에서 Shift+Enter를 누르세요. 추가한 각 요소는 선택한 사본만 해당합니다. 이미 선택한 요소 안에 있는 요소는 이미 포함되어 있으므로 중복으로 추가되지 않습니다.

@로 에셋 멘션하기

입력란에 @를 입력하거나 @ 버튼을 선택하면 라이브러리의 항목을 요청에 넣을 수 있습니다. 입력하는 동안 목록이 나타납니다. ↑와 ↓로 선택하고 Enter 또는 Tab으로 추가하세요.

멘션	가져오는 항목
@image/name	가져왔거나 Unsplash에서 저장한 이미지.
@video/name	가져왔거나 Pixabay에서 저장한 동영상.
@theme/name	라이트 및 다크 모드를 포함한 색상 테마.
@type/ramp/style	타입 램프의 텍스트 스타일(예: @type/georgia/h1).
@icon/name	기본 제공 Lucide 아이콘 또는 가져온 아이콘 글꼴의 아이콘(@icon/set/name).
@screen/name	링크할 저장된 프로토타입. 플로를 참조하세요.
@chart/kind	차트 라이브러리로 빌드하는 차트 종류(예: @chart/donut). 차트와 표를 참조하세요.
@table/feature	표 라이브러리로 빌드하는 표 기능(예: @table/sortable).

요청에 포함된 멘션은 입력란 아래에 칩으로 표시됩니다. 라이브러리에 없는 이름이면 칩이 빨간색으로 바뀌고 Vibr는 해당 멘션을 제외합니다. 에셋을 추가하는 방법은 이미지, 동영상, 문서, 테마, 타입, 아이콘을 참조하세요.

더 나은 결과를 위한 팁

• 요청 하나에 화면 하나. 페이지를 먼저 만든 다음 내용을 추가하세요. 요청이 너무 크면 모델의 출력 한도에 도달할 수 있습니다. 그런 경우 메시지마다 섹션 하나씩 요청하세요.
• 부분의 이름을 지정하세요. "윗부분"보다 "요금제 카드"나 "헤더"라고 하면 더 정확하게 반영됩니다.
• 알맞은 도구를 사용하세요. 요소 하나를 바꾸려면 해당 요소를 선택하세요. 남겨 두고 싶은 메모는 주석으로 고정하세요.