Kimi Websites 기능 개요

Kimi Websites란

Kimi Websites는 Kimi Agent의 풀스택 웹사이트 제작 제품으로, 멀티모달 시각 agentic AI 모델인 Kimi K3를 기반으로 합니다. 핵심 기능은 비주얼 프로그래밍(Vibe Coding)입니다. 자연어, 디자인 목업, 화면 녹화만으로 완성형 풀스택 웹사이트를 생성하고, 온라인에서 미리 본 뒤 한 번의 클릭으로 게시할 수 있습니다.

Kimi Websites로 생성한 웹사이트에는 다음이 포함될 수 있습니다.

• 프런트엔드: HTML 페이지 구조, CSS 레이아웃과 스타일, JavaScript 상호작용 로직(모션 효과, 애니메이션 등)
• 백엔드: 영구 데이터베이스 저장소, 사용자 로그인, 인증
• 엔지니어링: 자동 버전 관리, 풀스택 미리보기, 공개 배포

제품 기능

사용 방법

방법 1: 웹에서 접속

전용 Kimi Websites 페이지를 방문하세요

1. 브라우저 열기: Chrome, Safari, Edge, Firefox 같은 주류 브라우저를 사용합니다.
2. 공식 접속 주소 열기: Kimi Websites 전용 페이지: https://www.kimi.com/zh/websites (중국어와 영어 인터페이스 모두 지원)
3. 계정에 로그인: Kimi 계정으로 로그인합니다(휴대폰 번호 또는 이메일로 가입 가능).
4. 웹사이트 제작 작업 입력. Kimi Websites는 웹사이트를 만드는 세 가지 주요 방법을 제공합니다.
   1. 텍스트 입력: 대화 상자에 작업을 입력하고 만들고 싶은 웹사이트를 자연어로 설명합니다.
   2. 이미지/웹사이트 remix: 디자인 목업이나 마음에 드는 웹사이트의 스크린샷을 업로드해 해당 기능을 실행합니다.
   3. 템플릿 기반 웹사이트 제작: 사전 설정 템플릿을 선택하고 콘텐츠를 편집해 표준 웹사이트를 빠르게 만듭니다.
5. 제작 시작: Websites 기능 인터페이스로 들어가 템플릿을 선택하거나, 대화를 통해 바로 생성합니다.

방법 2: 모바일 앱에서 접속

모바일 App에서 전용 웹사이트 도구를 선택하세요

공식 Apps는 iOS, Android, HarmonyOS에서 사용할 수 있습니다(앱 이름: "Kimi"). 입력 상자 위에서 툴바(Taskbar)를 탭한 뒤 Websites 모드로 전환합니다. 멀티모달 생성 도구와 Agent 기능이 포함되어 있어, 시각 입력을 제공하고 프런트엔드 코드를 생성할 수 있습니다.

방법 3: 일반 Agent 모드

일반 Agent 모드에서 웹사이트 제작 요구사항을 입력하세요

공식 웹사이트나 모바일 기기에서 K3 모델을 선택하고 웹사이트 제작과 관련된 작업 지시를 입력합니다. Kimi가 비주얼 프로그래밍 기능과 코드 실행 도구를 호출합니다.

절차

대화로 웹사이트 만들기

입력 상자에 필요한 내용을 자연어로 설명하면 Kimi가 이해하고 실행합니다. 다음 세 가지 생성 방식을 지원합니다.

실제 예시

Text

웹사이트 제작 워크플로 개요

Text

Kimi Websites는 웹사이트 제작에 특화된 여러 차례 코드 생성 agent인 webapp-building SKILL을 활성화합니다. 이 agent는 다음 워크플로를 자율적으로 수행합니다.

1. 요구사항 분석: 웹사이트 기능 모듈, 시각 스타일, 상호작용 로직을 자동으로 분석합니다
2. 작업 계획: 디자인, 개발, 자산 준비 등 하위 작업으로 분해합니다
3. 기술 솔루션: 적합한 기술 아키텍처(예: React + Tailwind CSS)를 자동으로 선택합니다
4. 자산 생성: 필요에 따라 이미지, 아이콘 등 시각 자산을 생성합니다
5. 코드 구성: 페이지 구조, 스타일, 상호작용 코드를 작성합니다
6. 여러 차례 최적화: 웹사이트가 완성될 때까지 미리보기를 기반으로 자율 조정합니다

미리보기 및 조정

• 실시간 미리보기: 브라우저에서 바로 열 수 있는 HTML 데모 URL을 생성합니다
• 대화형 수정: 대화를 이어가며 "내비게이션 바를 어두운 스타일로 바꿔줘" 같은 변경을 요청할 수 있습니다

실제 예시

Text

미리보기 패널 인터페이스

웹사이트가 생성되면 오른쪽에 미리보기 패널이 열리고, 대화에도 버전 카드가 표시됩니다. 주요 작업 진입점은 다음과 같습니다.

미리보기 패널 상단 툴바(왼쪽에서 오른쪽 순서):

