손그림(스케치), 그리고 AI
손그림을 그럴 듯 하게, Auto Draw, 코드생성해주는 uizard
#10
Design Sketch & AI인공지능이 활용되는 분야별로 대표성을 띈 사례들을 한가지 씩 정리해보고자 한다.
이번 글에서는 손그림(스케치)을 활용하여 인공지능(AI)이 어떻게 다양한 작업들을 효율적으로 바꾸려 노력을 하고 있는지 Google의 Auto Draw, 덴마크 스타트업인 uizard, 그리고 Adobe의 Sensei 사례를 통해 정리해보도록 하겠다.
손그림을 멋진 일러스트로.
Auto Draw
발표 문서 상에 괜찮은 일러스트 이미지를 넣고 싶을 때 활용될 수 있을 것 같은 서비스이다.
대충 태블릿이나 마우스로 형태만 스케치하더라도 가장 알맞다고 생각되는 이미지를 제안하고 선택을 통해 그럴싸한 일러스트레이션으로 변환해준다.
영상에서 보이는 것 처럼 매우 쉽고 재미있게 일러스트를 생성할 수 있다.
여기서 사용된 Auto Draw은 Google Creative Lab의 실험으로 불규칙한 선과 면의 이미지를 통해 가장 유사한 이미지를 '예측(prediction)'하고 DB에 존재하는 다양한 일러스트레이션 중 하나를 추천해주는 방식이다. 구글에서 2017년에 진행했던 실험 중 하나로 이미 알고 계신 분들이 많겠지만 스케치에 인공지능을 활용한 대표적인 사례이기 때문에 넣어보았다. (정확한 주소는. https://www.autodraw.com/)
아. 그리고 Auto Draw를 활용한 게임인 Quick Draw 역시 재미있다. :)
UI 코드까지 생성해주는
uizard & sketch2code
앞선 사례가 가벼운 실험이었다면 이번에 소개해보고자 하는 서비스는 상용화된 서비스로 실제 IT업계에서 앱 디자인을 효율적으로 할 수 있는 방법을 제공하고 있다. 여기서는 덴마크의 스타트업인 uizard와 MS의 Sketch2code를 살펴보도록 하겠다.
uizard
디자이너와 개발자들이 프로젝트를 진행하는 플로우 상의 불편함을 개선하기 위해 만들어진 서비스이다. 반복적인 수동적인 작업들은 감소시키고 이를 통해 프로세스를 좀 더 빠르게 이터레이션 함으로서 제품의 퀄리티를 높이기 위해 만들어졌다고 한다. 실제로 화이트보드 혹은 종이에 그린 스케치를 찍어서 바로 UI로 변환할 수 있다. 그리고 이 내용을 프론트엔드에서 활용가능한 코드로 추출하여 개발에 전달 또한 가능한 구조로 되어 있다.
개발자의 후기를 찾아보니 하나의 이미지에서 어떤 사물들이 있는지를 알아내는 뉴럴 이미지 캡션 생성기(Neural Image Caption Generator)에서 아이디어를 착안하여 해당 서비스를 만들어 냈다고 한다. 뉴럴 이미지 캡션 생성기 역시 컴퓨터 비전을 활용한 딥러닝 모델로서 auto draw에서 활용되었던 알고리즘과 유사한 컴퓨터 비전 알고리즘을 활용했을 것이다.
뿐만 아니라 이미지를 코드로 추출하는 알고리즘은 통계학 분야의 논문을 수집하는 arXiv에 pix2code(GUI 스크린샷에서 코드 만들어내기)라는 제목으로 논문을 올려놓았으니 자세한 내용이 궁금하다면 참고해보아도 좋겠다.
MS의 sketch2Code
MS에서 제공하고 있는 sketch2code역시 거의 유사한 형식의 서비스이다.
손으로 그린 스케치를 HTML코드로 변환해주는 서비스이며 관련 페이지에서 바로 테스트를 해볼 수도 있다.
https://sketch2code.azurewebsites.net/
uizard와 마찬가지로 이미지를 이해하고, 텍스트 역시 인지하며 코드로 변환이 가능하다.
디자이너의 스케치를 분석하는
Adobe Sensei
포토샵으로 잘 알려진 Adobe라는 회사 역시 AI를 활용한 다양한 기능들을 디자이너들을 위해 고민을 하고 있는데 그 중 하나가 Adobe Sensei라고 할 수 있다. 사실 Adobe Sensei는 디자인 도구에서만 활용되는 것이 아니라 분석, 마케팅 등 다양한 분야에서 활용되고 있는 Adobe의 AI플랫폼(?)이다. 2016년 11월에 발표가 된 이후에 그 당시를 제외하면 크게 이슈화가 되지 않았던 것 같지만 현 시점에서 다시 보면 정말 다양한 Adobe제품에 적용되고 있음을 볼 수 있다.
디자인 분야 외 마케팅, 분석, 광고 등에서의 상세한 적용 사례는 아래 링크에서 확인해볼 수 있다.
https://www.adobe.com/kr/sensei.html
그리고 디자이너의 컨셉 스케치가 인공지능을 활용하여 작업에 도움을 주고 있는지를 좀 더 살펴본다면, 아래 영상이 도움이 될 듯 하다. 실제로 얼마나 디자이너의 작업을 도울 수 있을지 빠르게 포스터를 만들어 내는 프로세스를 보면 쉽게 이해가 가능하다.
손으로 그린 스케치를 Adobe Experience Manager에서 열게 되면 내가 그린 스케치의 각 요소들을 파악하여 태그로 구성을 해주고, 태그를 선택하면 알아서 Adobe Cloud에서 관련 이미지들을 찾아준다. 추천 이미지들 중에서 내가 원하는 이미지들을 비교해가며 작업해볼 수도 있으며 작업 히스토리 역시 파악하기 쉬워서 최상의 결과물을 낼 수 있게끔 도움을 준다.
지금까지 이렇게 손그림(스케치)을 이용한 인공지능의 활용 사례들을 살펴 보았다.
작게는 스케치에서 전문적인 디자인 도구까지 인공지능은 분명히 기존 작업자의 수고를 덜어주고 창조에 대한 본연의 가치, 그리고 창의적인 작업에 몰두할 수 있게 도움을 주는 역할을 한다고 생각한다.
하지만 실제로 실무 작업에 도움이 될까를 고민해본다면 이 부분에 대한 평가는 좀 더 기다려봐야 할 것 같다.
첫 번째 사례였던 Auto Draw의 경우 정말 재미있는 실험임은 분명하나, 필요한 일러스트를 찾을 때 내가 그린 스케치를 통해 결과를 얻는 것 보다는 구글에서 텍스트로 이미지 검색을 하거나, Noun Project에서 검색하는 것이 더 빠를 것이다. 두 번째 사례였던 UIzard 혹은 Sketch2Code 역시 output을 UI콤포넌트 뿐만 아니라 적용가능한 code까지 제공한다는 것은 멋져보이나. 실무에서는 이미 만들어져 있는 콤포넌트를 파워포인트나 키노트, 혹은 인비전과 같은 프로토타이핑 도구에서 직접 활용하거나 스케치 프로그램에서 디자인, 그리고 제플린을 활용하는 것이 이미 익숙하고 심지어 아직은 더 효율적 일 것이란 생각이 든다.
소개한 사례들 중에서는 작업 시 불편한 점들을 해결해주고 실무에서도 환영받을 만한 서비스는 세 번째 사례인 Adobe Sensei가 아닐까 한다. 실제로 작업하면서 불편했던, 혹은 더 작업을 편하게 해줄 수 있는 지점들을 잘 판단하고 인공지능을 통해 프로세스를 더 효율적이고 편리하게 바꾸기 위한 다양한 노력들이 느껴진다.
역시나.
그냥 '인공지능 기술을 적용해 보았다!' 가 아니라 '인공지능 기술을 통해 불편했던 문제를 해결했다.'
가 항상 중요해보인다. :)
Reference
https://quickdraw.withgoogle.com/
https://ai.googleblog.com/2017/04/teaching-machines-to-draw.html
https://www.fastcompany.com/90465364/see-the-logos-ai-generates-for-apple-google-and-uber
https://sketch2code.azurewebsites.net/
https://arxiv.org/abs/1705.07962
음성 디자인에 대한 다른 글을 보고 싶다면.
https://brunch.co.kr/magazine/voicedesign
일상에서 활용되고 있는 AI의 다양한 사례들이 궁금하다면.
https://brunch.co.kr/magazine/dailyai
twitter: @pentaxzs
email: pentaxzs@daum.net
brunch: https://brunch.co.kr/@monglec
