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