아이콘이 아이콘을 낳는다?_케이뱅크 아이콘 AI 연습기 1편

들어가며

안녕하세요. 케이뱅크 UX팀에서 프로덕트 디자이너로 일하고 있는 김수림입니다.

UX팀은 사용자 중심의 경험을 디자인하며, 더 나은 금융서비스를 창출하고자 고민하는 팀입니다.

이러한 노력은 사용자들에게 보다 직관적이고, 편리하며, 만족스러운 금융 경험을 제공하기 위한 것입니다. 특히, 디지털 환경에서의 사용자 경험은 점점 더 중요한 이슈로 떠오르고 있습니다. 금융서비스는 복잡한 정보를 다루는 경우가 많아, 디자인을 통해 이를 쉽게 풀어주는 것이 필수적입니다. 저희 팀은 이런 목표를 달성하기 위해 사용자의 목소리에 귀를 기울이고, 이를 기반으로 디자인 전략을 수립하고 실행합니다.

이번 글에서는 AI 툴을 이용하여 3D 아이콘을 학습하고 이를 업무에 활용할 수 있도록 진행한 스터디 내용을 정리해보고자 합니다. 또한, AI를 활용하며 생겨난 고민들을 함께 나누며, 케이뱅크의 아이콘 및 사용자 경험 디자인에 AI 기술이 어떤 가치를 더할 수 있을지 모색해보려 합니다. 이 글이 업무에서 AI를 활용하려는 분들에게 조금이나마 도움이 되었으면 하는 바람입니다.

 

최근 몇 년간 AI 기술의 발전 속도는 눈부십니다. 특히 Chat GPT와 미드저니 같은 혁신적인 툴이 출시되면서, 저는 디자이너로서 두 가지 상반된 감정을 느꼈습니다. 하나는 새로운 기술을 활용해 내 업무의 생산성을 높이고 창의성을 확장할 수 있을 것이라는 설렘, 다른 하나는 영화에서 보던 것처럼 기술이 인간의 역할을 대체해 내 일자리의 입지가 좁아지거나 사라질지 모른다는 두려움이었습니다.

하지만 저는 이 두려움을 기회로 전환할 방법을 고민하기 시작했습니다. AI 기술을 적극적으로 활용한다면 디자인 작업의 효율성을 높이는 것은 물론, 창의적인 가능성을 확장하고, 한계를 뛰어넘는 도구로 자리 잡을 수 있을 것이라고 믿게 되었습니다. 이는 디자이너로서의 성장뿐만 아니라 더 나은 사용자 경험을 창출할 수 있는 기회가 될 것입니다.

AI를 활용한 3D 아이콘 작업에는 여러 가지 이점이 있습니다. 첫째, 반복적이고 시간이 많이 소요되는 작업을 자동화함으로써 더 창의적이고 전략적인 디자인에 집중할 수 있습니다. 둘째, AI 툴은 동일한 스타일과 톤을 유지하며 일관성 있는 디자인을 제작하는 데 유용합니다. 마지막으로, 기존에 접근하기 어려웠던 3D 디자인과 같은 새로운 표현 기법을 탐구할 수 있는 가능성을 열어줍니다. 이러한 장점들은 특히 빠르게 변화하는 디지털 환경에서 경쟁력을 유지하는 데 중요한 역할을 합니다.

AI를 통해 이미지를 만드는 방법에는 여러 상용화 툴(Midjourney, DALL-E 등)이 있지만, 오픈소스 모델인 Stable Diffusion을 사용하는 데는 추가적인 이점이 있습니다.

 

1. 상용 서비스 사용 시 데이터 반출로 인한 보안 이슈가 발생할 수 있으나, 오픈소스는 내부 환경에서 활용할 수 있어 안전합니다.
2. 연구자와 개발자들이 공유하는 커스터마이징 된 모델을 통해 원하는 방향에 맞는 결과물을 얻을 수 있습니다.
3. 기존의 브랜드 이미지를 모델에 학습시킨다면, 일관된 톤 앤 매너를 유지하며 이미지를 재생산할 수 있습니다.

