브이몬스터의 Amplify Gen2 도입 사례

브이몬스터(VMONSTER)는 실시간 대화형 AI 휴먼 솔루션을 제공하는 혁신적인 SaaS 기업입니다. 브이몬스터는 AI 챗봇 서비스를 제공하며, 일반적인 텍스트 기반을 넘어 실제 사람과 대화하는 듯한 몰입감 있는 경험을 제공하는 AI 휴먼 인터페이스를 구현한 핵심 제품인 이젤(EJEL) 서비스를 제공합니다.

그림 1. 브이몬스터의 이젤(EJEL) 서비스

이젤(EJEL) 서비스는 사용자가 영상과 음성으로 AI와 소통할 수 있도록 하여 더 향상된 사용자 경험을 제공하며, AI의 자연스러운 표정과 동작을 통해 사용자와 더 깊은 교감을 할 수 있도록 합니다. 이젤(EJEL) 서비스는 해외영업, 에듀테크, 금융, 헬스케어 등 다양한 산업에서 고객 상담, 교육, 비대면 서비스 목적으로 활용될 수 있는 비용 효율적이면서도 확장 가능한 솔루션입니다.

브이몬스터는 초기에 AWS Amplify Gen1을 사용하여 이젤(EJEL) 서비스를 구현했습니다. 서비스 개발 초기 단계에는 개발자의 경험을 바탕으로 REST API 및 GitHub Action을 통해서 서비스를 개발하려고 하였으나, 제한된 인력으로 복잡한 시스템을 유지보수하는 데 부담을 느꼈습니다. 이를 해결하기 위해 쉬운 유지보수가 가능한 GraphQL를 고려했고, Amplify를 사용하면 AppSync를 활용하여 GraphQL를 쉽게 적용할 수 있었기 때문에 Amplify를 도입했습니다. 또한 Amplify를 사용함으로써 개발부터 배포까지 개발 전 과정을 통합해서 수행할 수 있었습니다.

2024년 5월, AWS는 AWS Cloud Development Kit(CDK) 기반으로 코드 중심의 개발자 경험을 제공하며, 샌드박스, 데이터 관리 등의 기능을 갖춘 Amplify Gen2를 출시하였습니다. 브이몬스터는 이를 기회로 삼아 기존의 Amplify Gen1 사용 환경을 Amplify Gen2로 업그레이드를 하면서 서비스를 한층 고도화하였습니다.

이번 블로그 포스팅에서는 브이몬스터의 Amplify Gen1에서 Amplify Gen2로 업그레이드한 이유와 서비스 고도화 경험을 공유합니다.

1. AWS Amplify 소개

AWS Amplify는 클라우드 기반의 웹 및 모바일 애플리케이션을 빠르고 쉽게 구축할 수 있도록 지원하는 개발 플랫폼입니다. Amplify는 풀 스택 클라우드 앱을 구축하기 위한 프론트엔드 라이브러리, UI 컴포넌트, 백엔드 구축 및 프론트엔드 호스팅 기능을 제공합니다. Amplify는 웹 및 앱 개발을 위한 다양한 개발 언어를 지원하며, 서버리스 방식으로 운영 및 관리가 용이합니다.

Amplify는 두 가지 주요 버전으로 제공됩니다. 기존 Amplify Gen1은 CLI와 Amplify Studio를 통한 도구 중심의 접근 방식을 제공하며, 대화형 워크플로우를 통해 백엔드를 구성합니다. 반면, 2024년 5월 정식 출시된 Amplify Gen2는 코드 중심의 개발자 경험을 제공하여 TypeScript를 사용해 앱 요구사항을 간결하게 표현할 수 있게 합니다. 샌드박스, 데이터 관리, 풀 요청(PR) 미리 보기와 같은 기능을 갖춘 새로운 Amplify 콘솔을 비롯한 여러 기능이 Amplify Gen 2에 추가되었습니다. Amplify에 대한 상세한 기능은 Amplify 문서에서 확인하실 수 있습니다.

그림 2. Amplify 구성도

Amplify Gen2를 활용하여 풀스택 개발하는 방법을 더 알아보고 싶다면 아래의 YouTube 영상을 확인해보세요!

2. 브이몬스터에서 Amplify Gen2를 도입한 이유

브이몬스터는 초기 이젤(EJEL) 서비스의 개발 효율성 향상과 운영 안정성 확보를 위해 Amplify Gen1을 도입하였습니다. 브이몬스터가 활용한 Amplify Gen1의 주요 기능은 다음과 같습니다.

