미드저니를 활용해 올리브영 UIUX 활용하기
미드저니 연습 + 운영 배너 분석
미드저니를 활용해서 인물을 만드는 게 가장 신기하고 재밌게 느껴지는 거 같다. 앵글과 카메라에 따라서 인물의 이목구비와 톤 앤 매너가 달라지는 부분이 나에게 흥미롭게 다가오며, 비싼 모델 대신 생성형 AI를 활용해 저렴하게 모델이미지를 활용해 프로모션 운영이 가능하다는 점이 현재 시장에서 가장 자주 사용되는 케이스이지 않을까 라는 생각이 든다.
AI를 활용한 섬성생명 광고 / 출처: 경향신문이에 따라, 이번 연습도 저번 무신사와 같이 인물 2명과 제품사진 하나를 연습하고자 다양한 서비스를 찾다가 다음 서비스를 선정하게 되었다.
두 번째 서비스는 '올리브영'
올리브영의 운영배너는 인물 이미지형과 상품 스튜디오컷으로 구성된 이미지를 통해 프로모션 정보를 전달하고 있으며, 배너의 사이즈는 각 OS 해상도에 맞는 가로 폭에 맞춰 4:3 비율로 설계해 안정적인 벨런스를 갖추고 있다.
* 안드로이드 1 배수 기준 360x274 dp
다양한 상품과 모델이 사용된 올리브영의 운영배너를 살펴보면 총 4가지의 특징을 살펴볼 수 있었다.
01. 좌측 무게중심
올리브영은 앞서 언급했듯 인물 이지미와 상품 스튜디오 컷을 활용해 운영 배너를 설계했다. 4:3 비율에 맞게 좌측은 텍스트를 배치하고 무게중심을 좌측으로 잡은 이미지를 배치해 시각적인 벨런스와 시선의 흐름을 안정적으로 체계화한 것을 볼 수 있다.
02/3. 텍스트 영역+프로모션 배지
텍스트 영역은 사용자의 시선의 흐름(좌에서 우, 위에서 아래)을 고려하여 좌측에 고정영역으로 배치했다. 여기서 사용된 폰트는 각 OS 시스템 폰트(Noto Sans Cjk KR)를 사용했으면 타이틀의 폰트는 20px, 캡션 폰트는 12px을 사용해 시각적인 위계질서를 부여해 줬다.
* 안드로이드 OS 1 배수 기준
390x844(ios 12 pro)는 다음과 같은 스펙으로 형성
올리브영의 배너는 좌측 상단에 프로모션과 관련된 그래픽 배지를 배치할 수 있는 고정 영역도 확보해 두었다.
04. 컬러 배리에이션
올리브영은 배너의 텍스트 시인성을 위해 이미지 선정 과정에서 단색 혹은 복잡한 요소가 없는 이미지를 사용하며 배경 컬러에 따라 텍스트를 블랙과 화이트 배리에이션을 하여 텍스트 시인성을 확보하고 있다.
+Bad Case
하지만, 올리브영의 운영배너 특정 이미지는 이슈가 생길 수 있는 요소를 내포하고 있다.
첫 번째 이미지는 이미지의 무게중심을 좌측으로 잘 잡았으나 배경에 복잡한 요소들이 많이 포함되어 있어 텍스트의 가독성이 떨어지고 있다.
두 번째 이미지는 이미지의 무게중심이 좌측에서 벗어남에 따라, 텍스트와 인물의 이미지와 겹쳐 텍스트의 시인성이 떨어지는 이슈가 생기고 있다.
올리브영은 포토샵이나 기타 다른 툴에서 제작한 운영 배너를 이미지 형식으로 처리하는 것이 아닌, 이미지를 넣고 텍스트는 서비스 UI요소로 사용하고 있는데 이 과정에서 이슈가 발생하는 거 같다. 포토샵으로 이미지를 처리하면 해당 툴에서 배경의 복잡한 요소들을 없애거나 이미지와 텍스트를 겹치지 않게 처리가 가능하나, 올리브영의 방식으로 운영배너를 구성한다면, 다음과 같이 Bad Case가 발생할 수 있다.
이런 Bad Case를 기피하고 올리브영에서 사용하고 있는 이미지의 3개를 골라 미드저니를 활용해 이미지를 제작해 봤다.
01. 프롬프트
Gorgeous image of a beautiful Korean woman holding Rectangle cosmetics, radiant and confident, emphasis on beauty products, modern aesthetic, photography style, inspired by the elegance of Korean beauty and cosmetics culture, medium shot, Look to the left, look up, and chin to the center, wear knit, background color gray, panasonic lumix gh5s, expert --ar 4:3 --v 6.0
올리브영과 비슷한 사진을 도출하기 위해 사각형 화장품을 들고 있는 여성, 좌측을 보고 눈은 위를 향하는 이미지를 만들기 위해 여러 키워드를 조합해 프롬프팅을 진행했다. 그 결과 중 1번 결과물이 심미성과 구도가 가장 유사하여 해당 이미지를 Upsclae 하여 포토샵에서 보정을 진행했다.
02. 프롬프트
https://s.mj.run/niSDG_sb0wk Image of long cylindrical cosmetics in round, emphasis on cosmetics four blue fur, fur is a sub, set against a bright beige background, modern aesthetic, soft lighting, digital photography style, inspired by whimsical and trendy product presentations, close up, hasselblad x1d --ar 4:3 --v 6.0
가장 어려웠던 이미지다. 파란색 퍼와 화장품을 배치해야 하는데 아무리 프롬프팅을 해도 원하는 이미지 대신 퍼와 화장품이 결합된 이미지가 도출돼서 많은 난제를 겪었다. 여러 이미지 프롬프트를 활용해 2번과 같은 이미지를 뽑아낼 수 있었다. 해당 이미지는 무게중심이 가운데에 있어 포토샵으로 가져와 사진을 늘리고 편집해 무게중심을 좌측으로 만들었다.
03. 프롬프트
https://s.mj.run/cqAtG1Qz5BU Stunning image of a chic and girl-crush Korean woman holding sleek and slender cosmetics, dressed in a dark brown tank top. Modern and confident aesthetic, photography, inspired by the allure of contemporary Korean fashion and beauty, close up, Look to the right and see the side of your face, cannon eos 5d mark iv, background color bright beige --ar 4:3 --v 6.0
해당 이미지를 만들기 위해 여러 시행착오를 겪었다. 두 개의 손을 활용해 드라마틱한 포즈를 구성하기 위해 여러 프롬프팅을 진행하다가 도저히 원하는 느낌이 나오지 않아 기존에 올리브영에 적용된 이미지 주소를 활용해 프롬프팅을 진행했다.
2번째 이미지가 살짝 천우희 배우 님을 닮은 거 같다확실히 이미지 프롬프트를 적용하니 원본과 유사한 포즈와 톤을 구성할 수 있었고 이 중 2번째 이미지를 선정해 포토샵에서 텍스트를 지우고 좌우 반쪽으로 유사한 이미지를 만들었다.
확실히 미드저니를 활용해 인물을 만드는 것은 적절한 키워드와 카메라만 잘 선정해도 좋은 결과물을 도출해 낼 수 있는 거 같다. 이번 올리브영 이미지를 만들어보면서 내가 어려워하는 부분이 제품이미지라는 것을 알게 되었고, 제품과 더불어 다음에는 그래픽 일러스트나 3D 디자인 에셋을 활용한 이미지를 만들어 보고 싶다는 생각이 든다.
