Ticker

50/recent/ticker-posts

스케치투코드(Sketch2Code), 아이디어 스케치를 코딩 언어로 바꿔주는 AI 기술

코딩 언어를 공부하고 컴퓨터에 입력해서 프로그램을 개발하는 방식이 사라질것 같습니다! 오늘은 마이크로소프트의 AI기술인 스케치투코드(Sketch2Code)에 대해 알아보겠습니다. 

 스케치투코드(Sketch2Code)


여러분 혹시 1980년대~1990년초에 나온 컴퓨터를 영상으로 보신적이 있으신가요? 까만화면에 명령어를 입력해야 컴퓨터를 사용할 수 있어서 도스(Dos) 명령어를 가르치는 컴퓨터학원이 운영되기도 했습니다.  

가만히 상상해보면 혹시 비슷한 이미지 하나가 떠오르지 않나요? 바로~ 프로그램을 코딩하는 모습! 

2022년에도 프로그램을 개발할 때에는 까만화면에 명령어를 입력하는 방식을 사용하고 있습니다. 그래서 코딩 언어를 잘 사용할 수 있는 개발자들만 새로운 프로그램을 만들 수 있는 상황이지요.

그런데 앞으로는 프로그램을 개발하는 방식이 완전히 바뀔지도 모르겠습니다!

현재 마이크로소프트(MS)는 자사의 AI 기술을 이용해서 손으로 그린 스케치 또는 사진으로 찍은 이미지를 코딩 언어로 즉시 변환해 주는 '스케치투코드(Sketch2Code)'라는 서비스를 고도화하고 있습니다. 

Sketch2Code
*출처: Microsoft, <Sketch2Code>

손으로 직접 그린 아이디어 스케치나 카메라로 찍은 이미지 파일을 업로드하면, 마치 번역기처럼 HTML 코드가 자동으로 생성됩니다!

아래 그림과 같이 왼쪽에는 업로드한 이미지(손그림) 오른쪽에는 웹상에 구현될 이미지가 표시되고, 바로 아래 버튼을 클릭하면 HTML 파일을 다운받을 수 있습니다.  

Sketch2Code HTML
*출처: Sketch2Code

다운받은 HTML을 클릭하면 오른쪽 이미지와 똑같은 웹페이지로 바로 연결이 됩니다. 해당 페이지에서 오른쪽 마우를 클리해서 소스보기를 하면 아래 그림과 같이 HTML 코드를 확인할 수 있습니다.

HTML Code Sample
*출처: Sketch2Code

매우 복잡한 이미지는 아직 변환이 잘 안되고 지원되는 언어도 HTML 정도이지만, 심플한 웹사이트의 레이아웃은 잘 구현되고 AI 기술을 기반으로 만든 서비스이기 때문에 시간이 지날수록 점차 고도화될 것으로 보입니다. 

도스 명령어를 입력하는 방식에서 마우스로 아이콘을 클릭하는 방식으로 전환되면서 컴퓨터의 대중화와 활용성이 급증했듯이, 

손으로 그린 아이디어 스케치를 바로 코드로 변환해 주는 마이크로소프트의 스케치투코드(Sketch2Code)는 어려운 알고리즘과 코딩을 공부하지 않아도 아이디어 스케치만으로 새로운 프로그램을 개발할 수 있는 '프로그램 개발 분야의 대중화'를 불러올 것 같습니다. 


까만화면 도스 컴퓨터 시절의 모습이 궁금하다면, 
아래의 영상을 참고해 주세요 😊
↓↓↓
*출처: 포스트잇, <윈도우의 시작과 끝 Window 역사 총정리>



 



댓글 쓰기

0 댓글