📱아이콘 작업의 효율을 높이기 위한 생성형 AI 서비스!

📝 이번 주제는 '아이콘'이에요.

아이콘은 제품에 들어가는 작은 그래픽 이미지지만, 그 역할은 결코 작지 않죠. 사용자 경험을 개선하고, 브랜드를 돋보이게 만드는 중요한 도구니까요. 아이콘을 제작할 때는 사용성과 브랜드 아이덴티티를 모두 만족시켜야 해요. 특히 톤앤매너를 유지하면서도 상황에 맞는 변형이 필요해 제작에 많은 리소스가 소모되는 만큼, 주제로 다뤄 여러분들에게 소개해보고 싶었어요!

오늘 레터에서는 아래 두 가지를 포함한 넓은 범위에서의 ‘아이콘 제작’을 다뤄보려고 하는데요, 반복적인 아이콘 작업의 효율성을 높이기 위해 생성형 AI를 어떻게 활용할 수 있을지 함께 정리해봤어요!

1️⃣ UI 벡터 아이콘

제품에서 사용자에게 직관적인 시각적 단서를 주며 정보를 효율적으로 전달 사용자가 더 쉽게 인터페이스를 이해하고 사용할 수 있도록 함

2️⃣ 그래픽 에셋

디지털 인터페이스뿐만 아니라 마케팅 자료, 인쇄물, 배너 등 다양한 곳에서 활용되고, 브랜드의 성격과 느낌을 표현 정보도 더 생동감 있게 전달하고, 감성적으로도 사용자와 연결하는 역할

👀 오늘 소개할 서비스와 내용

Firefly로 일관된 그래픽 에셋 만들기

Firefly는 앞선 뉴스레터에서도 소개했었는데요, Abobe에서 만든 툴인만큼 이미지 제작 뿐 아니라 ‘일관된 그래픽 에셋’ 제작에 활용해보고 싶었어요. (업무 생산성이 높아지는 생성형 AI 이미지 편)

톤앤매너와 스타일의 일관성을 유지할 수 있을까?

앞서 이야기한 것처럼, 그래픽 에셋은 브랜드 아이덴티티를 강조하는 역할을 하기 때문에 생성형 AI를 활용해 그래픽 에셋을 만들 때 가장 염려되는 점은 ‘톤앤매너와 스타일의 일관성을 유지할 수 있을까?’ 였는데요. 일관성있는 그래픽을 반복적으로 생산하기 위해서는 아래 두 가지 기능을 적극적으로 활용해야 해요.

어떤 구성을 참조하지?

저는 종이 질감의 3D 그래픽 에셋을 만드는 것을 목표로 했는데요. 이를 위해 먼저 구성을 참고할 이미지를 선정했어요. 이미지의 형태는 3D든 2D든 상관없었지만 원하는 구도를 설정하는 데 도움이 되도록 두 가지 유용한 툴을 활용했죠.

1️⃣ 3dicons.co

이 사이트에서는 다양한 3D 그래픽 에셋을 제공하며, 특히 세 가지 각도로 에셋을 다운로드할 수 있어요. 또 컬러 버전, 클레이 버전, 블랙 버전까지 선택 가능해 참조 이미지로 활용하기에 적합했어요. 피그마 플러그인도 있어 접근성도 훌륭했고요!

2️⃣ Vector to 3D

만약 위 사이트에서 제공하는 에셋이 마음에 들지 않거나 원하는 형태와 각도가 부족하다면? 이런 경우엔 두 번째 방법을 활용했어요. 3D툴을 잘 다룰줄 모르기 때문에, Vector to 3D 라는 피그마 플러그인을 활용해 꼼수를 썼죠.

이 플러그인은 벡터로 만든 이미지를 간단히 3D로 변환할 수 있는 툴인데요! Lighting, Camera 옵션 등 실제 3D 툴에서 제공하는 꽤나 상세한 설정도 가능해요.

다만, 변환된 이미지를 다운로드하려면 프로 계정을 구독해야 한다는 제한이 있는데 우리는 어차피 구도만 필요하기 때문에 구도만 원하는대로 잡아주고, 이미지를 캡쳐해 활용했어요. (만든 3D 이미지rk 완벽한 퀄리티가 아니어도 괜찮아요. 어차피 나중에 Firefly AI가 다듬어 주거든요!)

이제 실제 작업 단계로 넘어가볼게요.

본격 그래픽 에셋 제작 START!

Firefly로 이동해 앞서 선택한 시계 이미지를 구성 참조에 넣어주고, 스타일 참조에 종이 질감을 추가했어요. (질감은 Poliigon에서 다운받았어요!) 그런 다음, 아래와 같은 프롬프트를 입력했더니 이런 결과물이 나왔죠.

