KPick (이미지 생성기), AI 아이콘에 생명을 불어넣다 3편

KPick(가칭) 이미지 생성기 컨셉 시안

 

안녕하세요.

케이뱅크 데이터인텔리전스팀에서 Data Scientist로 일하고 있는 조용걸입니다.

 

이전에, 프로덕트 디자인팀 김수림 님께서 오픈소스들을 활용해서

AI로 이미지를 생성하는 방법과 사용 예시들에 대해 자세하게 설명해 주셨는데요.

 

아이콘이 아이콘을 낳는다?_케이뱅크 아이콘 AI 연습기 1편 -> 보러가기

AI 아이콘에 생명을 불어넣다_케이뱅크 아이콘 AI 연습기 2편 -> 보러가기

 

이후 UX팀 방지은, 장혜원님 그리고 같은 팀 이상현님과 함께 스터디를 이어가고 있습니다.

(수림님, 철기님 바쁨 이슈 😢, 수림님 승진 축하드려요 🎉)

 

하지만, 해당 건은 사이드 프로젝트로 시간이 날 때 개별적으로 진행하고 있어서...

실 사용까지에는 오픈소스 모델 & 운영 서버 관리, 사용성을 위한 UI&UX 개발 등 여러 한계점에 부닥치고 있었습니다.

(+저의 게으름 이슈)

 

그러던 중, OpenAI에서 gpt-4o를 통해 이미지 생성 모델을 공개하였고, 대한민국의 SNS 메신저 프로필들이

모두 지브리 스타일로 바뀌는(?) 대대적인 사건이 발생하였습니다.

 

프롬나드의 경험짐 모음집 블로그 발췌

 

이 사건과 함께 몇 주 후, 이 모델이 API 형태로 시중에 출시한다는 소식도 함께 공표되었습니다.

 

발표된 모델은 gpt-image-1 모델로 고품질의 이미지 결과물을 제공할 뿐만 아니라 API로 출시되면서 서버 & 모델 관리의 상당수 부담을 줄여주었습니다. 그래서 이 모델을 활용하여 빠르게 실사용까지 데모를 진행해 보자 판단을 하여 이미지 생성기 KPick(가칭) 프로젝트를 진행하게 되었습니다.

 

들어가며

 

그래픽 생성기는 왜 필요할까요?

 

1. 디자이너 리소스 부족으로 인한 마케팅 비효율화

 

특정 이미지의 경우 사내 그래픽 디자이너 1인에게 반복 요청이 집중되면서 업무 과부하 현상이 발생하고 있습니다. 요청이 많이 쇄도하지만 다 수용할 수 없어서 기존 이미지들을 재활용하곤 하는데요. 이러한 현상은 메인 디자이너의 중요 프로젝트 참여가 어려워지고, 케이뱅크를 이용하는 고객에게도 매번 비슷한 or 같은 컨텐츠만 제공되게 됩니다.

 

매번 비슷한 or 같은 컨텐츠의 제공은 마케팅 효율이 낮아지는 현상으로 이어집니다. 특히, 앱 내 마케팅 배너(상단, 반팝업)의 경우에 똑같은 문구와 이미지를 오랜 기간 사용하게 되면 고객 Fatigue(피로) 증가로 CTR이 떨어지게 됩니다. 따라서, 개인화 AI/ML 광고 추천 모델링 못지않게 컨텐츠(문구, 이미지)의 리프레시(Refresh)가 중요합니다.

 

2. 비 디자이너와의 커뮤니케이션 문제

 

신규 상품 및 서비스를 론칭할 때, 담당자들은 UI/UX팀에게 의뢰해 이미지 생성을 요청하게 됩니다. 단순히 텍스트 형태(메일)로 요청하게 되면, 담당 BM과 UI/UX팀 담당자 간의 괴리가 존재해 원하지 않은 이미지가 만들어질 수 있기 때문에 이 간극을 좁히기 위해 미팅과 커뮤니케이션을 진행하게 됩니다. 이 기간은 보통 1~3주의 시간이 소요되며 비로소 앱에 사용할 수 있는 이미지가 만들어지게 됩니다.

