머신러닝과 웹 경험의 발전
게임 '이모지 사냥'을 디자인하며 배운 점들
기술의 발전은 디자인과 동 떨어진 것으로 보일 때가 많다. 인공지능, 블록체인, IoT 등을 알아봤자 구상하는 건 대표님이고 구현하는 건 개발자고 디자이너는 그 껍데기를 만드는 것처럼 느껴진다고 해도 이상하지 않다. 새로운 기술을 디자이너가 직접 쓸 줄 알면 최고지만 배우는데 굉장한 노력이 필요해서 섣불리 나서기 어렵다. 하지만 기술을 정확히 이해하고 개발자들과 소통할 줄 안다면 더 다양한 것을 상상할 수 있을 것이다. 디자이너는 새로운 컨셉과 시각적 재미를 먼저 제시하고 현실적으로 상상해볼 수 있는 사람이기 때문이다.
추상적으로만 알고 있던 머신러닝을 정말 재밌게 접근할 수 있도록 해준 구글 블로그 글이 있어 미흡하게나마 번역해보았다. 원제는 ML and the Evolution of Web-Based Experiences: Fast, Real-Time, and Fully Interactive (원문)로, 글쓴이 타카시 카와시마는 구글 브랜드 스튜디오의 크리에이티브 리드이자 디자이너다. 이전엔 구글 데이터 아트 팀의 아트 디렉터로 3년 간 활동했고 Chrome Experiments (사이트) 작업을 했다. Chrome Experiments는 크롬에서 다양하고 아름답고 신박한(ㅋㅋㅋ) 인터렉션들을 구현해놓은 쇼케이스와 툴들을 소개하는 사이트로, 인터렉티브 아트에 가깝다. 어떻게 저런 생각을 하는지 참 뇌 구조가 다른 사람들 같다... 구글에 데이터 아트 팀은 기술과 예술의 경계에서 큰 영감을 주곤 한다.
이 글의 소재는 구글 TensorFlow.js팀과 브랜드 스튜디오의 협업으로 만들어진 Emoji Scavenger Hunt 게임으로, 웹사이트에 접속하면 게임을 해볼 수 있다. Scavenger는 독수리나 하이에나처럼 죽은 시체를 찾아다니는 동물들을 의미하는데 편의상 "이모지 사냥"이라고 번역했다. 이 게임 말고도 TensorFlow.js (사이트)에서 더 많은 예시들을 접해볼 수 있다.
머신러닝의 등장은 현대 컴퓨터 사이언스에서 확실히 획기적인 순간이었다. 디자이너로써, 그리고 사용자로써 우리는 이미 눈에 보이는 명확한 변화들을 접하고 있다. 머신러닝은 의료 진단을 바꿨고, 데이터센터에서 에너지 효율성을 높이기도 하고, 심지어 레스토랑에서 음식들을 식별하는 게 가능하도록 만든다.
또한 머신러닝은 웹 디자이너에게 흥미진진한 기회를 주며, 최첨단 제품과 새로운 사용자 경험을 발전시켰다. 올해 3월, 구글은 자바스크립트로 구성된 머신러닝 오픈소스 프레임워크인 TensorFlow.js를 발표했다. TensorFlow.js를 통해 웹 개발자들은 머신러닝 모델을 배우고 이를 크롬과 같은 웹 브라우저에 알맞게 적용하게 되었다. 다시 말해, 머신러닝은 이제 공개적으로 인터넷만 연결되면 누구나 접근하고 사용 가능해진 것이다. 하지만 웹디자이너에게 이는 어떤 의미일까?
구글 브랜드 스튜디오는 최근 TensorFlow.js로 만든 재밌는 모바일 웹 게임, 이모지 사냥을 출시했다. 이 게임은 꽤나 단순하다. 이모지를 보여주면 제한시간 안에 카메라로 실제 환경에서 그 사물을 찾아내는 것이다. 제시간에 찾아내면 다음 이모지로 넘어갈 수 있다.
전세계의 플레이어들은 2백만 개가 넘는 이모지를 사냥했다. 현재까지 플레이어들은 85,000가지의 전구 이모지와 66,000가지의 바지 이모지를 찾아냈다. 손 이모지는 비교적 쉽게 찾아내는 반면 (평균 2.91초 안에 찾아냄), 우체통 이모지는 21.2초로 더 어렵다. 이 게임은 어떻게 이미지를 정확하게 식별하는 걸까? 이를테면 손목에 둘러진 시간 재는 기계를 어떻게 “손목시계”라고 인식하는 걸까? 여기서부터 머신러닝이 쓰이기 시작한다.
브라우저 기반의 머신러닝은
웹디자인의 판도를 완전히 바꾼다
미디어 아티스트 Kyle McDonald는 실시간 머신러닝과 모바일 브라우저, 센서가 결합하면 더 많은 가능성이 열릴 것이라 기대한다는 트윗을 날렸다.머신러닝은 제품의 경험을 강화하는 방법들을 제시하고 있는데, 특히 브라우저에서의 머신러닝은 웹디자이너에게 한 번도 본 적 없는 새로운 인터렉션 디자인을 가져다준다. 이모지 사냥의 경우 이모지와 사용자가 직접 소통하는 것에 가까울 정도로 빠르게 반응하고, 재밌으면서, 아주 직관적인 경험을 제공하고 싶었고, 이 컨셉을 머신러닝으로 이뤄낼 수 있었다.
진짜 빠른 실시간 인터렉션 구현하기
이모지 사냥 게임을 할 때, 폰이나 노트북 카메라로 사물을 찍어야하는데 거리와 조명, 각도 등이 모두 다를 수 있다. 유저들이 촬영할 환경을 모조리 예측한다는 것은 불가능하다. 하지만 나는 우리의 머신러닝 모델이 얼마나 빨리 사물을 식별해내는지 보고 놀라지 않을 수 없었다. 내 픽셀2 폰에서 이미지 예측 알고리즘은 초당 15회 돌아가고, 심지어 내 PC에서는 초당 60회로 더 빠르다. 이 게임의 알고리즘은 진짜 빨라서 정확한 추측에 가깝도록 향상시키고, 폰을 움직일 때마다 끊임없이 어떤 이모지인지 예측한다. 빠른 실시간 인터렉션 경험의 결과로, 게임은 더 부드럽고 재밌어진다.
이토록 빠를 수 있었던 중요한 이유 중 하나는 TensorFlow.js가 기기의 그래픽 처리장치(GPU)를 사용하는 브라우저에서 그래픽 렌더링을 가능하게 하는 JavaScript API와 WebGL을 사용하고 있기 때문이다. 이는 신경망의 실행 속도를 높이면서, 서버에 접속할 필요없이 혹은 백엔드를 왔다갔다할 필요없이 기기에서 로컬로 머신러닝 모델이 돌아갈 수 있게 한다. 머신러닝 모델의 속도를 높이면서 바지에서 고양이, 햄버거에서 파스타까지 - 거의 500개의 일상 사물들을 거의 바로바로 식별해낼 수 있게 됐다.
픽셀2 크롬에서 실시간 머신러닝 기반의 이미지 식별이 이뤄지는 모습. 머신러닝 모델이 탐지한 사물의 리스트와 신뢰구간 점수를 초당 15번 업데이트한다.캐시가능한 파일과
클라이언트 사이드의 연산은
로딩 속도를 빠르게 한다
웹사이트가 로딩되는 걸 기다려본 적이 있다면 웹 경험에서 속도가 얼마나 중요한지를 실감할 것이다. 아무리 머신러닝 모델이 뛰어나도 불러오는데 너무 오래 걸리면 사용자는 참기 어려울 것이다. 이게 TensorFlow.js 컨버터가 도움이 될 수 있는 지점이다. 컨버터는 TensorFlow모델이 브라우저에서 바로 실행될 수 있도록 캐시처리 가능한 파일로, 최대 75% 축소해 변환해준다.
예를 들어 우리가 이모지 사냥에 사용한 예측 모델은 이미지 한 장 정도의 용량인 2mb 밖에 안된다. 한 번 불러올 때 파일이 로컬로 기기에 저장되기 때문에, 다음에 불러올 때 더 빠르게 게임을 실행할 수 있다.
브라우저 기반 머신러닝의 또다른 장점은 기존 머신러닝이 서버 쪽의 프로세싱 파워를 많이 필요로 했던 것과 달리, 이미지 인식과 같은 모든 머신러닝 연산을 클라이언트 쪽(예를 들면 브라우저 내에서)에서 실행할 수 있게 한다는 점이다. 이모지 사냥에서 서버는 게임할 때 html 파일과 그래픽 이미지 같은 웹사이트 요소들에만 접근하면 된다. 상대적으로 효율적이고 쉽게 백엔드 확장성을 높인다.
웹사이트의 힘과
머신러닝의 힘이 만나다
오늘날 대부분의 디자이너와 개발자가 앱에 지나치게 몰입해 있음에도 불구하고, 웹은 여전히 강력한 매체다. 웹은 하나의 URL로 안드로이드, iOS, 맥, 윈도우 등의 서로 다른 운영체제에서, 모바일과 태블릿에서 데스크탑까지 어느 기기에서나 작동할 수 있는 크로스 플랫폼이다. 앱과 달리 다운 받거나 설치할 필요도 없고, 복잡한 구성을 요구하지도 않는다. 우리가 구축한 것을 경험할 때 그 환경이 웹이라면 사용자는 겨우 한발짝 떨어져있다. 당연히 웹 기반 컨텐츠와 경험은 공유하기에도 정말 쉽다.
요즘 사람들은 빠르고 재밌는 경험을 갈망한다. 웹과 머신러닝의 힘을 결합하면 기기의 센서들을 활용해 파워풀하고 새로운 인터렉션들을 발굴할 수 있다.
기기의 카메라를 이미지 인식에 사용하는 것은 그저 하나의 예시일 뿐이다. Generic Sensor API를 사용하면 웹 개발자들은 가속도 센서, 마이크, GPS 등 수많은 기기 센서들에 접근할 수 있게 된다. 기기 센서와 브라우저 기반 머신러닝의 결합으로 더 다양하고 새로운 인터렉션들을 상상하고 디자인할 수 있다.
머신러닝과 미래
우리는 머신러닝이 웹 개발을 바꿀 수 있는 수많은 방법들을 이제 막 인지하기 시작했다. 발견되길 기다리는 잠재적인 어플리케이션의 세계에서, 나는 사람들이 디자인할 인터렉티브한 경험들이 너무나 기대된다. 새로운 프로젝트를 준비 중인가? #tensorflowjs 해시태그로 우리에게 공유하거나 AI Experiment 사이트에 당신의 프로젝트를 제출하라. 이모지 사냥의 기술적인 부분이 궁금하다면 Github에서 모든 코드를 볼 수 있으니 참고해보라.
나는 웹 디자인보다 워드프레스로 웹 구축을 더 많이 해왔다. 그래서 이 글에 더 공감할 수 밖에 없었는데, 네이티브 앱도 좋지만 웹은 더 가볍고 빠르게 구축할 수 있기 때문에, 빠르게 구현하고 참여를 불러일으켜야하는 요즘 시대에 더 잘 맞지 않나 생각한다. 예를 들면 아이폰X의 애니모지가 공개되고 두달도 채 안되어 한 웹디자이너가 웹에서 애니모지를 해볼 수 있는 Stink Moji 사이트를 공개했다. PC로도, 아이폰X가 아닌 기기로도 애니모지를 다양하게 실험할 수 있는 것이다.
StinkMoji이모지 사냥을 보며 구글에는 정말 천재들만 있다는 걸 다시 한 번 느꼈다. 글에도 언급되어 있지만 이모지 사냥으로 2만개의 이미지가 빠르게 수집됐다. 이 이미지 데이터는 아마 다시 머신러닝 돌리고, 구글의 이미지 인식 기술에 보탬이 되겠지...? 이 게임은 게임이 아니라 구글이 설계한 (재밌는) 데이터 수집 노동일 수 있다.
이 글은 구글의 디자인 블로그에 있는 PAIR 컬렉션 중 하나다. PAIR는 People + AI Research의 약자로 인공지능이 현실세계에 어떻게 적용될 수 있는지 다양한 가능성과 인사이트를 보여준다. 사실 나는 이 글을 읽고도 머신러닝이 기계가 학습할 수 있도록 알고리즘/기술을 개발하는 분야 정도로 밖에 알지 못한다. 하지만 어떤 게 가능해질지 상상해볼 수 있다는 점에서 꾸준히 타분야에 관심 가지게 된다. 이모지 사냥처럼 새로운 상상을 현실로 구현해내는 갓구글러들을 보며... 오늘도 민간인은 감탄만 해봅니다...
처음 접할 수도 있는 내용이 많아서 앞뒤로 제 설명이 길었네요. 모든 이미지는 원문에서 가져왔습니다. 너무 번역투라서 제가 임의로 변형한 부분들이 있습니다. 오역과 오류, 설명에 대한 피드백은 언제나 환영합니다!
