brunch

You can make anything
by writing

C.S.Lewis

by 태석 Jan 23. 2024

미드저니를 활용한 무신사 운영배너 이미지 교체

미드저니 연습 + 운영 배너 분석

미드저니, 스테이플 디퓨전과 같은 생성형 AI와 관련된 다양한 글과 영상을 보면서 엄청난 위기감이 느껴졌다. 정말 디자이너는 대체되는 것인가, 이제 인공지능을 사용하지 못하면 도태되겠구나 등등 다양한 생각과 압박감이 찾아왔었다.


이런 불안감에 덜컥 미드저니를 구독하게 되어 프롬프트를 조금씩 학습하고, 만들어보고 있던 찰나에 예전에 읽은 11번가의 미드저니 관련 글이 생각났다. 해당 글은 미드저니를 활용해 11번가의 프로모션 운영 배너를 제작하는 프로세스를 상세하게 다루고 있는데, 이 글을 통해 생성형 AI를 UIUX에서 어떻게 사용할 수 있는지에 대해 좋은 밴치마킹을 할 수 있었다.

피할 수 없으면 즐기라 했던가

이번기회에 미드저니도 구독했겠다. 미드저니에 대해 심도 있게 학습해 보며, 앞으로 내가 나아갈 UXUI 분야와 접목시켜 각 서비스의 운영배너를 분석해 보고 해당 운영배너 가이드에 맞춰 이미지를 교체해 보고자 마음먹게 되었다.



첫 번째 서비스는 무신사다

무신사 메인 홈의 운영배너는 전체 이미지형식의 디자인을 통해 사용자에게 다양한 상품과 프로모션 정보를 전달하고 있다. 해당 운영배너를 스와이프 해보면 가운데에 위치한 이미지와 동일한 텍스트 간격 체계를 볼 수 있다.


조금 더 자세하게 운영 배너를 분석해 보면, 다음 3가지 특징을 발견할 수 있었다.



01. 이미지 무게중심

무신사는 다양한 이미지들을 사용하지만, 해당 이미지들은 모두 가운데에 무게중심이 잡혀있는 이미지들로 사용자가 무신사 서비스에 진입하면 시선을 가운데로 집중될 수 있는 구조로 설계했다.



02. 텍스트 영역

텍스트 영역 또한, 이미지의 무게중심에 맞춰, 가운데 정렬 방식으로 정리하여 사용자는 이미지의 첫 번째로 시선이 향하고 자연스럽게 텍스트 정보로 이어지게 설계되어 있다.



03. 텍스트 시인성 확보

다양한 이미지가 배너에 사용되기에 이미지의 명도 및 배경 이미지에 따라서 텍스트의 시인성이 감소될 수 있는 것을 고려해 무신사는 하단에서 상단으로 향하는 블랙 그라디언트 딤드를 활용해주고 있다. 해당 방식을 통해 다양한 이미지가 적용되어도 텍스트의 시인성을 확보하는 전략을 취하고 있다.

* 이해를 위해 블랙 대신 레드를 사용해 이미지를 첨부했습니다.


이러한 운영배너 가이드에 맞춰 무게중심이 가운데에 잡혀있는 이미지를 미드저니를 통해 만들어 봤다.






무신사에 적용되어 있는 이미지의 톤과 카메라 앵글 및 제품을 유사하게 만들어봤다.


01. 프롬프트


Captivating image of a beautiful korea woman wearing a winter Padding, trendy winter fashion, cool color, modern aesthetic, Photography, professional, inspired by contemporary winter fashion trends, cannon eos 5d mark iv, low angle shot --ar 3:4 --v 6.0 


이미지 프롬프트는 제외하고 텍스트 프롬프트를 기반으로 작성해 봤다. 이미지를 설명하는 문장과 키워드, 이미지 스타일, 카메라 및 앵글 / 파라미터


로우 앵글숏이라는 앵글과 가운데 무게중심이 잘 잡히면 이미지 내에서 공간감을 느끼게 할 수 있지 않을까라는 생각으로 해당 앵글을 적용해 봤다.


02. 프롬프트


https://s.mj.run/ClicU2AAuzs Sophisticated image featuring stylish Dr. Martens shoes, modern urban setting, sleek design, timeless fashion, digital photography style, inspired by the iconic and fashionable essence of Dr. Martens footwear, close up, canon eos-1d x mark II --ar 3:4 --v 6.0


오늘 배운 이미지 URL / 텍스트 프롬프트 / 파라미터를 적용해 봤다. 해당 링크를 적용해 닥터마틴 이미지를 도출할 수 있었다. 텍스트 프롬프트 / 파라미터는 1번과 동일한 구성으로 작성했다.



03. 프롬프트


Captivating image of a beautiful korea woman wearing a winter clothes, trendy winter fashion, cool color, low-saturation orange, Photography, professional, inspired by contemporary winter fashion trends, kodak potra 800 film, full shot --ar 3:4 --v 6.0 


1번과 비슷한 이미지를 도출하며 앵글의 변화와 컬러의 변화를 주기 위해 키워드를 변경했다. 해당 이미지 컬러를 뽑아내기 다양한 프롬프트를 변경해 보면서 2번째 사진을 Variation 하여 결과물을 도출할 수 있었다.




아직 프롬프트에 미숙하고 내가 원하는 이미지를 만들기 위해선 여러 시행착오를 겪고 있지만, 생각하지도 못했던 키워드와 카메라 종류만 바꿔도 다른 톤의 이미지가 나오는 게 신기하고 재밌는 거 같다.


해당 스터디도 꾸준히 기록하고 노력해 나중에는 내가 원하는 이미지를 단 몇 번 만에 만들 수 있도록 실력을 향상시켜보려한다.

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