저번 아티클에서 토스 팀이 직접 개발한 그래픽 AI, 토스트를 소개해 드렸어요. 이번 글에서는 토스트로 이미지를 만드는 구체적인 방법과, 실제 토스 팀에서 활용한 사례들을 보여드릴게요.



금융 콘텐츠를 위한 2D 그래픽 만들기
토스에서는 토스피드를 비롯해 다양한 금융 콘텐츠를 제작하고 있어요. 금융 콘텐츠는 어렵고 복

Part 2. 토스에서는 토스트를 실제로 어떻게 활용하나요?

토스의 AI 그래픽 생성기, 토스트를 소개합니다 #2

여러분은 AI를 업무에 얼마나 활용하고 있나요? 토스에서는 그림 그려주는 AI, 토스트(tosst) 서비스를 사내에 오픈했어요. 토스트에 정보를 입력하면 그래픽이 몇 분 만에 만들어집니다. 토스 그래픽디자이너가 만든 것과 같은 톤과 퀄리티로요.



토스가 그래픽 AI를 만들게 된 이유
토스 그래픽 디자이너들은 하루에도 수십개의 그래픽을 제작해요. 그렇게 만들어진 그래픽들은 앱 아이콘부터 콘텐츠 이미지까지, 다양한 곳에서 ‘토스다움'을 보여주는 요소로 자리하고 있죠.

문제
하지만 중요도에 비해 팀 내 그래픽 디자이너는 턱없이 부족한 상황이에요. 협업해야 하는 팀원은 100명도 훌쩍 넘는데 그래픽 디자이너는 5명뿐이다 보니 요청이 들어오는 그래픽만 그리기에도 손이 모자랐고, 새로운 컨셉을 고민할 시간은 점점 부족해졌어요. 조직 규모에 맞게 그래픽 디자이너를 끊임없이 채용하고 교육하기에도 한계는 존재했고요. 
가설
그렇다면 토스의 그래픽 톤을 이해하는 그래픽 AI가 존재한다면? 그래서 단순한 작업에서 디자이너의 리소스를 줄일 수 있다면 그래픽 디자이너들이 좀 더 깊이 있는 작업에 뇌와 손을 쓸 수 있지 않을까? 토스의 그래픽 AI 프로젝트는 이 질문에서 시작됐어요.
해결
Step 1. 토스의 그래픽 톤 정의하기
스테이블 디퓨전(Stable Diffusion)을 활용해 보기로 한 뒤 가장 먼저 한 일은 ‘토스의 그래픽 톤을 정의하는 것'이었어요. 추상적으로 존재하는 토스의 그래픽 톤을 구체적으로 설명할 수 있어야 학습을 시킬 수 있기 때문이에요.
토스의 그래픽은 심플함을 위해 의미 없는 요소를 빼고 필요한 것만 남겨두지만, 요소의 부재로 그래픽의 완성도가 떨어지는 것을 막기 위해 형태와 텍스쳐의 완성도를 최대한으로 올려요. 좀 더 쉽게는 ‘가장 필요한 것만 예쁘게 남긴 상태'라고 설명할 수도 있는데요. 필요한 것만 남긴다는 것이 어떤 의미인지, 저희가 정의하는 가장 완성도 높은 형태와 텍스처는 무엇인지를 학습시켜야 한다는 결론이 나왔죠.
Step 2. 학습 리소스 만들기
토스의 모든 그래픽 자산은 소수의 그래픽 디자이너가 내부에서 제작하기 때문에 저작권에서 자유롭고, 톤도 통일되어 있어요. 이렇게 만들어져 있던 2,000여 개의 그래픽 리소스를 프롬프트*와 함께 1차로 학습시켰죠.
*프롬프트는 원하는 그래픽을 얻기 위해 AI에게 설명하는 명령어입니다. 컴퓨터와 사람이 서로 소통하는 일종의 언어라고 할 수 있어요

1차 학습이 끝난 뒤에는 기존 리소스와 겹치지 않는 리소스들을 새로 제작해 학습시키는 과정을 반복했어요. 더 좋은 퀄리티의 결과물을 내기 위해서는 절대적으로 많은 양의 그래픽을 학습시키는 것이 유리한데요. 이미 1차 학습을 마친 AI를 일부 이용해 하루 100개 이상의 그래픽을 만들고 학습시킬 수 있었어요. 특히 AI가 잘 만들어낸 것들을 여러번 학습시킬수록 정확도는 높아져 갔고요.
아래의 비교이미지처럼 학습을 통해 AI는 오브제나 인물의 형태를 더욱더 명확하게 표현하기 시작했어요. 프롬프트의 이해도도 높아졌고, 특히 버젼이 높아질수록 그래픽 톤에 대한 이해도가 높아진걸 확인할 수 있어요.

