이 글은 Marko Dugonjić과 Robert Nyman [Editor]의 Responsive Web Typography with WebRTC의 한국어 번역본입니다.

저는 최근에 생겨나는 웹 기술들 – WebRTC (Web Real-Time Communication)이나 WebAPI같은 것들 – 이 지향하는 방향을 매우 좋아합니다. 그런 기술들이 이미 우리가 가진 컴퓨터나 태플릿, 스마트폰에 내장된 하드웨어의 다양한 부분을 활용하여 사용자 경험을 증대시켜주기 때문입니다. WebRTC를 활용한 반응형 타이포그래피는 그러한 사용자 경험을 증대시켜주는 단순한 개념의 하나의 예일 뿐입니다.

가려운 곳 긁기

미디어 쿼리의 소개와 반응형 웹의 등장 이후로 이러한 개념들은 저를 조금은 괴롭히고 있습니다. 현재의 반응형 웹 디자인 방법들은 온전히 뷰포트 너비와 높이(물론 픽셀과 밀도까지도)를 테스트하는 미디어 쿼리에 기반하는 것들이고 우리는 언제나 컨텍스트의 빈 공간들에 대한 가정을 해야만하기 때문입니다.

비록 디바이스 제조사들이 레퍼런스 픽셀 “조약”을 따르려고 노력하고 있더라도 디바이스 간의 불일치(여러분이 개발하고 있는 기종의 범위에 따라 가끔씩 혹은 처참할 정도로)는 참혹한 수준이죠. 또한 개발자들은 그러한 문제들을 해결하려면 특별한 미디워 쿼리를 구축해야 합니다. 제조사들은 기기들의 레퍼런스 픽셀을 정의함으로써 결과적으로 사용자들이 특정한 공통적인 방식으로 각 기기들을 사용할 수 있도록 해야 합니다.

하지만 현실에서는 사용자들은 그들의 기기마다 다른 거리를 두고 기기를 사용하죠. 아직은, “기기 구매 조약”에 구매자로 하여금 오직 특정 거리에서만 기기를 사용하도록 강제하는 규정은 없긴 합니다.

손목, 손바닥, 무릎, 책상, 벽(그리고 쇼핑몰) 거리같은 일련의 자연적인 거리들이 있습니다.
그리고 기기들은 이미 그 폼 팩터와는 무관하게 이 다양한 거리들을 아울러 사용되고 있죠. 지난 몇년간 매번 문제점을 느낄 때마다 저는 곰곰히 생각해보며 완벽한 경험을 갖기 위한 결론에 도달했습니다. 기기들이 정확히 사용자가 필요로하는 것을 알도록 만들어서 어떠한 상황에서든 주어진 사용자-기기의 관계를 매칭시켜 화면에 적용시키는 것입니다.

사용자와 화면간의 거리를 추적하는 이 아이디어는 아마도 산업에서 사람들이 오랫동안 생각해왔던 주제일 것입니다. Mark Boulton이 더 나은 반응형 경험을 위한 센서에 대한 소개에 드러난 아이디어를 지지하는 것과 Tim Brown은 지난해 가을, 라이덴(네덜란드의 대학 도시)에서 있었던 Universal Typography에서 훌륭한 토크를 했던 것을 알고 있습니다.

본질적으로, 저는 우리가 수동으로 정보를 수집하는 기기를 사용해야 한다는 견해를 가지고 있으며 항상 가장 그럴듯한 것에 카메라를 두고 눈에서 떼지 않습니다. 하지만 원격으로 할 수 있는 어떤 것도 찾을 수 없었습니다. 제가 WebRTC와 getUserMedia를 배운 최근까지도 그러했죠.

WebRTC로 구하기

WebRTC 표준과 getUserMedia API에 아직 사용자와의 거리를 감지하는 것은 개발되지 않았습니다 – 적어도 그것들의 이름에 따르면. 그러나 getUserMedia를 활용하여 기기 앞에 있는 사용자를 캡쳐할 수 있는 가능성이 실현 가능한 것임이 드러났습니다. 저는 자바스크립트로 그것을 캡쳐해서 조작해볼 수 있다면 사용자와의 거리를 계산하는 일은 그리 어려운 일이 아닐 것이라고 생각했습니다. 적어도 진짜 proximity eventsAt least until the real proximity 이벤트가 널리 지지받기 전까지는 말입니다.

