시작하기
시작 가이드
키를 추가하고, 디자인 시스템과 모델을 선택한 다음, 몇 분 만에 첫 화면을 만들어 보세요.
시작하기 전에
다음 공급자 중 하나의 API 키가 필요합니다. 공급자마다 무료 또는 저렴하게 사용해 볼 수 있는 방법이 있습니다.
- Google Gemini: Google AI Studio에서 키를 받으세요. 무료 등급 키는 Flash 모델에서 작동하며, Pro 모델은 결제를 사용 설정해야 합니다.
- OpenAI: OpenAI 대시보드에서 비밀 키를 만드세요.
- Anthropic: Anthropic Console에서 키를 만드세요.
유료 계정에서는 초안 하나에 보통 몇 센트가 듭니다. 키 대화 상자에 선택한 모델의 범위가 표시됩니다.
아직 키가 없나요? 샘플을 체험하세요
처음 방문하면 환영 화면에 키 없이 샘플 체험하기가 있습니다. 완성된 프로토타입 세 개를 라이브러리에 추가하고 첫 번째를 엽니다. 카페 홈페이지, 메뉴 화면, 운영 대시보드입니다. 요소 선택, 버전 비교, 모든 크기, 측정, 메모, 재생, 내보내기처럼 모델을 부르지 않는 기능은 모두 작동합니다. 요청으로 샘플을 바꾸려면 키를 추가하세요. 키를 저장하기 전까지는 키 대화 상자에서도 샘플을 열어 볼 수 있습니다.
키 추가
- 상단 바의 AI 공급자 선택기에서 공급자를 선택합니다.
- 키 추가를 선택합니다. 대화 상자에 선택한 공급자의 이름이 표시됩니다.
- 키를 붙여 넣고 키 저장을 선택합니다. 버튼이 키 설정됨으로 바뀝니다.
Vibr는 붙여 넣은 키를 저장하기 전에 확인합니다. 비밀 키 대신 키 ID를 붙여 넣은 경우, 다른 공급자의 키, Anthropic Admin 키, 불필요한 공백 같은 흔한 실수를 찾아내고 무엇을 고쳐야 하는지 알려 줍니다. 공급자(Gemini, OpenAI, Anthropic)마다 키를 하나씩 저장할 수 있으며 언제든지 전환할 수 있습니다. 한 공급자의 모든 모델은 해당 공급자의 키를 사용합니다. 다른 키를 설정하려면 해당 공급자를 선택하고 키 추가를 다시 선택하세요. 이 키 제거는 현재 공급자의 키만 제거합니다. 모든 키 삭제는 이 브라우저에 저장된 모든 키를 제거합니다.
디자인 시스템 및 모델 선택
- 디자인 시스템은 모든 초안을 빌드하는 데 사용할 컴포넌트 라이브러리를 정합니다. 초안은 중간에 라이브러리를 바꿀 수 없으므로, 디자인 시스템을 변경하면 새 세션이 시작됩니다. 전체 목록과 자체 npm 패키지 사용 방법은 디자인 시스템 및 모델을 참조하세요.
- AI 공급자와 모델은 초안을 빌드할 주체를 정합니다. 공급자마다 적절한 기본값이 있으며, Vibr는 선택한 내용을 이 브라우저에 기억합니다.
원하는 언어로 Vibr 사용
브라우저 언어가 영어, 아랍어, 중국어(간체), 네덜란드어, 프랑스어, 독일어, 히브리어, 이탈리아어, 일본어, 한국어, 포르투갈어(브라질), 스페인어 중 하나이면 Vibr가 해당 언어로 열립니다. 그 밖의 경우에는 영어로 열립니다. 언어를 직접 선택하려면 상단 바의 인터페이스 언어 버튼(지구본)을 사용하세요. 휴대폰에서는 설정의 디자인 시스템 아래에 있습니다. 다시 브라우저 언어를 따르려면 자동(브라우저 언어) 옵션을 선택하세요.
아랍어와 히브리어에서는 Vibr가 오른쪽에서 왼쪽으로 표시됩니다. 레이아웃이 반전되고 화살표가 반대 방향을 가리킵니다. 이 설정은 Vibr 자체에만 적용됩니다. 초안을 다른 언어로 보려면 캔버스에서 다른 언어로 미리 보기를 사용하세요. 문서도 같은 언어로 제공됩니다. 문서 페이지 상단의 언어 메뉴를 사용하세요.
첫 화면 만들기
채팅 하단의 입력란에 원하는 내용을 입력하거나, "세 가지 요금제와 연간 결제 전환 스위치가 있는 가격 페이지" 같은 예시 중 하나를 선택하세요. Enter를 누르거나 보내기를 선택합니다.
채팅에 각 단계가 진행되는 대로 표시되며, 캔버스는 코드가 작성되는 동안 화면을 그리기 시작합니다. 대부분의 화면은 1분 이내에 준비됩니다.
