Uizard 뽀개기 🚀 텍스트 한 줄로 내가 원하는 UI 디자인 완성

예전에 다혜님께서 아이디어만 입력하면 앱을 설계해주는 챗봇을 개발하는 과정을 발표해주시면서 위자드 AI를 알려주셨습니다. 그래서 크리스마스를 맞아 저도 한 번 위자드를 뽀개보기로 합니다. (다혜님 게시글)

제공하는 템플릿 🎨

꽤 다양하고 예쁜 템플릿들을 많이 제공해서 - 해당 템플릿으로부터 쉽게 시작할 수 있습니다. 저는 커뮤니티 이벤트를 개설하고 다른 사람들이 참여할 수 있는 서비스를 만들고 싶었는데 이런 형태의 템플릿은 없더라고요. 쿨하게 포기합니다.

AI Autodesigner - 앱 설명 입력하면 1분만에 앱 디자인 완료 🎄

원하는 앱 서비스에 대한 설명을 영어로 300자 이내로 작성합니다.

App type: SNS

This app provides social networking features that allow users to create community events and allow other members to join. 

Core features: 1) Event creation and management features, 2) Member engagement and communication features, 3) Event search and recommendation system

그리고 원하는 앱 디자인 스타일을 입력해줍니다.

key color : fancy purple, airbnb style

약 1분이 지나고 나온 결과물! 전형적인 소셜 미디어 템플릿과 유사하게 만들어줬습니다. 서비스 이름도 ‘EventShare’라고 지 맘대로 붙였습니다.

개별 페이지 디자인

보니까 호스트가 행사를 개설하고 참가자를 관리하는 페이지는 디자인에 빠져있습니다. 이것도 추가로 그려달라고 해보겠습니다. 그러면 5개의 샘플 페이지를 제안해줍니다. 하나를 선택해서 Use Screen을 누르면 화면이 추가됩니다.

Design a page for hosts to create community events

그리고 이벤트를 개설한 후 상세 페이지를 확인할 수 있는 화면도 그려달라고 했습니다.

그런데 보면 볼수록 그럴듯 하긴 한데, 프로토타이핑 연결을 해보면 좀 형식적이고 불필요한 화면도 많은 것 같습니다. 역시 AI로 한 번에 앱 디자인을 하는건 아직 무리인 듯 합니다.

다른 서비스 카피하기

위자드에서는 다른 서비스의 스크린샷을 첨부하면 각각의 컴퍼넌트를 분리해주는 기능도 제공하고 있습니다. 대표적인 커뮤니티 서비스 중 하나인 트레바리 서비스 화면을 캡쳐하여 넣어보았습니다. 오 이게 되네…? 폰트가 조금 깨지긴 하지만 전체적인 디자인 틀을 잡는데는 충분히 활용해볼 수 있지 싶습니다.

테마 생성하기 💡

Generate Theme기능을 이용해서 앱의 전반적인 테마를 변경할 수 있습니다.

1. 프롬프트를 입력해서 테마를 만들거나, 2. 스크린샷으로 다른 서비스의 테마를 벤치마크할 수도 있습니다.

저는 유명한 ‘무신사’ 화면을 캡쳐해서 테마를 만들어달라고 요청했습니다. (사실 딱히 뭐가 변한건지 모르겠습니다…? 키 칼라가 바뀐거말고는) 어쨌든 이렇게 생성된 테마로 일괄 변경할 수도 있습니다.

와이어프레임 모드로 전환

Wireframe mode라는 기능을 선택하면 위에서 생성한 앱을 와이어프레임 형태로 그려줍니다. 왜 필요한 기능인지는 모르겠지만 일단 신기하니까 합격…! 만약 AI 툴을 잘 못 쓰는 회사라면 이 와이어프레임을 우선 대표에게 제출하고, 미리 생성된 앱 화면을 나중에 갖다주면 한 달 정도 업무 시간을 벌며 월루를 실현할 수 있지 싶습니다.

마지막으로 Focus Predictor

생성되어 있는 프레임에서 ‘Focus Predictor’를 누르면 유저들이 주로 클릭을 많이할 것으로 예상되는 히트맵을 보여줍니다. 즉 붉은색 영역일수록 신경써서 디자인을 해야하는 것이죠. 그런데 이 기능도 음… 어떻게 활용을 해야할지는 모르겠습니다.

덧. 재미없는 이미지 생성 기능

모든 서비스에 있는 이미지 생성기능 - 위자드에도 있습니다. 일본 만화 스타일로 그려달라고 했는데 잘 하지는 못하는 듯 합니다.

그래서 이걸 어떻게 쓸건데?

각각의 화면을 누르면 React나 CSS 코드를 확인할 수 있습니다. 그런데 정말로 치명적인 문제가 있습니다. 각각 화면의 전체 코드가 아니라 사진 혹은 텍스트, 아이콘 단위단위의 코드만 개별적으로 얻을 수 있어요. 즉 하나의 화면을 구성하는 코드를 짜기 위해서는 모든 컴퍼넌트를 클릭하고 > 코드를 복붙하는 과정을 거쳐야합니다. 또한 화면을 선택하고 export를 누르면 통 화면이 png나 pdf로 다운받아져서 - 사용할 수가 없습니다. 피그마로 export할 수 있는 기능도 현재는 없어보입니다.

즉… 예쁜 화면을 그리는데는 사용성이 높으나, 결국 개발과 연결할 때 어떻게 해야할지 모르겠다는….? 혹시 나만 모르는 것일수 있으니 아시는 분은 좀 알려주세요. 😂

유료 결제하고 Uizard AI 열심히 파본 썰…! 저랑 더 파보실 분 계시면 언제든 연락 주세용

다들 메리크리스마스 🎄

2024년에도 함께해요