훌륭한 종이 질감의 시계 에셋을 얻을 수 있었어요. 우측은 동일한 구성 참조를 사용하고 스타일만 세라믹 질감으로 바꿨을 때의 모습이에요. 

컬러까지 들어간 에셋을 만들고 싶다면? (배민 사례)

어도비 웨비나에서 우아한청년들 김관우님은 배민 컬러칩과 질감을 담은 참조 이미지를 활용하는 모습을 보여주셨는데요. 스타일 참조와 프롬프트로 순식간에 배민 톤앤매너를 유지한 스쿠터 이미지를 생성했어요.

위의 사례처럼 Firefly가 다른 서비스들의 그래픽과 톤앤매너도 일관된 그래픽을 만들어 줄 수 있는지 테스트를 진행해봤는데요. 몇 가지 제품의 UI 일부를 캡처해 스타일 참조로 지정한 뒤, 동일한 프롬프트를 사용해 이미지를 만들어봤어요.

서비스별로 특징적인 그래픽 스타일을 참조 이미지 삼아 ‘알람시계’를 제작한 결과인데요. 큰 이질감 없이 서비스에 어울리는 모습을 확인할 수 있었어요. 물론, 실제 소재로 활용하기 위해선 약간의 보정 작업이 필요하겠지만, 효율성 측면에서 이 접근이 매우 유용하다고 생각해요.

저는 특정 생성형 AI 툴에 의존하지 않는 그래픽을 만들어 낼 수 있을지가 가장 궁금했어요. 그렇기 위해서는 결국 기존에 가지고 있던 스타일이 고유하며 뚜렷해야 하겠더라고요. 이렇게 명확한 스타일이 정립되면, AI에게 이 스타일을 학습시키는 과정이 훨씬 쉬워져요. 결과적으로 일관성 있는 에셋을 지속적으로 생산해낼 수 있게 되죠.

업데이트

Firefly에서도 이런 기업 사용자들의 니즈를 알고, 기업과 크리에이터가 브랜드 정체성에 맞는 콘텐츠를 생성할 수 있게 도와주는 **‘사용자 지정 모델’**을 제공하고 있어요. 사용자의 고유한 이미지 데이터셋(10~30개)을 학습시켜서 브랜드 정체성에 맞는 콘텐츠를 생성하도록 설계되었다고 하는데요! 자세한 활용과 가이드는 이 곳을 참고하세요.

좋은 점

아쉬운 점

학습 난이도 ⭐️ ⭐️

가격 정책

Adobe Creative Cloud 구독자들에게 제공

Firefly 바로가기

Creatie로 3D, 2D 아이콘 제작하고 편집하기

‘Creatie’는 디자인 시스템 구축에 도움이 되는 서비스는 물론 2024년 연말결산, 에디터 선정 5개의 툴에서도 소개할 만큼 개인적으로 관심이 많은 서비스예요. 피그마를 쓸 수 없다면, 현재를 기준으로 어떤 서비스를 쓸까?라는 질문에 가장 먼저 떠오를 만큼 활용도가 높기도 하고, 작년 하반기 업데이트를 통해 UI 생성 과정에도 인공지능을 사용할 수 있는 환경을 갖췄기 때문인데요. 이전에는 디자인 시스템 구축에 초점을 맞췄지만, 오늘은 AI를 활용해 원하는 조건에 맞는 아이콘 생성이 가능한 기능을 보다 자세히 살펴볼게요.

아이콘 어떻게 만들고 활용할 수 있을까?

차량 호출 서비스에 어울리는 아이콘을 만들어요

저는 3D 아이콘을 선택하고, 차량 호출 옵션에 사용할 아이콘을 만들어달라는 프롬프트를 입력했어요. 스타일은 미니멀을 선택했고 레퍼런스는 따로 업로드하거나 선택하지 않았죠. 스타일이 12개나 제공되기 때문에, 스타일 선택과 프롬프트만으로 어느 정도의 결과가 나올지 궁금했어요.

‘Creatie’에서는 선택한 스타일이나 레퍼런스와 관련 없이 늘 4개의 결과를 보여주는데요. 제가 색을 따로 지정하지 않았기에 각기 다른 컬러의 3D 차량 아이콘을 만들어준 모습이에요. 여기서 프롬프트를 수정하거나 다시 생성하기(Try again 버튼)를 선택하거나 캔버스(편집 화면)에 적용하는 것도 가능해요.

이번에는 검은색이라는 조건을 추가, 우버 택시의 아이콘을 레퍼런스로 추가해 봤어요. 스타일은 ‘미니멀’에서 ‘현실적인’으로 변경했고요. (결과가 아주 만족스러운 건 아니지만, 이건 프롬프트를 통해 조금씩 수정해 봐야 알 수 있을 것 같아요.)

