스케치 2 코드

Kabel, Spike Techniques, Microsoft가 2018년 8월 말에 공개한 Sketch 2 Code라는 라이브러리. "필기 와이어 프레임을 적절히 수정하여 HTML로 자동 변환"해줍니다.

스케치 2 코드

사용자는 웹에 이미지 (필기 와이어 프레임)를 업로드

비전 모델은 이미지에 포함 된 HTML 요소와 그 위치를 추측합니다

문자 인식 서비스는 HTML 요소에 포함 된 문자를 작성합니다.

레이아웃 알고리즘은 비전 모델 생성 결과의 공간 정보에서 그리드를 자동 생성합니다.

HTML 생성 엔진이 이상의 처리에 의해 작성된 모델을 HTML화

이렇게하면 왼쪽 (필기) 항목이 오른쪽 (HTML 마크 업됨)으로 변환됩니다.

실험 1

디자인
결과( HTML )

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta name="viewport" content="width=device-width" />
      <title>HTML Result</title>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"
         integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
   </head>
   <body>
      <div class="container body-content">
         <div class="container">
            <div class="row justify-content-center" style="padding-top:10px;">
               <h1></h1>
            </div>
            <div class="row justify-content-start" style="padding-top:10px;">
               <div class="col" style="padding-top:10px;">
                  <img alt="Image html" width="90%" height="90%" style="max-height:500px;max-width:500px;" src="https://sketch2code.azurewebsites.net/Content/img/fake_img.svg" />
               </div>
               <div class="col" style="padding-top:10px;">
                  <input class="form-control"></input>
               </div>
            </div>
            <div class="row justify-content-end" style="padding-top:10px;">
               <input class="form-control"></input>
            </div>
            <div class="row justify-content-start" style="padding-top:10px;">
               <div class="col" style="padding-top:10px;">
                  <img alt="Image html" width="90%" height="90%" style="max-height:500px;max-width:500px;" src="https://sketch2code.azurewebsites.net/Content/img/fake_img.svg" />
               </div>
               <div class="col" style="padding-top:10px;">
                  <div class="row justify-content-end" style="padding-top:10px;">
                     <input class="form-control"></input>
                  </div>
                  <div class="row justify-content-end" style="padding-top:10px;">
                     <input class="form-control"></input>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </body>
</html>