미드저니를 활용한 '화해' UIUX 그래픽 제작
미드저니 연습 + 운영 배너 분석
이번에는 저번 콘텐츠에서 회고했듯 그래픽 일러스트와 3D 디자인 에셋을 미드저니로 제작해 보기 위해 그래픽을 만드는 프롬프트와 다양한 사례를 밴치마킹하고 연습을 시작했다.
처음에는 그래픽을 활용해 설날과 관련된 콘텐츠를 만들어 보려고 했으나....
한복과 설날의 키워드를 조합해 프롬프팅을 하니 중국을 연상캐하는 이미지를 도출해 주었다. 이 과정에서 얼마 전에 학습한 --no 파라미터를 사용해 --no China를 사용했음에도 한국스러운 이미지가 나오지 않아 많은 시행착오를 겪었다.
그나마 덜 중국스럽고 한국스러운 느낌을 도출해 낸 결과물이다. 아직까진 그래픽과 일러스트를 만들고 특정 분위기를 연출하기 위해선 다양한 프롬프트를 참고하고 연습해 봐야겠다.
Winter scene featuring individuals wearing Hanbok, rendered in 3D Octane Render. Traditional Korean attire in a snowy setting, digital rendering style, inspired by Korean traditions --s 750 --no china --v 6.0
그래도 이 과정을 통해 미니멀하고 완성도 있는 그래픽을 만드는 프롬프트와 Stylize 파라미터를 어떻게 사용해야 하는지 감을 잡을 수 있었다.
그렇게 해서 이번에 연습한 그래픽 프롬프팅을 적용할 서비스를 찾다가 발견한 서비스는 다음과 같다.
세 번째 서비스 '화해'
화해 서비스는 화장품과 관련된 이미지와 자체적으로 제작한 2·3D 그래픽을 활용해 운영배너를 설계했다. 배너의 사이즈는 대략 16:9 비율로 안드로이드 1 배수 기준 360x154 dp의 사이즈로 잡아 메인 배너에 많은 강조점을 두기보단 하단의 탭 버튼과 상품 정보들과 적절한 벨런스를 맞춘 심플한 스타일로 구성되어 있다.
화해의 운영배너는 3가지 방식으로 디자인되어 있다.
마스크 형식: 로고 심벌의 둥근 쉐입을 계승한 원형 마스크 + 그래픽 디자인
스튜디오 컷 형식: 제품 스튜디오 촬영본과 합성 및 보정
누끼 형식: 상품 이미지를 누끼 처리하여 배너에 합성 및 보정
각기 다른 형식으로 운영배너를 디자인했지만 그 안에 들어가는 요소들에는 공통된 가이드라인을 따르고 있다.
01. 이미지, 그래픽의 위치
화해는 안정적인 벨런스를 위해 이미지와 그래픽의 위치를 좌측으로 통일시켜 텍스트와 이미지가 겹쳐 시인성이 떨어지는 이슈를 완벽하게 잡아내고 있었다. 사용자가 서비스에 진입해 배너의 텍스트를 읽고 그에 맞는 이미지와 그래픽을 확인하는 플로우로 형성되어 있다.
02. 텍스트 및 페이지네이션
화해는 가독성이 좋은 'Pretendard' 폰트를 배너에 적용했으며, Title 폰트 20dp, body 폰트 12dp를 사용해 명확한 강약을 부여했다. 보편적으로 우측 하단에 사용되는 페이지네이션은 좌측 상단에 배치하고 우측 하단은 광고를 알리는 레이블을 사용하고 있다.
03. 배경 및 텍스트 컬러
운영배너의 BG는 Solid / Gradation 방식을 사용하고 있으며 BG 컬러에 따라 텍스트의 컬러를 화이트, 블랙 두 가지를 사용하고 있다. 화해는 이미지 영역과 텍스트 영역이 확실하게 구분되며 겹치거나, 배경과 텍스트의 대비비가 접근성 기준을 위배하는 케이스가 나오지 않는 것을 보면, 명확한 가이드를 지켜 디자인 후 서비스 UI에 노출시키는 거 같다.
이러한 화해의 운영배너 특징 파악 후, 안정적으로 서비스 UI에 적용되어 있는 운영배너에 각 요소들 이미지 특징을 캐치하고 기존과 이질감 없는 이미지를 미드저니를 활용해 도출해 봤다.
01. 프롬프트
https://s.mj.run/0ozvBY5IeaI High five two hand, + pixar, advertising, Simple, Simple bg, Minimal, Octane, Unreal Engine 5, 3d, illustration --iw 1.5 --s 750 --v 6.0
그래픽 에셋을 도출할 때, 심플하고 간결한 프롬프트를 작성하는 것이 큰 도움이 되는 거 같다. 인물 이미지를 도출하기 위해 다양한 앵글과 카메라 종류를 입력했으나, 그래픽을 제작할 땐, 간결한 키워드 프롬프트와
스타일라이즈(s), 이미지 웨이트(iw) 파라미터를 활용하는 것이 완성도 있는 이미지를 도출해 낼 수 있는 거 같다.
해당 이미지 중 2번째 이미지를 업스케일링 해 포토샵으로 가져와 누끼를 따고 보정을 진행했다.
02. 프롬프트
https://s.mj.run/RBlZST4oeL4 Frothy image of one cosmetics immersed in bubbles. Soft lighting, simple bg, photography, hasselblad x1d --s 200 --no flower --v 6.0
거품에 감싸져 있는 화장품 이미지를 만든 프롬프트다. 이번 프롬프트 또한 심플하고 간결하게 작성했으며,
제품 이미지에 특화된 카메라인 'hasselblad x1d'를 사용했다. 코스메틱 키워드를 넣으니 미즈저니가 꽃을 계속 함께 생성해 --no flower 파라미터를 입력해 심플한 배경에 거품과 화장품 이미지를 도출할 수 있었다.
해당 이미지도 포토샵으로 가져와 비율을 조정하고 합성을 진행해 배너에 맞게 재가공했다.
미드저니+포토샵 인공지능은 뭐든 만들 수 있을 거 같다...
03. 프롬프트
https://s.mj.run/lVNnWMr1V0g Three Thin and cards, Dynamic composition, Simple, solid bg, Minimal, Octane, Unreal Engine 5, 3d, illustration --s 750 --no people --iw 2 --v 6.0
해당 이미지를 도출하는 것이 가장 까다로웠다. 다이나믹한 구도에 쿠폰 카드를 만들어야 하는데 초반에 몇몇 시행착오를 겪고 다이니막 한 구도의 이미지 프롬프트를 추가 후 --iw 2로 강하게 파라미터를 주니 이미지와 비슷한 카드 그래픽을 도출할 수 있었다.
카드 그래픽 또한, 포토샵으로 갖고 와 누끼 작업 후 할인율을 기입하고 합성을 진행해 배너에 적용할 수 있었다.
확실히 인물 이미지를 만드는 것보다 내가 원하는 그래픽을 도출하는 것이 상당히 까다로운 거 같다. 이번 프롬프팅을 통해 간결하고 심플한 키워드 프롬프트 작성과 파라미터를 적재적소에 어떻게 활용해야 할지 감을 잡을 수 있었으며, 시간은 좀 걸리지만 원하는 그래픽 이미지를 만들 수 있다는 자신감이 생기기 시작했다!
다음에는 운영배너에 들어가는 이미지가 아닌 웹 사이트에 들어가는 배너나 운영배너 클릭 시 보이는 프로모션 상세페이지에 들어가는 그래픽+텍스트 합성 시안을 제작해 봐야겠다는 생각이 든다.
