brunch

You can make anything
by writing

C.S.Lewis

by 태석 Feb 02. 2024

미드저니를 활용한 3D 그래픽, UIUX 적용

미드저니 연습 + 카드 UI 구성

저번 화해 서비스 운영 배너 그래픽을 만들어 보면서 그래픽 제작 프롬프트에 흥미가 생기기 시작했다 더불어 앱 디자인을 할 때 3D 그래픽을 적용하고 싶은 경우가 있지만, 나는 시네마 4D나 블렌더 툴을 다루는 게 매우 미숙하여 내가 원하는 그래픽을 만들 수 없어, 항상 3D 그래픽에 대한 갈증이 있는 상태였다.

나의 갈증을 해소하고자 각종 자료를 찾아보면서 조금 더 미니멀하고 심플한 3D 그래픽을 만들 수 있는 자료들을 수집해 오던 중 이번에 유튜브에서 활동하시는 '디자인하는 AI'님의 자료를 참고해 3D 그래픽을 만드는 프롬프트를 학습할 수 있었다.


이번 장에서는 미드저니로 제작한 3D 그래픽을 카드 컴포넌트에 적용한 것을 소개해볼 예정이다.



네 번째 서비스는 '발로소득' 서비스다.
발로 소득 챌린지 스크린, 3D Esset


발로소득은 2023년 구글 플레이스토어에서 올해를 빛낸 앱으로 선정될 만큼 많은 사용자 층이 사용하고 디자인 또한 일관된 3D 그래픽, 완성도 있는 스크린 디자인과 사용자들의 건강한 라이프스타일과 소득 증진을 도하게 해주는, 생활형 앱테크 서비스다.


해당 서비스 클론 디자인을 진행하면서 서비스에 들어가는 3D Esset들을 미드저니로 제작해 보고 카드 컴포넌트에 적용해 보면 미드저니로 3D 그래픽을 만드는 연습이 많이 될 거 같아 진행을 하게 되었다.

(발로소득 인스타 콘텐츠 24.02.03 업로드 예정)





총 9개의 그래픽을 만드느라 하나하나 모두 어떤 프롬프트로 도출했는지 소개하면 내용이 길어질 거 같아서 01/02/03번 스타일 중 대표 이미지 하나의 프롬프트를 작성해 보려 한다.


번호 대로 같은 이미지 프롬프트를 사용해 일관된 스타일을 도출하고자 했기에 번호에 맞게 이미지 프롬프트와 키워드 프롬프트도 모두 동일하고 어떤 개체인지에 대한 내용만 다르기에 하나만 소개하면 나머지는 개체 이름만 바꾸면 된다.



01. Style


https://s.mj.run/Yadwf2elAMw a single 3d icon of Calculator, tiny, toycore, minimalism, pastel purple color, 3d clay render, soft lighting, soft and rounded forms, no fine detail, white background --no shading detail --iw 1.8 --v 6.0

01번 스타일은 초록색과 보라색이 사용된 그래픽 이미지 프롬프트를 첨부하고, 미니멀한 클레이 3D 그래픽을 도출할 수 있었다. 이중 4번째 이미지를 사용했고 포샵으로 가져와 동전에 달러를 합성하고 누끼 작업을 진행했다.

02. Style


https://s.mj.run/rOSdpbEAiXM a single 3d icon of Water bottle, tiny, toycore, minimalism, pastel blue color, 3d clay render, soft lighting, soft and rounded forms, no fine detail, white background --no shading detail --iw 0.8 --v 6.0

해당 이미지 프롬프트는 집 모양의 이미지가 들어가서 그런지 도출되는 물병에 계속 집의 형상이 도출돼서

--iw(imgae weight)를 0.8까지 줄여서 사용하니 집의 모양이 점차 사라져 3번 이미지를 도출할 수 있었다.


03. Style


https://s.mj.run/dZZVr6aAiqk a single 3d icon of flowers in a pot, tiny, toycore, minimalism, pastel green color, 3d clay render, soft lighting, soft and rounded forms, no fine detail, white background --no shading detail --iw 1.8 --v 6.0

확실히 '3d clay render' 키워드가 조금 더 귀여운 느낌을 주고, 광원을 강하게 사용하지 않아서 시각적으로도 안정감을 주는 거 같다. 해당 프롬프트를 통해 도출한 이미지 중 3번을 선정해 사용했다.



이렇게 도출한 3D 그래픽을 발로소득 카드 컴포넌트에 적용하면 다음과 같은 디자인이 나온다.



아직까지는 일관성 있는 3D Esset을 미드저니로 도출하는 데 미숙한 점이 있는 거 같다. 그래도 내가 원하는 형상의 이미지를 도출하는 부분은 많이 개선이 되어서 이번에는 시행착오를 많이 겪지 않고 진행할 수 있었다.


다음에는 글래스모피즘 그래픽을 미드저니로 만들어 앱 디자인에 적용해 보려 한다.

브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari