Amazon Bedrock 기반 미리캔버스 디자인 템플릿 추천 챗봇 구현하기

미리디는 디자인 생태계를 혁신하여 간편한 디자인 문화를 만들어가는 회사입니다. 미리디가 제공하고 있는 미리캔버스는 무료 디자인 템플릿으로 저작권 걱정 없이, 누구나 간편하게 사용할 수 있는 웹 기반의 디자인 툴입니다. 디자인을 몰라도, 문구만 바꿔도, 이미지가 없어도 누구나 쉽게 나만의 디자인을 자유롭게 편집하고 완성할 수 있습니다.

이 블로그에서는 미리캔버스에서 자연어로 원하는 디자인 템플릿을 추천 받는 챗봇 서비스를 소개하고, Amazon Bedrock과 Claude 3 Sonnet 모델을 선택한 이유, 그리고 구현 상세 과정을 공유합니다.

미리캔버스 템플릿 추천 챗봇 서비스

템플릿 추천 챗봇 서비스는 고객이 원하는 템플릿을 대화 형식으로 추천 받을 수 있는 인공지능 기반 기능입니다. 5만개가 넘는 디자인 템플릿 중에 자신이 딱 원하는 템플릿을 찾기 어려운 상황을 해결하고자 개발된 서비스입니다. 현재 미리디 DAU (일별 활성 사용자) 대비 8~10% 유저는 템플릿 추천 챗봇을 통해 원하는 디자인을 더욱 쉽게 찾고, 제작하고 있습니다.

솔루션 및 구현 내용

미리캔버스는 Amazon Bedrock과 Claude 3 Sonnet 모델을 사용하여 미리캔버스에서 제공되는 템플릿에 대한 설명 정보를 텍스트로 추출하고, 추출한 텍스트를 벡터로 임베딩하여 벡터 DB에 저장합니다. 이후 고객이 챗봇을 이용하여 원하는 템플릿을 문장으로 묘사하면, 그 문장을 벡터화하여 템플릿 정보 벡터 DB의 벡터들과 비교합니다. 그 후에 가장 유사한 템플릿을 가져옵니다.

아키텍처

아래 그림은 템플릿 추천 챗봇 서비스를 위한 아키텍처입니다.

위의 아키텍처는 사용자의 요구를 정확하게 파악하고 최적의 템플릿을 추천하기 위해 세심하게 설계되었습니다. 각각의 플로우 컴포넌트에 대해서 설명드리겠습니다.

1. 벡터 데이터베이스 구축 플로우

단계1: 이미지 템플릿의 특성 추출

Amazon Bedrock와 Anthropic의 Claude 3 Sonnet 모델을 활용하여 템플릿의 썸네일 이미지를 기반으로 템플릿을 묘사하는 텍스트를 생성합니다.

단계 2, 3: 임베딩

생성된 텍스트는 임베딩 과정을 거쳐 벡터 데이터베이스에 저장되며, 이 데이터는 추후 사용자의 쿼리에 응답하는 데 중요한 역할을 합니다.

2. 채팅을 통한 템플릿 추천 플로우

챗봇은 Amazon Elastic Container Service(Amazon ECS)에서 호스팅되는 웹 애플리케이션을 통해 이루어집니다. 이 아키텍처는 높은 확장성과 유연성을 제공하며, 사용자의 다양한 요구에 신속하게 대응할 수 있는 기반을 마련합니다.

단계 1: 챗봇과 대화

사용자는 챗봇과 대화를 통해 자신이 원하는 템플릿을 설명합니다.

단계2: 사용자의 챗 히스토리 저장

사용자의 대화 이력은 Amazon Relational Database Service(RDS)에 저장되며, 이를 통해 누적된 사용자의 메시지를 분석하여 필요한 정보를 추출합니다.

단계 3: 유저의 컨텍스트 파악

챗봇은 사용자의 입력을 바탕으로 적절한 질문을 하여 사용자의 요구를 더욱 명확히 파악하고, 이를 통해 사용자가 원하는 템플릿을 정확히 이해합니다.

단계 4: 사용자가 원하는 템플릿의 정보를 임베딩

어느 정도 사용자의 요건에 사용자의 요건에 대한 충분한 정보가 수집되면, 챗봇은 대화 내용을 기반으로 쿼리를 텍스트 임베딩 모델을 통해 벡터로 만듭니다.

단계 5: 벡터 데이터베이스에 쿼리