효율적인 인증 관리 : Amplify에서 Amazon Cognito를 활용하여 사용자 인증을 간편하게 처리할 수 있습니다. 이로 인해 보안성을 높이고, 사용자 관리에 소요되는 시간을 최소화할 수 있었습니다.
API 개발 시 리소스 최소화 : Amazon DynamoDB와 AWS AppSync를 통해 GraphQL API를 손쉽게 개발하였습니다. 데이터베이스와 API 간의 연결을 간소화하고, 개발 리소스를 효율적으로 활용할 수 있었습니다.
CI/CD 자동화 : Amplify에서 GitHub과의 연동을 통해 CI/CD 과정을 자동화하였습니다. 코드 변경이 일어날 때마다 자동으로 배포되도록 하여, 개발 및 운영 효율성을 크게 향상시킬 수 있었습니다.
유연한 백엔드 로직 처리 : AWS Lambda를 활용하여 복잡한 백엔드 로직(Customer Resolver)를 서버리스로 구현할 수 있었습니다. 서버리스 아키텍처를 통해 필요에 따라 유연하게 기능을 확장하고 운영 비용을 절감시킬 수 있었습니다.

이러한 Amplify Gen1의 장점에도 불구하고, 브이몬스터는 더 나은 개발 환경을 위해 Amplify Gen2로의 전환을 결정하였습니다. CDK 기반의 코드 중심 개발자 경험을 제공하며, 샌드박스, 데이터 관리 등의 기능을 갖춘 Amplify Gen2를 활용하여 이젤(EJEL) 서비스를 고도화하기로 하였습니다. Amplify Gen2 로의 전환을 결정한 이유는 다음과 같습니다.

CDK 기반의 인프라 관리 : 코드로 인프라를 관리하여 버전 관리와 협업이 용이합니다.
개발자별 독립된 샌드박스 환경 : Amplify Gen2는 개발자별 독립적인 샌드박스 환경을 제공합니다. 이를 통해 각 개발자가 독립적인 테스트 환경을 구성할 수 있어 개발 효율성이 향상됩니다.
프론트엔드와 백엔드 환경 분리 : 각 환경에 대한 독립적인 개발과 운영이 가능해져 유지보수와 확장성이 개선됩니다.
최신 기술 및 성능 개선 : 최근 출시된 Amplify Gen2의 향상된 성능과 기능을 활용할 수 있습니다.

3. 브이몬스터 아키텍처 구성

그림 3. 브이몬스터 아키텍처

이젤 서비스의 아키텍처는 다음과 같은 구성으로 되어있습니다.

Amplify Auth
유저는 크게 개인회원과 기업회원으로 구분됩니다. 개인회원의 경우, 구글 인증과 Cognito를 연동하여 인증 서비스를 구축하였습니다. 기업회원의 경우, 내부적으로 생성된 계정을 Cognito User Pool에 등록하여 인증 과정을 거치도록 설계하였습니다.
Amplify Data
유저가 화면에서 AI Agent의 정보를 추가하거나 수정할 때, AppSync와 Lambda(Custom Resolver)를 활용하였습니다. 각 요청이 발생하면, Lambda(Custom Resolver)를 통해 필요한 필드를 변경할 수 있게 설정하였으며, 이를 통해 최종적으로 DynamoDB에 데이터가 등록되도록 구성하였습니다.
Amplify Hosting & 샌드박스
애플리케이션 배포를 위해서는 GitHub 레포지토리와 Amplify 프로젝트를 연동했습니다. 이를 통해 코드 리뷰 과정에서 문제가 될 만한 상황들에 대해 쉽게 피드백할 수 있었습니다. 또한, 샌드박스 기능을 활용하여 테스트 환경을 배포한 후 실험을 진행했고, 이는 버그 수정에 매우 유용했습니다. 실제 프로덕션 환경에도 이 방식을 적용하여 배포를 진행하고 있습니다.

4. Amplify Gen2 전환 과정

Amplify Gen1에서 Gen2로 전환하면서 일부 백엔드와 프론트엔드 애플리케이션의 재구축 작업을 진행하게 되었습니다. 실제로 브이몬스터에서 Amplify Gen2를 어떤 방식으로 활용하고 있는지를 간단하게 공유합니다.

4-1. 백엔드