그럼에도 불구하고, ‘Creatie’에서 아이콘 생성을 할 때의 장점은 배경 제거 등의 편집을 손쉽게 할 수 있다는 점인데요. 위 이미지의 왼쪽 차량과 스쿠터 오른쪽의 생성된 결과 중 두 번째 차량을 보면 모두 배경이 제거된 것을 알 수 있어요. 보통 아이콘을 투명한 배경으로 활용하기에 이런 기능은 아이콘 생성 과정에 많은 도움이 될 수 있죠.

게다가 ‘Creatie’는 작년 10월, UI 생성 기능을 베타로 공개해 화면을 생성한 뒤 아이콘 등의 변경 작업을 이어서 하기에 좋은 환경을 제공해요. 덕분에 AI를 활용한 여러 작업을 효율적으로 활용할 수 있죠. (화면이 좀 작은데, 직접 만든 차량 호출 아이콘을 ‘Comfort’ 버튼에 적용한 것을 확인하실 수 있어요)

못다한 이야기

작년 10월, 피그마 AI - 텍스트로 만드는 디자인편을 발행했어요. 피그마에서 '메이크 디자인(Make Design)' 기능을 'First Draft' 기능으로 이름을 바꿔 다시 공개했고, 핵심은 텍스트를 통해 화면을 만들어주는 내용이었는데요. 비슷한 시기에, ‘Creatie’ 역시 AI로 만드는 UI 기능을 공개했어요.

위 이미지는 ‘Ride-hailing app’s booking screen’라는 프롬프트를 입력, 생성한 화면인데요. 포함된 기능을 자세히 설명해 줌과 동시에 3가지 타입의 화면을 제공해 주는 모습이에요. 이 상태에서 컬러 등의 스타일을 변경할 수 있고, 프롬프트를 추가로 입력해 화면 전체 또는 일부를 수정하는 것도 가능해요. 최종 선택한 화면을 캔버스로 가져와 세부적인 편집도 가능하고요. 편집 시에도, 어울리는 컴포넌트 등을 AI가 제안해주기 때문에 정말 여러모로 작업하기 좋은 환경을 경험할 수 있어요.

좋은 점

아쉬운 점

학습 난이도 ⭐️

가격 정책

Creatie 바로가기

😎 이번주 눈에 띄는 AI 서비스

Minduck는 마인드맵 기반의 AI 생성 플랫폼으로, 사용자가 시각적 사고 도구를 활용해 아이디어를 정리하고 실행 가능한 결과로 전환할 수 있도록 돕는 서비스예요. 마인드맵을 통해 아이디어를 시각적으로 정리하고, 이를 기반으로 AI가 콘텐츠를 생성해줘요. 복잡한 아이디어를 명확하고 체계적으로 구조화할 수 있죠!

Minduck 바로가기

🔔 25년 2월 진행되는 PH 클럽 4기 주제는 ‘데스크 리서치’에요!

페르소나, PRD, 아이데이션을 주제로 진행한 앞선 기수 참여자들이 진행한 1주차 미션 모습이에요. 어떤 툴을, 어떻게 활용했으며, 무엇을 배웠는지에 대한 내용을 참여와 동시에 모두 확인하실 수 있어요!

4기는 '데스크 리서치와 AI'를 주제로 4주 동안 진행될 예정이에요. 실무에 AI를 어떻게 활용하면 좋을까?에 대해 고민중이라면, 함께 답을 찾아가는 시간으로 활용하실 수 있어요. 4기와 PH 클럽에 대한 자세한 내용은 아래 버튼을 클릭해 확인해주세요!

PH 클럽 4기 자세히보기

궁금한 툴, 주제가 있으신가요?

디자인 업무 효율을 높이는 툴 뉴스레터에서는 목업 생성, PRD 작성, 와이어프레임 제작, 프롬프트 공유 등 실무와 AI에 대한 내용을 꾸준히 발행하고 있는데요!

내년부터는 실무에서 사용하고 싶거나 생산성을 높이고 싶은 업무에 대한 고민을 먼저 듣고 이를 바탕으로 툴과 사용 방법을 적극적으로 풀어보려 해요.

예를 들어 나는 마케터로 일하고 있는데, 카드뉴스 제작이나 PPT 제작 그리고 블로그 글쓰기가 주요 업무다. 내용은 달라지지만, 각각의 업무 방법은 반복되고 있는데 이 시간을 줄이고 생산성을 높이고 싶다-가 내용이라면 각 업무에 어울리는 툴을 에디터들이 찾고 직접 써본 뒤 실무에 잘 쓸 수 있는 방법까지 고려하는 방법이에요!

관심이 있으시다면, 아래 링크를 통해 내용을 남겨주세요! 

의견 남기기

팁스터 신규 멤버십 오픈! (7일 무료 체험 가능)

팁스터 멤버십 7일 무료 체험

팁스터 뉴스레터의 공식 오픈채팅방에 참여해보세요!