출처: http://www.wired.co.uk/article/pix2code-ulzard-technologies

그래픽 유저 인터페이스의 스크린샷 이미지를 실제 컴퓨터 코드로 바꿔주는 Pix2Code의 작동원리

a) 먼저 그래픽 유저 인터페이스의 스크린샷 이미지와 그에 대응하는 DSL 코드를 인공신경망에 입력하여 훈련을 시킨다.
b) 훈련을 마친 인공신경망에 다른 그래픽 유저 인터페이스의 스크린샷 이미지를 입력하면 그에 대응하는 DSL 코드가 자동으로 생성되며,
이를 컴파일하면 안드로이드나 아이폰 운영체제에 맞는 코드가 만들어진다. 해당 코드를 컴퓨터/스마트폰에 넣고 돌리면
인공신경망에 입력했던 것과 똑같은 기능을 가진 그래픽 유저 인터페이스가 생성된다.

The gap between graphic designers and coders just got smaller. Until now, if you wanted to build a graphic user interface, whether for app design or custom websites, you would have to enlist a developer to turn your ideas into code. But designers could soon take this power into their own hands.

그래픽 디자이너와 코더 간의 차이가 방금 줄어들었다. 지금까지는 앱 디자인이든지 웹사이트 제작이든지 간에 일단 그래픽 유저 인터페이스를 만들려면 아이디어를 코드로 바꿔줄 개발자를 불러야 했다. 하지만 얼마 안 있으면 권력이 디자이너들에게 옮겨갈 것으로 보인다.

Copenhagen-based startup UIzard Technologies has developed an app, Pix2Code, which uses a trained neural network to transform screenshots into lines of code. All it needs is an image of a design for a graphic user interface (GUI) and, once recognised, it begins to automatically churn out corresponding code. Even more impressively, it creates code that's compatible with Android, iOS and web-based technologies – a rare functionality across platforms.

코펜하겐에 위치한 울자드 테크놀로지스에서 개발한 Pix2Code 앱은 훈련을 받은 인공신경망을 사용하여 스크린샷을 일련의 코드로 바꿔준다. 여기에 필요한 것은 그래픽 유저 인터페이스의 디자인 이미지 뿐이며, 해당 이미지를 앱에 입력하면 이에 알맞는 코드를 생성해준다. 더욱 놀라운 것은 생성된 코드가 안드로이드, iOS 및 기타 웹기반 기술과 호환된다는 점인데, 이러한 플랫폼 간 호환가능성은 매우 드문 기능이라고 할 수 있다.

The Pix2Code prototype only needs a single input image and has demonstrated an accuracy of 77 per cent. Tony Beltramelli, the founder of UIzard, states that he believes Pix2Code has the potential to "end the need for manually-programmed GUIs".

Pix2Code 프로토타입은 오로지 이미지만 입력해주면 되며 약 77%의 정확도를 보였다. 울자드 테크놀로지스를 설립한 토니 벨트라멜리는 Pix2Code가 수동으로 프로그래밍되는 그래픽 유저 인터페이스에 종말을 가져다 줄 것이라고 확신한다.

In order to program the neural network, Beltramelli says that the team had to overcome three main problems. The first being computer vision - that a computer will not automatically understand the given scene and cannot naturally identify the objects present, their positions, and characteristics (i.e. buttons and labels). Secondly, they had to overcome a language problem – the issue of teaching the network to understand text, so it could create accurate samples. Finally, the deep learning programme had to be trained to understand the link between code, text and the corresponding images, so it could connect all three while generating new code.

인공신경망을 프로그래밍하기 위해 토니 벨트라멜리는 3가지 과제를 해결해야 했다. 첫번째 과제는 컴퓨터 비전기술로 컴퓨터가 자동으로 주어진 배경을 이해하고 거기에 있는 물체 및 그 위치, 속성(버튼이나 라벨 등등)을 인식하지 못한다는 점이었다. 두번째 과제는 언어 문제로 텍스트를 이해하고 그에 따라 정확한 샘플을 생성하도록 가르쳐야 한다는 점이었다. 세번째 과제는 인공신경망에게 코드와 텍스트, 그리고 이미지 간의 상관관계를 이해시켜서 새로운 코드를 생성하도록 훈련시켜야 한다는 점이었다.

In the future, Beltramelli writes, Generative Adversarial Networks (GANs) could be used to further update Pix2Code. GANs have shown promising accuracy when generating sequences and images. However, this is a relatively unexplored area of research and the need to train neural networks takes a considerable amount of time – posing an obstacle for the quick progression of this technology. But the obstacle may soon be overcome – thanks to the internet.

토니 벨트라멜리는 자신의 글에서 생성적대신경망을 사용하면 Pix2Code 앱을 더욱 발전시킬 수 있다고 적었다. 생성적대신경망은 일련의 순서나 이미지를 생성하는데 매우 높은 정확도를 보인다. 하지만 해당 분야는 상대적으로 연구가 이루어지지 않고 있으며 인공신경망을 훈련시키려면 많은 시간이 필요하다는 점이 해당 기술의 빠른 발전에 걸림돌이 되고 있다. 하지만 인터넷 덕분에 이 걸림돌은 곧 사라질 것으로 보인다.

Merging the fields of design and coding is becoming a trend – Google has recently launched a Data GIF Maker to transform code into colourful animations. It's the natural successor to pie charts and other spreadsheet methods of data presentation – except in this case the figures you enter into the program turn into bold comparisons that literally push against each other on screen.

디자인과 코딩의 통합이 점점 대세가 되어가고 있다. 최근에 구글이 출시한 Data GIF Maker는 코드를 화려한 애니메이션으로 바꿔준다. 이는 데이터를 시각적으로 표현하여 주는 각종 차트와 스프레드시트의 확장판이라고 할 수 있다. 이 경우에는 당신이 프로그램에 입력하는 숫자가 이미지로 바뀐다는 점이 다를 뿐이다.