AI로 내가 원하는 GUI 디자인하는 프롬프트 비결
UX/UI 디자이너에게 Midjourney는 다양한 GUI 디자인 아이디어를 빠르게 시각화할 수 있는 강력한 도구입니다. 원하는 결과물을 얻기 위해서는 프롬프트(prompt)를 체계적으로 작성하는 것이 중요합니다. 디자이너가 GUI 관련 이미지를 체계적으로 생성하는데 도움을 줄 수 있도록 프롬프트 작성 과정을 6단계로 나누어 보았습니다.
1단계 이미지 구상 단계
첫 번째 단계는 어떤 이미지를 만들고 싶은지 큰 그림을 그리는 이미지 구상 단계입니다. 이 단계에서 너무 세부적인 요소를 고려하기 보다는 내가 이번 디자인 작업에서 필요한 이미지가 어떤 것인지 구상을 해보는 것이 필요합니다. 예를 들면 다음과 같은 구상이 있을 수 있습니다.
"아이들이 즐겁게 사용할 수 있는 동화풍 날씨 앱 화면"
"사용자의 운동 기록을 보여주는 헬스케어 대시보드 UI"
"우주 여행 테마의 미래지향적인 모바일 게임 메뉴 화면"
위와 같은 상상을 통해 앞으로 작성할 프롬프트의 방향성이 정해집니다. 이 단계에서는 결과물에 대한 전반적인 아이디어를 얻는 것이 목표이며, 이를 바탕으로 다음 단계에서 세부 내용을 정의하게 됩니다.
2단계 GUI 주제 정의 단계
두 번째 단계에서는 앞서 구상한 아이디어를 구체화하여 GUI 주제를 명확히 정의합니다. 이 단계의 목표는 디자인하려는 GUI의 종류나 용도를 한마디로 규정하는 것이 필요합니다. 프롬프트에 주제를 분명히 명시하면 Midjourney가 맥락을 이해하여 관련성 높은 결과를 보여줍니다.
도메인 측면: 여행 예약 앱 UI, 전자상거래(이커머스) 웹 상품 페이지, 소셜 미디어 피드 화면, 금융 관리 대시보드 등
특정 화면 유형: 로그인 화면, 회원 프로필 페이지, 설정 화면, 채팅 인터페이스 등
이렇게 UI 주제를 명확히 설정하면 프롬프트의 핵심이 잡히며, Midjourney가 생성할 이미지의 방향도 구체화됩니다. 주제를 분명히 하는 것은 프롬프트의 정확도를 높이는 첫걸음입니다.
3단계. UI 요소 정의 단계
세 번째 단계에서는 선택한 주제에 맞춰 핵심 UI 구성 요소(무엇이 화면에 보여야 하는지)를 결정합니다. 프롬프트에 이러한 요소들을 언급하면 Midjourney는 해당 요소들이 담긴 장면을 그려내기 위해 노력하게 됩니다.
네비게이션 바 – 화면 상단의 메뉴 바 또는 앱바
검색 창 – 돋보기 아이콘과 텍스트 입력 필드
프로필 아이콘 – 사용자 아바타나 프로필 사진 영역
카드 레이아웃 – 내용이나 아이템을 보여주는 카드형 컨테이너
버튼 – (예: 주요 액션을 위한 CTA 버튼 또는 메뉴 버튼)
지도 뷰 – 지도 화면 (예: 위치 표시를 위한 지도 UI)
차트/그래프 – 데이터 시각화를 위한 막대그래프나 원형 차트 등
위의 요소들은 예시일 뿐, 디자인하려는 GUI에 맞게 필요한 요소들을 선정하면 됩니다. 예를 들어 음악 플레이어 앱을 구상했다면 "재생 버튼, 정지 버튼, 음량 조절 슬라이더, 재생 목록" 등이 요소가 될 것입니다. 여행 앱이라면 "지도, 장소 카드, 평점 아이콘" 등이 있을 수 있겠죠. 이렇게 주요 UI 구성 요소를 프롬프트에 포함하면, Midjourney가 보다 실제 UI에 가까운 이미지를 생성하는 데 도움이 됩니다. 중요한 요소를 명시함으로써 프롬프트의 표현력이 높아지고 원하는 결과에 더 근접하게 됩니다.
4단계. UI 스타일 정의 단계
네 번째 단계에서는 원하는 GUI 스타일을 정의합니다. 동일한 내용의 GUI라도 시각적 스타일에 따라 느낌이 크게 달라지기 때문에, 프롬프트에 스타일 정보를 넣어주면 결과물이 기대하는 분위기에 가까워집니다.
GUI 스타일을 정의할 때는 디자인 철학이나 기법, 시대적 분위기, 색상 테마, 전반적인 톤 등을 폭넓게 생각할 수 있습니다. 아래는 프롬프트에 활용할 수 있는 다양한 스타일 관련 용어 예시입니다.
플랫 디자인 – 입체감 없이 평평한 색상과 아이콘으로 구성된 현대적인 스타일
뉴모피즘 (Neumorphism) – 부드러운 음영과 양각 효과로 입체감을 주는 최신 스타일
글래스모피즘 (Glassmorphism) – 반투명 유리 효과(배경 블러)가 돋보이는 스타일
스큐어모피즘 (Skeuomorphism) – 실제 물체의 질감과 형태를 그대로 반영하여 현실감 있게 디자인
레트로/복고풍 – 80~90년대 감성의 복고풍 UI 스타일 (픽셀아트 등 옛 웹 디자인)
사이버펑크 – 어두운 배경에 네온 색상과 미래 도시 느낌의 하이테크 스타일
또한 디자인의 무드를 나타내는 형용사를 추가할 수도 있습니다 (예: 우아한, 발랄한, 청량한, 고급스러운 등). 또는 원하는 색상 팔레트를 지정할 수도 있습니다 (예: 파스텔 톤, 모노크롬 등). 예를 들어 "우아하고 고급스러운 다크 모드 UI"처럼 여러 스타일 단어와 분위기 형용사를 조합할 수 있습니다.
중요한 것은 선택한 GUI 스타일이 앞서 정의한 주제와 요소들과 잘 어울리는지입니다. 스타일을 프롬프트에 명시하면 Midjourney가 이미지의 시각적 톤을 이해하는 데 도움이 되며, 이렇게 하면 결과물이 디자이너의 의도와 더 가까워집니다. 구조화된 스타일 지정을 통해 프롬프트의 효율을 높이고, 일관된 디자인 탐색이 가능해집니다.
5단계. 파라미터 정의 단계
다섯 번째 단계에서는 Midjourney의 추가 파라미터를 설정합니다. 파라미터는 이미지의 비율, 품질, 스타일 강도 등을 조절하는 옵션입니다. 적절한 파라미터 활용을 통해 결과를 원하는 형태로 최적화할 수 있습니다. 이러한 방식으로 파라미터를 적절히 활용하면 프롬프트의 효율이 높아지고, 결과물이 디자이너의 의도에 더 부합하게 됩니다.
화면 비율 (--ar) – 출력 이미지의 가로:세로 비율을 지정합니다. 예를 들어 스마트폰 세로 화면은 --ar 9:16, 웹 화면은 --ar 16:9처럼 디바이스에 맞는 비율을 설정합니다.
모델 버전 (--v) – 이미지를 만드는 미드저니 인공지능 엔진의 버전을 선택할 수 있습니다. 최신 버전이 꼭 좋은 것은 아닙니다. UI 관련 이미지들은 보통 v5에서 더 잘 만들어지는 결과들을 볼 수 있습니다.
스타일 강도 (--stylize 또는 --s) – 스타일 적용 강도를 0~1000 사이로 조절합니다. 높을수록 화려하고 창의적이지만 프롬프트 반영률은 낮아집니다. 일반적인 UI 디자인은 --s 100~200 정도의 낮은 값을 권장합니다.
품질 (--q) – 이미지의 디테일 수준을 결정합니다. 기본값 1이며 높일수록 선명해지지만 시간이 더 걸립니다. UI 세부 묘사를 위해 --q 2를 쓰거나, 빠른 결과가 필요하면 더 낮은 값을 사용합니다.
창의성 (--chaos) – 결과 이미지의 변이 정도입니다. 0~100 사이 값으로, 높게 줄수록 4가지 결과가 서로 더 다양하게 생성됩니다. 여러 가지 시안을 폭넓게 얻고 싶을 때 활용합니다.
제외 (--no) – 특정 요소를 이미지에서 제외시킵니다. 예를 들어 사람을 빼려면 --no people처럼 사용합니다. 꼭 제외할 항목이 있을 때만 신중히 사용하는 것이 좋습니다.
6단계. 프롬프트 완성 단계
마지막 단계에서는 앞서 결정한 모든 요소를 조합하여 최종 프롬프트 문장을 완성합니다. 이제까지 정의한 내용을 하나의 문장 또는 문단으로 연결하면 되는데, 다음과 같은 순서를 추천합니다. 프롬프트 문장은 보통 UI 주제로 시작하고, 이어서 "... 포함한" 등의 표현으로 핵심 UI 요소를 나열한 뒤, 원하는 스타일/분위기를 묘사합니다. 그리고 문장 끝에 --ar, --q 등의 파라미터를 추가하면 됩니다. 이 과정을 통해 완성된 프롬프트의 예시는 아래와 같습니다.
"모바일 여행 계획 앱 UI, 지도와 일정 카드가 포함된 화면, 뉴모피즘 스타일의 깨끗하고 직관적인 디자인 --ar 9:16 --v 5.2"
“Mobile travel planning app UI, screens with maps and calendar cards, and neuromorphism-style clean, intuitive design --ar 9:16 --v 5.2”
위 예시에서 보듯이, 한 문장 안에 주제, 요소, 스타일, 파라미터가 모두 포함되어 있습니다. 중요한 것은 정보를 논리적인 순서로 나열하여 AI 모델이 의도를 파악하기 쉽게 하는 것입니다. 콤마(,)나 접속사를 활용해 각 속성을 구분해주면 명확성이 높아집니다.
프롬프트를 완성했다면 한번 검토하여 빠뜨린 부분은 없는지, 모호한 표현은 없는지 확인하는 것이 필요합니다. 이렇게 체계적으로 작성된 프롬프트는 처음 시도에서도 원하는 결과에 보다 가깝게 도달할 확률이 높습니다. 만약 생성 결과가 약간 기대와 다르더라도, 구조화된 프롬프트를 사용했다면 어느 부분을 수정해야 할지 감이 잡히기 때문에 이후 수정과 실험도 수월합니다. 결국 이 단계까지 거치면, 명확하고 구체적인 지침을 가진 프롬프트가 완성됩니다.
Midjourney 프롬프트 예시
마지막으로, 위의 6단계를 거쳐 작성된 Midjourney 프롬프트 예시 3가지를 소개하겠습니다. 각 예시는 어떤 의도로 작성되었는지 간단한 설명과 함께, 최종 프롬프트 문장을 영어로 표기합니다. 이처럼 체계적인 프롬프트 작성을 통해 AI에게 정확한 의도를 전달하면, 초보 디자이너도 시행착오를 줄이고 원하는 GUI 이미지를 효과적으로 얻을 수 있습니다.
예시 1: 여행 계획 앱 메인 화면
설명: 여행 일정을 관리하는 모바일 앱 UI 예시입니다. 지도와 일정 카드 요소를 포함하고 뉴모피즘 스타일로 부드럽고 현대적인 느낌을 표현했습니다.
프롬프트: a travel itinerary planner mobile app UI, featuring a map view and daily schedule cards, in a clean neumorphic design style with soft shadows, pastel color scheme --ar 9:16 --v 5.2
예시 2: 금융 대시보드 웹 UI
설명: 개인 재정 정보를 한눈에 보여주는 금융 대시보드 UI 예시입니다. 여러 차트와 통계 패널에 글래스모피즘 투명 카드 스타일을 적용해 세련된 느낌을 주었습니다.
프롬프트: a finance analytics dashboard UI for web, featuring transparent glassmorphic cards, charts and financial stats, sleek and modern style, dark background --ar 16:9 --v 5.2
예시 3: 뮤직 플레이어 앱 UI
설명: 레트로 감성의 모바일 뮤직 플레이어 UI 예시입니다. 앨범 커버와 재생 버튼 등 요소에 스큐어모피즘을 적용하여 빈티지 오디오 기기의 질감과 입체감을 살렸습니다.
프롬프트: a vintage-inspired music player app UI, featuring album cover art, playback controls (play, pause, volume knob), skeuomorphic design with realistic textures and retro colors --ar 9:16 --v 5.2
* AI를 활용한 UX/UI 디자인에 대한 다양한 정보와 소통을 원하는 분은 오픈 채팅방에서 함께 많은 디자이너 분들과 만나실 수 있습니다 : )
AI-DTQ 자격과정에 대한 교육 프로그램 안내
https://onoffmix.com/ch/aidesign
