마법같은 UI 프로토타이핑 도구, UiZard

오늘도 어김없이 유튜브 세상을 탐방하던 중, 신박한 광고 하나가 제 눈길을 사로 잡았습니다.

https://www.youtube.com/watch?v=t2IECmMjKlA&t=29s

손으로 그린 와이어프레임을 찍어서 올리면, UI로 바꾸어주는 마법의 산물!!! 너무 놀라서 황급한 사용기를 적으러 왔습니다. 저게 사실이면 스케치, 피그마, 제플린 모두 씹어먹을텐데, 아직까지는 리뷰가 없는 것 같더라구요?

TL; DR

1. UiZard는 손그림을 UI 코드로 바꿔줌
2. 슬프게도 아직 안 나옴
3. https://uizard.io/i/9Sq1Z 여기서 사전 예약

베타 버전 액세스

https://uizard.io/i/9Sq1Z

https://uizard.io/i/?slug=9Sq1Z

위 링크를 통해 접속하시면 다음과 같은 화면이 나옵니다.

 

SIGN UP을 누르면 이런 창이 뜨는데요. 아... 리뷰가 없는 이유가 있었습니다. 아직은 베타 버전이고, 신청한다고 베타 버전 접속 코드가 바로 나오는 게 아니더라고요.... 그래도!! 베타 버전을 신청하면 크레딧을 5만큼 줍니다. 설문 조사를 통해 본인의 직군, 학생인지 프리랜서, 기업인지를 알려주면 다시 크레딧을 5만큼 주고, 주변 사람을 초대해서 가입하게 되면 다시 5만큼 크레딧을 줍니다. 크레딧은 총 30까지 모을 수 있고, 이 크레딧 하나 당 와이어프레임을 코드로 바꿀 수 있다고 하네요..

대충 손으로 그린 와이어프레임을 프론트엔드 코드로 바꿀 수 있는 핵심 기술! 바로 인공지능입니다! UiZard에서는 총 네 개의 연구 결과를 홍보하고 있는데요. 업로드 순서대로 pix2code, Teaching Machines to Understand User Interfaces, Code2Pix, RealMix가 있습니다.

 

pix2code

pix2code는 GUI 스크린샷에서 코드를 만들어내는 인공지능입니다. UI 그림을 인공지능에 넣고 돌리면 이렇게 iOS 개발에 사용할 수 있는 .storyboard 포맷으로 추출이 됩니다.

https://www.youtube.com/watch?v=pqKeXkhFA3I

Teaching Machines to Understand User Interfaces

pix2code에서 한 발 더 나아간, 손 그림 형태에서 코드를 만들어내는 것에 대한 과정인데요, 공개된 영상을 보시면 포토샵에서 그린 뒤 이를 UiZard에 넣어주면 .storyboard 포맷으로 export 되는 것을 볼 수 있습니다. 이 영상이 공개된 게 2017년이니, 얼마나 더 발전했을지 기대가 되네요.

https://www.youtube.com/watch?v=DapKYJ6niC

Code2Pix

Code2Pix는 pix2code의 반대 과정을 수행하는 걸로 볼 수 있겠죠. 이 인공지능은 Pix2Code의 정확도를 높이는 데에 사용된다네요. Code2Pix라고 해도, 그 코드는 정확한 코드가 아닌 psuedo code 형태의 약식 코드입니다. 논문에서는 다음과 같이 설명하고 있습니다.

논문에서는 pix2code와 code2pix를 결합하여 GAN 형태로 사용하는 것에 방점을 찍고 있습니다.

관심이 있으신 분은 이 쪽에 https://towardsdatascience.com/code2pix-deep-learning-compiler-for-graphical-user-interfaces-1256c346950b기회가 된다면 pix2code, code2pix 모두 번역해보고 싶네요.

Code2Pix - Deep Learning Compiler for Graphical User Interfaces

Real Mix

RealMix는 준지도학습을 위한 알고리즘입니다. 인공지능에는 데이터에 레이블을 붙여 주어야 하는 지도학습과 라벨 없이 스스로 학습을 진행하는 비지도학습이 있습니다. 하지만 잘 동작하는 비지도학습을 만들기는 매우 힘든데요. 때문에 적은 양의 레이블 된 데이터와 많은 양의 레이블이 없는 데이터를 한번에 학습할 수 있는 준지도학습이 나왔습니다.

아쉽게도 RealMix에 대한 데모 동영상이 없어 보여드리기 힘드네요 그래도 관심이 있다면 아래 논문과 깃헙을 통해 충분히 습득하실 수 있습니다.

논문: https://arxiv.org/abs/1912.08766

RealMix: Towards Realistic Semi-Supervised Deep Learning Algorithms

깃헙: https://github.com/uizard-technologies/realmix

uizard-technologies/realmix

결론

아직 출시되지도 않은 프로그램을 너무 기대하는 건 좋지않지만.. 그래도 너무 신박해서 기대가 됩니다.... 앞으로 베타 버전을 사용하게 되면 리얼한 사용기를, 출시 상황에 따라 출시 정보를 올릴 생각입니다...