종이에 무언가를 그리고 그것이 현실 세계에 나타나게 하면 얼마나 멋질지 생각해 본 적이 있습니까? 글쎄, 그것은 단지 버튼 클릭으로 화이트보드에서 HTML 웹사이트로 손으로 쓴 그림을 변환할 수 있는 AI 기반 Skletch2Code 웹 앱으로 Microsoft가 달성한 것입니다.
Sketch2Code는 손으로 그린 웹사이트 레이아웃을 단 몇 초 만에 HTML로 변환할 수 있습니다. 이 도구는 Microsoft의 Computer Vision AI 서비스를 사용하여 그림에서 HTML 개체를 감지한 다음 텍스트 인식을 사용하여 그림에서 손으로 쓴 텍스트를 추출하여 이미지의 모든 디자인 요소에 대한 HTML 조각을 결합하고 만듭니다.
따라서 웹 디자이너와 개발자는 몇 초 만에 다양한 스타일로 웹사이트의 HTML 프로토타입을 구축할 수 있습니다. 이것이 백엔드에서 어떻게 작동하는지 알고 싶다면 Microsoft 웹 사이트에서 Sketch2Code에 대한 기술 세부 정보를 읽어보십시오.
아래는 Sketch2Code를 사용하여 웹사이트 레이아웃 도면을 실제 HTML 페이지로 변환하는 것이 얼마나 간단한지 보여주는 빠른 튜토리얼입니다.
먼저 화이트보드나 흰색 시트에 웹사이트 레이아웃을 그립니다. 그런 다음 사진을 찍어 컴퓨터에 저장합니다. 그런 다음 아래 버튼을 클릭하여 브라우저에서 Sketch2Code 웹 앱을 엽니다.
Sketch2Code 웹 앱 실행
웹 사이트가 열리면 다음을 클릭하십시오. 디자인 업로드 버튼을 누르고 화이트보드나 화이트 시트에 그린 웹사이트 레이아웃의 그림을 선택하세요.
손으로 그린 웹사이트 디자인을 업로드한 후, 앉아서 Sketch2Code가 AI를 사용하여 업로드한 이미지의 레이아웃을 기반으로 HTML 페이지를 자동으로 생성하는 것을 지켜보십시오.
프로세스가 완료되면 전체 코드를 다운로드할 수 있는 옵션과 함께 새로 생성된 HTML 페이지의 미리보기가 표시됩니다. 클릭 HTML 코드 다운로드 버튼을 눌러 손으로 그린 웹사이트 레이아웃의 .html 파일을 가져와 웹 브라우저에서 로컬로 테스트하고 미리 볼 수 있습니다.
그게 다야 Sketch2Code를 사용하여 웹 페이지 레이아웃 프로토타이핑 시간을 절약할 수 있기를 바랍니다.