챗GPT-미드저니로 웹사이트 디자인 효율화하는 방법

블루닷 AI 연구센터

2023-06-11 - 7분 걸림

생성 AI로 웹이나 앱 디자인 제작 프로세스를 개선하는 방법들이 여기저기서 소개되고 있습니다. 블루닷은 블루닷 AI 개발을 통해 고객들의 디자인 맞춤 요구를 신속하게 대응하려고 노력 중인데요. 이러한 노하우들을 쌓고 통합하여 손쉽게 프로덕트로 개발해 나갈 계획을 갖고 있습니다.

이에 앞서 AI-GPT 인사이트가 페이스북에 소개한 'Design With AI: ChatGPT+Midjourney'를 일부 요약하고 번역해서 여기에 소개해 드립니다. 실제 사용된 사례는 원문과는 차이가 있습니다.

(1) 챗GPT로 'UI 속성 프레임워크' 구축하기

올바른 프레임워크가 없다면 디자인의 방향에 대해 이야기를 나누는 것은 혼란을 불러올 수 있습니다. 자칫 그냥 '모던하게', '멋지게', '와우 효과' 등의 디자인 방향으로 귀결될 수도 있습니다. UI 속성을 사용하는 것이 이러한 문제를 해결하는 훌륭한 방법이 될 수 있는 이유입니다.

이러한 UI 속성을 정의하는 데 챗GPT를 활용할 수 있습니다. 아래와 같습니다.

💡

AI 확장 블로깅 앱을 위한 무드-보딩(mood boarding) 연습용 UI 속성(UI attributes)이 필요합니다. 속성은 색상(color), 레이아웃(layout) 및 형태(shape)으로 분류해야 합니다. 클라이언트가 각각의 속성에 점수를 매겨 UI의 방향을 선택합니다. 예를 들어 속성 쌍은 다음과 같을 수 있습니다.
색상 : 진진함 vs 재미있음
저는 카테고리 당 3-6개의 속성이 필요합니다.

프레임워크를 좀더 심화해서 개선할 수 있는지 살펴보겠습니다.

💡

무드 보드 연습 연습을 더 효과적으로 하기 위해 추가할 수 있는 다른 범주가 있나요?

챗GPT는 기존의 프레임워크 구조 또는 프로세스를 따르면서 보다 향상된 성능을 제안하는 강력한 도구입니다.

(2) 챗GPT + 미드저니 활용

내부 UI 속성을 사용해 미드저니용 프롬프트를 생성했습니다. 물론 챗GPT를 이용했습니다.

💡

나는 다음과 같은 특성을 지닌 콘텐츠 비즈니스 플랫폼을 구축하고자합니다.
색상 : 재미있고 밝음
레이아웃 : 전통적이면서 미니멀리즘적
형태(shape) : 진중하고 얇으며 차분하고 역동적이면서도 심플함
무드 보드를 생성하는데 사용할 수 있는 미드저니 프롬프트를 제공해주세요.

미드저니에서 더 나은 결과를 얻기 위해서는 프롬프트를 조정하거나 잘라낼 수 있다는 점을 늘 염두에 두시기 바랍니다.

(3) 프롬프트 파인튜닝(Fine-Tuning) 하기

우리는 쉽게 프롬프트를 파인튜닝해서 디자인 방향을 다른 방향으로 바꿀 수도 있습니다.

💡

팝아트의 터치를 조금 살려주고 프롬프트를 짧게 해주세요. 그리고 UI 콤포넌트에 집중해 주세요.

(4) UI 생성하기

이제 이렇게 생성된 무드 보드를 팀에 제안하거나 참고용으로 사용해 보다 구체적인 UI 구성 요소를 생성할 수 있습니다. 프롬프트에서 이미지의 공개 URL을 사용하면 가능합니다.

(5) 이해관계자 및 요구사항 처리

이 연습의 복잡성으로인해 일부 요구사항들이 혼란을 불러올 수 있습니다. 당신은 할일이 너무 많기 때문에 그것을 처리하고 다루는 방법을 모를 수 있습니다. 챗GPT는 다음과 같은 이점을 제공합니다.

💡

제 고객은 다음과 같은 특징을 지닌 콘텐츠 비즈니스 플랫폼을 원합니다.
색상 : 재미있고 밝음
레이아웃 : 전통적이면서 미니멀리즘적
형태 : 진지하고 얇으며 차분하고 역동적이며 심플함
하지만 우리 고객은 강한 색상을 많이 사용해줄 것을 요구했습니다. 이러한 상황을 어떻게 처리하는 게 좋을까요?