아티팩트란 무엇이며 Open WebUI에서 어떻게 사용하나요?

Open WebUI의 아티팩트는 Claude.AI의 아티팩트에서 영감을 받은 혁신적인 기능으로, 채팅 내에서 LLM이 생성한 중요한 독립적 콘텐츠와 상호작용할 수 있게 해줍니다. 이를 통해 주요 대화에서 독립적으로 중요한 콘텐츠를 확인하고, 수정하고, 확장하거나 참고할 수 있으며, 복잡한 출력 작업을 용이하게 하고 나중에 중요한 정보를 다시 확인할 수 있습니다.

Open WebUI는 언제 아티팩트를 사용하나요?

Open WebUI는 생성된 콘텐츠가 플랫폼에 맞춘 특정 기준을 충족할 때 아티팩트를 생성합니다:

1. 렌더링 가능함: 아티팩트로 표시되려면, 콘텐츠가 Open WebUI에서 렌더링을 지원하는 형식이어야 합니다. 해당 형식에는 다음이 포함됩니다:

• 단일 페이지 HTML 웹사이트
• 스케일러블 벡터 그래픽(SVG) 이미지
• HTML, JavaScript, CSS가 모두 포함된 완전한 웹페이지. 이때 HTML은 반드시 포함되어야 합니다.
• ThreeJS 시각화 및 D3.js 같은 기타 JavaScript 시각화 라이브러리.

Markdown 또는 텍스트 문서, 코드 스니펫, React 컴포넌트와 같은 기타 콘텐츠 유형은 Open WebUI에서 아티팩트로 렌더링되지 않습니다.

Open WebUI의 모델은 어떻게 아티팩트를 생성하나요?

Open WebUI에서 아티팩트를 사용하기 위해 모델은 아티팩트 렌더링 프로세스를 트리거하는 콘텐츠를 제공해야 합니다. 여기에는 유효한 HTML, SVG 코드 또는 지원되는 다른 렌더링 형식이 포함됩니다. 생성된 콘텐츠가 위의 기준을 충족하면 Open WebUI는 이를 대화형 아티팩트로 표시합니다.

Open WebUI에서 아티팩트를 어떻게 사용하나요?

Open WebUI가 아티팩트를 생성하면, 생성된 콘텐츠가 주요 채팅의 오른쪽에 있는 전용 아티팩트 창에 표시됩니다. 아티팩트와의 상호작용 방법은 다음과 같습니다:

• 편집 및 반복 작업: 대화 내에서 LLM에게 콘텐츠를 편집하거나 반복하도록 요청할 수 있으며, 이러한 업데이트는 아티팩트 창에 직접 표시됩니다. 아티팩트 하단 왼쪽에 있는 버전 선택기를 사용하여 버전 간 전환이 가능합니다. 각 편집은 새로운 버전을 생성하며, 버전 선택기를 통해 변경 사항을 추적할 수 있습니다.
• 업데이트: Open WebUI는 메시지를 기반으로 기존 아티팩트를 업데이트할 수 있습니다. 아티팩트 창은 최신 콘텐츠를 표시합니다.
• 작업: 콘텐츠 복사 또는 아티팩트를 전체 화면으로 열기와 같은 추가 작업은 아티팩트 하단 오른쪽에서 실행할 수 있습니다.

아티팩트 편집

1. 타겟 업데이트: 변경하고 싶은 사항과 위치를 설명합니다. 예를 들어:

• "차트에서 막대의 색상을 파란색에서 빨간색으로 변경해주세요."
• "SVG 이미지의 제목을 '새로운 제목'으로 변경해주세요."

2. 전체 재작성: 콘텐츠 대부분에 영향을 미치는 주요 변경 사항이나 확장을 요청합니다. 예를 들어:

• "이 단일 페이지 HTML 웹사이트를 랜딩 페이지로 변경해주세요."
• "이 SVG를 ThreeJS를 사용하여 애니메이션으로 디자인해주세요."

최고의 실천 방법:

• 변경하고자 하는 아티팩트의 부분을 구체적으로 명시하세요.
• 변경이 필요한 부분 주변의 고유 식별 텍스트를 참조하여 타겟 업데이트를 요청하세요.
• 간단한 업데이트가 더 적합한지, 전체 재작성이 적합한지 고려하세요.

사용 사례

Open WebUI의 아티팩트를 사용하면 다양한 팀이 고품질 작업 결과물을 빠르고 효율적으로 생성할 수 있습니다. 우리 플랫폼에 맞춘 몇 가지 사례는 다음과 같습니다:

• 디자이너:
  • UI/UX 디자인을 위한 인터랙티브 SVG 그래픽 생성.
  • 단일 페이지 HTML 웹사이트 또는 랜딩 페이지 디자인.
• 개발자: 간단한 HTML 프로토타입 생성 또는 프로젝트용 SVG 아이콘 생성.
• 마케터:
  • 성능 지표가 포함된 캠페인 랜딩 페이지 디자인.
  • 광고 크리에이티브나 소셜 미디어 게시물을 위한 SVG 그래픽 생성.

Open WebUI의 아티팩트로 생성할 수 있는 프로젝트 예제

Open WebUI의 아티팩트를 통해 여러 팀과 개인은 고품질 작업 결과물을 빠르고 효율적으로 생성할 수 있습니다. 다음은 아티팩트의 다양성을 보여주는 우리 플랫폼에 맞춘 몇 가지 예제이며, 이를 통해 아티팩트의 잠재력을 탐구하도록 영감을 제공합니다:

1. 인터랙티브 시각화

• 사용된 구성 요소: ThreeJS, D3.js, SVG
• 혜택: 인터랙티브한 시각화를 통해 몰입감 있는 데이터 스토리를 제작. Open WebUI의 아티팩트는 여러 버전 간 전환을 가능하게 해 다양한 시각화 접근 방식을 테스트하고 변경 사항을 추적하기 쉽게 해줍니다.

예제 프로젝트: ThreeJS를 사용하여 주식 가격의 시간 경과를 시각화하는 인터랙티브 라인 차트를 제작. 차트의 색상 및 스케일을 각 버전에 업데이트하여 서로 다른 시각화 전략을 비교.

2. 단일 페이지 웹 애플리케이션

• 사용된 구성 요소: HTML, CSS, JavaScript
• 혜택: Open WebUI 내에서 단일 페이지 웹 애플리케이션 개발. 타겟 업데이트와 전체 재작성을 사용하여 콘텐츠를 편집하고 반복적으로 개선.

예제 프로젝트: HTML과 CSS를 사용하여 사용자 인터페이스가 포함된 할 일 목록 앱을 설계하세요. JavaScript를 사용하여 대화형 기능을 추가하세요. 타겟 업데이트와 전체 재작성을 통해 앱의 레이아웃과 UI/UX를 업데이트하세요.

3. 애니메이션 SVG 그래픽

• 사용된 구성 요소: SVG와 ThreeJS
• 장점: 마케팅 캠페인, 소셜 미디어 또는 웹 디자인을 위해 흥미로운 애니메이션 SVG 그래픽을 만드세요. Open WebUI의 아티팩트를 사용하여 단일 창에서 그래픽을 편집하고 반복할 수 있습니다.

예제 프로젝트: 회사 브랜드용 애니메이션 SVG 로고를 설계하세요. ThreeJS를 사용하여 애니메이션 효과를 추가하고 Open WebUI의 타겟 업데이트를 사용하여 로고의 색상과 디자인을 개선하세요.

4. 웹페이지 프로토타입

• 사용된 구성 요소: HTML, CSS, JavaScript
• 장점: Open WebUI 내에서 직접 웹페이지 프로토타입을 구축하고 테스트하세요. 버전 간 전환을 통해 다양한 디자인 접근 방식을 비교하고 프로토타입을 개선할 수 있습니다.

예제 프로젝트: HTML, CSS, JavaScript를 사용하여 새로운 전자상거래 웹사이트용 프로토타입을 개발하세요. Open WebUI의 타겟 업데이트를 사용하여 탐색, 레이아웃 및 UI/UX를 세부 조정하세요.

5. 인터랙티브 스토리텔링

• 사용된 구성 요소: HTML, CSS, JavaScript
• 장점: 스크롤링 효과, 애니메이션 및 기타 인터랙티브 요소를 통해 대화형 스토리를 만드세요. Open WebUI의 아티팩트를 사용하여 스토리를 세부 조정하고 다양한 버전을 테스트할 수 있습니다.

예제 프로젝트: 회사의 역사를 주제로 한 대화형 스토리를 제작하세요. 스크롤링 효과와 애니메이션을 사용하여 독자의 관심을 끌고 싶습니다. 타겟 업데이트를 사용하여 스토리의 내러티브를 개선하고 Open WebUI의 버전 선택기를 사용하여 다른 버전을 테스트하세요.