[궁금한.ai] 텍스트만으로 UI 디자인 완성? Galileo AI 사용기

요즘 생성형 AI 춘추전국시대라고 할 만큼 정말 많은 서비스가 시장에 나와 있는데요, 그 중에서도 앞서 소개해 드린 Luma AI 나 Framer AI처럼 디자이너의 도움 없이 업무를 진행할 수 있는 AI 툴을 활용하는 분들이 많이 계신 것 같아요. 그만큼 생성형 AI가 빠른 속도로 일상에 스며들고 있는 거겠죠? 

그렇다면 UI/UX 디자이너들이 활용할 수 있는 생성형 AI 서비스는 어떤 게 있을까요? 이번에 제가 소개하고 싶은 서비스는 손쉽게 UI 디자인 아이디어를 생성할 수 있게 도와주는 ‘Galileo(갈릴레오) AI’입니다.

그럼, 갈릴레오 AI에 대한 간단한 소개와 어떻게 사용하고 활용할 수 있는지 함께 봐볼까요?

챗GPT처럼 대화하듯 UI를 디자인 해주는 Galileo AI!

갈릴레오 AI는 텍스트나 이미지를 기반으로 UI 디자인을 생성해 주는데요. 프롬프트를 작성하거나 레퍼런스 이미지 또는 스케치를 업로드하면 UI 디자인을 생성해 줍니다. 정말 간단하죠? 꼭 디자이너가 아니어도 UI 디자인이 필요한 기획자, 마케터, 개발자 등 누구나 손쉽게 사용할 수 있습니다. 

현재 유료 서비스지만, 가입 후 제공되는 크레딧으로 대략 7번 정도 디자인을 생성할 수 있으니 꼭 한번 사용해보세요!

텍스트로 UI 생성해보기

왼쪽에 Text to UI 화면에 생성할 디자인에 대한 프롬프트를 작성하면 됩니다. 갈릴레오 AI는 프롬프트가 구체적일수록 더 나은 결과를 제공한다고 안내하고 있으니, 떠오르는 아이디어가 있다면 최대한 자세하게 작성하는 것을 추천드립니다!

저는 아래와 같이 작성해봤습니다

“요리 레시피 앱 : 완성된 요리 이미지, 요리를 만드는데 필요한 시간, 필요한 재료, 만드는 방법에 대한 설명과 이미지를 각각의 섹션으로 포함하고 있는 화면”


“Recipe app screen: Display sections for a finished dish image, total cooking time, a list of required ingredients, and step-by-step instructions, each accompanied by images to guide the cooking process.”

Recipe Detail Screen
I have generated two design variants for the Recipe Detail Screen:

• The first variant prominently displays a finished dish image at the top, with the total cooking time just below. A list of required ingredients follows, and step-by-step instructions with images are clearly laid out towards the bottom

• The second variant similarly showcases the finished dish image and cooking time, but with a more compact design. The ingredients list and instructional steps with images are arranged for easy navigation, emphasizing visual guidance for each cooking step.
Recipe Detail Screen
요리 레시피 화면에 대한 두 가지 디자인 버전을 생성했습니다:

• 첫 번째 버전은 완성된 요리 이미지를 상단에 배치하고, 그 아래에 요리 소요 시간을 표시합니다. 필요한 재료 목록이 그 뒤를 따르고, 단계별 설명과 함께 관련 이미지를 하단에 명확하게 배치했습니다.

• 두 번째 버전도 마찬가지로 완성된 요리 이미지와 요리 시간을 강조하지만, 더 컴팩트한 디자인을 제공합니다. 재료 목록과 단계별 설명이 쉽게 탐색할 수 있도록 구성되어 있으며, 각 단계마다 시각적 가이드를 강조합니다.



디자인 작업을 팀원들에게 리뷰를 하는 경우 왜 이렇게 디자인 했는지에 대해서 설명이 필요할 때가 있는데요, 갈릴레오 AI에서는 시안 디자인을 다음과 같이 생성한 이유를 설명해 주니 해당 시안을 사용해 디자인을 발전시키기 더 좋을 것 같아요.

생성된 디자인 시안 활용하기

갈릴레오 AI에서는 생성한 UI 디자인을 피그마에서 작업할 수 있도록 복사-붙여넣기 기능을 제공하고 있어요. 그래서 생성된 디자인 시안에서 아이디어를 얻는 것 뿐만아니라 디자인 작업에도 손쉽게 활용할 수 있습니다.

저는 첫 번째 시안의 단계별 설명과, 두 번째 시안의 요리 시간을 강조한 부분이 마음에 들어 두 가지 시안을 적절히 섞어서 좀 더 발전된 시안을 제작해 봤는데요.

