CWN(CHANGE WITH NEWS) - 손으로 그린 그림을 단 몇 초 만에 HTML 코드로 바꿔주는 AI가 있다?

HTML이란, 웹 문서를 만드는 데 사용하는 기본적인 웹 언어의 한 종류를 말한다. 인터넷에서 웹을 통해 접근되는 대부분의 웹 페이지들은 HTML로 작성된다. 우리가 생각해 낸 아이디어를 HTML 코드로 수동으로 변환시킨다면 아이디어를 생각해내는 시간뿐 아니라 HTML 코드로 구현하는 데에도 시간이 걸리게 된다.

그런데, 우리가 손으로 그린 그림을 단 몇 초 만에 HTML 코드로 자동으로 변환해주는 서비스가 있다면 어떨까? 상상만 해도 정말 편리하지 않은가?

마이크로소프트(MS)는 손으로 그린 그림을 HTML 코드로 자동으로 구현해주는 서비스인 ‘Sketch2Code’를 개발했다. ‘Sketch2Code’는 Microsoft AI Lab에 공개되어 있는 프로젝트 중 하나이다.

이용 방법은 매우 간단하다. 우선 HTML 코드로 변환하고자 하는 아이디어를 그림으로 그리고 사진을 찍는다. 그리고 그 사진을 이 서비스에 업로드 하면 자신이 그렸던 그림이 자동으로 HTML 코드로 변환된다.

▲ Microsoft AI Lab에서 Sketch2Code를 실행한 화면.

▲ Sketch2Code 실행 후, PREDICTED OBJECT DETAILS 버튼을 클릭한 화면. AI가 이미지를 어떻게 인식했는지 자세히 알아볼 수 있다.

▲ Sketch2Code에서 다운로드한 HTML 코드의 일부. Sketch2Code 실행 후, DOWNLOAD YOUR HTML CODE 버튼을 클릭하면 Sketch2Code를 통해 생성된 HTML 코드를 다운로드 받을 수 있다.

마이크로소프트가 이 기술을 구현한 원리는 다음과 같다.

① 텍스트 상자나 단추와 같은, 손으로 그린 웹 디자인 요소를 인식하도록 AI 모델 교육

② 텍스트 인식 기능을 사용해, 디자인에 있는 손으로 작성한 텍스트 추출

③ 디자인 요소와 추출된 콘텐츠를 결합함으로써 디자인에 있는 다양한 요소의 HTML 스니펫(snippet, 재사용 가능한 소스코드, 기계어, 텍스트의 작은 부분을 일컫는 용어) 생성

④ 식별된 요소의 위치로부터 디자인의 레이아웃을 유추하여 최종 HTML 코드 생성

Sketch2Code가 디자인을 HTML 코드로 변환하는 데 필요한 시간은 단 몇 초뿐이다. 그러므로 이 기술을 활용한다면, 웹사이트를 구축하는 데 걸리는 시간을 크게 단축할 수 있을 것이다.

물론, Sketch2Code를 실행해봤을 때. 몇 가지 오타가 보이는 등 이미지를 아직 100% 정확하게 인식하지는 못한다. 그러나 약간의 결함을 점차 개선해 나간다면, Sketch2Code는 웹 디자이너 사이에서 매우 유용하고 강력한 도구가 될 수 있을 것이다.

[ⓒ CWN(CHANGE WITH NEWS). 무단전재-재배포 금지]