인터넷의 좋은 사람들

그 당시에 저는 getUserMedia API를 공부하기 시작했고 몇 개발자들은 이미 얼굴 인식이나 추적하는 솔루션을 개발하여 Github 혹은 개인 홈페이지에 올려놓기도 했습니다. 간단한 테스트를 하고나서, 저는 Audun Mathias Øygard가 개발한 Headtrackr를 골랐습니다. 왜냐면 이 도구를 위한 모든 것을 이미 제가 갖추고 있었기 때문에요.

Headtrackr를 가지고 화면으로부터 얼굴 사이의 거리 뿐만 아니라 얼굴을 인식하여 주변 너비와 높이의 길이까지 구할 수 있습니다. 제가 처음 테스트를 한 것보다 나중에는 정확도가 떨어져서 저는 오직 얼굴 인식 부분만 파고들었습니다. 간단히 말하자면, 얼굴의 너비를 비디오 너비로 나누어 얼굴 대 화면의 비율을 계산해서 기본 폰트 사이즈의 비율을 계산하거나 반응형 stylesheet에 간단한 breakpoint 쿼리로 사용하였습니다. 다양한 어플리케이션에서 the Responsive Typography demo를 한 번 확인해보세요.

Headtrackr 코드는 잘 설명되어 있지만 이 데모에 있는 모든 것이 터무니없이 단순하고 쉬워서 사용법을 이해하는데 굳이 문서를 읽을 필요도 없을 것입니다. 이 데모를 만들기 위해 아직은 단순하지만 CSS를 조작하여 Headtrackr를 통해 계산한 정보들을 사용할 수 있는 세가지 함수들을 만들었습니다 (이번 작업에서 그 중 두가지 함수를 사용할 것입니다).

추적 기술 성능은 현재로서는 완성도가 낮아 실제 상용제품으로 쓰이기 힘든 수준의 코드입니다. 그러나 저는 이 것이 여러분의 상상력에 불을 지펴 미래에 만들어질 무언가의 중요한 단서를 제공하기를 바랍니다.

DIY 반응형 타이포그래피

좀 더 명료성을 위해 이 글에 있는 코드는 얼굴을 따라다니는 초록색 사각형과 멋지 외형이지만 매 50 밀리초마다 갱신되는 선택적인 파라미터 값들은 제외한 단순한 버전으로 만들었습니다.

우선 HTML 부분입니다:

• video element which is used for the stream
• canvas element where the magic happens (actually, where the video frames are copied into)

<canvas id="compare" width="320" height="240" style="display:none" />
<video id="video" autoplay loop width="320" height="240" />

두번째로, 몇가지 변수들을 설정하고 Headtrackr가 초기화되는 자바스크립트 부분입니다:

var d = document,
    videoInput = d.getElementById('video'),
    canvasInput = d.getElementById('compare');

var htracker = new headtrackr.Tracker({
        altVideo : {
            ogv: "./media/capture5.ogv", 
            mp4: "./media/capture5.mp4"
        }, 
        calcAngles: true, 
        ui: false, 
        headPosition: false, 
        debug: false
    });
htracker.init(videoInput, canvasInput);
htracker.start();

여기까지 뭐 괜찮습니다.

updateFontSize라는 첫번째 함수는 – 아직 모르시는 분들을 위해 – HTML 엘리먼트의 폰트 크기를 갱신하는 역할을 합니다. 어떤 엘리먼트든 폰트 크기를 새로 갱신할 수 있는데 이미 em 기반 미디어 쿼리에 익숙한 분들이라면 HTML 엘리먼트의 폰트 크기를 조작하는데 이해가 훨씬 쉬울 것입니다. 브라우저가 내장 텍스트를 줌인/아웃하는 방식과 동일하기 때문입니다(Ctrl/Cmd + +/-).

updateFontSize function 함수는 오직 facetrackingEvent 이벤트 하나만을 인자로 받으며 우리는 너비 프로퍼티가 필요합니다.

function updateFontSize(ev) {
    var faceWidth = ev.width,
        videoWidth = videoInput.width,
        face2canvasRatio = videoWidth/faceWidth,
        rootSize = Math.round(face2canvasRatio*10)/10 - 1.5 + 10 + 'px';
    d.getElementsByTagName('html')[0].style.fontSize = rootSize;
}