만들어진 벡터를 이용하여 벡터 데이터베이스에 쿼리합니다.

단계 6: 벡터 유사도 계산을 통한 사용자의 요구와 가장 적합한 템플릿 결과 반환

벡터 데이터베이스는 벡터 유사도를 계산하고, 메타 데이터를 기반으로 필터링하여 가장 적합한 템플릿을 추천 결과로 반환합니다.

구현 상세

구현 상세 1: 이미지 템플릿의 특성 추출

Amazon Bedrock에서 Claude 3 Sonnet 모델을 이용해 이미지 템플릿의 특성을 추출하기 위한 구현 및 설정 부분을 확인해 보겠습니다.

이미지 템플릿의 색상이나 분위기 등을 묘사하라는 내용의 프롬프트를 Claude 3 Sonnet 모델에게 전달합니다. Claude 3 Sonnet 모델은 주어진 이미지 템플릿의 특성을 파악하여 텍스트 형태로 출력합니다.

Claude 3 Sonnet 모델에 아래 이미지 템플릿에 대해 묘사하라는 프롬프트의 예시입니다.

[Prompt]

Given the thumbnail image and metadata provided above, generate a detailed description of the design template in the following structured format. Ensure the response is concise, informative, and aligns with the specific key values outlined. 
```json
{
    "color": "Describe the primary and accent colors present in the template.",
    "technique": "Detail the specific design techniques employed in the template.",
    "target": "Identify who the template is ideally designed for.",
    "purpose": "Describe the primary purpose or use case for the template.",
    "elements": "Enumerate the core elements and standout features of the template."
}
```

Please ensure all descriptions are grounded in the visual and metadata cues provided, aiming for a balanced blend of accuracy, descriptiveness, and conciseness.

EXTREMELY IMPORTANT TO KEEP IN MIND: All descriptions must be in English.
EXTREMELY IMPORTANT TO KEEP IN MIND: The response must be in a properly parsable JSON format (e.g., special symbols must be properly escaped when used).

[Output]

{
    "color": "The primary colors used in the template are a vivid green background and contrasting shades of pink for the text and decorative elements. This combination of green and pink evokes a sense of freshness, youthfulness, and springtime vibrancy, perfectly complementing the cherry blossom theme.",
    "technique": "The template employs a combination of hand-drawn elements, such as the typography and decorative cherry blossom petals, and digital illustration techniques for the ice cream cone. The use of negative space and a clear hierarchy of information contribute to the template's clean and visually appealing layout.",
    "target": "The template is ideally designed for businesses or individuals in the food and beverage industry, particularly those catering to a younger demographic or those seeking to promote a fun and playful brand image. It would be well-suited for cafes, bakeries, ice cream shops, or any establishment offering sweet treats and desserts.",
    "purpose": "The primary purpose of this template is to serve as a promotional or marketing material for a new ice cream or dessert product launch. It could be used for social media posts, digital advertisements, or even printed materials such as flyers or posters to generate excitement and interest among potential customers.",
    "elements": "The core elements of the template include the prominent display of the new product (an ice cream cone), the use of the word 'NEW' in a playful typography style, the inclusion of cherry blossom petals as decorative elements, and the clear presentation of relevant information such as the product name, release date, and price."
}

구현 상세2: 임베딩

위 프롬프트의 결과 텍스트를 임베딩한 후, 임베딩 한 벡터를 벡터 데이터베이스에 저장하는 단계입니다.

임베딩이란 자연어 텍스트를 숫자형태인 벡터 형태로 바꾸는 과정을 의미합니다. 벡터 형태이므로 사칙 연산, 코사인 유사도 계산 등이 가능해 단어/문장 간의 의미적, 문법적 관계를 도출하거나 관련도를 계산할 수 있습니다. 미리디에서는 임베딩을 다음과 같은 단계로 진행하였습니다.

1. 전처리 및 정제

Large Language Model(LLM)은 때때로 부정확하거나 불완전한 응답을 반환할 수 있습니다. 따라서, 이러한 응답을 전처리하고 정제하는 과정이 필수적입니다. 우선, LLM이 반환한 응답 텍스트 중 JSON 포맷의 텍스트만 추출합니다. 이때, JSON 포맷의 텍스트가 잘못된 문법을 포함할 수 있기 때문에 이를 교정하는 작업을 진행합니다. 예를 들어, escape 처리되지 않은 특수기호나 잘못된 구문 등을 수정합니다. 이를 위해 json_repair 라는 오픈소스 라이브러리를 사용합니다. 이 라이브러리는 JSON 텍스트의 구조적 오류를 자동으로 수정해주어, 올바른 JSON 형식으로 변환해줍니다.