Stable Diffusion은 상대적으로 적은 메모리를 사용하면서도 고품질의 이미지를 생성할 수 있어, 개인 PC에서도 충분히 활용 가능합니다. 이에 따라 저는 Stable Diffusion을 활용하여 이미지 생성 원리 및 활용 방법에 대해 스터디를 시작했습니다.

Stable Diffusion은 텍스트를 입력하면 그에 대응하는 이미지를 생성하는 딥러닝 기반 AI 모델입니다. 이 모델은 확산 모델(Diffusion Model) 이라는 기술을 기반으로 동작하며, 노이즈로부터 이미지를 점진적으로 복원하는 방식을 사용합니다. 예를 들어, "sunset over the mountains"라는 텍스트를 입력하면 해당 내용을 묘사하는 이미지를 생성할 수 있습니다.

다만, AI를 활용하며 해결해야 할 과제도 있습니다.

 

1. AI가 효율성을 제공하는 만큼, 브랜드 감성과 인간적인 터치를 어떻게 반영할지 고민해야 합니다.
2. 새로운 툴을 익히는 데 드는 시간과 노력, 그리고 결과물의 품질 간의 균형을 맞춰야 합니다.
3. 팀 내 디자이너들이 각자의 스타일과 워크플로우를 유지하면서도 AI를 협업 도구로 조화롭게 사용하는 방안을 찾아야 합니다.

또한, AI 기술이 우리 사회와 산업에 미칠 장기적인 영향에 대해서도 고민이 필요합니다. AI가 반복적인 작업을 대체하면서 인간이 더 고차원적인 창의적 작업에 집중할 수 있는 기회를 제공할 수도 있지만, 동시에 AI 활용에 익숙하지 않은 사람들이 소외될 가능성도 있기 때문입니다.

이번 글에서는 DI팀 조용걸 님과 함께 진행한 AI 3D 아이콘 스터디의 첫 번째 단계인 기존의 3D 아이콘을 활용해 학습시키는 과정을 자세히 소개하고자 합니다. 이 과정에서 어떤 방식으로 AI 툴을 활용하고, 그 결과물을 실제 업무에 적용했는지 실질적인 사례를 공유하며 AI 기술의 가능성을 탐구해 보시길 바랍니다.

첫 번째, 학습시킬 아이콘 이미지(데이터) 준비

 

기존에 사용 중이던 3D 아이콘을 정리하여 학습에 적합한 데이터셋을 모았습니다. 이 과정에서 BX팀 이연주 님께서 많은 도움을 주셨습니다. 케이뱅크 브랜드 컬러에 맞춰 제작된 아이콘의 스타일, 색상, 형태 등의 특징이 잘 드러나는 이미지를 약 700개 선정했습니다. 이 데이터셋은 AI 학습의 기초가 되는 만큼, 최대한 일관성을 유지하는 데 중점을 두었습니다.

선정된 아이콘들은 동일한 스타일을 유지하면서도 다양한 각도, 구도, 색상을 포함하도록 구성하였습니다. 이를 통해 학습 모델이 케이뱅크의 3D 아이콘 스타일을 깊이 이해할 수 있도록 하였습니다. 3D 아이콘 이미지를 일정한 크기로 조정하고 배경을 제거하거나 일관된 배경 색상으로 통일하는 작업도 진행했습니다. 특히, 이러한 반복 작업은 현재 수작업으로 이루어졌지만, 향후 AI로 자동화할 방안을 고민 중입니다.

또한, 파일 형식이나 해상도를 Stable Diffusion 모델에서 처리 가능한 형태로 변환했습니다. 이 과정은 모델의 학습 정확도를 높이는 데 매우 중요합니다.

 

 