Gpt-4o 이미지 생성

 

그래픽 생성기가 개발이 된다면 위 두 문제를 해결하고 초안 및 작업 자동화로 프로세스 40% 정도 단축될 것으로 예상하고 있습니다. 디자이너뿐만 아니라 비디자이너도 그래픽 생성기를 이용하여 시안/아이디어를 구체화하여 원하는 이미지 전달이 가능하기 때문이죠.

 

또한, 그래픽 디자이너 개별에게 집중된 업무를 분산하여 병목 현상을 완화하고 반복적/단순한 그래픽 요청은 AI로 대체해 메인 디자이너의 리소스를 행내 브랜드 아이덴티티 고도화에 집중시킬 수 있을 것으로 기대합니다.

 

 

개발 시 고려할 점

 

에자일성

 

현 PoC 단계에서의 그래픽 생성기는 사이드 프로젝트로 진행하고 있는데요. 메인 업무가 아니라 사용성 & 가능성을 보는 것 이기 때문에, 최소한의 리소스 투자로 사용하는 것을 목표로 하였습니다.

 

이전에 수림님께서 기고해 주신 오픈소스의 프로젝트의 경우 StableDiffiosn 1.5, XL, 갓 나온 Flux 모델을 이용해서 이미지 생성 프로젝트를 진행하였는데요. 이미지 생성 AI 모델의 성능이 하루가 다르게 향상되고 새로운 모델들이 출시되고 있는 가운데에서, 매 출시마다 모델을 살펴보고 사용하기 용이한 형태로 검토해야 하는 등 여러 가지 고려해야 할 요소가 필요해서 프로젝트 진행이 많이 더뎠습니다.

 

전담 팀도 아니고 관심 있는 사람들끼리 삼삼오오 모여 진행한 사이드 프로젝트인 만큼, 모델 선택이나 서버 운영을 최소화할 수 있는 방안과 실직적으로 업무 생산성을 높일 수 있는 시나리오 발굴 그리고 가능성 테스트(Feasibility)에 우선순위를 두었습니다.

 

톤 & 매너

 

이미지를 생성해 주는 상용화 서비스는 Midjourney, ChatGPT 등 여러 가지가 있는데요. 기준이 없는 무분별하게 생성된 이미지들은 행의 톤 & 매너도 맞지 않고 최종적으로 사용될 이미지는 UI/UX 실무자의 후보정 및 검토 과정을 거치게 되는데 오히려 업무 과중으로 이어질 수 있습니다.

 

후보정을 최소화하고 일관된 톤 & 매너를 유지할 수 있는 방법을 고민하여 개발을 진행하였습니다. 예를 들어, 사용자가 참조 이미지 없이 단순하게 프롬프트만 입력했을 때, llm모델을 활용하여 키워드를 추출하고 이 키워드에 해당하는 대표 이미지를 함께 참조하여 신규 이미지를 생성하는 식으로요.

 

운영 및 관리

 

이전에도 Midjourney를 활용한 업무 생산성 향상을 위해 사용 가이드를 제작·배포했지만, 팀별 계정 관리 부재와 파일 형태의 비효율적인 가이드 배포로 인해 실제 활용이 저조했습니다. 관리 주체를 명확히 지정하고, 계정과 사용법을 체계적으로 관리할 수 있는 구조가 마련돼야 합니다.

 

 

개발

 

모델 선정 & 개발 프레임워크

 

gpt-4o로 이미지를 생성했을 때 디자이너분께서 이 정도면 후보정 약간이면 바로 실무에 사용할만한 퀄리티라고 말씀 주셔서, 바로 사용하고자 하였으나 당시에는 API 출시가 되지 않았습니다.

 

