brunch

You can make anything
by writing

C.S.Lewis

by 태석 Feb 27. 2024

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

미드저니 연습 + 탭 컴포넌트 구성

야놀자 서비스에 진입하면 시선에 먼저 보이는 요소가 있었다. 바로 서비스 스크린 상단에 위치한 탭 버튼에 사용된 아이소메트릭 그래픽 에셋이다.


해당 에셋은 블루 컬러와 야놀자의 서비스 컬러를 사용해 가시성이 좋으며, 미니멀하고 직관적인 형태감으로 사용자에게 선택지를 제공하고 태스크 수행에 있어 방향성을 제공한다.

야놀자 상단 탭 컴포넌트


해당 그래픽 에셋을 보면서 아이소메트릭의 3D 그래픽도 미드저니를 활용해 제작할 수 있을까 생각이 들어 이번에 미드저니를 활용해 야놀자의 그래픽 에셋을 대체해 보았다.


지난 미드저니 3D 시리즈에서 모두 Clay Render를 활용해 라이팅이 약하고 미니멀한 느낌을 도출했다면, 이번엔 Octane Render 키워드를 활용해 조금 더 라이팅이 강하게 사용해 명확히 강조하고 형태감을 직관적이고 미니멀하게 구성을 해보고자 했다.



일곱 번째 서비스는 '야놀자'


이번 장에서 Octane Render 키워드를 사용하고자 했던 이유는 기본적으로 그래픽의 상단 배치와 스크린에서 차별적인 형태감을 통해 충분히 강조가 되고 있으나, 특정 스크린 이동이나 탐색 없이 사용자가 원하는 정보를 빠르게 추리고 탐색할 수 있는 중추적인 역할을 하는 컴포넌트이기에 조금 더 그래픽에 강조점을 두고자 Octane Render 키워드를 사용하고자 했다.





이번에 사용된 프롬프트는 형태, 스타일, 컬러, 라이팅 등의 통일성을 위해 다양한 키워드 프롬프트를 입력하는 대신 일관된 키워드 프롬프팅을 통해 비슷한 아웃풋을 도출했다.



Prompt_01


https://s.mj.run/54hMcrsWGkI single 3d icon of hotel resort, minimalism, vivid blue and pink, octane renderGlasmorphism styleIsometric, soft lighting, soft and rounded forms, no fine detail, white background --no shading detail --iw 0.3 --v 6.0

hotel resort / home and palm tree / three people / motel

해당 스타일에선 파란 글씨 부분을 내가 도출하고 싶은 개체 단어만 입력해서 도출한 결과물이다. 적절한 이미지 프롬프팅을 입력하고 기본적인 키워드 프롬프트의 뼈대를 잡으면 어느 정도 일관성 있는 결과물을 도출해 낼 수 있다.





Prompt_02


https://s.mj.run/54hMcrsWGkI single 3d icon of GPS symbol on the road, minimalism, vivid blue and pink, front view, octane render, Glasmorphism style, Isometric, soft lighting, soft and rounded forms, no fine detail, white background --no shading detail, Shield shape --iw 0.3 --v 6.0

plane / wheeled suitcase / GPS symbol on the road / Hot air balloon

이번 프롬프트에서 다른 점은 View의 차이다. 기존에는 아이소메트릭 프롬프트를 통해 입체적인 형태를 도출했다면, 이번에는 도로+GPS와 열기구가 앞을 보고 있는 형태가 필요해 Front view 키워드를 추가해 각도를 정면으로 바꿔 결과물을 도출했다.







미드저니는 뒤에 사용되는 비율 파라미터(--ar 0:0)를 사용하지 않으면, 디폴트 5:5(1024px x 1024px) 사이즈로 도출해 준다. 미드저니가 도출한 3D 에셋을 큰 비율로 봤을 때는 디테일이나 라이팅, 컬러 등이 엉성한 부분도 있으나, 앱 스크린에 적용될 때는 사이즈가 축소되어 적용되다 보니 자연스럽게 그래픽 에셋으로 사용해도 될 정도로 일관되고 완성도 있는 에셋을 적용할 수 있다.


아직 나의 프롬프팅 실력이 부족해 형태적인 완성도가 매우 떨어지지만, 꾸준히 사용해 실력을 높여 실제 프로젝트에도 적용해보고 싶은 생각이 든다.

(사용하게 되면 꼭 브런치에 공유하겠습니다!)

매거진의 이전글 미드저니를 활용한 '29CM' 카드 컴포넌트 적용
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari