생성형 AI는 인공지능을 사용하여 텍스트, 이미지, 음악, 오디오, 동영상과 같은 새로운 콘텐츠를 만드는 것을 의미합니다. 생성형 AI는 머신러닝 (ML) 모델을 사용하여 사람이 만든 콘텐츠의 데이터 세트에서 패턴과 관계를 학습합니다.
이 기술은 Gemini와 같은 애플리케이션을 통해 놀라운 기능을 보여줬습니다. 웹 제품에 생성형 AI 도구를 구현하려면 어떻게 해야 하나요?
일반적인 사용 사례 중 하나는 사용자에게 웹사이트 콘텐츠에 관해 질문할 수 있는 더 나은 인터페이스를 제공하는 것입니다. 머신러닝을 사용하면 사용자의 검색 결과를 크게 개선할 수 있습니다.
더 나은 사이트별 검색 구축
사용자가 질문을 작성하는 인터페이스를 만든 다음 Gemini와 같은 대규모 언어 모델 (LLM)로 전송하고 사용자에게 답변을 표시할 수 있습니다.
이 사이트에 이러한 기능이 있다고 가정해 보겠습니다. 사용자가 Interop 2024에 포함된 API를 알고 싶어 다음 쿼리를 입력합니다.
What are the features included in Interop 24?
안타깝게도 다음과 같은 몇 가지 이유로 출력이 잘못될 수 있습니다.
- 사용자가 LLM에 질문에 대한 맥락을 거의 제공하지 않았으므로 LLM이 잘못된 답변이나 환각을 반환할 가능성이 더 높습니다.
- LLM은 Interop 2024가 생성되기 전이나 기능이 결정되기 전에 학습되었을 가능성이 높으므로 이러한 정보를 인식하지 못합니다.
LLM이 더 최신 정보를 찾을 수는 있지만 LLM 학습 데이터 세트는 본질적으로 오래된 데이터입니다. 최신 결과를 유지하는 데는 많은 시간과 비용이 소요될 수 있습니다.
프롬프트 엔지니어링 사용
프롬프트 엔지니어링은 LLM에서 최상의 출력을 얻기 위한 일련의 기술입니다.
한 가지 기법은 프롬프트에 추가 컨텍스트를 제공하여 LLM이 컨텍스트와 관련된 콘텐츠를 출력할 가능성이 더 높아지도록 하는 것입니다.
상호 운용성 예시를 계속 진행하면 첫 번째 단계는 기사의 전체 콘텐츠를 컨텍스트로 제공하는 것입니다. 그런 다음 질문을 LLM이 답변할 입력으로 추가합니다. 예를 들면 다음과 같습니다.
Context:
Following on from the success of Interop 2022 and Interop 2023, we
are excited about the opportunity to collaborate once again with
all key browser vendors and other relevant stakeholders...
(trimmed to fit in this article)
Input:
What are the features included in Interop 2024?
Gemini에서 다음과 같은 출력을 보일 수 있습니다.
The features included in Interop 24 are Accessibility, CSS Nesting, Custom
Properties, Declarative Shadow DOM, font-size-adjust, HTTPS URLs for
WebSocket, IndexedDB, Layout, Pointer and Mouse Events, Popover, Relative
Color Syntax, requestVideoFrameCallback, Scrollbar Styling, @starting-style
and, transition-behavior, Text Directionality, text-wrap: balance,URL
이 대답은 제공된 컨텍스트를 기반으로 하므로 컨텍스트가 없는 프롬프트보다 훨씬 더 나을 수 있습니다.
RAG를 통한 확장
예를 들어 단일 도움말에 관한 질문에 답변하는 대신 LLM이 도움말을 추가 컨텍스트로 사용하여 web.dev에 관한 더 많은 질문에 답변하도록 하려면 소규모 사이트의 경우 가능할 수 있지만 Gemini 1.5의 컨텍스트 윈도우가 100만 개이므로 더 큰 프롬프트는 실행 속도가 느리고 비용이 더 많이 듭니다.
LLM의 입력 및 출력 길이는 토큰으로 측정되고 요금이 청구됩니다. 토큰이란 텍스트 입력에서 발견되는 일반적인 문자 시퀀스를 나타내는 방법입니다. 토큰 수는 일반적으로 단어 수보다 큽니다. 예를 들어 첫 번째 예의 입력에는 1097개의 토큰으로 표현된 775개의 단어가 있습니다. LLM마다 토큰을 다르게 계산할 수 있으며 대부분은 텍스트 입력의 토큰 수를 계산하는 API 또는 엔드포인트를 제공합니다.
한 가지 해결 방법은 LLM 프롬프트와 관련된 기사를 제공하는 것입니다. 이 작업은 두 부분으로 구성되어야 합니다.
- LLM 프롬프트 시 인기 기사의 콘텐츠를 컨텍스트로 추가합니다.
- 'Interop 2024에 포함된 기능은 무엇인가요?'와 관련된 도움말의 콘텐츠를 검색합니다.
Gemini 결과에서 다음 도움말을 기반으로 콘텐츠를 반환하도록 하려면
- 도움말 1: web.dev/blog/submit-your-proposals-for-interop-2024
- 도움말 2: web.dev/blog/interop-2023-wrapup
- 도움말 3: web.dev/blog/interop-2024
입력은 다음과 같이 표시됩니다.
Context:
Article 1:
Over the past two years... (trimmed)
Article 2:
At the end of last year Interop 2023 wrapped up. This effort... (trimmed)
Article 3:
Following on from the success of Interop 2022... (trimmed)
Input:
What are the features included in Interop 2024?
이 컨텍스트는 예상되는 출력을 생성합니다.
* Accessibility * CSS Nesting * Custom Properties
* Declarative Shadow DOM * font-size-adjust
* HTTPS URLs for WebSocket * IndexedDB * Layout
* Pointer and Mouse Events * Popover * Relative Color Syntax
* requestVideoFrameCallback * Scrollbar Styling
* @starting-style and transition-behavior * Text Directionality
* text-wrap: balance * URL
AI 기술에 익숙한 사용자를 위해 이 접근 방식은 생성형 AI 도구에서 실제 답변을 얻을 가능성을 개선하기 위한 일반적인 관행인 RAG를 사용합니다.
시맨틱 검색으로 출력 개선
RAG 기법은 일반 전체 텍스트 검색에서 작동할 수 있지만 이 접근 방식에는 단점이 있습니다.
- 전체 텍스트 검색을 사용하면 AI가 정확한 키워드 일치를 찾는 데 도움이 됩니다. 그러나 LLM은 사용자의 쿼리 뒤에 숨겨진 의도를 파악할 수 없습니다. 이로 인해 출력이 불완전하거나 잘못될 수 있습니다.
- 단어가 여러 의미를 지니거나 쿼리에서 동의어를 사용하는 경우 문제가 발생할 수 있습니다. 예를 들어 '은행'(금융기관과 강둑)으로 검색하면 관련 없는 결과가 표시될 수 있습니다.
- 전체 텍스트 검색은 키워드가 포함되어 있지만 사용자의 목표와 일치하지 않는 결과를 출력할 수 있습니다.
시맨틱 검색은 다음과 같은 핵심 측면에 중점을 두어 검색 정확성을 개선하는 기술입니다.
- 검색 사용자의 의도: 사용자가 무엇을 검색하는지 파악하려고 합니다. 고객이 무엇을 찾거나 달성하고자 하는가?
- 문맥적 의미: 단어와 구문을 주변 텍스트 및 사용자의 위치나 검색 기록과 같은 기타 요소와 관련하여 해석합니다.
- 개념 간의 관계: 시맨틱 검색은 지식 그래프 (대규모 관련 항목 네트워크)와 자연어 처리를 사용하여 단어와 개념이 연결되는 방식을 이해합니다.
따라서 시맨틱 검색으로 도구를 빌드하면 검색 결과는 키워드 대신 검색어의 전반적인 목적에 따라 달라집니다. 즉, 도구는 정확한 키워드가 없더라도 관련 문서를 확인할 수 있습니다. 단어가 있지만 다른 의미인 결과도 피할 수 있습니다.
현재 시맨틱 검색을 사용하는 두 가지 검색 도구인 Vertex AI Search 및 Algolia AI Search를 구현할 수 있습니다.
게시된 콘텐츠에서 답변 가져오기
지금까지 프롬프트 엔지니어링을 사용하여 LLM이 프롬프트에 컨텍스트를 추가하여 보지 않은 콘텐츠와 관련된 답변을 제공할 수 있도록 하는 방법을 배웠습니다. 또한 검색 증강 생성(RAG) 기법을 사용하여 개별 기사에서 전체 콘텐츠 자료로 이 접근 방식을 확장하는 방법을 알아봤습니다. 시맨틱 검색이 어떻게 사용자 검색어에 대한 결과를 더욱 개선하고 제품에 RAG를 더 효과적으로 구현하는지 알아봤습니다.
생성형 AI 도구가 '할루시네이션'을 일으킬 수 있다는 것은 알려진 문제입니다. 이로 인해 생성형 AI 도구가 기껏해야 신뢰할 수 없거나 최악의 경우 비즈니스에 해로울 수 있습니다. 이러한 기법을 사용하면 사용자와 개발자 모두 안정성을 개선하고 이러한 애플리케이션의 출력에 대한 신뢰를 구축할 수 있습니다.