API 출시 전까지 대안으로 사용할만한 모델들을 살펴보던 중 공식적으로 API를 제공하고 text2img뿐만 아니라 img2img기능도 제공하는 Luma.AI의 Photon모델을 찾게 되었습니다. Luma.AI의 경우 생각보다 가격이 저렴하고, Credit이 남으면 비디오(Ray)도 생성해볼 수 있기 때문에 좋은 대안이라 생각이 되었습니다. 우선은 해당 모델로 진행하고 추후에 OpenAI API(gpt-image-1) 출시 시 대체하기로 결정하였습니다. (현재는 gpt-image-1이 적용된 상태입니다.)

LumaAI Photon

 

개발 프레임워크는 Streamlit을 이용해 빠르게 개발하여 Feasibility 검증을 하고자 하였습니다.

 

img2img 지향 (+프롬프트 제어)

 

위에서 언급한 대로 text2img형식으로 프롬프트로만 이미지를 생성하게 된다면, 자유도 높게 생성이 가능하지만 사용자마다 다른 프롬프트 작성과 일관성 없는 이미지 생성(색, 구도, 캐릭터, 스타일)들이 만들어집니다. 프롬프트 제어만으로는 행의 톤&매너를 맞추기가 어렵다고 판단되어 최대한 행에서 사용되고 있는 이미지로 범위를 한정하여 생성하게 함으로써 img2img을 지향하게 개발하였습니다.

 

프로젝트구조

 

Streamlit 프로젝트의 구조는 ChatGPT의 도움을 받았습니다. Flask에서 UI를 Templates으로 빼서 구조를 관리하는 것과 다르게 componetns 폴더에 해당 부분을 관리하는 방향을 추천해 주어서 해당 구성을 참고하였습니다.

 

├── assets
─ components
│   ├── __init__.py
│   ├── header.py
│   ├── main
│   │   ├── __init__.py
│   │   ├── preview.py
│   │   ├── reference_output.py
│   │   ├── searchbar.py
│   │   └── upload.py
│   └── sidebar.py
├── src
│   ├── __init__.py
│   ├── generators
│   │   ├── __init__.py
│   │   ├── img_generator.py
│   │   └── luma_generator.py
│   ├── presets
│   │   ├── __init__.py
│   │   └── prompt_presets.py
│   ├── prompt_helpler
│   │   ├── __init__.py
│   │   ├── helper.py
│   │   └── templates.py
│   └── utils
│       ├── __init__.py
│       ├── constants.py
│       ├── image_utils.py
│       └── session_state.py
├── README.md
├── app.py
├── config.yaml
├── requirements.txt

 

app.py예시

# app.py

from src.utils.session_state import *

from components.header import render_header
from components.sidebar import render_sidebar

from components.main.searchbar import render_searchbar
from components.main.upload import render_upload
from components.main.preview import render_preview
from components.main.reference_output import render_reference_and_output

from src.generators.luma_generator import LumaGenerator
from src.generators.img_generator import ImgGenerator
from src.prompt_helpler.helper import PromptHelper

from src.presets.prompt_presets import preset_captions, preset_prompts, preset_images

import streamlit as st

...
def main():

    categories, full_images, all_captions = load_categories_and_images()

    # header section
    with st.container():
        render_header()

    # sidebar section
    with st.sidebar:
        render_sidebar(preset_captions, preset_prompts, preset_images)

    # main container
    with st.container():

        search_col, ref_col, output_col = st.columns([4, 1.5, 2.5])

        height = 665
        with search_col:

            with st.container(height=height):
                render_searchbar(categories, full_images, all_captions)

        with ref_col:
            with st.container(height=height):

                with st.container(height=200):
                    render_upload()

                with st.container(height=400):
                    render_preview()

        with output_col:
            with st.container(height=height):
                render_reference_and_output(img_generator, luma_generator)

...

if __name__ == "__main__":
    main()

 

 

데모

 

현 데모에서는 3개 시나리오를 가정하여 개발하였습니다. 최대한 보편적으로 사용할 수 있는 시나리오들을 추가 발굴하기 위한 아이데이션을 계속해서 진행하고 있고 추후에 반영하여 완성할 예정입니다.

 

시나리오 1. 여러 장의 이미지를 참조 및 조합하여 자유롭게 이미지 생성

 

사용자가 프롬프트를 입력하게 되면 미리 정의된 자유 프롬프트 프리셋에 사용자 의견이 최대한 반영되게 하여 이미지를 생성합니다. 또한, 단일 프롬프트로 생성되는 이미지 스타일의 경우 행의 톤&매너에 맞지 않은 이미지가 생성될 수 있습니다. 기존에 행에서 사용되고 있는 대표 Asset(이미지)을 참조 이미지로 사용하여 프롬프트와 함께 일관성을 유지할 수 있는 신규 이미지를 생성합니다.

 

* 동작 예시

 

1. 그래픽 생성기에서 사용자 입력 (텍스트 프롬프트)을 입력값을 받음

2. 사용자 프롬프트에서 llm모델을 활용하여 키워드를 추출하고 각 키워드에 매칭되는 대표 이미지들을 가져옴

3. 대표 이미지와 사용자 프롬프트를 gpt-image-1 모델을 활용하여 이미지를 생성함

 

시나리오 2. 2D 이미지를 3D로 바꾸기

 

왼쪽 사이드바 상단에 Convert to 3D 아이콘을 선택하면 사전에 정의된 프롬프트 프리셋을 사용해서 3D 이미지를 생성합니다. 그리고자 하는 2D 이미지만 있으면 3D 형태로 이미지를 만들어 낼 수 있습니다. (더 나아가서, 비디오 생성 AI를 같이 활용한다면 모션이 추가된 그래팩 Asset도 함께 생성할 수 있습니다.)  

 

시나리오2. 2D to 3D

 

시나리오 3. 행에서 지정한  3D material(컬러 및 질감 등)으로 변경

 

케이뱅크에는 대표 컬러로서 사용되는 3D Graphic primary material들이 있습니다. 아래 사진 예시와 같이 큐브형태의 여러 이미지들이 존재하는데요. 왼쪽 사이드바 상단에 Change Color 아이콘을 선택해서 사전에 정의된 프롬프트 프리셋을 사용하고 변경을 원하고자 하는 이미지와 함께 선택해서 새로운 이미지를 생성하게 됩니다.

 

시나리오3. Change Color

 

 

 

마치며

 

 

"잠곰"이 비디오 쇼츠 생성 (남은 Luma Credit으로..)

 

이번 사이드 프로젝트가 어떤 결말을 맺게 될지는 아직 알 수 없지만, CC(Customer Centric) 그룹 내 UX, BX, 데이터인텔리전스 세 팀이 함께 호기심에서 출발한 스터디가 실무에서 실제로 필요한 문제를 발굴하고 이를 AI로 해결해보려 한 시도라는 점에서 의미 있는 프로젝트라 생각합니다.

(누구도 하라고 시키지 않았는데 자발적으로 스터디와 사이드 프로젝트를 진행하는 열정 많은 분들이 케이뱅크에 많이 계십니다🔥) 

 

물론, 실용성을 인정받고 행 내에서 본격적으로 활용되기까지는 UI 개선(컨셉 시안 고도화), 정보보호 검토 등 여러 과제가 남아 있습니다. 하지만 이러한 자발적 활동들이 올해 케이뱅크의 전략 방향인 ’AI Powered Bank’에 작게나마 기여할 수 있기를 바랍니다.

 

마지막으로, 케이뱅크 캐릭터인 귀여운 잠곰이로 비디오 생성 모델(Ray-2)를 이용해 만든 영상 첨부하면서 이 글을 마칩니다.