여러분은 아마 face2canvasRatio를 가지고 rootSize를 얻기 위해 “manual normailizing”을 한 것을 바로 알아차렸을 것입니다. 이것은 최적의 방법은 아니지만 적당한 폰트 크기값으로 사용하는데 적당하도록 face2canvasRatio를 정수로 고쳐주는 역할을 합니다.

두번째 함수 – 딱히 여전히 독창적인 이름 없이 – breakPointClass는 BODY 엘리먼트의 클래스명을 face2canvasRatio 값에 따라 변경하는 역할을 한다. 이 breakpoint들은 관찰하고 수정해본 경험에 기인하여 정해졌기 때문에 여러분에 맞게 수정해도 좋습니다.

function breakPointClass(ev) {
    var b = d.getElementsByTagName('body')[0],
        faceWidth = ev.width,
        videoWidth = videoInput.width,
        face2canvasRatio = videoWidth/faceWidth; 
    if (face2canvasRatio > 3.2) {
        b.className = 'far';
    }
    if (face2canvasRatio < 2.2) {
        b.className = 'close';
    }
    if (face2canvasRatio >= 2.2 && face2canvasRatio <= 3.2) {
        b.className = '';
    } 
}

마지막으로 facetrackingEvent 이벤트에 대한 이벤트 리스너는 이벤트 객체(프로퍼티도 함께)를 선택한 함수로 넘깁니다:

d.addEventListener('facetrackingEvent', function(event) {
    updateFontSize(event);
});
// or
d.addEventListener('facetrackingEvent', function(event) {
    breakPointClass(event);
});

초기값만 필요한 경우에는 tracker를 중단시키고 프로세서를 분담할 수 있도록 비디오 스트리밍을 일시정지할 수 있다:

d.addEventListener('facetrackingEvent', function(event) {
    htracker.stop();
    updateFontSize(event);
    videoInput.pause();
});

됐습니다! 다 완성되었습니다. 완성된 예제를 한 번 봐보세요.

이제 내장된 하드웨어를 사용하는 일이 얼마나 쉬운지 아셨나요? 여러분도 바로 여러분의 아이디어를 현실로 구현해볼 수 있습니다.

용을 풀어라

우리가 기술을 사용하여 직접적으로, 부서진 사회적 양식에 인공적으로 틈을 가득 메움으로써(말장난을 의도한 것은 아닙니다) 사람들의 삶을 좀 더 개선시킬 수 있다는 사실은 분명합니다. 인체공학을 배우는 것이 아니더도 단순히 적당한 기술들을 활용하거나 가려운 곳을 긇어줄 수 있는 많은 분야가 있습니다.

예를 들어, 우리는 심장 박동수나 혈압을 측정할 수 있는 센서를 만들고 그걸 이용해서 데이터를 모아 의사의 컴퓨터에 있는 환자의 파일에 바로 업로드할 수 있게 할 수 있습니다. 그리고 기기의 가속도계를 이용하여 바닥에 부딪히려는 랩탑의 하드 드라이브를 보호하는 것 뿐만 아니라 갑작스런 사고에 대비하여 장애우의 보호자에게 경고를 보낼 수도 있죠.

우리는 이미 달리는 활동으로 부터 데이터를 수집하는 Runkeeper같은 어플리케이션을 사용하고 있습니다. 이것을 특정한 날, 특정한 경로에 설치한 에어 프레셔와 함께 사용하여 좀 더 포괄적인 데이터셋을 수집하는 것은 어떤가요? 매일매일 우리의 행동에 영향을 미치는 외부적 요인들에 대한 단순한 인식만으로 매일 느끼는 좌절감을 줄여주거나 좀 더 행복하고 건강한 삶으로 이끌어 줄 수 있습니다.

아이디어는 무한합니다. 그리고 Firefox OS와 Geeksphone처럼 새로 나오는 기술들과 함께 우리는 조만간 우리가 들고 다니는 작은 기기들에 내장된 모든 센서를 조작할 수 있을 것입니다. 그리고 그 때가 되면, 우리는 우리의 삶을 좀 더 낫게 할 수 있는 새로운 무언가를 이제는 만들 수 없다는 그 어떤 변명거리도 찾기 힘들 것입니다.