마이크로소프트에서 공개한 ai html코딩 - sketch2code

마이크로소프트에서 공개한 손으로 그린 그림(스케치 형태의 폼)을 html코드로 변환시켜주는 사이트를 공개했다.
1. 디자인을 감지하고 2. 텍스트를 읽고 3.구조를 이해해서 4. 알고리즘을 구축한다는 것인데
샘플로 올라와져 있는 것들이 꽤 그럴싸 해서 이거 이제 퍼블리셔의 종말 아니냐!! 라는 생각으로 테스트를 해보기로 했다.
디자이너로써 퍼블리싱을 살짝 살짝 공부하고 있는데 이제 이거 있으면 퍼블리싱 공부 안해도 되지 않을까? 하는
부푼 기대와 함께^^

일단 샘플에 제시된 대로 그려서 테스트.
search부분에 글자 잘못 쓴것도 오류없이 인식했고, 샘플텍스트도 자동으로 넣는다. 비율은 맞지 않지만 꽤?
다만, 아이콘은 표현 못하고, 이미지와 텍스트에 대한 비율이 없으며, 라인도 없다. 맨 밑에 동그라미와 1,2,3은 아이콘 영역으로서 표시했던건데 내 스케치가 잘못된 걸까?^^..
그래도 그럭저럭 input부분은 기똥차게 알아먹는거 같다.

xd를 이용해서 잽싸게 그려봤다.
손으로 그린 스케치보다 훨씬 정교하니 혹시 더 정교하게 알아먹지 않을까..? 하는 마음으로
그랬더니 텍스트는 커녕, 메뉴, 이미지, 아이콘은 물론이고 그나마 잘 인식하던 input부분까지 완전히 날리고
왠 이미지 영역 3개만 덩그러니.. 스케치 이미지가 아니면 완전히 이해못하나보다.

하다보니 텍스트는 그래도 잘 알아 먹기에 텍스트 테스트! 버튼도 잘 알아먹는다. 필기체도 대강.
AI저거도 몇번은 잘 이해하고 그랬다. 이거 오히려 텍스트를 입력하는데 더 편리하지 않을까..? 생각중!!ㅋㅋ
버튼도 버튼으로 잘 표현한다. 헬로 옆에 체크박스는 왜 붙었는지 의문...

총평 : 스케치로만 모양이 나온다는 점에 그렇다고 스케치의 비율 아이콘 모양 등 디테일하게 표현되지도 않아서
이걸 대체 어디다 쓰나 싶은 생각이 든다. 아직은 연구개발단계 아닐까 싶으니 앞으로 점점 더 디테일하고 정교해지겠지?
그땐 html공부를 안해도 될까..? 그 날이 오기전에 그냥 내가 공부하는게 더 빠르겠다는 생각이 들긴 한다.
재밌긴 하니깐, 궁금하신 분들은 한번 해보시길!

https://sketch2code.azurewebsites.net/

Transform sketches into HTML using AI