brunch

매거진 퓨쳐드릴 뉴스레터

라이킷 9 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 박송이 Sep 23. 2024

AI로 시작하는 새로운 UI 디자인 방식

UI 그려주는 인공지능 서비스 알려 drill게요

2024.05.20 | vol. 29 | 구독하기 | 지난호 보기

미래에 할 수 있는 경험을 사전 예약하신 퓨처드릴 구독자, 드릴러 여러분 안녕하세요! AI와 UX의 알쏭달쏭한 점들을 시원하게 알려 drill 퓨처드릴 에디터 쏭입니다.

오늘은 UI를 그리는데 특화된 인공지능 서비스 두 가지를 소개하고 이를 이용해서 제가 지금 진행하고 있는 사이드 프로젝트에 적용하는 과정까지 모두 소개해 drill게요~!

모두 Follow me ~

시작하기 - Turning On the Drill

인공지능이 UI도 그려준다고?!!

달리나 미드저니와 같은 생성형 인공지능을 이용해 이미지를 생성하는 게 이제는 더 이상 놀라운 일이 아니죠! 단순 이미지뿐만 아니라 앱이나 웹 서비스에 필요한 UI도 인공지능을 이용해 생성할 수 있습니다.

오늘 소개드릴 두 가지 서비스는 단순히 UI 생성에서 끝나는 것이 아니라, 결과물을 다듬을 수 있는 기능도 제공하는 인공지능 기반의 디자인 툴입니다. 이러한 도구들은 디자이너들이 초기 디자인에서 세부 조정에 이르기까지 모든 과정을 보다 효율적이고 창의적으로 진행할 수 있도록 돕습니다.

첫 번째로 소개할 서비스는 UIZARD입니다. UIZARD는 직관적인 인터페이스와 다양한 기능을 제공하여 피그마와 유사한 사용자 경험을 제공합니다. 특히, 드래그 앤 드롭 방식으로 간편하게 UI를 구성할 수 있으며, 인공지능이 자동으로 디자인 요소를 제안해 주어 초보자도 쉽게 사용할 수 있습니다.

두 번째 서비스는 Visily입니다. Visily는 현재 전면 무료로 제공되고 있으며, 사용자들이 쉽게 UI를 디자인할 수 있도록 다양한 템플릿과 도구를 제공합니다. 비록 기능이 다소 제한적이긴 하지만, 기본적인 UI 디자인 작업을 수행하는 데는 충분한 도구들을 갖추고 있습니다.

이 두 가지 서비스는 모두 디자이너들에게 큰 도움이 될 수 있는 도구들이지만, 각각의 장단점을 고려하여 자신에게 맞는 서비스를 선택하는 것이 중요합니다. 먼저 간략히 서비스 특징을 알아보고 지금 제가 진행하고 있는 사이드 프로젝트에 UIZARD를 이용하는 과정까지 보여 drill게요!

[Part 1] UI를 그릴 수 있는 두 가지 서비스 소개

1. UIZARD.io

Uizard.io는 혁신적인 디자인 도구로, 디자이너들에게 손쉽고 빠르게 프로토타입을 제작할 수 있는 강력한 설루션을 제공합니다. 이 플랫폼은 사용자의 아이디어를 실현시키는 과정을 단순화하고 가속화하여, 복잡한 디자인 소프트웨어에 대한 의존도를 낮춰줍니다. 다음은 Uizard.io가 제공하는 핵심 기능입니다.

[핵심기능 1] AI UI Design

UIZARD에서 제공하는 생성형 인공지능을 이용하면 더 빠르게 아이디어를 도출하고 디자인할 수 있습니다. 간단한 텍스트 프롬프트를 사용하여 몇 초 만에 실제와 같은 제품을 만들 수 있습니다.

[핵심기능 2] Screenshot Scanner

스크린숏을 업로드하고 AI의 힘으로 이를 편집 가능한 앱 디자인으로 변환하세요. 좋아하는 앱, 웹사이트, 또는 UI의 스크린샷을 업로드하기만 하면, Uizard가 영감을 현실로 바꾸는 작업을 쉽게 만들어줍니다.

[핵심기능 3] Wireframe Scanner