Step 3. 쉽게 이용할 수 있는 서비스로 만들기
AI를 활용할 때 프롬프트를 어떻게 쓰는지가 결과물의 퀄리티를 좌우한다는 사실, 들어보셨나요? 이미지 생성 AI도 마찬가지로 어떤 수식어를 개체의 앞에 넣는지, 뒤에 넣는지에 따라 천차만별의 결과물이 나와요. 하지만 토스트의 사용자는 생성 AI나 그래픽 디자인에는 전문 지식이 없는 사람들이기 때문에 배경지식 없이도 쉽게 이용할 수 있게 했어요. 
필수로 입력해야 하는 항목은 단 2가지인데요. 뽑고 싶은 그래픽이 어떤 타입인지 분류를 선택하고 개체를 입력하는 게 다예요. 뒷단에서는 이미지 타입에 맞는 결과물이 나오도록, 그래픽 디자이너가 찾아낸 프롬프트들을 붙여두었어요. 이 옵션값은 계속해서 추가하고 개선해 나가고 있고요. 디테일한 부분을 연구하고, 일정한 톤으로 나오도록 설정값 만드는 일은 이 분야의 전문가인 그래픽 디자이너의 역할이라고 생각한 거죠.

결과
여러분의 이해를 도울 사례를 보여드릴게요. 토스트에서 ‘통나무집’이라는 키워드를 넣고 ‘기본’, ‘동화같은’, ‘인포그래픽’ 세가지 다른 이미지 타입으로 뽑으면 아래와 같은 결과물이 나와요.

‘동화같은’ 옵션에는 creating dreamlike atmosphere, soft pastel colors등의 프롬프트가, ‘인포그래픽’ 옵션에는 catalog of, found in graphic magazine 등의 프롬프트가 들어가 있어요. 그래서 똑같이 ‘통나무집’이라는 키워드를 넣어도 원하는 타입의 결과물을 얻을 수 있죠.
적용해보기
프롬프트 Tip
AI 학습 모델에 따라 다른 결과물이 나오겠지만, 토스트를 만들며 기억에 남는 프롬프트 몇 가지가 있어요. 인물이 주인공인 그래픽을 만드는 경우, 원하는 톤을 만들기위해서는 프롬프트의 서두가 굉장히 중요한데요, 다음과 같은 몇가지의 prefix prompt(서두에 붙는 프롬프트)를 넣으면 원하는 결과에 더 가깝게 나온다는걸 알아냈어요.
Detailed realistic photography of~
다양한 인물사진을 참고하기 때문에 인물 동작의 완성도가 높아져요

Cinematic illustration of~
영화 속 장면을 참고하기 때문에 배경의 완성도가 높아져요

Pastel tone monochrome illustration of~
인물 배경까지 전체적인 컬러톤을 제어하기 좋아요

이처럼 토스에서 그래픽 디자이너의 역할은 직접 그래픽을 제작하는 것을 넘어 새로운 그래픽 톤을 정의하고, 프롬프트 연구를 통해 AI를 학습시키는 것으로까지 확장되고있어요. 
지금까지 토스가 토스트가 왜 시작됐고 어떻게 만들어졌는지 이야기 해봤는데요, 다음 아티클에서는 실제 서비스에 적용된 토스트 결과물들을 보여드릴게요.



여러분은 AI를 업무에 얼마나 활용하고 있나요? 토스에서는 그림 그려주는 AI, 토스트(tosst) 서비스를 사내에 오픈했어요. 토스트에 정보를 입력하면 그래픽이 몇 분 만에 만들어집니다. 토스 그래픽디자이너가 만든 것과 같은 톤과 퀄리티로요.



토스가 그래픽 AI를 만들게 된 이유
토스 그래픽 디자이너들은 하루에도 

Part 1. 토스트, 이렇게 만들었어요

토스의 AI 그래픽 생성기, 토스트를 소개합니다 #1




토스는 왜 이모지 폰트를 만들었을까?

토스페이스는 토스의 그래픽 스타일로 디자인한 이모지 폰트입니다. 이모지 폰트는 문자가 아닌 그림 🖼️ 으로 이루어진 독특한 폰트예요. 하나의 유니코드마다 사회적으로 약속된 의미를 표현하고, ttf 형식으로 키보드에서 한 자씩 찍어 사용한다는 점에서 폰트의 형식과 동일하다고 할 

세계적인 IT 기업에서나 만드는 이모지 폰트를 어떻게 한국 금융 플랫폼 토스에서 만들게 됐을까? 토스의 이모지 폰트, 토스페이스 제작의 모든 것을 공개합니다.

토스의 이모지 폰트, 토스페이스 제작기




토스 그래픽 디자이너는 어떤 일을 하나요?

토스의 그래픽 디자이너는 토스 제품의 시각 경험을 책임지는 사람들이에요.
제품에 사용되는 아이콘, 3D, 애니메이션 등의 디지털 그래픽을 기획하고 제작하는 일을 합니다. 화면 맥락에 맞는 좋은 그래픽을 통해 사용자가 제품을 쉽고 재밌게 쓸 수 있도록 만들어요.
그래픽 디자