brunch

You can make anything
by writing

C.S.Lewis

by 태석 Feb 19. 2024

미드저니를 활용한 '29CM' 카드 컴포넌트 적용

미드저니 연습 + 카드 컴포넌트 적용

최근 시리즈에서는 미드저니를 활용해 3D 그래픽을 제작하고 UIUX 디자인에 적용해 보면서 3D를 만들 수 있는 프롬프트와 3D 툴을 사용하지 않고 인공지능의 도움으로 그래픽을 제작할 수 있을지에 대해 다뤄 봤다.


3D 관련 콘텐츠




이번 장에서는 미드저니로 도출할 수 있는 또 하나의 강력한 이미지인 '인물'을 카드 컴포넌트에 적용해 보며, 서비스의 카드 컴포넌트가 다양한 프로모션 및 상품을 한정된 카드 지면 내에서 어떻게 풀어내고 있는지 살펴보도록 하겠다.


여섯 번째 서비스는 '29CM'

29CM의 메인 카드 컴포넌트는 프로모션과 사용자들을 추가적인 콘텐츠 뎁스로 연결시키는 중추적인 역할을 하고 있다. 카드 컴포넌트의 이미지에 따라 블러 처리된 이미지가 백그라운드에 깔리며, 유려한 인터렉션을 통해 콘텐츠 탐색에 부드러움을 더하고 있다.


*Size 안드로이드 1 배수 기준
카드 컨테이너 : 324x430 dp

타이틀 : 24~26dp

바디 : 13~14dp


29CM의 카드 컴포넌트를 살펴보면 총 3 가지의 특징을 살펴볼 수 있다.



01. 이미지 무게중심

29CM는 이미지 무게 중심이 일관되게 형성되어 있는 사진들로 카드 컴포넌트를 구성했다. 서비스 진입 시 

시선이 가운데에 집중되며, 여러 개의 개별적인 콘텐츠들이 하나의 유기적인 요소로 인식되어 인지부하 없이 콘텐츠를 탐색할 수 있다.



02. 텍스트 영역

텍스트 영역은 하단의 50dp의 고정 영역이 설정된 상태로 텍스트 줄 바꿈 케이스를 대응하고 있다. 고정 영역과 가변 영역이 명확한 기준이 잡혀있어 다양한 텍스트 글자 수에 유연하게 대처가 가능하며, 어색함 없이 콘텐츠를 탐색할 수 있다.



03. 텍스트 시인성 확보

29CM에 사용된 이미지들을 전체적으로 살펴보면 배경에 복잡한 요소가 없는 이미지를 사용해 모델의 이미지를 강조하고 텍스트의 시인성을 높이려 하고 있다. 


그럼에도 이미지의 명도, 채도, 이미지와 텍스트 겹침 등으로 인해 텍스트의 시인성이 떨어질 수 있는 케이스를 고려해 블랙 그라디언트 딤드를 활용해 텍스트의 시인성을 확보해주고 있다. 단순한 배경과 그라디언트 딤드 덕분에 29CM의 콘텐츠를 탐색하면서 텍스트의 가독성이 떨어지거나, 이미지와 겹쳐서 텍스트가 가려지는 케이스는 발견할 수 없었다.

*이해를 위해 블랙 대신 레드 그라디언트를 사용했습니다.


이렇게 카드 컴포넌트에 적용된 요소들을 지키면서 29CM의 이미지를 미드저니를 활용해 유사한 이미지를 도출해 봤다.







01. 프롬프트


Korean woman, photograph, front view, full-body shot, soft, wearing summer clothes, strong facial expression, romantic use of light, light brown, nikon d850, extreme long shot --ar 3:5 --v 6.0 

2번 이미지 업 스케일 후 포토샵 보정 진행

인물 이미지를 만들 때는 --stylize(이하 --s) 파라미터를 디폴트 값(100)으로 사용하는 게 가장 사실적인 이미지를 잘 도출한다. 미드저니 커뮤니티에 올라온 인물 이미지들 중 750~1000까지 사용하는 케이스도 있으나, --s를 높게 사용하면 예술적인 이미지가 생성되고 이미지의 사실성은 떨어지게 된다.




02. 프롬프트


Korean woman, photograph, model, warm tone, wearing ball cap, natural, Looking to the side, stylish hair, solid white environment, studio lights, nikon d850, extreme long shot --ar 3:5 --v 6.0

2번 이미지 업 스케일 후 포토샵 보정 진행
실패 이미지

해당 이미지를 만들면서 가장 애를 먹었던 부분은 모자 부분이다. 원하는 볼캡 모자와 머리카락이 자연스럽게 결과로 나오지 않아 애를 먹고 있었다.


어깨 부분은 정적으로 고정되어 있고, 손만 둥둥 떠있으며, 모자와 머리카락이 자연스럽게 착용이 되지 않은 이미지들이 많이 연출되었다.


이 과정에서 키워드 프롬프트의 간단한 수정 만으로 자연스러운 이미지를 도출할 수 있었다.


wearing cap(기존) - wearing ball cap(수정)

stylish(기존) - natural(수정)


원하는 이미지가 나올 때까지 키워드, 피라미터 등 수정의 반복을 거치다 보면 원하는 이미지를 도출할 수 있다.





03. 프롬프트

Korean woman, photograph, front view, soft, wearing blue shirt and blue jeanm and trendy glassed, strong facial expression, fancy use of light, light brown, nikon d850, extreme long shot --ar 3:5 --v 6.0

1번 이미지 업 스케일 후 포토샵 보정 진행


출처 : nikon

인물 이미지를 만들 때 'nikon d850' 카메라가 가장 퀄리티 좋은 이미지를 도출해 준다.

미드저니는 카메라의 종류를 입력하면 해당 카메라로 촬영을 한 느낌의 이미지를 도출해 주기에 매우 중요한 프롬프트다.


나는 카메라에 대해 무지하지만, 서치를 통해 어떤 카메라가 어떤 종류의 이미지를 가장 잘 도출해 주는지 쉽게 찾을 수 있었다. 서치를 통해 정리한 7개의 카메라 프롬프트를 공유한다.


이 외에도 더 많은 카메라 프롬프트가 있습니다!







29CM와 같이 콘텐츠 중심의 서비스들은 콘텐츠가 자주 변경되는 특성이 있다. 그때마다 들어가는 촬영, 편집, 보정, 모델 등의 비용을 인공지능을 사용하면 절감할 수 있을 거 같다는 생각이 든다. 아직까지는 실제 사람의 포즈나, 옷의 디테일, 서비스 톤에 맞는 이미지를 도출하는 데는 한계가 있지만, 현재 기술 발전의 진행 속도라면 내가 예상하는 일이 빠르게 일어나지 않을까 생각이 든다.

매거진의 이전글 미드저니를 활용한 '여기어때' 프로모션 UIUX디자인
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari