https://uxplanet.org/ui-design-using-midjourney-713e8d1b6a6b
UI Design using Midjourney
Text-to-image AI tools like Midjourney, Dalle-2, and Stable Diffusion can generate images from plain text. These days the internet is full…
uxplanet.org
* 이 글은 해당 아티클을 번역 및 번역자의 생각을 추가한 글입니다.
“ Midjourney, Dalle-2 및 Stable Diffusion과 같은 텍스트 to 이미지 AI 도구는 일반 텍스트에서 이미지를 생성할 수 있습니다. 요즘 인터넷은 AI가 생성한 이미지로 가득 차 있지만, "텍스트 이미지 변환 도구를 UI 디자인에서도 사용할 수 있을까?"
이 아티클에서는 AI 도구가 다음과 같은 일반 UI 작업을 처리하는 방법을 살펴보겠습니다.
- UI 화면
- 앱 아이콘
- 제품 이미지
- 로고
- 마스코트
분석을 보다 구체적으로 하기 위해 특정 제품 유형(음식 배달 앱)에 대한 UI 자산을 생성합니다.
이 기사는 AI 도구를 사용하도록 설득하려는 것이 아닙니다. AI 도구가 무엇을 할 수 있고 어떤 UI 자산을 생성할 수 있는지 보여주는 순수한 실험입니다.
UI 화면
AI 도구로 작업할 때 가장 중요한 것은 명확한 프롬프트를 작성하는 것입니다. 프롬프트는 AI 도구가 이미지를 생성할 수 있도록 제출하는 텍스트 문자열입니다. 프롬프트는 보고 싶은 것을 명확하게 지정해야 합니다.
의도를 더 잘 표현할수록 AI에서 더 관련성 높은 결과를 얻을 수 있습니다.
프롬프트를 작성할 때 실제 사람에게 디자인을 설명하는 방법에 대해 생각하고 정확한 문장을 작성하십시오. 이 문장을 토큰(쉼표로 구분된 짧은 문구)으로 바꾸십시오.
토큰화된 형식은 필수 문맥 정보를 유지하면서 불필요한 단어를 모두 다듬는 데 도움이 되기 때문에 Midjourney에 더 좋습니다.
예를 들어 음식 배달 앱의 컨텍스트에서 토큰화된 프롬프트는 다음과 같을 수 있습니다.
/imagine high-quality UI design, food delivery mobile app, trending on Dribbble, Behance
기본적으로 Midjourney는 선택할 수 있는 네 가지 옵션을 생성합니다. U[number] 명령을 사용하여 옵션을 업스케일링할 수 있습니다. 첫 번째 디자인의 업 스케일 버전이 어떻게 생겼는지 봅시다.
업스케일링된 버전을 이전 버전과 비교하면 Midjourney가 이미지의 크기와 품질을 높일 뿐만 아니라 레이아웃도 약간 수정한다는 것을 알 수 있습니다. 예를 들어 업스케일링된 버전에는 화면 왼쪽 상단 모서리에 빨간색 버튼이 없습니다.
도구로 생성된 이미지에서 횡설수설하는 텍스트와 손상된 음식 미리보기 이미지라는 두 가지 중요한 문제를 발견할 수 있습니다. 불행히도 이러한 문제는 UI 화면뿐만 아니라 Midjourney에서 생성된 많은 종류의 이미지와 관련이 있습니다.
첫 번째 테이크는 완벽하지 않았으므로 더 나은 결과를 얻기 위해 프롬프트를 수정하는 방법이 궁금 할 것입니다. 프롬프트 작성을위한 최적의 전략이 없다고 말할 가치가 있습니다. 최적의 솔루션을 찾으려면 다양한 토큰을 실험해야 합니다. 그렇기 때문에 적절한 출력을 내기 전에 최소한 몇 번의 시도를 목표로 해야 합니다.
프롬프트를 수정하여 도구가 어떻게 반응하는지 살펴보겠습니다. 이번에는 디자인 툴에 있는 에셋을 사용하고 싶을 가능성이 높기 때문에 "Figma"를 언급하겠습니다.
/imagine food delivery app, user interface, Figma, Behance, HQ, 4K, clean UI
첫 번째 디자인의 업 스케일 버전이 어떻게 생겼는지 봅시다.
이 버전은 디자인에 사용할 수있는 것처럼 보입니다. 레이아웃에는 요소의 명확한 시각적 계층 구조가 있습니다.
미드저니를 사용하여 UI 디자인을 다시 한 번 살펴보겠습니다. 이번에는 "Dribbble"과 "Behance"토큰을 제거하고 "Figma"만 남기고 매개 변수 " — q 2"를 추가하여 이미지 품질을 높입니다.
/imagine [what you want to generate] -- q <number>
/imagine Food delivery app, mobile app,
user interface, Figma, HQ, 4K, clean UI -- q 2
Midjourney가 생성하는 결과는 세 번째 시도 후에도 인간 디자이너의 개선 없이는 사용할 수 없음을 알 수 있습니다. 그럼에도 불구하고 이 원시 출력은 시각적 영감을 제공하기 때문에 디자인 프로세스의 초기 단계에서 매우 유용할 수 있습니다. 예를 들어, AI가 생성한 이미지의 무드보드를 만들고 이를 시각 디자이너가 적절한 시각적 언어를 만들기 위한 참조로 사용하는 것은 비교적 쉽습니다.
UI 디자인에 매우 일반적인 프롬프트를 사용했다는 점도 언급하는 것이 중요합니다. 특정 화면(예: 레스토랑 검색 페이지)을 보려면 시스템에서 더 관련성 높은 결과를 얻을 수 있도록 프롬프트에 토큰으로 명확하게 지정해야 합니다.
이미지
이미지는 제품의 다양한 부분에 사용되는 사진 및 일러스트레이션입니다. 이미지는 사용자에게 필수 정보를 전달하고 적절한 분위기를 조성하기 때문에 사용자 경험에 필수적입니다. 제품 디자인 중에 올바른 이미지를 찾는 것이 어려울 수 있으므로 Midjourney가 도움이 될 수 있는지 살펴보겠습니다.
앱 아이콘
앱 아이콘은 앱이 무엇인지에 대한 아이디어를 전달하고 사용자에게 첫인상을 주기 때문에 간단하지만 매우 강력한 요소입니다. 사용자가 제품을 사용하기 전에도 아이콘이 가장 먼저 보이며 장인 정신의 수준은 사용자가 제품을 인식하는 방식에 직접적인 영향을 미칩니다.
모바일 앱을 디자인하고 있기 때문에 토큰 "iOS 앱"을 명확하게 지정하고 고품질 시각적 자산(토큰 "고해상도" 및 "고품질")을 보고 싶다는 언급이 필요합니다. 그리고 우리 앱은 음식 배달에 관한 것이기 때문에 특정 유형의 음식("버거")을 언급할 수 있습니다.
/imagine icon for iOS app in high resolution, burger, high quality, HQ -- q 2
보시다시피 Midjourney는 초현실적인 아이콘 세트를 생성했습니다. 두 번째 옵션을 고급화해 보겠습니다.
Midjourney가 아이콘에 사용하는 스타일은 훌륭하지만 많은 디자이너가 미니멀리스트 아이콘을 사용하는 것을 선호하기 때문에 실제 프로젝트에서는 작동하지 않을 수 있습니다. 약간 다른 프롬프트를 사용하여 다시 시도해 보겠습니다. "미니멀리즘" 및 "플랫 디자인"과 같은 토큰을 언급하여 AI에게 단순한 아이콘을 보고 싶다는 신호를 보내야 합니다.
/imagine icon for iOS app in high resolution, burger,
high quality, minimalism, flat design -- q 2
이제 출력은 실제 프로젝트에서 사용할 수 있는 것처럼 보입니다. 첫 번째 옵션을 업그레이드해 보겠습니다.
제품 이미지
제품 이미지는 제품 페이지에 표시되는 이미지입니다. 우리는 음식 주문 앱을 디자인하기 때문에 우리의 이미지는 음식의 사진이나 삽화가 될 것입니다. Midjourney에 이미지 생성을 요청해 보겠습니다.
/imagine burger, high quality picture, high resolution, HQ, 4K -- q 2
Midjourney는 단색 이미지를 생성했지만 어두운 배경에 배치되고 배경에서 개체를 추출하는 데 추가 작업이 필요하기 때문에 문제가 될 수 있다는 한 가지 큰 단점이 있습니다. 그러나 우리는 간단한 트릭을 사용할 수 있습니다 - Midjourney에 투명 또는 흰색 배경을 사용하도록 요청하십시오.
/imagine burger on a transparent background, high quality,
high resolution, 4K -- q 2
이제 이 이미지에서 배경을 제거하기만 하면 됩니다. 이를 위해 Remove.bg 와 같은 온라인 서비스를 사용할 수 있습니다. removeb.bg 에 이미지를 업로드하고 바로 사용할 수 있는 시각적 자산을 다운로드합니다.
프로모션 삽화
프로모션 일러스트레이션은 앱 내부 또는 프로모션 웹사이트에서 사용할 수 있는 다재다능한 시각적 자산입니다. Midjourney가 괜찮은 일러스트레이션을 만들 수 있는지 봅시다. 우리는 우리 음식이 맛있다는 생각을 전달하고 싶습니다. 따라서 우리가 제공하는 프롬프트는 다음과 같습니다.
/imagine happy man eating a burger, high resolution, high quality illustration
멋진 점은 이미지가 수채화 그림에서 매우 사실적인 사진 일러스트레이션에 이르기까지 다양한 스타일로 생성된다는 것입니다. 그러나 Midjourney는 행복과 식사를 결합하는 데 어려움을 겪었음이 분명합니다. 두 번째 이미지를 업스케일링하여 업스케일링된 버전이 더 잘 보이는지 확인해 보겠습니다.
Midjourney가 생성하는 이미지에서 또 다른 문제, 즉 다리와 손가락의 문제를 알 수 있습니다. 이 도구는 종종 사람의 이미지를 생성할 때 여분의 다리나 손가락을 추가합니다. 그러나 이 예에서 도구는 손가락을 제거하고 사람의 손을 수정하여 발톱처럼 보이게 했습니다.
로고
로고는 브랜딩의 핵심 요소입니다. 로고 디자인에 관해서는 그 의미가 고객에게 명확하고 로고 자체가 기억에 남도록 해야 합니다. Midjourney의 가장 큰 장점은 도구에 특정 스타일의 이미지를 생성하도록 요청할 수 있다는 것입니다. 로고 디자인에 관해서는 Vertigo (Alfred Hitchcock 감독)와 같은 영화의 포스터 디자인으로 유명한 Saul Bass와 같은 유명한 그래픽 디자이너의 스타일을 따를 수 있습니다.
다음은 Midjourney가 프롬프트에 대해 생성하는 것입니다.
/imagine minimal logo of a burger, graphic style of Saul Bass
Midjourney는 실제로 서체 및 색 구성표와 같은 Saul Bass 스타일의 일부 요소를 사용하지만 최종 결과는 그의 작품에서 나온 것처럼 보이지 않습니다.
마스코트
마스코트는 비즈니스를 나타내는 데 사용되는 그래픽 개체입니다. 잘 만들어진 마스코트는 사람들이 브랜드를 기억하고 특정 분위기를 전달하는 데 도움이됩니다. Midjourney에 특정 스타일(일본어)을 언급하는 음식 배달 회사의 마스코트 이미지를 생성하도록 요청해 보겠습니다.
/imagine simple mascot for a food delivery company, Japanese style
Midjourney는 마스코트의 몇 가지 좋은 예를 생성했습니다. 그러나 최소한의 수정 (네 번째 옵션)으로 하나의 예제 만 사용할 수 있습니다.
미드저니가 UI 디자이너를 대체할 수 있나요?
아니요. 적어도 지금은 아닙니다. 도구가 생성하는 출력은 매우 거칠고 종종 디자이너의 개선이 필요합니다. Midjourney는 또한 프롬프트에 따라 크게 달라집니다(제공하는 출력의 품질은 제공하는 프롬프트에 따라 크게 달라질 수 있음).
이 도구가 디자이너의 툴킷에 없다는 의미입니까? 아니요. 이 도구는 아이디어 구상 및 시각적 탐색과 같은 제품 설계 프로세스의 초기 단계에서 유용할 수 있습니다. 미드저니는 무드보딩에 특히 유용할 수 있습니다. 팀이 특정 스타일을 사용하기 전에 많은 비주얼 스타일을 비교하는 데 도움이 될 수 있습니다.
번역자의 생각
미드저니나 여타 AI툴이 UI 디자이너를 대체할 수 있는가?에 대해 저자의 생각과 동의합니다. 디자이너의 생각을 시각적으로 표현해줘 다양한 선택지를 준다는 점에서는 초기 단계에서 큰 도움을 줄 수 있는 것은 맞지만, 생산성 향상을 위한 정도 이상은 AI가 접근할 수 없는 분야라고 생각힙니다. 여기서 생산성 향상을 위한 정도 이상이란? 프롬프트를 쓰기까지 유저를 관찰하고 유의미한 인사이트를 내서 어떤 시각적 컨셉을 잡을지의 과정을 말합니다.
그럼에도 이 기술이 의미있는 이유는, 단순 '텍스트로 이미지를 제공해주는 툴'로 1차원적으로 바라보기 보다는 이를 활용해서 어떤 서비스에 어떤 유저에게 적용할 수 있을지, 어떤 새로운 씬이나 문화가 생겨날지를 상상할 여지를 줬기 때문입니다. 유저의 니즈는 어떠한 사회적 변화에 의해 생겨나기도 하지만, 꾸준히 있어왔던 니즈가 새로운 기술에 의해 해결할 수 있는 어떤 가능성을 보여줬을 때 그제서야 니즈임을 알아챌 수도 있습니다. 따라서 이 기술을 통해 디자이너가 대체될 것이다 라고 비관하기보단, 기술을 통해 어떤 숨겨진 니즈가 발현되었는지, 또 이러한 니즈는 어떻게 기술과 접목하여 해결해줄 수 있는지를 고민해보는 것이 더 디자이너의 역할이라고 생각합니다.
'UX article' 카테고리의 다른 글
| 삼성의 OneUI 이야기 (0) | 2023.05.29 |
|---|---|
| 자연 환경과 동기화되는 사용자 인터페이스 미학 설계 (0) | 2023.04.02 |