간단하게 간격, 폰트, 컬러만 변경하고 두 가지 시안을 적절히 섞어서 디자인을 완성해 보았습니다. 피그마로 붙여놓은 프레임이 잘 정리되어 있기도 했고 레이아웃이 어느 정도 잡혀있다 보니 완성하기까지 시간이 많이 단축됐고 작업도 훨씬 수월했습니다!

Galileo AI를 활용해보니..

아마 디자이너분들은 최적의 서비스 사용자 경험을 제공하기 위해 비슷한 기능을 가진 제품이나 동종업계 서비스를 많이 참고해서 디자인 작업을 진행하실 텐데요, 갈릴레오 AI를 사용해서 아이디어를 얻을 수도 있으니 레퍼런스 리서치 시간을 조금은 단축시킬 수 있겠다는 생각이 들었어요!  

최소 두 가지의 UI 디자인 시안을 생성해 주고 각 시안에 대한 설명까지 제공해 주기 때문에 참고 자료로 활용하기 좋고요. 또한, 피그마와 연동이 되어 실제 프로젝트에서 사용하기도 편리합니다.

다만, 구체적으로 프롬프트를 작성해도 기대한 만큼의 퀄리티가 나오지 않는 경우가 있어서 여러 번 프롬프트를 수정하거나 레퍼런스 이미지를 바꿔가며 테스트 해봐야하는 단점은 존재하는 것 같습니다. 그래도 텍스트가 아닌 스케치나 레퍼런스 이미지를 업로드하면 최대 4가지 디자인을 생성할 수 있어 활용도는 높은 편입니다. 

디자인 생성 AI, Galileo만 있는 게 아니다! 다른 추천 툴은?

Uizard(유아이자드) 서비스도 UI/UX 툴로 많이 언급되고 있어서 간략하게 갈릴레오 AI와 비교해 보려고 합니다.

유아이자드도 갈릴레오 AI와 마찬가지로 사용자가 빠르고 쉽게 UI/UX 디자인을 만들 수 있도록 도와주는 서비스에요. 텍스트를 작성하거나 손으로 그린 스케치를 업로드하면 UI 디자인을 생성해 주고 프로토타입 기능까지 제공하고 있어요.

갈릴레오 AI와 조금 다른 점은 생성하고 싶은 프로젝트와 디자인 스타일에 대한 프롬프트를 각각 별도로 작성한다는 점이에요!

같은 프롬프트로 생성된 결과물을 비교해 볼까요? 갈릴레오 AI가 프롬프트에 맞춰 화면 UI 디자인을 해줬다면, 유아이자드는 프로젝트 프롬프트에 맞춰 플로우(flow)에 따른 화면을 생성해주고 프로토타입 기능도 제공해줬어요.

UI 디자인에 초점을 맞춘다면 갈릴레오 AI를, 플로우을 고려하거나 와이어프레임까지 활용하고싶다면 유아이자드를 사용하는것을 추천드립니다. 하지만, 복잡한 구조의 서비스나 플로우를 생성 하기엔 아직은 부족한 점도 보이기 때문에 두 가지 모두를 함께 사용해서 UI/UX 디자인 작업을 진행해 봐도 좋을 것 같아요!

Galileo AIUizard
텍스트 및 이미지 기반의 UI 디자인 생성텍스트 및 이미지 기반의 UI 디자인 생성
화면 구성이나 UI 디자인에 초점UI 디자인과 프로토타입에 초점
비디자이너가 활용하기 쉬움기본적인 UI/UX 지식 및 툴 숙련도 필요
UI 디자인 생성만 가능UI 디자인 생성 및 프로토타입 제작 가능

마무리하며…

UI/UX 디자이너가 활용할 수 있는 생성형 AI 서비스에 대해 알아봤는데요. 생성형 AI 서비스를 모든 디자인 업무에 온전히 이용하기에는 아직은 다소 무리가 있지만 어떻게 활용하느냐에 따라서 업무 생산성에 많은 도움을 줄 수 있을 것 같다는 생각이 들었어요. 뿐만아니라 앞으로는 디자인 업무를 진행하는 방식도 바뀌게 될 수도 있지 않을까? 라는 생각도 들었는데요, 여러분의 생각은 어떠신가요?

이달의 리뷰어

강나경 | 크라우드웍스 디자인팀 UI/UX 디자이너
사용자 경험과 비즈니스가 추구하는 가치를 함께 전달할 수 있는 방향성을 고민합니다.