• 사용법
  • 성공사례
  • 테마 구매
  • 스토어
  • FAQ
  • 언론보도
  • 문체변경 AI 오웰
  • 블루닷 체험판 가기

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

블루닷 AI 연구센터
블루닷 AI 연구센터
- 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개의 속성이 필요합니다.
ChatGPT
A conversational AI system that listens, learns, and challenges

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

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

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

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

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

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

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

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

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

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

(4) UI 생성하기

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

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

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

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

(6) 컬러 팔레트를 정의 더 좋은 방법

봤다시피, 챗GPT로 색상 팔레트와 같은 요소를 정확히 정의하는 것은 한계가 있습니다. Khroma.co 다른 생성 AI 도구를 사용하는 것도 방법입니다.

여러분들의 취향을 학습하기 위해, 무려 50가지나 색상을 선택을 해야 하지만, 이 툴은 독특한 이름을 지닌 균형잡힌 컬러 팔레트를 생성해 줍니다.

(7) 프롬프트로 글꼴 페어링하기

기본 빌딩 블록을 정의할 때 또 다른 문제는 글꼴의 상을 구성하는 것입니다. 챗GPT를 사용해서 적합한 글꼴 쌍을 찾을 수 있는지 알아보도록 하겠습니다.

💡
명랑한 제목을 지닌 앱에 사용하기 위해 'inter'와 함께 사용할 수 있는 글꼴이 무엇이 있는지 알려주세요. 
ChatGPT
A conversational AI system that listens, learns, and challenges

결론과 핵심

앞서 확인했다시피 챗GPT와 미드저니를 함께 활용하면 서로의 기능을 향상시키고 설계 프로세스를 개선할 수 있습니다.

작가와 대화를 시작하세요
생성 AI
답글달기

블루닷 AI 연구센터

블루닷 AI 연구센터는 블루닷이 콘텐츠 수익 창출의 필수 도구로 자리매김 하기 위해 생성 AI를 어떤 방식으로 활용하고 적용해야 하는가를 연구합니다.

당신이 놓친 글
버티컬 AI, 시장에 새로운 기회 열다
버티컬 AI, 시장에 새로운 기회 열다
by 
Mediasphere PR
2024.5.23
문체변경 AI 오웰 '관점 변경' 재작성 기능 추가 등
문체변경 AI 오웰 '관점 변경' 재작성 기능 추가 등
by 
Mediasphere PR
2024.5.2
문체변경 AI 오웰로 공시자료를 기사로 바꾸는 방법
문체변경 AI 오웰로 공시자료를 기사로 바꾸는 방법
by 
블루닷 AI 연구센터
2024.4.26
콘텐츠 관리를 위한 AI 활용법: 자동화에서 개인화까지
콘텐츠 관리를 위한 AI 활용법: 자동화에서 개인화까지
by 
Mediasphere PR
2024.4.13
당신이 놓친 글
버티컬 AI, 시장에 새로운 기회 열다
by 
Mediasphere PR
2024.5.23
버티컬 AI, 시장에 새로운 기회 열다
문체변경 AI 오웰 '관점 변경' 재작성 기능 추가 등
by 
Mediasphere PR
2024.5.2
문체변경 AI 오웰 '관점 변경' 재작성 기능 추가 등
문체변경 AI 오웰로 공시자료를 기사로 바꾸는 방법
by 
블루닷 AI 연구센터
2024.4.26
문체변경 AI 오웰로 공시자료를 기사로 바꾸는 방법
콘텐츠 관리를 위한 AI 활용법: 자동화에서 개인화까지
by 
Mediasphere PR
2024.4.13
콘텐츠 관리를 위한 AI 활용법: 자동화에서 개인화까지