<p style="text-align:justify;">오늘 소개할 <a href="https://www.usegalileo.ai/explore"><u>‘Galileo AI(갈릴레오 AI)’</u></a>는 2021년 5월에 시작된 서비스로, 국내에서는 오픈채팅방 등에서 활용 사례를 접할 수 있었는데요. 갈릴레오 AI는 텍스트 또는 이미지를 바탕으로 UI 프로토타입을 제작해 주는 것이 핵심인 서비스입니다. 이는 보통 피그마 등에서 빈 캔버스에 필요한 컴포넌트를 하나씩 채워 넣는 방법을 뛰어넘는 것으로 디자인 작업 속도를 높여줍니다. 또한 원하는 조건에 따라 여러 화면을 비교하며, 최적의 구성 방법을 찾아갈 수 있다는 장점이 있습니다. 지금부터 어떤 기능을 제공하는지 함께 살펴보겠습니다.</p><div class="page-break" style="page-break-after:always;"><span style="display:none;"> </span></div><h3 style="text-align:justify;"><strong>AI에게 화면 디자인을 맡겨도 될까? 사용자가 만든 화면 탐색</strong></h3><figure class="image image_resized" style="width:100%;"><img src="https://yozm.wishket.com/media/news/2616/image12.png"><figcaption><출처: Galileo AI></figcaption></figure><p style="text-align:justify;"> </p><p style="text-align:justify;">‘Galileo AI’에 가입 후, 가장 먼저 확인할 수 있는 건 ‘사용자들이 제작한 화면 사례’입니다. 서비스에서 선정한 사례를 시작으로 모바일과 웹에 해당하는 화면 사례를 리스트 형태로 확인할 수 있는 공간이기도 합니다. </p><p style="text-align:justify;"> </p><p style="text-align:justify;">프롬프트에 점점 익숙해지고 있지만, 제작하려는 대상 또는 서비스 기능에 따라 어떻게 시작해야 할지 고민하는 경우도 많은데요. 이때 다른 사용자가 만든 사례를 먼저 확인할 수 있도록 구성해, 어떤 결과물을 만들 수 있는지 기대를 심어주는 모습입니다. 저도 가입 후 이곳에서 사용자들이 공유한 화면 사례를 봤을 때, 텍스트 또는 이미지를 활용해 만든 디자인이라는 게 낯설 정도고 퀄리티가 좋아서 놀란 기억이 있습니다. </p><p style="text-align:justify;"> </p><figure class="image image_resized" style="width:100%;"><img src="https://yozm.wishket.com/media/news/2616/image4.png"><figcaption><출처: Galileo AI></figcaption></figure><p style="text-align:justify;"> </p><p style="text-align:justify;">사례 중 하나를 선택하면 상세 화면으로 이동할 수 있습니다. 상세 화면에서는 디자인을 보다 자세히 확인할 수 있고, 오른쪽에는 사용된 프롬프트(텍스트로 만든 경우) 정보와 함께 생성된 이미지를 살펴볼 수 있도록 구성했습니다. 또한 ‘Try it’ 버튼을 제공하는데, 클릭하면 동일한 프롬프트를 활용해 화면을 제작할 수 있습니다. 같은 프롬프트라고 해도 테마에 따라 전혀 다른 디자인을 만나볼 수 있어, 시작하기 어려울 때 활용할 수 있는 기능입니다. 그 외에도 공유하기, 피그마로 복사 버튼 등을 지원한다는 점도 눈에 띕니다. </p><p style="text-align:justify;"> </p><figure class="image image_resized" style="width:100%;"><img src="https://yozm.wishket.com/media/news/2616/image2.png"><figcaption><출처: Galileo AI></figcaption></figure><p style="text-align:justify;"> </p><p style="text-align:justify;">위 이미지는 제가 다른 사용자가 공유한 프롬프트를 활용해, 디자인을 요청하고 결과를 확인한 내용입니다. 같은 텍스트를 활용했지만, 앞서 확인한 디자인과 다른 모습을 확인할 수 있습니다. 또 하나의 화면이 아닌 2개의 화면을 함께 생성해 줘 구성에 참고할 만한 정보를 얻기에 좋습니다.</p><p style="text-align:justify;"> </p><figure class="image image_resized" style="width:100%;"><img src="https://yozm.wishket.com/media/news/2616/image11.png"><figcaption><출처: Galileo AI></figcaption></figure><p style="text-align:justify;"> </p><p style="text-align:justify;">또 한 가지 재밌는 점은 디자인한 이유를 설명해 준다는 점입니다. </p><p style="text-align:justify;"> </p><ul><li style="text-align:justify;">첫 번째 디자인은 다운로드 가능한 전자책, 팟캐스트 및 동영상을 카드 기반 레이아웃으로 표시하며, 각 카드에는 미리보기 이미지, 제목 및 간단한 설명과 다운로드 아이콘이 포함되어 있습니다.</li><li style="text-align:justify;">두 번째 디자인은 각 리소스 유형에 대한 썸네일 이미지와 제목, 다운로드 버튼을 포함한 목록 기반 레이아웃을 사용하며, 전자책, 팟캐스트, 동영상에 대한 별도의 섹션으로 구성됩니다.</li></ul><p style="text-align:justify;"> </p><p style="text-align:justify;">디자인 의도를 나름 구체적으로 설명하고 있어서 생성된 화면을 피그마로 복사해 발전시키거나, 수정하는 등의 작업을 진행할 때 참고하기 좋습니다. 또한 생성된 화면은 컬러 등의 테마를 변경해 다시 요청할 수 있고, 두 개의 화면 중 하나 또는 모두를 선택해 텍스트를 추가로 입력, 수정 요청을 진행할 수 있습니다. </p><p style="text-align:justify;"> </p><p style="text-align:justify;"> </p><h3 style="text-align:justify;"><strong>텍스트로 만드는 화면</strong></h3><p style="text-align:justify;">다른 사용자가 공유한 화면 사례를 바탕으로 디자인 작업을 하는 기능을 먼저 살펴봤는데요. 사실 ‘Galileo AI’는 텍스트 또는 이미지 입력을 바탕으로, 화면 디자인을 빠르게 진행하는 데 최적화되어 있습니다. 그래서 짧은 시간 내에 여러 디자인을 확인하고, 초기 아이디어의 활용할 수 있는 충분한 환경을 제공합니다. </p><p style="text-align:justify;"> </p><figure class="image image_resized" style="width:100%;"><img src="https://yozm.wishket.com/media/news/2616/image3.png"><figcaption><출처: Galileo AI></figcaption></figure><p style="text-align:justify;"> </p><p style="text-align:justify;">먼저 텍스트를 활용해 디자인을 생성하는 방법입니다. 원하는 내용이 담긴 텍스트를 입력하고, 모바일과 웹 중 하나를 선택한 뒤 생성 버튼을 클릭하면 결과물을 바로 확인할 수 있습니다. 탐색 화면을 거쳤다 하더라도, 어떤 내용을 입력해야 할지 어려워하는 사용자를 위해 2개의 샘플도 제공합니다. (텍스트 입력 공간 우측에 퍼블릭으로 설정된 것을 확인할 수 있는데, 무료 사용의 경우 비공개를 설정할 수 없습니다.)</p><p style="text-align:justify;"> </p><figure class="image image_resized" style="width:100%;"><img src="https://yozm.wishket.com/media/news/2616/image1.png"><figcaption><출처: Galileo AI></figcaption></figure><p style="text-align:justify;"> </p><p style="text-align:justify;">탐색 - 마음에 드는 프롬프트를 통한 생성 방법과 같이, 제가 입력한 텍스트를 바탕으로 2개의 화면 디자인을 생성한 모습입니다. 저는 모바일을 선택했고, 뷰티 관련 이커머스 앱에 대한 설명을 입력했는데, 각기 다른 스타일로 생성해 준 것을 확인할 수 있었습니다. 또한 두 가지 화면 디자인을 하게 된 배경도 마찬가지로 확인했는데요.</p><p style="text-align:justify;"> </p><ul><li style="text-align:justify;">첫 번째 버전은 차분한 녹색 배경에 천연 화장품 이미지를 세련되게 배치하여 유기농 특성을 강조하고, 쇼핑을 위한 명확한 탐색 기능으로 보완한 것이 특징입니다.</li><li style="text-align:justify;">두 번째 변형은 제품 및 친환경 배지의 큰 시각적 요소와 원활한 탐색 및 쇼핑을 위해 하단 탐색 모음에 중점을 둔 미니멀한 접근 방식을 제시합니다.</li></ul><p style="text-align:justify;"> </p><figure class="image image_resized" style="width:100%;"><img src="https://yozm.wishket.com/media/news/2616/image9.png"><figcaption><출처: Galileo AI></figcaption></figure><p style="text-align:justify;"> </p><p style="text-align:justify;">텍스트를 입력해 화면을 생성한 뒤엔 테마를 변경할 수 있습니다. ‘Galileo AI’는 무료로 사용할 수 있는 크레딧을 150개 제공하며, 한 번의 생성 시 20개를 차감합니다. 다만 테마 변경 시에는 차감하지 않습니다. 테마에는 라이트/다크모드 여부, 컬러, 외곽선 스타일, 폰트 등이 포함되어 있어 원하는 조건에 따라 변경할 수 있습니다. </p><p style="text-align:justify;"> </p><figure class="image image_resized" style="width:100%;"><img src="https://yozm.wishket.com/media/news/2616/image10.png"><figcaption><출처: Galileo AI></figcaption></figure><p style="text-align:justify;"> </p><p style="text-align:justify;">최초 생성한 화면을 컬러만 바꿔서 다시 생성해 봤는데요. 스타일에 따라 컬러를 하나씩 변경하는 것도 시간을 꽤 투자해야 했는데, 빠르게 확인할 수 있어 작업 진행 전 많은 도움을 받을 수 있었습니다. 어떤 결과를 바탕으로 구체적인 작업을 진행하면 좋을지, 기준을 잘 만들어주고 있다는 생각입니다.</p><p style="text-align:justify;"> </p><figure class="image image_resized" style="width:100%;"><img src="https://yozm.wishket.com/media/news/2616/image5.png"><figcaption><출처: Galileo AI></figcaption></figure><p style="text-align:justify;"> </p><p style="text-align:justify;">테마 변경에 이어, 이번에는 생성된 화면 중 하나를 선택해 ‘카드 디자인'을 변경해 달라고 요청해 봤습니다. 기존에는 정방형의 카드가 메인이었다면, 이번에는 가로로 길게 뻗은 이미지가 적용된 카드 스타일을 적용한 모습입니다. 이번에도 왜 이렇게 변경(디자인)했는지에 대한 배경을 빼놓지 않았습니다.<br> </p><ul><li style="text-align:justify;">이커머스 사이트의 친환경적이고, 유기적인 테마에 맞게 카드 스타일을 변경했습니다. 둥근 모서리와 깊이감을 더하는 미묘한 그림자가 특징인 보다 모던하고 세련된 디자인으로 업데이트되었습니다.</li></ul><p style="text-align:justify;"> </p><p style="text-align:justify;"> </p><h3 style="text-align:justify;"><strong>이미지로 만드는 화면</strong></h3><figure class="image image_resized" style="width:100%;"><img src="https://yozm.wishket.com/media/news/2616/image6.png"><figcaption><출처: Galileo AI></figcaption></figure><p style="text-align:justify;"> </p><p style="text-align:justify;">텍스트를 입력해서 만드는 방법 외에도 이미지를 올린 뒤, 요구사항과 테마를 설정해 디자인 결과물을 확인하는 것도 가능합니다. 이 방법은 아이디어의 바탕이 되는 이미지 파일이 있는 경우 유용하게 활용할 수 있으며, 이미 존재하는 서비스의 화면을 업데이트하고자 할 때도 도움을 받을 수 있습니다. 페이퍼 프로토타입, 와이어프레임, 스타일 보드 등을 업로드하면, Galileo AI는 시각적 단서를 분석해서 사용자가 입력한 텍스트를 더해 화면을 디자인합니다.</p><p style="text-align:justify;"> </p><figure class="image image_resized" style="width:100%;"><img src="https://yozm.wishket.com/media/news/2616/image13.png"><figcaption><출처: dribbbleI></figcaption></figure><p style="text-align:justify;"> </p><p style="text-align:justify;">위 이미지를 선택했한 후, 요청 사항에는 ‘식물을 기르는 데 필요한 정보를 얻고 구매까지 할 수 있는 모바일 앱'을 입력했습니다. 그다음 컬러는 연두색 계열을 선택한 뒤 생성 버튼을 클릭했는데요.</p><p style="text-align:justify;"> </p><figure class="image image_resized" style="width:100%;"><img src="https://yozm.wishket.com/media/news/2616/image7.png"><figcaption><출처: Galileo AI></figcaption></figure><p style="text-align:justify;"> </p><p style="text-align:justify;">커머스에 조금 더 초점이 맞춰진 모습이지만, 요청 사항과 원하는 컬러(테마), 올린 이미지를 잘 활용한 결과물을 확인할 수 있습니다. 텍스트를 통해 디자인 작업을 할 때와 같이, 작업할 때 어떤 부분에 초점을 맞췄는지 함께 볼 수 있으며, 수정하거나 테마 변경 등의 기능은 동일하게 활용할 수 있습니다. </p><p style="text-align:justify;"> </p><p style="text-align:justify;"> </p><h3 style="text-align:justify;"><strong>한 번은 꼭 써봐야 하는 이유 </strong></h3><figure class="image image_resized" style="width:100%;"><img src="https://yozm.wishket.com/media/news/2616/image8.png"><figcaption><출처: Galileo AI></figcaption></figure><p style="text-align:justify;"> </p><p style="text-align:justify;">위 이미지는 다른 사용자가 공유한 화면의 프롬프트를 통해 생성했고, 직접 구성 내용을 입력해 이미지와 요청 사항을 확인 후 피그마로 옮긴 모습입니다. 단순 이미지가 아니라, 편집 가능한 상태로 가져오기에 때문에 구체적인 작업을 바로 이어서 진행할 수 있습니다. 물론 생성한 디자인 작업물의 퀄리티도 꽤 만족스러운 수준이고요. </p><p style="text-align:justify;"> </p><p style="text-align:justify;">다만 앞서 잠깐 말한 것처럼 무료 버전으로는 150개 크레딧으로 사용이 제한될 수 있습니다. 단순 계산으로는 텍스트 기준 7개, 이미지 기준 15개의 결과물을 확인하면, 유료 결제를 진행해야 하는데요. 그럼에도 불구하고 초기 구성에 대한 불필요한 작업 시간을 줄이고, 여러 사례를 참고해 초기 디자인 작업을 진행할 수 있습니다. 초기 디자인 컨셉으로 고민하는 분들에게는 충분히 사용 가치가 있는 서비스라고 생각합니다. </p><p style="text-align:justify;"> </p><p style="text-align:justify;"><참고></p><p style="text-align:justify;"><a href="https://www.usegalileo.ai/"><u>https://www.usegalileo.ai/</u></a></p><p style="text-align:justify;"> </p><p style="text-align:justify;"> </p><figure class="table"><table><tbody><tr><td><p style="margin-left:0px;text-align:center;"><strong>[위시켓 AI 컨설팅 무료 이벤트]</strong></p><p style="margin-left:0px;text-align:center;">요즘IT 독자들을 위해 준비했어요. 챗봇/데이터 자동화/업무 효율화 등 AI 도입을 고민하고 있다면 위시켓의 AI 컨설팅을 무료로 신청해 보세요. 문제 상황 정의부터 성과 추적, 솔루션 구축까지 한 번에 제안 드립니다.</p></td></tr></tbody></table></figure><figure class="image image_resized" style="width:100%;"><a href="https://tally.so/r/mB89JY?utm_source=yozm_it&utm_campaign=oncontent_241227"><img src="https://yozm.wishket.com/media/news/2616/CD-1_1280x320.png"></a></figure><p style="text-align:center;"><span style="color:#999999;">©️요즘IT의 모든 콘텐츠는 저작권법의 보호를 받는 바, 무단 전재와 복사, 배포 등을 금합니다.</span></p>