🤖생성형 AI 툴로 디자인해보자!

바야흐로 AI 도구 춘추전국 시대. 아예 모르면 뒤쳐질 것 같은 위기감이 들었어요. 혼자 하는 것보다 함께 공부하면 더 좋을 것 같아서 링크드인으로 스터디 멤버를 모집했습니다. 2024년 5~6월에 진행한 생성형 AI 스터디 작업 내용과 자료를 공유합니다😃

이제는 진짜 써봐야 돼…! (Midjourney로 생성)

1주차

맨 처음 한 작업은 온보딩 UI에 사용할 일러스트 만들기! 이전에 다른 스터디할 때 만들어둔 화면 디자인이 있어서 비교적 수월하게 작업했어요. ‘결제’, ‘송금’, ‘투자’ 세 가지 키워드에 맞는 통일된 스타일의 이미지 3개를 만드는 게 목표였습니다.

원본 디자인

AI 도구로 몇 번을 거쳐 만든 기준 이미지

돌리고… 또 돌리고… 점점 제멋대로 날뛰기 시작

Adobe Firefly와 Midjourney로 여러 가지 이미지를 만들어봤으나, 생성할 때마다 약간씩 다른 느낌이 되는 바람에 목표를 달성하진 못했습니다. 결국 ‘결제’라는 같은 키워드의 다른 스타일 이미지 3개를 만드는 것으로 마무리했습니다. 이 부분은 좀 더 연구해야 할 것 같아요.

썩 만족스럽지 않은 결과

2주차

AI 도구로 레퍼런스 이미지와 바로 편집할 수 있는 UI를 만들어봤습니다. 트위치나 스팀처럼 어두운 배경에 게임 목록이 보이는 화면을 생각했어요.

트위치(좌), 스팀(우)

Visily, uizard, v0 등 다양한 UI 디자인 도구를 써봤지만 다소 아쉬웠어요. 실무자 입장에서 빨리 작업해야 되는데 결과물이 생성되는 속도가 느린 점이 가장 아쉬웠습니다. Midjourney는 다양한 레퍼런스를 만들기 꽤 좋았고, Firefly는 참조 이미지를 넣어주니까 그럭저럭 괜찮은 결과물을 생성했습니다. 프롬프트에 UI 조건(디자인 콘셉트, 레이아웃, 콘텐츠 내용 등)을 자세히 쓰면 더 좋은 결과물이 나올 것 같았어요.

Midjourney: 대략적인 비주얼 참고하기에 괜찮은 결과물을 만들어냄. 컬러 테마와 게임 느낌을 가장 충실하게 구현함.

Firefly: 맨 처음에 프롬프트만 입력했을 때는 휴대폰이 라인 일러스트처럼 생성되었음. 위에 Midjourney로 생성한 이미지를 참고용으로 첨부하니 의도에 좀 더 맞는 결과물이 생성됨.

uizard: 프롬프트로 만든 결과물 5개 중에 1개를 선택해서 사용할 수 있음. 디자인 툴로 사용하기는 아직 아쉬운 느낌.

Musho(피그마 플러그인): 무료로 1회만 사용할 수 있고, 모바일보다는 데스크톱 웹 페이지에 강점이 있어 보임. 결과물은 조금 아쉬웠지만 피그마에서 바로 편집할 수 있어서 편함.

v0: 비주얼 디자인보다는 와이어프레임 단계에 더 유용한 느낌. 처음 결과물은 그럭저럭 나쁘지 않은데 여기서 재편집하려면 공수가 많이 들 듯함.

Galileo AI: 채팅으로 만드는 방식이라서 챗 GPT 무료 유저가 대용으로 쓰기 괜찮음. 목업 안에 있는 이미지 퀄리티는 애매함.

3주차

이번에는 기획부터 UI 디자인까지 전체 프로세스에 AI 도구를 사용했습니다 (‘생성형 AI를 활용한 UX 디자인 워크숍’ 아티클 참고함). Chat GPT에 물어서 답을 얻으려면 유명한 서비스여야 할 것 같아서 유튜브 앱의 문제를 해결하는 것을 목표로 잡았습니다.

Chat GPT가 꼽은 가장 큰 문제 3가지 중에서 실사용자로서 공감되는 ‘추천 알고리즘의 정확성 및 다양성 부족’을 선택했어요. 그 뒤에 퍼소나, 고객 여정 맵, 해결 아이디어(기능과 플로우)를 연달아 질문했습니다. 답변이 애매하게 나오는 경우 채팅 창을 새로 만들어서 물어보고, 또 기존 채팅창에 이어 질문하는 작업을 반복했어요.

문제 3가지(1), 퍼소나(2), 여정 맵(3)

가설 검증(1), 기능과 플로우(2)

그다음 생성형 AI 디자인 툴을 활용해서 영상 추천 화면 아이디어를 얻었습니다.

Midjourney: 대략적인 레이아웃과 주제 추천에 활용할 부분 참고. 다크 모드를 잘 적용함.

Galileo AI: 관심사 설정하는 화면 레이아웃과 컴포넌트 참고. 디자인을 피그마에 바로 붙여 넣을 수 있어서 편함.

Wireframe designer(피그마 플러그인): 하루 10회 무료로 생성 가능. 주제 표현 부분, 관심 주제 추천 영상, 관심사 설정 화면 레이아웃 참고