백엔드 애플리케이션 개발에는 이젤(EJEL) 서비스에서 사용하는 데이터를 정의하고, 이를 생성 및 관리하는 부분에서 Amplify를 활용하였습니다. Amplify Gen1에서는 GraphQL 스키마로 정의했던 부분들을 TypeScript 기반으로 전환하였습니다.

Model Schema 정의

Agent는 이젤(EJEL) 서비스 데이터 스키마 중 핵심 모델입니다. .secondaryIndexes() 설정을 통해 유저 id로 유저의 Agent 리스트를 updateAt 필드로 정렬하여 가져올 수 있도록 하였습니다. 또한 .authorization() 설정을 통해 유저만 Read 작업을 수행할 수 있도록 설정하였습니다.

import { a } from "@aws-amplify/backend";
const Agent = a
  .model({
    id: a.id().required(),
    name: a.string().required(),
    language: a.ref("Language").required(),
    isDeleted: a.boolean().required(),
    userId: a.id().required(),
    createdAt: a.datetime(),
    updatedAt: a.datetime(),
….(스키마 중 일부 필드)
  })
  .secondaryIndexes((index) => [
    index("userId")
      .name("byUserId")
      .queryField("listAgentsByUserId")
      .sortKeys(["updatedAt"]),
  ])
  .authorization((allow) => [
    allow.ownerDefinedIn("userId").to(["read"]),
  ])

Custom Mutation 정의

Agent Create, Update는 Lambda기반의 Custom mutation으로 처리하였습니다. .arguments() 설정을 통해 받을 수 있는 인자를 정의하고, .authorization() 설정을 통해 로그인된 유저만 진행할 수 있도록 합니다. .handler() 설정에서 apiEjelManageAgent 함수를 통해 설정해 둔 람다 함수가 실행됩니다.

const createAgentByCustom = a
  .mutation()
  .arguments({
    name: a.string().required(),
    language: a.string().required(),
    userId: a.id().required(),
...
  })
  .authorization((allow) => [allow.authenticated()])
  .returns(a.ref("Agent"))
  .handler(a.handler.function(apiEjelManageAgent));
  
const updateAgentByCustom = a
  .mutation()
  .arguments({
    id: a.id().required(),
    isDeleted: a.boolean(),
    userId: a.id().required(),
...
  })
  .authorization((allow) => [allow.authenticated()])
  .returns(a.ref("Agent"))
  .handler(a.handler.function(apiEjelManageAgent));

4-2. 프론트엔드

프론트엔드에서는 백엔드에서 정의한 데이터 모델과 custom mutation들에 대한 API를 호출할 수 있도록 하였습니다. 이를 위해서 프론트엔드 프로젝트 내부에 최신 백엔드 프로젝트의 복사본을 위치시키고, Schema를 상대 경로로 import하여 사용합니다.

import { generateClient } from "aws-amplify/api";
import { Schema } from "[상대 경로]/amplify/data/resource";

const client = generateClient<Schema>();

Agent에 대한 query, mutation에 대한 예시는 아래와 같습니다.

Query

백엔드에서 정의한 Agent를 get API를 통해서 agentId 값에 해당하는 데이터를 불러올 수 있습니다. 이 때, 모델의 모든 필드를 가져오는 것이 아니라 Selection Set을 이용하여 필요한 필드만 가져올 수 있도록 하였습니다.

const { data, errors } = await client.models.Agent.get(
      { id: agentId },
      {
        authMode: "userPool",
        selectionSet: [
          "id",
          "name",
          "language",
          "isDeleted",
...
        ],
      }
    );

Custom Query

또한, 앞서 secondaryIndexes를 통해 설정한 listAgentsByUserId 쿼리를 통해서 유저별 Agent를 updatedAt 기준으로 조회하는 기능도 추가할 수 있었습니다.

const { data, errors } = await client.models.Agent.listAgentsByUserId(
      { userId: userId },
      {
        authMode: "userPool",
        filter: {
          isDeleted: {
            eq: false,
          },
        },
        sortDirection: "DESC",
        selectionSet: [
          "id",
          "name",
          "language",
          "isDeleted",
          "createdAt",
          "updatedAt",
....
        ],
      }
    );

Custom Mutation

백엔드에서 정의한 custom mutation인 updateAgentByCustom도 프론트엔드에서 호출하여 agent의 delete, update를 구현했습니다. 아래는 custom mutation의 예시입니다.

