AI로 픽셀 게임같은 UI 디자인하기
AI 툴 미드저니로 UX/UI 디자인하기
최근 디자인 작업을 진행한 서비스는 개발자들을 위한 아웃소싱 플랫폼입니다. 퍼소나를 설정할 때 1)게임을 좋아하며 2)리워드에서 동기부여를 느끼는 3)다양한 프로젝트에 참여하고 싶은 개발자라고 정했습니다. 이에 따라 게임과 같은 UI와 UX설계를 하고자 했습니다.
디자인 컨셉은 A/B 테스트를 거쳐 다크모드로 디자인하기 좋은 우주 배경의 픽셀 아트로 정했습니다.
게임같은 느낌을 주려면 게임과 비슷한 배경 이미지를 쓰는 것이 좋겠죠. 우주 느낌의 픽셀아트 디자인은 몇 번의 미드저니 프롬프팅을 통해 뽑을 수 있었습니다.
Prompt
in the space station, at the middle there is a big window towards space with upper surface of the planet taking 10% of the space of the window, and behind the planet there are just empty space, there are spaceship equipments on the side of the wall, make sure all the elements are highly depicted, high resolution, 8-bit pixel art --sref https://s.mj.run/_1A2rGKRJNM
우주 정거장 픽셀아트 이미지배경은 비교적 쉽게 뽑았지만, 더 어려웠던 점은 픽셀아트 스타일의 다양한 요소를 뽑는 것이었습니다. 게임으로 치면 아이템이라고 할 수 있겠네요.
예를 들어, 개발자들을 위한 플랫폼인만큼 개발 카테고리를 나누어야 했습니다. 그렇게 나눈 9개의 개발 카테고리(iOS, AOS, 웹 개발, 블록체인 등)는 우주 위 떠있는 행성으로 표현하고자 했는데요.
각 개발 카테고리별로 어떻게 표현하면 좋을지 컨셉을 정하기 위해 챗GPT로 브레인스토밍을 하고, 미드저니 프롬프트를 뽑아달라고 한 후 미드저니에 돌려 보았습니다.
1번 행성은 웹 개발, 2번 행성은 안드로이드 개발 등 각 행성이 하나의 카테고리를 상징하는데요. 문제는 각 행성이 뜻하는 바가 무엇인지 파악하기 어렵다는 것이었습니다. 챗GPT 스토어에는 미드저니 프롬프트를 뽑아주는 GPT가 있는데요. 이를 사용하지 않고 기본 GPT에 입력하니 미드저니 프롬프트에 적합하지 않은 형식(요소가 너무 많이 나열)이 된 것 같았습니다. 챗GPT를 통해 미드저니 프롬프트를 뽑으실 분들은 스토어에서 하단의 GPT들을 사용하시기를 추천드립니다.
대안으로 챗GPT가 써 준 프롬프트에서 행성을 하나씩 따로 분리해 이미지를 뽑아보기로 했습니다. 그러나 여전히 너무 많은 요소를 담고 있어 표현이 쉽지 않습니다.
Prompt
a single planet in 8-bit pixel art style representing Android Development. The planet should be primarily green with a mechanical look. It should feature giant neon green glowing Android logo at the center and smartphone-shaped mountains on the surface, making it look tech-heavy and advanced. The background should be transparent.
네온그린, 안드로이드 로고 센터에 배치, 스마트폰 모양의 산, 발전된 기술의 느낌(?) 등 다양한 키워드가 들어 있습니다. 미드저니가 추상적인 느낌도 잘 반영할 수 있다고는 하지만 내가 어떤 것을 그리고 싶은지 명확하지 않으니 뽑히는 이미지도 맥락 없이 나오는 느낌이었습니다.
차라리 과정을 바꿔서 각 카테고리를 나타낼 수 있는 하나의 키워드를 잡고, 그 하나만 픽셀 아트 행성에 잘 드러날 수 있도록 하기로 했습니다. iOS 개발의 경우 애플 로고입니다.
붉은 애플 로고가 나온 게 아쉬워서 이 둘을 한 번 섞어보았습니다.
Prompt
a single planet in 8-bit pixel art style. The planet should be primarily white and silver with a sleek and modern look. The equator should have a smooth, polished band, and the eastern hemisphere should have a subtle gradient of white to silver. giant apple logo taking 80% of the planet at the center, 8-bit pixel art, no background
괜찮은 로고가 나왔습니다. 블록체인은 노란 행성에 커다란 블록체인 로고, 안드로이드 개발은 안드로이드 캐릭터를 활용해 행성 느낌의 이미지를 뽑았습니다.
이처럼
1)챗GPT와 구글 서치를 통한 브레인스토밍
2)어떻게 해당 카테고리를 행성으로 표현할지 핵심적인 아이디어 정리
3)미드저니를 통해 반복 생성
위와 같은 과정을 거쳐 9개의 행성을 뽑아 보았습니다. 아래는 행성 누끼를 딴 후 실제 화면에 올려 본 결과물입니다.
사실 안드로이드의 눈이나 더듬이(?) 같은 부분은 도저히 미드저니로 뽑히지 않아서 직접 픽셀아트 전용 툴(Aseprite)로 그려 넣기도 했습니다. 또, 시행착오도 많이 겪었는데요. 각 개발 카테고리를 어떻게 표현할지 고민하는 과정이 정말 길었고 이미지도 수없이 뽑았습니다.
예를 들어 게임 개발의 경우 우주복을 입은 사람이 게임 컨트롤러를 들고 있게 할까? 큐브 모양의 행성을 만들어 볼까? 하는 다양한 시도 끝 우주 배경과 어울리면서도, 게임을 플레이하고 있다는 느낌을 줄 수 있는 우주선으로 정하게 되었습니다.
이미지를 뽑는 데 있어서 가장 어려웠던 과정이자 핵심 단계는 역시나 내가 무엇을 표현하고 싶은지를 정하고, 그것을 어떻게 표현할지 찾는 과정이었습니다. 평소 이야기하고 싶은 것을 시각적으로 표현하는 연습을 해 보는 것이 중요할 것 같습니다.
그래도 미드저니를 통해 쉽게 여러 가지 시도를 해 보고, 픽셀아트를 따로 배우지 않았어도 빠르게 픽셀아트 느낌의 디자인 결과물을 낼 수 있었다는 점에서 AI 동료에게 고마움을 느낍니다.