대화의 버전 카드: 사이트 이름, 버전 번호(예: V2), URL을 표시합니다. 미리보기를 클릭하면 해당 버전이 열리고, 복원을 클릭하면 그 버전으로 되돌립니다. 모든 파일 카드를 통해 전체 프로젝트 파일을 보거나 다운로드할 수 있습니다. 각 버튼의 자세한 사용 방법은 아래 해당 섹션을 참고하세요.

시각적 편집

• 여러 차례 최적화: 계속 대화하면서 웹사이트 세부 사항을 다듬습니다
• 편집 방법:
  • 주석 모드: 변경하려는 웹페이지 부분을 클릭하고 자연어로 의견을 추가합니다
  • 선택 모드: 웹페이지의 원하는 요소를 선택하고 의견을 추가합니다
  • 사각형, 화살표, 브러시, 색상 전환 등 선택 및 편집 도구를 사용해 변경 제안을 추가합니다
• 여러 위치에 주석을 추가한 뒤 대화에 첨부하고 모든 제안을 한 번에 Kimi로 보냅니다

코드 배포 및 게시

"맞춤 URL" 안내: 3~30자, 소문자, 숫자, 하이픈만 사용할 수 있습니다. 하이픈으로 시작하거나 끝날 수 없으며, 숫자로만 구성될 수 없습니다. 일부 예약어(예: kimi, www, login 등)는 사용할 수 없습니다. 이미 사용 중이거나 사용할 수 없는 경우 다른 이름을 선택해 주세요.

"다운로드 후 배포"의 범위 안내: Kimi 계정 로그인과 플랫폼 관리 클라우드 데이터베이스는 Kimi 플랫폼에서 제공되며, 내보낸 코드와 함께 이전되지 않습니다. 코드를 직접 운영하는 서버에 배포하는 경우 로그인 방식은 자체 데이터베이스 기반의 사용자 이름/비밀번호 방식으로 변경해야 하며, 데이터도 자체 데이터베이스로 마이그레이션해야 합니다. 공개 접근만 필요하다면 원클릭 게시를 바로 사용하는 것을 권장합니다. 이 경우 Kimi 계정 로그인과 클라우드 데이터는 계속 정상적으로 작동합니다. 자세한 내용은 제가 만든 웹사이트가 작동하지 않는 이유는 무엇인가요?를 참고하세요.

버전별 미리보기

생성이 완료되면 미리보기 페이지로 이동합니다. 미리보기 인터페이스에서 서로 다른 배포 버전을 클릭하고, 버전별 파일을 다운로드할 수 있습니다.

게시, 공유, 게시 취소

게시 전에는 웹사이트를 대화 안에서만 미리볼 수 있습니다. 다른 사람이 접근할 수 있게 하려면 미리보기 패널 오른쪽 위의 공유를 클릭해 게시 패널을 엽니다.

1. 맞춤 URL: 기본 URL의 이름을 수정할 수 있습니다. 예를 들어 yourname.ok.kimi.link로 변경할 수 있습니다.
2. 링크 복사를 클릭해 공개 URL을 받거나, 웹사이트 열기를 클릭해 새 탭에서 확인합니다. 게시 후에는 패널 상단에 게시됨이 표시되며, 링크가 있는 사람은 누구나 접근할 수 있습니다.
3. 사이트를 오프라인으로 전환하려면 패널 오른쪽 위 … 메뉴에서 게시 취소를 선택합니다. 그러면 사이트는 더 이상 공개적으로 접근할 수 없습니다(코드와 데이터는 보존되며 언제든 다시 게시할 수 있습니다).

여러 차례 편집

특정 부분이 마음에 들지 않으면 미리보기 창의 편집 버튼을 클릭해 계속 다듬을 수 있습니다. 또는 자연어로 Kimi에 지시를 보내 Agent와 함께 편집을 이어갈 수 있습니다. 결과를 확인한 뒤 전체 HTML/CSS/JS 코드를 다운로드해 바로 배포하거나, 에디터에서 계속 다듬을 수 있습니다.

적합한 사용자

• 개발자: 제품 프로토타입과 프런트엔드 데모를 설계해, 처음부터 구축하는 데 걸리는 시간을 크게 줄일 수 있습니다.
• 창업가: 리소스가 제한된 상황에서도 공식 웹사이트, 랜딩 페이지, 제품 소개 페이지를 빠르게 만들 수 있습니다.
• 제품 관리자: 개발 일정 조율을 기다리지 않고 PRD나 디자인 목업을 시연 가능한 인터랙티브 프로토타입으로 빠르게 전환할 수 있습니다.
• 비기술 사용자: 코딩 지식이 필요하지 않습니다. 아이디어를 설명하거나 참고 이미지를 업로드하면 콘셉트에서 실행 가능한 웹페이지까지 만들 수 있습니다.

예시 프롬프트

다음 시나리오와 프롬프트를 참고해 콘텐츠를 생성할 수 있습니다