2. 텍스트 변환

JSON 포맷의 텍스트에서 value 들만 추출하여 하나의 문단 형태로 변환합니다. 예를 들어, JSON 객체가 {"style": "This template is playful.", "color": "This template is colored red." }와 같은 형태라면, 이를 "This template is playful. This template is colored red."와 같은 자연어 문장으로 변환합니다. 이렇게 변환된 텍스트는 일반적인 자연어 텍스트와 유사한 형태를 가지게 되어, 임베딩 모델이 더 효과적으로 처리할 수 있습니다.

3. 임베딩 생성

변환된 텍스트를 임베딩 모델을 통해 벡터 형태로 변환합니다. 임베딩 모델은 텍스트를 고차원 벡터 공간으로 매핑하여, 각 단어와 문장의 의미적 유사성을 수치화합니다. 이때, 벡터 데이터베이스에 설정한 벡터 차원수와 동일하게 임베딩을 생성합니다. 예를 들어, 512차원의 벡터 공간을 사용한다면, 변환된 텍스트는 512차원의 벡터로 표현됩니다.

[Embedding vector]

-0.0062877629, -0.0467762575, -0.0343518369, -0.0130624287, , …

4. 벡터 데이터베이스에 저장

임베딩된 벡터는 벡터 데이터베이스에 저장되어 이후 검색 및 유사도 계산에 사용됩니다. 벡터 데이터베이스는 이러한 벡터를 효율적으로 저장하고, 빠르게 정확한 유사도 검색을 가능하게 하는 데이터베이스입니다. 미리디에서는 벡터 데이터베이스로 Pinecone을 이용했습니다.

아래는 템플릿의 특성을 나타내는 임베딩 벡터를 병렬로 Pinecone에 upsert 하는 예시입니다.

import itertools
from concurrent.futures import ThreadPoolExecutor
from tqdm import tqdm
from pinecone import Pinecone

pinecone = Pinecone(api_key=PINECONE_API_KEY)
pinecone_index = pinecone.Index('template')

BATCH_SIZE = 30

def chunks(iterable, batch_size=BATCH_SIZE):
    """A helper function to break an iterable into chunks of size batch_size."""
    it = iter(iterable)
    chunk = tuple(itertools.islice(it, batch_size))
    while chunk:
        yield chunk
        chunk = tuple(itertools.islice(it, batch_size))

def upsert_chunk(chunk):
    """Function to perform the upsert operation."""
    namespace = chunk[0]['metadata']['namespace']
    # Assuming pinecone_index.upsert() is thread-safe and can be called from multiple threads.
    pinecone_index.upsert(chunk, namespace=namespace)

# Assuming 'upsert_documents' is defined and available
# Modify the loop to use ThreadPoolExecutor
with ThreadPoolExecutor(max_workers=10) as executor:
    # Convert generator to List to use tqdm correctly with executor.map
    chunks_list = list(chunks(upsert_documents))
    # Use tqdm for progress tracking over the list of chunks
    for _ in tqdm(executor.map(upsert_chunk, chunks_list), total=len(chunks_list)):
        pass

저장된 임베딩 벡터는 아래와 같이 확인할 수 있습니다.

구현 상세 3: 챗봇과 대화를 통해서 유저의 컨텍스트 파악

1. Claude 3 Sonnet 모델이 챗봇을 통해 사용자와 챗을 진행

사용자가 원하는 이미지 템플릿을 정확하게 추천해주기 위해서는 사용자가 어떤 이미지 템플릿을 원하는지 구체적으로 이해해야 합니다. 미리디에서는 사용자의 요건을 구체화하기 위한 프롬프트를 개발하였습니다.

[System prompt]

You are a friendly and helpful AI assistant for an online graphic design tool called MiriCanvas(미리캔버스). Your main task is to recommend templates based on user requirements.
...
2. Template recommendation (MAIN TASK):
   - **Important**: If necessary, identify the type of template the user wants through clarification questions. Accumulate all answers to the questions. If the information is insufficient, ask questions including examples.
   - Collect the following information about the template(orders are not important):
     - Template type (e.g. PPT, poster) - Based on this, infer the `template_orientation_page_cnt_type_id`.
     - Core topic (e.g. Christmas, New Year)
     - Color (e.g. purple, yellow)
     - Style (e.g. cute, simple)
     - Core elements (e.g. sunflower, baby)
   - Based on the collected information, generate a query and parameters:
...

위 프롬프트를 입력 받은 Claude 3 Sonnet 모델은 Amazon ECS기반의 챗봇을 통해 사용자와 챗을 진행합니다. Claude 3 Sonnet 모델은 사용자가 어떤 색상 혹은 어떤 타입의 템플릿을 원하는지 추가로 질문을 합니다.

2. 챗 히스토리를 데이터베이스에 저장

각 사용자들의 대화 히스토리 등은 Amazon RDS에 저장되고, 챗봇에서는 Amazon RDS에서 사용자의 대화 히스토리를 누적하여 Claude 3 Sonnet 모델에 프롬프트 형태로 사용자의 요건을 전달합니다.

3. 템플릿 검색을 위한 요청 쿼리 생성, 임베딩, 벡터 데이터베이스에 쿼리

어느 정도 사용자의 요건에 대한 정보가 수집되었으면 Claude 3 Sonnet 모델은 벡터 데이터베이스에 요청할 쿼리를 생성합니다. 아래는 쿼리 예시입니다.

{
"query": "New Year themed monthly newsletter template for January",
"primary_color": "RED"
}

위 쿼리를 동일한 텍스트 임베딩 모델을 통해 벡터로 만들고, 이들을 이용하여 벡터 데이터베이스 Pinecone에 쿼리를 합니다.

구현 상세 4: 벡터 유사도 계산을 통한 사용자의 요구와 가장 적합한 템플릿 결과 반환

Pinecone은 벡터 유사도를 계산하고, 메타 데이터를 기반으로 필터링하여 가장 적합한 템플릿을 추천 결과로 반환합니다.

쿼리 결과로 나온 이미지 템플릿들을 Amazon S3에서 찾아 썸네일을 챗봇을 통해 사용자에게 전달합니다.

기술 선택 이유

1. Amazon Bedrock 서비스와 Claude3 Sonnet 모델을 선택한 이유

Amazon Bedrock은 AI21 Labs, Anthropic, Cohere, Meta, Stability AI 및 Amazon과 같은 선도적인 AI 회사의 고성능 파운데이션 모델(FM)을 API를 통해 사용할 수 있게 해주는 완전관리형 서비스입니다. 2024년 3월, Amazon Bedrock에서 이용할 수 있는 모델에 Claude3 Sonnet, Haiku가 포함됐으며 4월에는 Opus 모델이 포함됐습니다.

미리디의 템플릿 추천 챗봇 시스템에서 Amazon Bedrock과 Anthropic의 Claude 3 Sonnet 모델을 선택한 주된 이유는 비용 효율성, 품질의 우수성, 그리고 보안 측면에서의 강점 때문입니다. Claude 3 모델은 OpenAI의 GPT-4 Vision 모델과 비교했을 때 사용 요금이 절반 이하로 저렴하면서도, 생성된 텍스트의 품질은 오히려 더 우수했습니다. 특히, 템플릿을 묘사할 때 문학적인 표현이 풍부하게 나타나, 사용자에게 더 매력적인 템플릿 설명을 제공할 수 있습니다.

또한, Amazon Bedrock은 AWS PrivateLink를 통해 Virtual Private Cloud(VPC)에 연결될 수 있는 기능을 제공합니다. 이는 다른 LLM에서 흔히 볼 수 있는 공개된 엔드포인트의 보안 문제를 해결하는 중요한 장점입니다. VPC에 연결함으로써, 모든 데이터 전송이 AWS의 내부 네트워크를 통해 이루어지게 되어 외부로부터의 접근을 차단할 수 있으며, 이는 템플릿 추천 시스템의 보안성을 크게 향상시킵니다.

Amazon Bedrock을 통해 Claude 3를 사용할 경우, Anthropic의 Claude 모델을 즉시 사용할 수 있으며 필요한 경우 AWS에 요청하여 요청 한도를 조정 받을 수 있는 유연성을 제공받을 수 있습니다.