이 과정에 서 얻은 레이아웃과 관심 주제 설정 아이디어를 기반으로 피그마 디자인 작업을 시작했습니다. 익숙하면서도 새로운 콘텐츠를 발견하게 하는 것이 디자인 목표였어요.

1차로 사용자가 관심 주제를 직접 설정하는 화면을 생각해 봤으나, 귀찮아서 안 할 것 같다는 생각이 들었습니다.

1차 디자인

그래서 2차는 홈을 스크롤 하다가 자연스럽게 관심 기반 콘텐츠를 발견하는 방식으로 만들어봤어요. 시청 데이터 기반으로 주제를 제안하거나 개인 정보 기반으로 영상을 추천합니다. 글로벌 관심사 영상 추천은 번외인데, 개인적으로 다른 나라의 다양한 영상을 보고 싶은 니즈가 있어서 시도해 봤어요. 국가 및 언어를 바꿔도 홈 화면에 추천 영상이 당장 바뀌지 않았기 때문에 이렇게 슬쩍 보여주는 방법도 괜찮겠다고 생각했어요.

2차 디자인: 시청 데이터 기반 주체 추전

2차 디자인: 개인 정보 기반 영상 추천, 관심 주제의 글로벌 영상 추천

다만 문제 정의 단계에서 Chat GPT를 활용할 때 질문에 따라 답변이 편향되거나 정확하지 않을 수 있기 때문에, 실제 사용자 의견도 수집해서 교차 검증을 해야 할 필요가 있겠다고 생각했습니다. 그리고 솔루션 아이데이션과 디자인 작업할 때 AI 툴로 시간을 단축할 수 있었어요.

4주차

이번에는 아이콘 리소스와 실사 이미지 제작 2가지를 해보았는데요! 글이 길어지니 최대한 핵심만 적어봤습니다😂

2D, 3D 아이콘 생성

다양한 도구로 금융 테마 아이콘을 만들었습니다.

Firefly: 컬러 없게 해달라니까 알록달록하게 만듦… 2번째까지 하고 크레딧이 없어서 중단.

Midjourney: 가장 조건에 맞게 많이 뽑아옴. 벡터 파일로 추출할 수 있으면 최고일 듯.

Tripo: 오브젝트의 퀄리티와 각도가 애매함. 첨부 이미지를 넣으면 너무 비슷하게 하나만 만들어서 답답함.

Leonardo AI: 라인 아이콘보다는 덩어리감이 있는 이미지를 만드는 데 유용한 듯.

Creatie: 2D와 3D 아이콘을 다양한 스타일로 만들 수 있음. 다만 속도가 느리고 만들다가 중단되는 경우가 종종 있음. 벡터와 Png 파일을 바로 작업 화면에 붙여 넣을 수 있어서 좋음.

전반적으로 미드저니가 제일 만족스러웠는데요! 벡터 파일 추출이나 배경 제거 기능이 추가되면 진짜 좋을 듯합니다.

️여성 모델 사진 만들기

화이트 원피스를 입은 여성 모델 사진을 만들었어요. 배경, 포즈, 의상, 얼굴 등 전반적인 퀄리티와 베리이션은 Midjourney가 압도적으로 좋았습니다. 다른 툴은 모델에 집중된 느낌이었고, Leonardo AI도 꽤 괜찮았어요.

Midjourney: 다양한 조건으로 퀄리티 높게 베리에이션 함. 가장 만족스럽게 사용함.

Generated photos: 기본으로 만들어지는 얼굴이 좀 안 예쁜 느낌이고, 배경 조건(계단)을 잘 인식하지 못함.

Openart: 모델 얼굴이 예쁘지만 옷이 묘하게 촌스러운 느낌.

Leonardo AI: 다양한 테마와 이미지 비율을 골라서 만들 수 있음. 어떤 테마는 합성 느낌이 너무 많이 나서 아쉬움.

스터디를 통해 다양한 AI 도구를 써보면서 사용 방법과 특징을 탐구해 봤습니다. 다들 열정적으로 참여해 주셔서 양질의 정보를 주고받을 수 있었어요. 어떤 도구는 제가 아직 익숙하지 않아서 아쉽게 느껴진 부분도 분명히 있을 것이기 때문에, 더 공부하면 디자인할 때 큰 도움이 될 것 같았습니다.
한편 저작권과 윤리적인 부분이 염려되었습니다. 특히 실무에 활용한다면 저작권을 꼼꼼하게 체크할 필요가 있어 보였어요. 메타 서비스(인스타그램, 페이스북)에 ‘Made with AI’ 표시를 하도록 권장하고 있는데요. 앞으로 디자인에도 이런 부분이 적용되어야 할지 궁금해졌습니다.
개인적으로 비용을 지불하고 계속 사용하고 싶은 AI 도구는 Midjourney와 Chat GPT였어요. 이번에는 무료로 Chat GPT를 사용했지만, 다른 분이 유료 버전을 사용하는 걸 보니 써보고 싶어지더라고요ㅎㅎ

👇더 많은 정보를 보고 싶다면 클릭!

• 생성형 AI 디자인 스터디 작업 더 보기
• Generative AI tools & Use cases