LLM 결과물 생성시 비용 절감 과정

배경

작업하는 서비스는 LLM을 활용하여 SVG코드 형태로 슬라이드를 만들어주는 서비스이다. 특정 주제를 입력하면 그 입력에 맞는 슬라이드들이 자동으로 생성되는 LLM을 활용한 슬라이드 생성 도구이다.

문제상황

한 장의 슬라이드를 생성하는데 평균 150원의 생성비용이 들어가는 상황이고 기본적으로 유저에게 제공되는 슬라이드의 개수가 있기 때문에 유지비용이 너무 크게 나가는 상황.

해결과정

크게 세가지 작업으로 구분하여 접근하였다.

1. SVG 보일러 플레이트를 고정하여 LLM이 창의적인 부분만 생성하게 변경
2. 슬라이드를 구성하고 있는 내부 요소들을 태스크 단위로 분리하여 난이도에 따른 LLM모델로 라우팅
3. 분리된 태스크들을 하나의 슬라이드로 조합.

SVG 보일러플레이트 분리하여 토큰 소모량 감소

기존 방식 - LLM이 전체 SVG를 생성함

처음에는 단순하게 전체 슬라이드를 생성했다.

그래서 viewBox나 svg 태그, 적용되는 스타일등 공통되는 부분을 LLM이 통째로 생성하게 하면서 굳이 생성하지 않을 부분까지도 LLM이 생성하고 있었다.

게다가 LLM이 같은 값을 보장해주는 것이 아니기 때문에 오히려 추가로 보정하는 작업까지도 해주고 있었다.

새로운 방식 - 레이아웃과 컨텐츠를 분리

고정되어 있는 보일러 플레이트 부분은 그리게 하지 말고 내부에 내용, 즉 컨텐츠만 LLM에게 그릴 수 있도록 수정하였음.

const SVG_TEMPLATE = """
<svg xmlns=http://www.w3.org/2000/svg width="1920" height="1080" viewBox="0 0 1920 1080">
  <style>
    /* 공통 폰트, 테마, 레이아웃 정의 */
  </style>
  <!-- {CONTENT} -->
</svg>
""";

function buildSlideSvg(contentSvg: string): string {
  return SVG_TEMPLATE.replace("<!-- {CONTENT} -->", contentSvg);
}

이런식으로 내부 컨텐츠 요소만 <g>….</g> 형태로 받아 치환후 반환하였다.

이로써 보일러 플레이트 코드 부분에 해당하는 토큰을 줄일수 있었고, 기존에 오히려 고정되게 나와야 하지만 LLM의 특성때문에 따로 표준화하는 작업이 있었는데 이 로직을 없앨 수 있었다.

슬라이드 컨텐츠 생성 태스크 분리

이 작업은 어려운 태스크에는 비싼 모델을 쉬운 태스크에는 값싼 모델을 쓰기 위한 분리작업이다.

슬라이드 한 장에 들어갈 내용들을 보면 아래와 같다.

• 제목
• 서브타이틀
• 불릿포인트
• 차트
• 그래프
• 다이어그램
• 등등

이러한 요소들이 있고 각각의 요소들을 LLM이 난이도를 판별하여 알맞은 LLM에 라우팅 한다.

인풋값을 확인하여 사용될 컨텐츠 선정

LLM이 입력값을 확인하여 해당 슬라이드에 어떤 컨텐츠들이 들어가면 좋을지 리스트업

SlideTask = {
  type: "title" | "bullet" | "summary" | "chart" | "graph",
}

slideTasks = [
  { type: "title" },
  { type: "bullet" },
  { type: "chart" }
];

난이도에 기반하여 모델 할당

function selectModel(task: SlideTask) {
  if (task.type == "bullet" || task.type == "summary") {
    return CHEAP_MODEL;   
  } else {
    return PREMIUM_MODEL; 
  }
}

이런식으로 진행할 경우 한 장의 슬라이드 안에서

• 불릿포인트나 요약같은 경우에는 싼 모델이 실행하고
• 시각화가 필요한 부분은 비싼 모델이 작업을 수행하게 된다

분리된 태스크들을 조합

마지막 작업으로 분리된 태스크를 조합하여 하나의 슬라이드를 만들어야 했다.

슬라이드 한 장이 만들어지기까지의 흐름은 다음과 같다.

1. 입력값을 받아 슬라이드에 어떤 컨텐츠가 들어갈 지 JSON 형태의 리스트 생성
2. 앞에서 도출된 태스크와 LLM을 활용하여 슬라이드 레이아웃 구성
3. 경량 모델을 활용하여 텍스트 내용 생성
4. 고급 모델을 활용하여 시각자료 내용 생성
5. SVG 템플릿에 합성

이 구조의 장점은 다음과 같다.

1. 재사용성: 일부 요소들만 바꾸고 싶을때 쉽게 변경이 가능하다.
2. 부분 재시도: 위와 같은 맥락으로 일부 생성이 의도치 않게 됐을때 그 부분만 다시 호출하면 되므로 실패 재시도 비용이 줄어든다.
3. 모델 변경 유연: “그래프만 다른 모델로 바꾸고 싶다”라는 요구에 일부 단계만 수정하면 되기 때문에 아키텍쳐가 잘 견딘다.
4. 비용 절감 효과: 이 부분이 가장 큰데, 기존에 쉬운 작업에도 고급 모델로 작업을 진행해 가격이 많이 발생했는데 어려운 작업만 고급 모델에게 할당함으로써 비용이 절감 됏따.

단점은 생성시간이 늘어났는데, 이 부분은 이 모든 과정을 스트리밍으로 처리함으로써 유저가 시간이 오래걸린다는 체감을 줄이고자 한다.

결과

초기에는 한 장당 평균 150원이던 생성 비용을 약 50원까지 낮추었다.

단순히 모델을 바꾸거나 프롬프트의 컨텍스트 양을 줄임으로써 비용을 감소시킨 것이 아니라

• 템플릿 기반 베이스 코드
• 모델 라우팅
• 단계적 파이프라인

과 같은 구조적 개선을 통해 퀄리티를 유지하면서도 비용을 줄일 수 있었다.