안녕하세요 DMeloper입니다.
오늘은 "게임 UI 디자인도 AI한테 맡기면 되는 시대"라는 영상과 함께 인사드립니다.
게임 UI 디자인에 AI를 활용했던 제 경험을 공유해드리고자 하는데요,
저번 글처럼 내용이 꽤 많아서 핵심만 작성하겠습니다 ㅎㅎ
UI 제작용 이미지 생성하기
UI를 만들어 보겠다고 작정은 했지만 막상 시작하려고 하니
프롬프트를 어떻게 작성해야 할지 막막했습니다.
그래서 저는 미드저니의 'Describe' 기능을 사용했습니다.
유니티 에셋스토어에서 실제로 판매되고 있는
Cartoon GUI Pack의 미리 보기 사진 일부를 미드저니로 가져와서,
미드저니의 명령어 '/describe'을 사용해 프롬프트를 생성했습니다.
생성한 프롬프트를 그대로 입력해 새로 생성한 결과물입니다.
원래 느낌에서 완전히 벗어나긴 했지만 UI 요소들을 생성할 수 있어서 그냥 이대로 진행하였습니다.
( 사실 그냥 저 귀여운 달에 꽂혀 버렸습니다. )
저처럼 프롬프트를 작성하기 막막할 때는
미드저니의 Describe 기능을 사용해 보는 것을 추천드립니다.
포토샵을 사용해 정교하고 대칭을 이루는 이미지 만들기
AI가 생성한 UI 요소가 완벽히 대칭을 이루지 않는 경우도 있고,
UI 이미지를 정교하게 추출하기도 쉽지 않습니다.
이 문제를 해결하기 위해 포토샵의 도형 툴을 사용하였습니다.
추출하려는 이미지에 맞는 도형을 꺼내온 뒤에 원하는 위치에 생성해 줍니다.
( Tip. 외곽선만 나타내기 위해 Fill(채우기)은 꺼준 뒤 사용합니다. )
이때, 사각형 도형은 가장자리를 둥글게 만들 수 있는 옵션으로 이미지에 맞게 조정해줍니다.
( '속성(Properties)" 창 중간에 가장자리 버튼을 꾹 누른 채로 값을 변경 가능 )
도형을 이미지에 맞게 조정했다면
도형이 있는 레이어 미리 보기를 Ctrl + 클릭하여 선택영역을 만들어줍니다.
선택된 영역을 배경 이미지에서 추출해 줍니다.
이 추출한 이미지에 필요 없는 부분들을 제거해야 합니다.
이 부분은 포토샵의 Fill 기능을 사용해 손쉽게 작업할 수 있습니다.
( !중요! Fill 기능을 사용하려는 레이어를 선택하는 것을 잊지 마세요 )
지우고자 하는 영역을 지정해 주고
Shift + F5로 Fill 기능을 활성화한 뒤 OK를 눌러주면 끝!
이렇게 완성된 비어있는 패널은 이후 오른쪽 사진처럼 다양한 메뉴창을 구성하는 요소로 사용됩니다.
이 도형툴을 이용하는 방법만 알고 있으면 웬만한 UI 요소들을 AI가 생성한 이미지에서 추출해 줄 수 있습니다,
이미지 업스케일 하기
이전 글에서는 크게 중요한 작업이 아니어서 생략하였지만
UI에 있어서 이미지의 화질은 생명과도 같기 때문에
제가 사용하는 이미지 업스케일 사이트를 소개해 드리겠습니다.
그동안은 waifu2x를 사용했었지만
최근에 애용하고 있는 사이트입니다.
https://imgupscaler.com/ko
업스케일 사이트가 워낙 많아서 더 좋은 게 있을 수도 있지만
일단은 성능도 좋고 용량도 많이 압축해 주기 때문에 잘 사용하고 있습니다.
아래는 비교 사진입니다.
UI 컨셉에 딱 어울리는 아이콘 이미지 생성하기
UI를 구성할 때 아이콘을 빼놓을 수 없겠죠?
특히 전체적인 UI 컨셉에 어울리는 아이콘을 생성하는 것이 중요합니다.
제가 사용한 방법은 맨 처음 기반이 되는 UI 이미지를 생성할 때 사용했던
프롬프트를 그대로 사용하면서 아이콘 이름만 추가로 넣어주는 것입니다.
물론 이때 아이콘을 생성할 때 필요 없는 프롬프트는 제거해 주고,필요한 프롬프트는 추가해 주는 식으로 작업해 줍니다.
제가 만들다 보니 아이콘을 생성할 때 유용한 프롬프트는
"Icon Asset"과 "Icon Pack" 입니다.
예시로 프롬프트를 위와 같이 입력해 주면
이러한 이미지를 생성할 수 있습니다.
또 이렇게 원하는 아이콘 이름을 프롬프트 사이에 집어넣어 주기만 하면
이렇게 원하는 이미지를 생성할 수 있습니다.
작성하다 보니 너무 길어져서 이만 줄이겠습니다.. ㅎㅎ
▼ 보다 자세한 내용은 아래 포스트에서 확인해 보실 수 있습니다!
https://blog.naver.com/demeloper0416/223196948329
아래 링크에서 위 프로젝트를 직접 플레이 해보실 수도 있어요!
https://play.unity.com/mg/other/webgl-a
( PC 환경을 권장합니다 )