Pix2Code, 디자인 스크린샷에 따라 코드를 만들어주는 인공지능 툴

디자이너가 앱이나 웹의 GUI를 만들면 개발자가 그걸 보고 실제 작동하는 코드로 작성하는 작업은 모든 프로그램 개발 과정에서 항상 수행되던 일이다. 코펜하겐에 위치하고 있는 스타트업 울자드 테크놀러지(UIzard Technologies)가 이 과정에서 많은 고충을 겪고 있는 디자이너와 개발자들에게 반가울 만한 연구결과를 발표했다.

UIzard의 창업자 Tony Beltramelli가 소개한 Pix2Code는 학습된 신경망을 사용해 안드로이드와 iOS, 그리고 다른 웹기반의 GUI 스크린샷을 보고 그에 맞는 코드를 작성해낸다. 심층 신경망(deep neural network)을 사용해 GUI스크린샷과 대응되는 코드를 보고, 코드 작성 방법을 스스로 학습하는 방식(learning-based)으로, 기존의 접근방식이었던 GUI코딩의 패턴이나 규칙을 자동화 프로그램에 입력해  자동화하려 했던(rule-based) 방식과는 다른 접근 방식이다. 기존의 자동화 방식들이 언어 내부 구조나 내부API를 통해 이루어졌다면, Pix2Code는 실제 프론트-엔드 개발자들이 하는 것처럼, 픽셀로 표현되어 있는 GUI스크린샷만을 보고 코드를 작성한다는 점이 다른점이다.  Arxiv에 발표된 논문에 따르면 현재는 코드작성에 있어서 77퍼센트의 정확도를 보여준다고 한다. 상당히 높은 수치지만, 실제 우리가 사용하는 서비스로 나오기 까지는 정확도외에도 코드 작성 방법의 일관성 등 여러 가지가 미래에 개선되어야 할 점으로 남아있다. 아래 영상을 통해 Pix2Code가 동작하는 모습을 간단하게 볼 수 있다.

많은 디자이너와 개발자들이 한 번쯤은 상상해봤을 법한, GUI를 위한 코딩을 더 이상 하지 않아도 되는 시대가 올지도 모르겠다.

참고 자료Official research paper

Written by

의료인공지능 회사 뷰노에서 연구자로 일하고 있습니다. 인공지능과 로봇산업 분야 발전에 많은 관심을 가지고 있습니다. 기술이 사회를 어떻게 바꾸어 나갈 것이고, 그로 인해 발생한 문제를 사회 구성원들이 어떻게 해결해 나가야 할지 도울 수 있는 정보들을 공유하고 싶습니다.