General

클립아트 만들기 1 - Google AI Studio

, ,
  • AI의 힘을 빌어 말로 코딩하는 바이브 코딩이 당연하게 받아들여지고 있습니다.
  • 새로운 도구를 빠르게 습득하는 분들과 멀리서 바라보는 분들로 나뉘는 것 같습니다.
  • 지금이라도 바이브 코딩을 시작하는 분들을 위해 Google AI studio를 소개합니다.

1. 코딩의 목적

Pega Devlog: GPT로 PPT용 icon pack 만들기

  • 바이브 코딩이건 전통적 코딩이건 목적이 필요합니다.
  • 무엇을 왜 만들겠다는 이유 없이는 어떤 강의와 기술도 무의미합니다.

  • 제가 맡은 업무 중 발표자료 작성이 적지 않습니다.
  • 발표자료를 만들다 보면 클립아트 검색에 시간이 많이 듭니다.
  • 생성 AI가 나온 이후 그때그때 만들어 사용하고 있습니다만 이것도 귀찮아졌습니다.
  • 한참 자료를 만들다 말고 필요한 걸 만들다 보면 기존 아이콘들과 달라지기 때문입니다.

  • 그래서 작년 3월, PPT용 icon pack 만들기라는 글을 올렸습니다.
  • 당시 200개 가량의 아이콘을 만들고 잘 활용해 왔으나,
  • 이직과 함께 노트북을 반납할 때 백업을 잊었습니다.
  • 심지어 GPT Team 요금제를 해지하면서 GPTs에 대한 접근성을 잃었습니다.

  • 이렇게 된 김에 새로 만들기로 했습니다.
  • 하는 김에 생성과 클립아트 재단이 별도로 있던 기존의 흐름을 하나로 합치기로 했습니다.
  • 바이브 코딩 플랫폼으로는 Google AI Studio를 사용하기로 했습니다.
  • 별도로 설치할 것도 없고, 회원 가입, 카드 등록, 프롬프트 입력만 하면 되거든요.

  • 결과적으로 어제 881개의 클립아트를 만들었습니다.
  • 지금부터 그 과정을 풀어보겠습니다.

2. Google AI Studio

Google AI Studio

2.1. Google AI Studio 소개

https://aistudio.google.com/

  • Google AI Studio는 Gemini를 도구로 사용하는 코딩 플랫폼으로 이해하시면 좋겠습니다.
  • Gemini에서보다 더 세부적인 할 수 있고, 앱으로도 만들 수 있습니다.
  • 구글 계정이 있다면 별도의 가입절차 없이 시작할 수 있습니다.
  • Lovable을 비롯해 앱을 쉽게 만들게 해주는 여러 도구들이 있습니다만, 구글이라는 거인이 만든 길을 소개하고자 합니다.
  • Gemini에서 직접 사용할 수 있는 Opal은 아직 조금 더 성숙하기를 기다려야 할 듯 싶습니다.

  • 접속하면 세 개의 버튼이 주어집니다.
  • Build AI apps : AI 앱을 만드는 모드입니다.
  • Chat with models : 세부 설정을 조정할 수 있는 Gemini 모드입니다.
  • Monitor API usage : 앱이 사용한 비용을 볼 수 있습니다.

  • 여기서는 Build AI apps로 들어가겠습니다.
  • 키워드를 입력하면 여러 개의 클립아트를 동시에 생성해주는 앱을 만드는 것 이 목적이기 때문입니다.