const { data, errors } = await client.mutations.updateAgentByCustom(
      {
        id: agentId,
        userId: userId,
        isDeleted: true,
      },
      {
        authMode: "userPool"
      }
    );

4-3. 샌드박스

브이몬스터는 Prod, Dev 환경 외에 백엔드 개발을 위한 환경이 필요했습니다. 빠르게 실험 가능한 샌드박스 환경을 구축하여 백엔드 개발을 진행했습니다.

먼저 새로운 백엔드 기능 개발을 위해 새로운 브랜치(test)를 만들고 샌드박스를 생성합니다. 개발 시 잦은 배포를 통해 샌드박스 내에서 기능의 정상 작동 여부를 확인하였습니다. 개발이 완료되면 test 브랜치를 삭제하는 방식으로 백엔드 개발 과정을 진행하였습니다. 샌드박스를 통해 dev 환경을 쉽게 복제할 수 있어 테스트 환경 구축을 위한 시간적 비용을 절감할 수 있었습니다.

그림 4. 샌드박스 운영 절차

5. Amplify Gen2 적용 이점

브이몬스터는 현재 Amplify Gen2를 적용하여 이젤(EJEL) 서비스를 운영하고 있습니다. Amplify Gen2를 도입하여 얻은 장점은 다음과 같습니다.

인프라 관리 효율성 증대
기존에는 노션을 통해 인프라 변경사항을 관리했지만, Amplify Gen2를 도입하여 CDK를 통해 인프라를 코드로 관리하고 코드 리뷰를 통해 환경 별 업데이트 사항을 쉽고 빠르게 파악할 수 있게 되었습니다.
유연한 테스트 환경 구축
샌드박스를 생성할 때마다 독립적인 리소스가 생성되어 빠른 테스트가 가능해졌고, 개발부터 배포까지의 과정을 수월하게 진행할 수 있었습니다. 독립적인 샌드박스로 인해 개발 환경과 프로덕션 환경의 충돌 없이 안전하게 테스트를 수행할 수 있었습니다.
프로젝트 분리로 인한 독립적 운영
프론트엔드와 백엔드 환경을 분리하여 백엔드, 프론트엔드 개발자가 각 부분의 개발 및 특정 기능에 대한 테스트를 독립적으로 수행할 수 있게 되었습니다.
향상된 개발 워크 플로우 및 배포 프로세스
Amplify Gen2의 새로운 콘솔 환경에서 제공하는 사용자 지정 도메인 연결, PR 프리뷰 기능을 통해 배포 전 이슈를 빠르게 파악하고 해결할 수 있게 되었습니다. 또한 Amplify Gen2에서는 Git 브랜치와 Amplify 환경을 자동으로 연동할 수 있어 브랜치 내 작업 이후 배포 과정이 간소화되고 자동화되었습니다.
GraphQL 쿼리 최적화 및 유연성 향상
Amplify Gen2에서는 GraphQL API의 Selection Set 기능이 개선되어, 각 테이블의 서로 다른 필드 조합이 필요한 쿼리 작성 시 매번 커스텀 쿼리를 새로 정의하지 않아도 됩니다. 프론트엔드에서 필요한 필드만 선택적으로 요청할 수 있어 쿼리 작성의 유연성이 크게 향상되었습니다.

“AWS Amplify Gen2 전환을 통해 코드 기반 인프라 관리에 용이해지고, 다양한 테스트 환경을 로컬에서 구축함으로써 효율적이고 안정적인 개발 프로세스 정립에 도움이 되었습니다. 또한 Gen2 의 기능들을 통해 신규 개발자가 합류하더라도 쉽게 적응하고 개발에 참여할 수 있어 빠른 서비스 개발이 진행될 수 있어 Gen2 로의 전환에 대해 만족감이 높아졌습니다.” – 브이몬스터 CTO 김도민

6. 마무리

이번 블로그 글에서는 브이몬스터의 AWS Amplify Gen1에서 Gen2로 전환을 통해 이젤(EJEL) 서비스의 개발 및 운영 프로세스를 개선한 사례를 소개하였습니다. 브이몬스터는 CDK 기반의 인프라 관리, 독립적인 샌드박스 환경, 그리고 향상된 GraphQL 기능 등을 활용하여 개발 효율성과 서비스 안정성을 높였습니다. 앞으로도 브이몬스터는 최신 기술을 적극 도입하여 혁신적인 AI 휴먼 솔루션을 제공하기 위해 노력할 것입니다.

AWS 기술 블로그