추가적으로 아이콘의 속성을 텍스트로 라벨링 하여 학습에 사용할 수 있도록 만들어 둡니다. 아이콘을 GPT API를 이용하여 설명 텍스트(프롬프트)를 만들어내는 작업을 합니다. 이 작업은 DI팀 조용걸 님 도움을 받아 학습했습니다. 초기시도는 오픈소스로 제공되는 BLIP/CLIP 모델을 사용했으나 생성된 결과 품질이 생각보다 좋지 않았습니다. 특히 케이뱅크에서 특정되어 사용하는 아이콘이기 때문에 기대했던 Object와 만들어지는 단어 간의 괴리가 있었고 같은 Object 이미지라도 많이 다르게 표기가 되었기 때문에 수기로 검수할 부분이 많아졌습니다. 그래서 설명 텍스트를 만들기 위해 gpt-4o모델을 사용하였습니다. 이미지를 생성하는 프롬프트는 아래 내용에 유의해서 작성하면 좋다고 알려져 있습니다.

 

• 1) 단어 선택
  • 비슷한 의미를 가진 유의어 중 가장 구체적인 단어 선택

 

• 2) 7가지 세부 사항 작성하기
  • 대상, 스타일, 환경, 조명, 색상, 분위기, 구도

 

• 3) 복수형 단어 사용 지양하기
  
  
  
• 4) 중요한 단어는. 프롬프트 앞부분에 작성하기

 

위 내용을 토대로 아래와 같은 프롬프트를 사용하여 gpt-4o API를 이용해서 훈련에 사용할 설명 텍스트를 만들었습니다. 이후 학습된 모델은 아래에서 어떻게 활용했는지 말씀드릴게요.

Generate image description for midjourney txt2img generation about this image. If the sentence is long, separate it with commas so that each component can be clearly seen. Please write the description so that the subject, style, color, mood and composition are clearly conveyed. (Describing the composition is especially important.) It should be detailed and concise, avoiding words with overlapping meanings. Furthemore, sentence with specific numbers or collective nouns is better. Place the sentences you think are more important in expressing the photo forward in order. The description must be written within simple 70 tokens without any further explanation. ex) A cute cat with big eyes, sitting on a bench, relaxed, and yawning,...

 

이러한 작업을 통해 생성된 데이터셋은 AI 학습의 질을 한 단계 끌어올릴 수 있었습니다.

 

두 번째, Stablediffusion 모델 준비

 

 

　베이스 모델　

 