2.2. 사용요금 납부처 - API Key 생성

  • 서버와 AI를 구글에게서 빌리는 만큼 사용료를 지불해야 합니다.
  • 매달 일정액을 내는 것이 아니라 사용한 만큼 내는 종량제입니다.
  • 그러자면 사용량을 체크할 수 있는 방법과 결제방법을 등록해야 하는데,
  • 사용 허가 겸 사용량 체크를 위한 계정번호를 API Key로 이해하면 쉽습니다.

  • 왼쪽 메뉴를 누르면 하단에 Get API Key가 있습니다.
  • API Key를 발급받기 위해 눌러봅니다.

  • 기본 API Key가 하나 만들어져 있습니다.

  • 오른쪽에 무료 등급이라는 말이 있습니다.

  • 이것으로는 Google AI Studio를 사용할 수 없으니 유료 등급으로 만듭시다.

  • 절차는 간단합니다.

  • 프로젝트 이름을 누르고 휴대전화 인증 등으로 본인 계정임을 확인한 후,

  • 해외 결제가 되는 신용카드를 하나 등록하면 끝입니다.

  • 그러면 이렇게 결재 활성화가 됩니다.
  • 무료 체험이라고 적혀 있는 이유는 가입 선물을 사용하는 기간이기 때문입니다.
  • 스타트를 끊을 때 300달러, 요즘 환율로 약 45만원 가까운 크레딧을 줍니다.
  • 입문자에게 적지 않은 금액이라 한동안 마음껏 사용할 수 있습니다.

2.3. Google AI Studio 사용

Google AI Studio: Pricing

  • 돌아와서 AI 앱을 만들기 전에, 익숙해지는 차원에서 Gemini와 같은 모드를 사용해 봅시다.

  • Chat with models를 클릭해도 되지만,

  • 그 아래 있는 Explore Nano Banana Pro를 눌러봅니다.

  • Gemini에서 그림을 그릴 때 빠른 모드를 쓰면 Nano Banana가,

  • 사고 모드를 쓰면 한층 좋은 Nano Banana Pro가 실행됩니다.

  • 프롬프트 전달력이 훨씬 좋고 결과물의 해상도 또한 더 높습니다. 한글도 덜 깨집니다.

  • 그림을 그리기 위한 차이 열립니다.
  • 하지만 아직 동작하지 않습니다.
  • 화면 가운데 있는 Link API Key를 눌러 API Key를 선택해야 합니다.
  • 목적에 따라 여러 개의 API Key를 가질 수 있기 때문에, 이 중 어디에 요금을 청구할지를 묻는 셈입니다.

  • 지금은 Key가 하나뿐이라 아까 만든 키가 자동으로 선택됩니다.
  • Select Key를 눌러서 API Key를입력하고 Run Ctrl ↵를 클릭해 프롬프트를 전송합니다.
  • Ctrl과 Enter Key를 함께 눌러도 됩니다.
  • 프롬프트는 Generate an mage of a banana wearing a costume입니다.

  • 프롬프트에 충실한 그림이 나왔습니다.
  • 상단에 이 작업에 소요된 토큰량이 1,426 tokens로 표시되어 있습니다.
  • 약 $0.14로, 2백원 가량 됩니다. 자세한 사항은 요금표를 참고하시기 바랍니다.
  • 본인 작업이 얼마쯤 드는지 감을 가지고 있어야 낭패를 보지 않습니다.

2.4. 앱 만들기

BananaX

  • 아까 화면으로 돌아가 Build AI Apps를 눌러 앱 개발 모드로 들어갑니다.
  • 앱을 개발할 때 중요한 것은 본인의 구상을 구체화하는 것입니다.

  • 앞서 이야기했듯 저는 키워드만 넣으면 클립아트를 자동으로 만드는 앱이 필요합니다.
  • 입력은 키워드, 출력은 클립아트입니다.

  • 그런데 조금만 더 자세하게 생각해 봅니다.
  • 재현성 있는 그림을 만들어 줄 프롬프트가 필요합니다.
  • 기본값이 들어가 있어야 하고 수정할 수도 있어야 합니다.
  • furoku의 나노바나나 프롬프트 모음집에서 하나를 가져와 일부 수정합니다.

  • 한번에 여러 개의 클립아트를 만드는 게 좋으니 5 x 5 배열로 만듭니다.
  • 그러면 배경에서 클립아트를 분리할 수 있어야 합니다.
  • 바탕색으로 회색을 놓고 클립아트별 배경색으로 흰색을 사용해 구분하기로 했습니다.
  • 전체 그림과 함께 이렇게 잘려진 그림들을 확인하고 내려받는 프로그램을 만듭니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