이러한 이유로 미리캔버스 템플릿 추천 챗봇 시스템은 Amazon Bedrock과 Claude 3 모델을 선택하였습니다. 이 선택은 비용과 성능의 균형을 맞추는 동시에, 사용자에게 최상의 서비스 경험을 제공하기 위한 전략적 결정이었으며, 보안 측면에서의 강점은 시스템의 신뢰성을 더욱 높여줍니다.

2. Pinecone을 선택한 이유

Pinecone은 고성능 검색 및 슈다고 매칭을 제공하는 벡터 기반 데이터베이스를 제공하는 AWS 파트너이자 AWS Marketplace 판매자입니다.

미리디가 Pinecone을 선택한 이유는 다음과 같습니다.

간편함 : Pinecone은 초기 개발 단계에서 많은 리소스를 절약할 수 있게 해줍니다. Pinecone은 서버리스 모드를 제공하여 하드웨어 스펙을 고려할 필요 없이 웹 GUI에서 프로젝트와 인덱스를 생성하면 곧바로 API 형태로 데이터베이스를 사용할 수 있습니다. 예를 들어, 사용자는 Pinecone의 웹 인터페이스를 통해 몇 번의 클릭만으로 새로운 인덱스를 생성하고, 이를 API를 통해 바로 사용할 수 있습니다. 벡터 유사도 연산은 벡터 차원수, 하드웨어 스펙, 유사도 계산 방식 등 튜닝해야 할 부분이 많지만, Pinecone의 서버리스 모드는 이러한 튜닝 과정이 필요 없으며, 그럼에도 준수한 성능을 안정적으로 유지합니다. 이는 개발자들이 벡터 데이터베이스의 복잡한 설정과 관리에 신경 쓰지 않고, 핵심 기능 개발에 집중할 수 있게 해줍니다.
저렴함 : Pinecone의 서버리스 모드는 요청 수에 비례하여 과금하기 때문에 서비스 초기에는 훨씬 저렴하게 운영할 수 있습니다. 예를 들어, 서비스 초기에는 사용자 수가 적고, 따라서 벡터 검색 요청 수도 적을 것입니다. 이 경우, Pinecone의 서버리스 모드는 사용한 만큼만 비용을 지불하게 되어, 초기 비용을 크게 절감할 수 있습니다. 또한, 서비스가 성장함에 따라 요청 수가 증가하더라도, Pinecone은 자동으로 확장되어 높은 성능을 유지할 수 있습니다. 이는 초기 단계에서 비용 효율적으로 서비스를 운영할 수 있게 해줍니다. Pinecone의 가격 구조는 사용량에 따라 유연하게 조정되므로, 예산 관리에도 유리합니다.

마무리

지금까지 Amazon Bedrock과 Cluade 3 Sonnet 모델을 통해 사용자의 요건을 자세하게 파악해 딱 원하는 이미지 템플릿을 추천해주는 미리디의 템플릿 추천 챗봇 서비스 구현 과정에 대해 설명 드렸습니다. 미리디 DAU(일별 활성 사용자) 대비 8~10% 유저는 템플릿 추천 챗봇을 통해 템플릿을 검색하고 있습니다. 미리디 AI팀은 RAG와 프롬프트 엔지니어링을 통해 추천 정확도를 향상시키고 있습니다. 더 나아가 Amazon OpenSearch Service를 기반으로 벡터 데이터베이스의 검색 성능을 개선할 예정입니다.

Amazon Bedrock를 사용한 챗봇 개발에 대해서 궁금하신 분들은 다음과 같은 유용한 자료를 참고 하세요.

Amazon Bedrock의 기능에 대해 더 자세히 알아보고 싶으신 경우, Amazon Bedrock Workshop을 참고하세요.
미리디에서는 Amazon ECS 기반의 챗봇을 구현했습니다. 서버리스 아키텍처에서 Stream 방식의 챗봇을 구현하고자 하는 경우, Amazon Bedrock을 이용하여 Stream 방식의 한국어 Chatbot 구현하기 블로그를 참고하세요.
Retrieval-Augmented Generation(RAG)를 사용해 챗봇 개발에 사용하면 LLM 모델의 훈련 데이터만 가지고는 다룰 수 없었던 다양한 주제와 영역의 지식을 활용해 정보 활용력이 증대되어 보다 풍부하고 유창한 응답을 만들어 낼 수 있습니다. Amazon Bedrock에서 RAG을 사용하여 챗봇을 만드는 샘플 코드는 aws-samples/aws-ai-ml-workshop-kr github에서 확인해보실 수 있습니다.

AWS 기술 블로그