UI 디자인을 도와주는 AI: Visily를 알아보자
생성 AI기술을 기반으로 UX/UI 디자인을 도와줄 수 있는 다양한 AI 서비스들이 출시가 되고 있습니다. 꽤 다양한 기능을 제공하고 있는 Visily ai의 주요 기능들을 소개해보도록 하겠습니다.
스크린샷을 디자인으로 변환하는 기능
Visily는 스크린샷으로 찍은 UI 이미지를 바로 편집 가능한 와이어프레임으로 변환해줍니다. 참고해서 업데이트하고 싶은 기존 UI의 스크린샷을 찍고 Visily에 업로드를 합니다. 그러면 AI가 이를 편집 가능한 와이어프레임으로 변환합니다. 기존 작업된 UI를 리디자인하기에 아주 유용한 기능입니다.
Screenshot to Design스크린샷을 디자인으로 사용하기 위한 팁:
UI 이미지를 보다 쉽게 와이어 프레임으로 변경하는 방법은 DB 사이트를 활용하는 것입니다. 기존 DB 사이트에서 마음에 드는 UI 디자인을 찾습니다. 그리고 이미지를 ctrl+c로 복사하고 Visily에서 ctrl+v로 붙여넣습니다. 그저 복사하여 Visily 캔버스에 붙여넣고, 매직 이미지로 변환하면 와이어프레임으로 즉시 변환할 수 있습니다. 와이어프레임으로 변경한 이후에 세부 아이콘과 텍스트 모든 요소를 변경할 수 있습니다.
Tip1. for Screenshot to DesignChrome 확장 프로그램:
이런 Screenshot to Design 기능은 Visily의 Chrome 확장 프로그램을 사용하면 디자인 워크플로우를 더욱 단순하게 만들 수 있습니다. Chrome 확장 프로그램을 설치하고, 어떤 웹사이트에서든 스크린샷을 직접 캡처하면 됩니다. 그리고 바로 Visily로 import하면 해당 UI 화면을 Visily에서 바로 편집할 수 있습니다.
Tip2. for Screenshot to Design스케치에서 디자인으로:
이 기능은 손으로 그린 그림을 UI 디자인 작업이 가능한 와이어프레임으로 변경해주는 기능입니다. 컴퓨터에서 작업하지 않고 손으로 UI를 스케치 합니다. 그리고 해당 이미지를 사진으로 찍어서 Visily에 업로드하면, 손으로 그린 그림이 편집 가능한 와이어프레임으로 변환 됩니다.
Sketch to design텍스트를 다이어그램으로:
UI 디자인을 하다 보면 워크 플로우를 작업하며 다이어그램이 필요한 경우들이 있습니다. 보통 PPT 같은 소프트웨어를 활용해서 다이어그램을 만들었는데 Visily에서는 이 작업을 텍스트로 요청해서 수행할 수 있습니다. Visily에게 필요한 워크플로우를 텍스트로 설명하면 즉시 논리적인 다이어그램으로 변환해줍니다.
Text to DiagramLow-fi와 High-fi 스위처:
UI 디자인을 하다보면 화면을 단순화하는 것이 더 용이한 경우들이 있습니다. 아이디어를 빠르게 테스트해야 할 때는 Low-fi 모드로 전환을 할 수 있습니다. 이를 통해서 세부 사항에 얽매이지 않고 핵심 기능을 검증할 수 있습니다. 다시 디자인을 최종적으로 세부적으로 다듬을 준비가 되었다면 High-fi 모드로 전환하여 디자인을 완성하면 됩니다.
Low-fi / High-fi Switcher매직 테마:
기존 웹사이트의 이미지 테마에서 좋은 영감을 받았다면 이를 참고해서 적용할 수 있습니다. 클릭 한 번으로 기존 UI의 테마를 추출해서 활용할 수 있습니다. 또한 멋진 분위기의 이미지를 가지고 있다면, 이미지를 업로드해서 즉시 색상 팔레트를 생성할 수 있습니다. 그 외에도 방대한 큐레이션 라이브러리가 제공되기 때문에 다양한 옵션을 선택할 수 있습니다. 무엇보다 일일이 UI 요소들을 바꾸지 않아도 전체 화면의 테마를 동시에 변경해줍니다.
Magic Theme매직 이미지:
UI 화면에 들어갈 적절한 이미지가 필요한 경우가 있습니다. 매직 이미지는 이를 도와주는 기능입니다. 디자인과 완벽하게 어우러지는 비주얼이 필요면 텍스트 창에 이미지에 대한 설명을 넣어주면 됩니다. 이상적인 이미지를 설명하면 매직 이미지가 이에 적합한 다양한 이미지 소스를 추천해서 제공합니다.
Magic Image스마트 테이블 데이터 채우기:
스마트 테이블은 테이블에 들어갈 데이터를 채우기 작업에 큰 도움을 줍니다. 테이블에 일반적으로 들어가는 이메일 주소, 전화번호, 가격 등 이에 대한 기능들을 모두 옵션으로 선택해서 일괄적으로 변경해줄 수 있습니다. 열 내에서 요소 스타일을 사용자 지정 한 번의 클릭으로 적용할 수 있는 것입니다. 또한 테이블의 구조를 유연하게 재구성하여 행과 열을 추가, 제거, 재배열할 수 있습니다.
Smart Table (1)스마트 테이블 데이터 채우기:
또한 테이블에 들어가는 다양한 컴퍼넌트들을 편하게 넣을 수 있습니다. 토글 스위치, 평가 랭킹, 프로그래스 바, 상호작용 요소 등 다양한 데이터 유형을 텍스트와 숫자와 함께 편하게 넣을 수 있습니다. 정적인 테이블을 매력적인 데모 버전으로 바꿀 수 있는 것입니다.
Smart Table (2)매직 콘텐츠:
UI 디자이너가 웹사이트의 텍스트를 채워 넣어야 하는 경우도 있습니다. 콘텐츠의 제목만 있다면 텍스트 생성 AI가 기존의 글을 개선하거나 문법, 철자를 교정해줍니다. 아예 새로운 텍스트를 생성할 수도 있습니다. AI로 콘텐츠 생성 작업을 처리하게 하면 프로젝트 수행의 질을 향상시키고 시간을 절약할 수 있습니다.
Magic Contents텍스트를 디자인으로:
이제 언어로 UI를 디자인하는 시대입니다. 텍스트로 UI 디자인을 설명하면 디자인 해주는 이 기능은 창의적인 탐색의 새로운 차원을 열어줍니다. 원하는 레이아웃, 색상 팔레트, 전체 분위기를 설명하고 Visily가 초기 개념을 생성하도록 합니다. 그러면 다양한 컨셉을 빠르게 생성하여 브레인스토밍 과정을 가속화하여 더 멋진 디자인 방향을 빠르게 찾을 수 있습니다.
Text to Design생성 AI 기술은 대규모 데이터 학습을 통해서 계속적으로 결과 값이 좋아지고 있기 때문에 UX/UI 디자인을 위한 도구들 역시 앞으로 결과의 질이 더 좋아질 것으로 예상이 됩니다. Visily가 현재 현업에서 사용될 수 있는 가치는 제한적이겠지만 앞으로의 발전 가능성을 기대해봅니다 : )
AI 디자인 (UX/UI) 오픈 채팅방
https://open.kakao.com/o/gu8o45gf
인공지능 디자인협회 AI x UX/UI Design (무료) 세미나 뉴스레터 신청
* 확인 메일이 안 보이면 스팸함을 확인해주세요.
AI-Powered Design Lab 유튜브 채널
https://youtu.be/fpEImvWmPNQ?si=fyzFGm6zorjGiCBh
#AI #생성AI #디자인 #디자이너 #UX #UI #사용자경험디자인 #Visily #비즐리