베이스모델을 사용하여 Stablediffusion 모델을 무료 다운로드하거나, 사용 목적에 맞는 사전 학습된 모델을 선택합니다. 저는 AI 커뮤니티(https://civitai.com/)에서 케이뱅크 아이콘과 비슷한 스타일의 아이콘을 생성할 수 있는 베이스모델을 다운로드하였습니다.

 

왜 베이스모델이 필요할까요?

• Stablediffusion은 다양한 스타일과 목적에 맞게 학습된 모델을 제공합니다. 이를 기반으로 하면 완전히 처음부터 학습시키는 것보다 시간과 리소스를 절약할 수 있습니다.
• 사전 학습된 모델은 일반적인 패턴 인식 능력을 갖추고 있어, 이를 Fine-Tuning 하면 목적에 맞는 결과를 보다 빠르고 효과적으로 얻을 수 있습니다.

 

Civit-ai에서 베이스 모델 다운로드 팁

• 저는 검색어 ‘3D-icon’과 관련된 키워드로 검색하여 적합한 모델을 찾았습니다.
• 특정 모델의 샘플 이미지를 확인하여 작업에 얼마나 적합한지 판단하세요.
• 비슷한 스타일의 여러 모델을 다운로드하여 비교 테스트를 진행하는 것도 좋은 방법입니다

 

 

　LOLA모델

 

LOLA(Latent Optimization Layer Adjustment) 모델은 Stablediffusion 등 생성 AI 모델의 세부 특성을 조정하거나 특정 목적에 맞게 세밀한 제어를 가능하게 해주는 추가 모듈 또는 확장 기능입니다. 베이스모델과 다르게 더 정교한 스타일, 디테일, 또는 특정 주제를 반영할 수 있도록 Fine-Tuning을 지원합니다.

 

예를 들어, 베이스 모델이 집을 짓기 위한 기본 뼈대와 같은 역할. 어떤 스타일로 꾸밀지는 정하지 않고 기본 구조만 제공합니다.

그에 비해 로라 모델은 집 내부를 꾸미기 위한 가구나 장식품. 기본 구조 위에 특정 스타일을 추가하거나 변화를 주는 역할을 합니다.

 

세 번째, 모델 미세 조정 (Fine-Tuning)을 통한 최적의 결과값 찾기

 

준비된 3D 아이콘 데이터셋을 Stable Diffusion 모델에 학습시켰습니다. 학습 파라미터를 세밀히 조정하며, 최적의 결과를 얻기 위한 실험을 반복했습니다. 학습 과정에서는 생성된 이미지를 지속적으로 확인하며 품질을 점검하고, 필요시 데이터셋을 보강하거나 파라미터를 변경했습니다.

이 과정에서 가장 중요한 점은 케이뱅크 아이콘 스타일의 아이덴티티를 유지하는 것이었습니다. 이는 단순히 AI 학습에 의존하는 것이 아니라, 인간의 감각과 디자이너로서의 판단력이 필요했습니다.

저는 특히 이 미세 조정이 어려웠어요. 이 작은 수치를 통해 케이뱅크 아이콘 스타일의 아이덴티티를 찾습니다. 이 부분은 어쩔 수 없는 인간의 영역!! 아직 내 자리는 있다!!

 

아래의 핑크 돼지 저금통! 익숙한 돼지의 모습이지요??

  

 

 

네 번째, 테스트 및 결과 검증 그리고 앞으로 나아갈 길

 

학습된 모델을 테스트하면서, 원하는 스타일의 3D 아이콘이 생성되는지 확인할 수 있습니다. 기존의 아이콘과 비교하여 스타일 및 일관성을 검증합니다.

 

아래 이미지는 제가 처음 만든 3D 아이콘인데 어떤가요? 이제 케이뱅크 스타일을 학습한 모델이 색색의 돼지는 물론, 다양한 아이콘도 만들 수 있어요. 하지만 학습의 양을 늘려야 어색하지 않은 아이콘의 이미지를 얻을 수 있습니다.

 

아래 이미지를 자세히 보시면 회색 돼지의 코는 핑크색으로 남아있는데요, 이런 어색한 부분의 이미지가 나올 수 있으니 마음에 드는 아이콘이 나올 때까지 계속 돌리면 됩니다. 케이뱅크 아이콘이 아이콘을 낳는 AI 학습!!

 

코드를 전혀 몰라도 초기 PC 세팅만 도움 받으면 누구나 도전할 수 있습니다. 같이 스터디하고 싶은 분이 있으시면 언제든지 저나 DI팀 조용걸 님께 문의해 주세요. 현재 격주 금요일 오후 UX팀 김철기 님, 방지은 님이 같이 AI 아이콘을 연구하고 있습니다.

 

 

 

저희의 목표는 최종적으로 생성된 아이콘을 케이뱅크의 UX/UI에 적합한 형태로 가공하여 실무에 적용하는 것입니다. 모델을 지속적으로 업데이트하여 앞으로 꾸준히 발전해 나가는 모습을 보여드릴게요. 다음 글에서는 케이뱅크 스타일로 만든 아이콘으로 움직이는 3D 아이콘 학습한 결과물을 공유해 드릴 예정입니다. 물론, 아직은 초급정도이지만 열심히 학습하여 25년도에는 업무에 다양하게 활용할 수 있도록 연구해 보도록 하겠습니다. 감사합니다.