이미지, 동영상, 문서, 테마, 타입, 아이콘

이 라이브러리 탭의 모든 항목은 @ 멘션으로 요청에 넣을 수 있습니다. 항목을 선택해 멘션을 복사한 다음 프롬프트에 추가를 선택하거나, 입력란에 @를 입력하고 목록에서 고르세요. 라이브러리에 파일을 놓거나, 입력란 아래의 **+**에서 라이브러리에 추가를 선택해 추가할 수도 있습니다.

이미지

• 내 이미지: 가져오기를 선택하거나 PNG, JPEG, WebP, GIF, AVIF 또는 SVG 파일을 놓으세요. 각 이미지에는 @image/storefront처럼 파일 이름에서 만든 멘션이 붙습니다.
• Unsplash에서: 사진을 검색하고, 모양이나 색상으로 필터링하거나, 섞기를 선택하세요. 사진의 멘션을 복사하면 내 이미지에 저장되므로 멘션이 계속 작동합니다. 모든 사진에는 사진작가가 표시됩니다. Unsplash 사진이 표시되는 모든 곳(라이브러리, 캔버스, 내보낸 앱)에는 사진가의 Unsplash 프로필과 Unsplash로 연결되는 "Unsplash의 이름 사진"이 표시됩니다.
• 이미지를 선택하면 크게 볼 수 있습니다. 여기서 멘션을 복사하거나, 요청에 추가하거나, 다운로드하거나, 멘션 이름과 대체 텍스트를 편집할 수 있습니다. 여러 이미지를 한 번에 삭제하거나 내보내려면 선택을 사용하세요.

이미지를 멘션하면 Vibr가 모델에 이미지의 크기, 모양, 대체 텍스트를 알려 주고 실제 이미지를 초안에 배치합니다.

이미지를 추가하면 Vibr는 카메라 정보, 위치, 댓글 같은 메타데이터를 제거하고 이미지 자체는 그대로 둡니다. SVG는 그림만 남깁니다. 스크립트, 링크 등 실행되거나 다른 사이트에서 무언가를 불러올 수 있는 요소는 모두 제거되며, Illustrator와 Inkscape가 내보내는 방식처럼 스타일로 지정한 색상은 유지됩니다. Unsplash 사진은 Unsplash가 제공하는 그대로 유지됩니다. 다른 웹사이트의 이미지는 캔버스에 불러오지 않으므로 라이브러리에 추가한 뒤 언급하세요.

동영상

• 내 동영상: 가져오기를 선택하거나 최대 100 MB의 MP4, MOV 또는 WebM 파일을 놓으세요. 각 동영상에는 @video/latte-pour처럼 파일 이름에서 만든 멘션이 붙고, 1초쯤 되는 지점의 프레임이 포스터가 됩니다.
• Pixabay에서: 동영상을 검색하세요. 동영상의 멘션을 복사하면 내 동영상에 저장되므로 멘션이 계속 작동합니다. 모든 Pixabay 동영상에는 제작자가 표시됩니다. 동영상이 표시되는 모든 곳(라이브러리, 캔버스, 내보낸 앱)에는 제작자의 Pixabay 프로필과 Pixabay로 연결되는 "Pixabay의 이름 동영상"이 표시됩니다.
• 동영상을 선택하면 재생됩니다. 여기서 멘션을 복사하거나, 요청에 추가하거나, 다운로드하거나, 멘션 이름과 설명을 편집할 수 있습니다. 여러 동영상을 한 번에 삭제하거나 내보내려면 선택을 사용하세요.

동영상을 멘션하면 Vibr가 모델에 동영상의 크기, 모양, 길이, 설명을 알려 주고 실제 동영상을 초안에 배치합니다. 초안은 동영상을 음소거 상태로 반복 재생하고 포스터를 표시하며, 기기에서 동작 줄이기를 요청한 사람에게는 자동으로 재생하지 않습니다.