1. 화면 구성

1.1. 키워드 입력
- 클립아트로 만들고자 하는 키워드 입력

1.2. 스타일 참고용 이미지 업로드 (선택사항)
- Nano Banana Pro가 이미지를 만들 때 스타일을 참고할 수 있는 이미지 업로드

1.3. 프롬프트 수정하기 (선택사항)
- 평소에는 접혀있으나 확장해서 프롬프트를 보고 수정하여 적용할 수 있음.
- 기본 프롬프트는 아래 <기본 프롬프트>에 제공됨

1.4. 그림 생성하기 버튼
- 이 버튼을 누르면 1.3.의 <기본 프롬프트>의 {keyword}에 1.1.에서 입력한 키워드를 입력하고,
- 1.3.에서 프롬프트가 수정되었다면 수정된 프롬프트를 반영하여 Nano Banana Pro를 구동하여 이미지 생성.

1.4.1. 생성된 그림을 보여주는 공간
- 1.4.에서 생성된 그림을 여기에 표시

1.4.2. 생성된 그림이 클립아트 단위로 잘린 것을 보여주는 공간.
- 1.4.1.에서 생성된 그림에서 클립아트만 잘라내어 격자로 배열하여 한 눈에 보여줌.
- 클립아트는 배경색(#AAAAAA, Light Gray)과 구분되는 flat solid white square로 둘러싸인 5 by 5 array를 의미함.
- 배경색과 flat solid white square의 edge를 탐지하여 이를 기준으로 생성된 그림을 자르고, flat solid white square 부분만 남김.

<기본 프롬프트>
'''
Evenly allocated regular 5 by 5 array of cliparts on {keyword}. 
Each clipart should be about {keyword} but various designs. 
The design of the cliparts should be typical to be easily recognized without text.
No title.
Each clipart has to be placed on flat solid white square.
Aspect ratio: "1:1"

###
Overall Design Settings:
  Tone: "Friendly, Professional, Safe, Soft, Playful, Touchable."
  Visual Identity:
    Background Color: "#AAAAAA (Light Gray)"
    Text Color: "#FFB7B2 (Pastel Red)"
    Accent Color: "#B5EAD7 (Pastel Mint), #E2F0CB (Pastel Green), #FFFFFF (White)"
    Image Style:
      Features: "Clay-like 3D UI elements using Soft lighting and Pastel colors."
      Shape: "Capsule shape, Inflated rectangle, Sphere, Floating card."
      Imagery: "3D rendered Simple objects, Floating icons."
      Effects: "Inner Shadow with little depth (Clay effect), No Outer Shadow, Matte finish."
      Composition: "Centered, Ample White space, Layout with Floating feel."
  Typography:
    Heading: "Nunito, Quicksand, or Rounded Sans-serif."
    Style: "Soft tips (Round terminal), Approachable."
###
'''
  • 스타일을 바꿀 때는 ###로 둘러싸인 부분만 수정하면 될 것입니다.

  • 입력창 아래 Supercharge your apps with AI에서 활용할 도구들을 명시적으로 선택합니다.
  • Generate images with Nano Banana Pro와 Gemini intelligence in your app을 선택합니다.
  • 동영상 제작이나 음성입력, 논리추론 같은 기능은 그다지 필요하지 않습니다.

  • 이제 AI Studio에서 앱을 만들기 시작합니다.
  • 컵라면이 익을 시간이면 앱 하나가 뚝딱 만들어져 있습니다.
  • 오류를 내고 정지하기도 합니다.
  • 그럴 땐 차분하게 Auto-fix를 누르면 스스로 고칩니다.

  • 짜잔. 앱이 나왔습니다.
  • PPT 같은 걸로 대충 레이아웃을 짜서 넣어주면 창의 위치와 크기를 조절할 수도 있습니다.
  • 의도대로 키워드 넣고, 예제 이미지 넣고 (이것도 어제 나노바나나가 만든 겁니다), Generate Clipart를 누르면 Source Output에 생성 이미지가, Extrcted Clipart에 잘린 클립아트들이 나열됩니다.

2.5. 앱 수정하기

  • 그런데 이렇게 만들어놓고 보면 어딘가 빈 구석이 있습니다.

  • 클립아트를 대강 잘라놨습니다.
  • 전체적으로 25개 중 가운데 그림만 멀쩡하고 나머지가 다 저런 식입니다.
  • 프롬프트를 추가로 입력해서 수정해야 합니다.

  • 원하는 사항을 명확하게 입력합니다.
  • 테스트를 하면서 인내심을 가지고 여러번 지시해야 할 수 있습니다.
  • 코딩은 잘 하는데 아직 우리 회사랑 말이 덜 통하는 신입직원이라고 생각하면 편합니다.



잔소리를 계속 해야 되는겁니다.

  • 그러다 보면 어느새 고쳐져 있습니다.
  • 그렇다고 마음을 놓으면 안 됩니다.
  • 오류나 올바른 결과가 확률적으로 나타날 수도 있기 때문에 여러 번 테스트를 해야 합니다.
  • 화면에 보이는 결과에서부터 파일명 형식까지, 제대로 움직이는지 확인합니다.

2.6. 앱 공유하기

  • Google AI Studio에서 만든 앱은 여러 방식으로 공유할 수 있습니다.

  • 소스 코드를 공유해서 로컬에서 실행할 수도 있고,
  • github에 올릴 수도 있습니다.
  • Web App으로 만들어 공유할 수도 있으며
  • 이 프로젝트 전체를 공유할 수도 있습니다.
  • 단, 회사에 따라 보안 규정에 의해 앱 배포가 막혀있을 수 있습니다.
  • 적절한 방법을 선택해서 진행하시기를 바랍니다.

  • 방법이 무엇이건간에 이렇게 만든 앱은 사용하면 돈이 나갑니다.
  • 클립아트를 900개쯤 만들었더니 2만원이 나가더군요.
  • 불특정 다수에게 뿌려지면 겉잡을 수 없는 사태가 될 수도 있습니다.
  • 책임질 수 있는 범위, 감당할 수 있는 범위에서 배포하시길 바랍니다.

2.7. 결과파일 관리하기

  • 자동화는 대량의 결과물을 야기합니다.
  • 이런 앱으로 만들어진 클립아트들을 어떻게 관리할지 애초에 생각을 해 보는 편이 좋습니다.
  • 저는 Google Drive에 디렉토리를 하나 만들고 Google Drive for Windows로 연결해 두었습니다.
  • 어디서 작업을 하건간에 가져다 쓰기 좋게, 그리고 동료와 작업할 때 공유하기 좋게 하기 위해서입니다.



  • 그리고 이런 작업을 GPT OpenAI Image Generator로 했을 때에 비해, Google Nano Banana Pro는 조금 더 널뛰는 경향이 있습니다.
  • 예를 들어 데이터베이스를 그리라고 했는데 다소 관련이 없어보이는 그림을 함께 그리는 식입니다.
  • 데이터베이스, 인공지능, 에이전트 이렇게 세 종류의 클립아트를 그리기를 원한다면,
  • 이 세 키워드에서 만들어지는 클립아트들이 서로, 그리고 다른 방향으로 여럿 섞여 있을 확률이 높습니다.
  • 한 번에 다양한 주제를 동시에 만들어 결과물을 보면서 다시 분류하는 것이 좋습니다.


도움이 되셨나요? 카페인을 투입하시면 다음 포스팅으로 변환됩니다

Share