손으로 그린 와이어프레임을 스캔하면 Uizard의 AI UI 디자인 기능이 어려운 작업을 대신해 줍니다. Uizard 와이어프레임은 여러분의 와이어프레임 스케치를 몇 초 만에 디지털 디자인으로 변환해 줍니다.

UIZARD.io 정리

� 링크 : https://uizard.io/

� 장점 : 인공지능으로 디자인할 수 있는 다양한 기능 제공 (UI 생성의 모든 것 제공)

� 단점 : 무료 사용자는 만들 수 있는 컴포넌트 개수에 제한 있음

� 가격 : Free - 무료 / Pro - 12$ / Business - 49$

2. visily.ai

Visily.ai는 디자이너들을 위한 혁신적인 디자인 도구로, 간편하고 직관적인 방법으로 고품질의 와이어프레임과 프로토타입을 제작할 수 있는 설루션을 제공합니다. Visily.ai는 디자인 작업을 보다 효율적이고 창의적으로 만들기 위해 다양한 기능과 도구를 제공합니다. 다음은 Visily.ai에서 제공하는 핵심 기능입니다.

[핵심기능 1] Text to Diagram

간단한 텍스트 프롬프트를 통해 편집 가능한 플로우차트와 다이어그램을 즉시 만들 수 있습니다.

[핵심기능 2] Screenshot to Design

기존 UI를 간단히 수정하고 싶나요? Screenshot to Design AI는 이미지를 편집 가능한 화면으로 즉시 변환해 줍니다.

[핵심기능 3] Sketch to Design

종이에 아이디어를 스케치하고 Visily에 업로드하면 편집 가능한 디자인 파일을 받을 수 있습니다.

visily.ai 정리

� 링크 : https://www.visily.ai/

� 장점 : 무료!

� 단점 : 무료인 만큼 기능이 다소 제한적 (인공지능 기능이 몇 개 없음)

� 가격 : Starter - 무료 / Pro - 준비 중

[Part 2] 시니어 세대를 위한 지식공유 플랫폼 기획하기 with UIZARD

UIZARD를 내 사이드 프로젝트에 적용해 보기

요즘 저는 시니어 세대를 위한 지식공유 서비스를 사이드 프로젝트로 준비하고 있습니다. 젊은 세대를 위한 학습 사이트는 이미 넘치도록 많지만, 시니어분들이 이용할 수 있는 학습 사이트는 아직 부족한 것이 현실입니다. "시니어 세대를 위한 지식 공유 서비스"라는 콘셉트는 정했는데 어떤 기능이 들어가면 좋을지 세부 기획은 하지 못한 상태입니다. 아래에서는 UIZARD의 AutoDesigner 기능을 이용해서 간단히 프롬프트를 넣어보고 서비스가 어떤 식으로 전개되면 좋을지 아이디어를 얻어보겠습니다.

AutoDesigner 기능을 이용해 서비스 기획의 틀 잡기

먼저 Chat-GPT를 이용해 프롬프트를 작성했습니다.

The first project is a knowledge-sharing service for the senior generation. Lectures are provided in the form of short videos, similar to shorts. If users who watch these lectures want to learn more in detail, they can request 1:1 or group lectures with the instructor, which can be conducted online or offline. The main points are:

1. The core users are seniors.
2. Lectures are provided in the form of short videos.
3. After watching these short videos, users can request personal lectures for more detailed learning.

저는 세 가지 특징(1. 핵심 사용자가 시니어 세대 2. 강의는 쇼츠 형태로 제공됨. 3. 해당 쇼츠를 보고 더 자세히 배우고 싶으면 개인적으로 강의를 요청하는 방식)을 핵심으로 화면을 그려달라고 요청했습니다. 각 특징을 화면에 잘 녹여냈는지 핵심 화면을 보고 확인해 볼게요~!

1. Discover

오호~ 제가 요청한 짧은 강의를 보고 이 강의가 마음에 든다면 추가 강의를 요청할 수 있다는 기능을 꽤 충실하게 녹여냈습니다. Requesting 1:1 Lectures 부분이 제가 생각했던 부분인데 아래 Join Chat 기능을 통해 강의를 요청하는 방식으로 디자인되어 있습니다. 다만 제가 2번 특징으로 강의는 쇼츠 형식의 짧은 강의라고 써 놨는데도 43분짜리 강의가 나와 있네요.�

2. Chat

채팅창 화면이 꽤 꼼꼼하게 표현되어 있습니다. 하지만 저는 토론에 대한 부분을 요청한 적은 없는데 학습 사이트라고 생각해서 토론 기능도 알아서 추가해 준 것 같습니다. 지금까지는 강사와 학생 사이의 1:1 소통만 생각했었는데 이런 식으로 같은 수업을 들은 학생들끼리 소통할 수 있는 채팅방이 있는 것도 좋은 아이디어 같습니다. 오른쪽 제일 위에 학습 비디오라고 나와 있는데 토론 창에 어떤 강의에 관련된 토론인지 쉽게 알 수 있게 해주는 부분이 좋은 아이디어 같습니다.

3. Product Details

서비스 이름은 알아서 SeniorWido라고 적어주었네요…. 서비스명은 별로인 것 같습니다.� 쇼츠 기반의 짧은 강의가 핵심이라고 말했는데도 학습 모듈과 같은 시스템을 디자인해 주었습니다. 원래는 컬렉션으로 비슷한 강의들을 단순히 묶어주려고 했는데 모듈과 같은 좀 더 확장된 방식으로 강의를 구성하는 것도 괜찮은 아이디어 같습니다. 오른쪽에 Active Participants라고 나와 있는데 이처럼 활발히 서비스를 이용하고 있는 사용자를 표시해 주고 시니어들끼리 도움을 주고받는 방식도 괜찮을 것 같습니다. 강의를 듣고 뭔가를 배웠다면 다른 사람을 도와줄 수도 있으니까요!

총평

제가 핵심적으로 생각한 특징을 기반으로 짧은 프롬프트를 만들어 입력했는데도 꽤 그럴듯한 화면을 그려주긴 하네요. 물론 자세히 들여보면 허점투성이긴 합니다 ㅎㅎ 하지만 대부분의 인공지능 서비스가 제공하듯이 이렇게 화면을 그리는 것도 프롬프트를 바꿔가면서 재생성해 볼 수 있기에 조금씩 프롬프트를 바꿔보면서 새로운 아이디어를 탐색해 보고 내 서비스에 녹여본다면 꽤 괜찮은 아이디어를 얻을 수 있으리라 생각됩니다.

마무리하기 - Turning Off the Drill

여러분, 오늘 내용 어떠셨나요? 이미지를 만들 수 있는 인공지능 서비스는 많이 있지만, UI에 특화된 서비스는 다소 한정적이라 많은 서비스를 소개해 드리지 못해 아쉬움이 남습니다.

UIZARD는 기능이 많고 피그마에서 사용할 수 있는 기능들을 거의 다 사용할 수 있다는 점에서 장점이 있지만, 무료 사용자는 만들 수 있는 컴포넌트 개수에 한계가 있어 다양한 시도를 해보는 데 어려움이 있었습니다. Visily는 아직은 전면 무료이지만 기능이 다소 부족하여 Visily에서 할 수 있는 것들은 거의 UIZARD에서도 할 수 있었습니다. 제한이 있긴 하지만 인공지능과 함께 새로운 방식으로 디자인을 해보고 싶은 분들에게는 UIZARD를 추천해 드립니다.

그동안 달리나 미드저니를 이용해서 이미지를 만들어 본 경험은 있었으나 이렇게 UI를 만들어 본 경험이 오늘이 처음이었습니다. 사용해 보니 아직은 제가 직접 디자인하는 게 더 낫다는 묘한 자신감이 들기도 하고, 빨리 더 기술이 발전해서 불필요한 반복 작업이 축소되고 더 중요한 작업에 제 시간을 쓸 수 있었으면 좋겠다는 생각이 들기도 했습니다.

앞으로도 실생활에서 활용할 수 있는 유용한 지식을 꼼꼼히 전달해 드리겠습니다.

오늘도 긴 글 끝까지 읽어주셔서 감사합니다.