동영상을 추가하면 Vibr는 MP4 또는 MOV 파일에서 위치, 촬영한 기기 같은 메타데이터를 제거하고 영상과 소리는 그대로 둡니다. 일부 프레임은 이미지와 같은 기기 내 확인을 거칩니다. Pixabay 동영상은 Pixabay가 제공하는 그대로 유지됩니다.

내보낸 앱에는 동영상도 함께 담깁니다. 업로드한 동영상은 25 MB까지 단일 페이지에 들어가며, 이를 넘으면 앱(.html) 내보내기가 페이지와 그 옆의 videos 폴더를 담은 zip으로 다운로드됩니다.

문서

브리프, 리서치 메모, 디자인 과제를 여기에 보관하고 @doc/ordering-app-brief 같은 멘션으로 어떤 요청에든 가져오세요.

• 문서 추가: 가져오기를 선택하거나, 라이브러리에 파일을 놓거나, 첨부한 문서의 미리 보기에서 라이브러리에 저장을 선택하세요. 문서 첨부하기와 마찬가지로 PDF, Word, PowerPoint, Excel, CSV, Markdown, 텍스트를 사용할 수 있습니다.
• 보관되는 내용: Vibr가 읽은 텍스트와 최대 두 개의 이미지만 보관하며 파일 자체는 보관하지 않으므로, 나중에 무언가 실행될 일이 없습니다. 첨부할 때와 같은 검사를 거칩니다.
• 사용하기: @doc/이름을 멘션한 요청에는 해당 문서의 텍스트와 이미지가 첨부처럼 함께 전송됩니다. 이후 요청은 멘션하지 않는 한 다시 전송하지 않습니다.
• 미리 보기, 이름 바꾸기, 삭제는 각 문서의 버튼으로 합니다. 이름을 바꾸면 멘션도 바뀝니다.

내보낸 라이브러리와 프로토타입 파일에는 사용하는 문서가 함께 담기며, 가져올 때 텍스트와 이미지를 다시 검사합니다.

테마

테마는 색상, 모서리 반경, 간격, 그림자의 모음이며, 라이트 및 다크 모드는 WCAG 대비 기준을 충족합니다.

• 새 테마는 편집기를 엽니다. primary 색상과 neutral 색상(원하면 success, warning, danger, info도), 대비 수준(AA 또는 AAA), 모서리 반경, 간격 단위, 그림자 스타일을 선택하세요.
• 토큰 가져오기는 Tokens Studio for Figma나 Style Dictionary 등에서 만든 W3C 디자인 토큰 JSON 또는 CSS 사용자 지정 속성을 가져옵니다.
• 각 테마에는 두 모드 모두에서 모든 색상 쌍이 대비 수준을 충족하는지 표시됩니다.
• 테마의 ⋯ 메뉴에서 편집, 복제, CSS 또는 토큰 복사, 삭제를 할 수 있습니다.

테마는 @theme/default처럼 멘션합니다. 테마를 사용하는 초안에는 캔버스에 다크 모드 버튼이 표시됩니다.

타입 램프

• 글꼴 패밀리 가져오기는 WOFF2, WOFF, TTF 또는 OTF 파일에서 글꼴을 추가하고 그 글꼴의 램프를 만듭니다.
• 새 램프는 Georgia처럼 이미 사용 중인 글꼴로 램프를 만듭니다.
• 새 램프에는 Display, Heading 1~3, Body, Caption의 여섯 가지 스타일이 있습니다. 램프 편집에서 크기, 굵기, 줄 높이, 자간을 변경하거나 스타일을 추가할 수 있습니다.

스타일은 @type/georgia/h1처럼 멘션합니다.

아이콘

• Lucide 아이콘이 기본 제공됩니다. 아이콘을 검색하고 선택하면 @icon/arrow-right 같은 멘션이 복사됩니다. 복사한 후에는 SVG로 다운로드할 수도 있습니다.
• 아이콘 글꼴 가져오기는 CSS, IcoMoon selection.json 또는 Fontello config.json과 함께 자체 아이콘 세트를 추가합니다. Material Symbols 같은 합자 글꼴은 단독으로 작동합니다. 가져온 아이콘은 @icon/set/name을 사용합니다.