7

분 소요

ProtoPie에서 센서로 프로토타입 제작하기

한 줄의 코드도 작성하지 않고 센서를 활용해 프로토타입을 만드는 방법을 알아보세요.

Tony Kim, CEO & Co-Founder

매년, 심지어 분기마다 새로운 스마트 기기가 출시될수록, 완전히 새로운 기기에서 사용자 경험을 설계하는 일의 중요성은 더욱 커지고 있습니다. 스마트 기기는 세대가 바뀔수록 더 똑똑해지고 있으며, 제조사와 서비스 제공업체들은 사용자가 입력을 하기 전부터 사용자의 필요를 파악하려는 시도를 하고 있습니다. Google Now는 사용자의 활동과 위치에 대한 정보를 수집해 상황 인지형 정보를 제공한다는 점에서 이런 시스템의 좋은 예입니다.

상황 인지형 정보를 제공하려면, 사용자와 관련된 상황 정보를 얻는 데에는 세 가지 방법이 있습니다.

  • 직접적인 사용자 입력

  • 이전 서비스 사용 기록

  • 간접 정보의 분석

센서를 통해 수집된 정보는 직접적인 사용자 입력 없이도 사용자의 상황을 간접적으로 분석하는 데 중요한 역할을 합니다. 센서는 사람들이 휴대하는 스마트폰에 이미 내장되어 있으며, 비콘처럼 스마트폰 바깥에 위치해 스마트폰에 정보를 전달하는 경우도 있습니다. 이러한 센서는 현재 위치, 움직임 정보, 이동 속도, 주변 소음 수준, 공간에서의 스마트폰 좌표 등 다양한 정보를 감지할 수 있습니다. 그렇다면 이렇게 수집된 모든 정보는 어떻게 처리되어 서비스나 제품에 활용될 수 있을까요? 이 질문은 디자이너에게 흥미로운 도전일 뿐만 아니라, 날이 갈수록 답하기가 점점 더 어려워지고 있는 질문이기도 합니다.

프로토타이핑은 개발 전에 개념의 효과적인 가치와 실현 가능성을 파악하고 개발 비용을 줄이는 데 도움이 되기 때문에 점점 더 인기를 얻고 있으며, 센서를 포함한 프로토타이핑에 대한 수요도 커지고 있습니다.

스마트폰의 센서

Apple의 iPhone 6s에는 다음과 같은 센서가 있으며, 다른 제조사의 스마트폰도 비슷한 센서를 갖추고 있습니다:

  • Touch ID 지문 센서: 지문 인식으로 인증

  • 기압계: 기압을 측정

  • 자이로스코프: 스마트폰의 기울기 정도와 방향을 측정

  • 가속도계: 스마트폰의 가속도를 측정

  • 근접 센서: 스마트폰을 가리고 있는 물체와 스마트폰 사이의 거리를 확인

  • 주변광 센서: 주변 환경의 밝기를 측정

  • 나침반 / 자기계: 방향을 표시

Apple의 iPhone 6s와 iPhone 6s+는 터치스크린에 가해지는 물리적 입력의 압력을 측정하는 3D Touch 센서를 사용합니다. Huawei는 Knuckle Touch라는 기능을 활용하는데, 이는 손끝으로 한 입력과 손마디로 한 입력을 구분합니다.

ProtoPie로 센서 프로토타이핑

센서를 사용하려면, 센서가 수집한 신호를 프로토타이핑 도구가 인식할 수 있는 형식으로 변환해야 합니다. Arduino, Raspberry Pi 또는 JSON을 사용하는 Framer 같은 도구를 활용해 이를 구현할 수 있지만, 어느 정도의 코딩 지식이 필요합니다.

ProtoPie를 사용하면 자주 쓰이는 센서를 쉽게 활용할 수 있습니다. 센서를 구현하려면 다양한 트리거 유형 중에서 Sensor Trigger를 선택하세요. 센서가 받아들일 값의 범위를 설정하고 원하는 상호작용을 매핑하면 됩니다. 짜잔!

다양한 트리거 유형 중에서 Sensor Trigger를 선택하세요.


Select the Sensor Trigger


다양한 트리거 유형 중에서 Sensor Trigger를 선택하세요.

(ProtoPie의 상호작용은 트리거, 응답, 오브젝트라는 세 가지 기본 요소로 구성됩니다. 자세한 내용은 이 글을 참고하세요.)

사운드

ProtoPie로 만든 프로토타입은 마이크가 감지한 소리의 크기에 따라 레이어 속성을 변경할 수 있습니다. 필요한 것은 소리 크기의 최소값과 최대값을 설정하고, 응답을 레이어 속성의 변화와 연결하는 것뿐입니다.


Set values for loudness and the Response


소리 크기의 최소값과 최대값, 그리고 응답을 설정하세요.

예제 파일 다운로드

기울기

가로로 긴 이미지를 가져와 수평 스크롤을 허용하는 Scroll Container를 만듭니다. Scroll Container의 크기를 기기와 동일하게 설정한 다음, 가져온 이미지를 Scroll Container 안으로 드래그하여 하위 레이어로 만드세요.


Drag into the Scroll Container


가져온 이미지를 Scroll Container로 드래그하세요.

Tilt 트리거를 선택하고 Y축을 선택합니다. Tilt Trigger 아래에 Scroll Response를 추가하고, 스마트폰을 왼쪽이나 오른쪽으로 기울일 때마다 이미지가 얼마나 스크롤될지 값을 설정합니다.


Set a value for tilting


기울기에 따라 이미지가 스크롤될 값을 설정하세요.

예제 파일 다운로드

기울기를 활용하면 더욱 재미있는 프로토타입을 만들 수 있습니다. 다음은 이준원이 ProtoPie Launching Party에서 선보인 덤벨 운동 앱입니다.

나침반

다른 센서 트리거를 추가하는 것과 같은 방식으로 Compass Trigger를 추가합니다. Compass Trigger에 Rotate Response를 연결해 자기장의 방향에 따라 회전이 생성되도록 하고, 다음 스크린샷처럼 값을 입력하면 디지털 나침반을 쉽게 만들 수 있습니다. 이 예시는 Jailene Liu가 제작했습니다.


Input the values to generate rotation


자기장의 방향에 따라 회전이 생성되도록 값을 입력하세요.


예제 파일 다운로드

기기 간 상호작용(전송 & 수신)

ProtoPie를 사용하면 여러 기기 간에 통신할 수 있는 프로토타입을 만들 수 있습니다. Send Response와 Receive Trigger를 사용하면 미리 설정된 메시지를 주고받으며 기기들 사이의 연결을 만들 수 있습니다. 다음 스크린샷은 한 스마트폰에서 버튼을 탭했을 때 Send Response를 통해 "transfer"라는 단어를 문자열로 전송하는 방법을 보여줍니다. 받는 스마트폰의 Receive Trigger는 스마트폰이 해당 단어를 받으면 Trigger에 연결된 Responses를 활성화합니다.


Send Response


Send Response: 미리 설정된 메시지를 다른 기기로 전송


Receive Trigger


Receive Trigger: 다른 기기에서 메시지를 받으면 응답을 트리거


예제 파일 다운로드

3D Touch

ProtoPie는 Apple의 iPhone 6s와 iPhone 6s+에 탑재된 기능인 3D Touch를 지원합니다. 3D Touch는 센서를 활용하지만, 3D Touch는 터치 상호작용으로 분류되며 Touch Screen Trigger와 연결할 수 있습니다. 3D Touch는 0부터 7까지의 압력 수준을 감지할 수 있으며, 최대값은 6.7로 설정하는 것이 권장됩니다.


3D Touch is capable


3D Touch는 0부터 7까지의 압력 수준을 감지할 수 있습니다.

예제 파일 다운로드

예제 파일 다운로드

미래의 상호작용은 어떤 모습일까요?

오늘날에는 터치스크린이 탑재된 스마트폰과 태블릿, 그리고 그 파생 기기들이 흔하게 보이고 사용됩니다. 그렇다면 미래는 어떨까요? 상호작용은 어떤 모습일까요? 아마도 미래의 상호작용은 배경에서 조용히 대기하다가 사용자의 요청이 있을 때 정보를 찾아주는 Amazon Echo와 같은 기기와의 대화 형태가 될지도 모릅니다. 또는 사용자의 요청이 있기 전부터 사용자를 지속적으로 추적하고, 사용자가 찾을 만한 정보를 미리 제시하는 방식이 될 수도 있습니다. 센서가 사용자를 이해하는 데 점점 더 중요한 역할을 하게 되면서, 디자이너들은 센서를 활용해 디자인 아이디어를 표현하는 방법을 배워야 할 가능성이 큽니다.