Page 1


모바일웹디자인.indd 1

2017-03-16 오후 3:23:01


추천사

이 책은 네이버에서 제품을 디자인할 때 Framer를 어떻게 활용하는지 심도 있게 다룬다. 제품 디자이너로서 자신의 스킬을 넓히고 싶다면 좋은 자료가 될 것이다. 머릿속 아이디어를 실제로 구현하는 방법을 배워보자.

This book gives you an insight into how NAVER uses Framer in their product design cycle. It's a great read for product designers looking to expand their skillset. Learn how to bring your ideas to life. - Benjamin den Boer, Framer Product Designer

4

모바일웹디자인.indd 4

2017-03-16 오후 3:23:02


머리말

프로토타이핑에 도전하는 디자이너를 위한 안내서 지난 몇 년 동안 디지털 제품을 디자인하는 방식은 크게 바뀌었다. 디자인 도구로 포토샵 대신 스케치 를 선택하는 디자이너가 늘었고, 프로토타이핑으로 직접 인터랙티브 디자인을 하는 디자이너도 드물 지 않게 생기고 있다. 두 저자도 이런 변화의 흐름 속에 있었다. ‘네이버’라는 서비스를 안정적으로 운 영하는 것이 우리에게 주어진 가장 중요한 임무였지만 한 사람의 디자이너와 개발자로서 새로운 기술 을 써 보고 싶은 마음도 컸다. 우리가 원하는 인터페이스를 표현하기에는 기존에 쓰던 도구가 불편했 기 때문이다. 마침 네이버 앱의 구조를 크게 변경하는 프로젝트가 시작됐고 우리는 이 프로젝트가 모바일 앱 프로토 타이핑을 적용해 볼 기회라고 생각했다. 2014년도 당시에는 Framer도 이제 막 생겨난 도구였고, 디자 이너인 필자(김정민)는 Framer를 쓰면서 코딩을 거의 처음 접했기 때문에 시작부터 난관에 봉착했다 (이 책을 함께 만든 오경식 님의 도움이 없었다면 더 오랜 시간을 허비했을 것이다). 과정은 쉽지 않았 지만 우리는 스스로의 결과에 만족했다. 그리고 프로토타이핑에 도전하는 다른 디자이너에게 도움을 줄 수 있는 ‘안내서’가 있으면 좋겠다고 생각했다.

5

모바일웹디자인.indd 5

2017-03-16 오후 3:23:02


머리말

프로토타이핑으로 문제 해결하기 디자이너로 일을 하다 보면 생기는 질문들이 있다. 디자인 단계에서는 좋아 보였던 결과물이 왜 실제 로 써 보면 이상할까? 왜 내 디자인은 개발하기 어렵다고 하는 걸까? 복잡한 인터페이스를 단순하게 만들 방법은 없을까? 조금씩 프로토타이핑에 익숙해지는 과정에서 우리는 이 질문에 대한 힌트를 얻 을 수 있었다. 아이디어는 백지에서 떠오르지 않는다. 인터페이스와 인터랙션의 편리함은 디테일의 차이로 만들어 진다. ‘디자인 산출물’ 단계에서 머릿속으로만 그렸던 인터랙션을 프로토타입으로 만들어서 직접 써 보고 판단할 수 있다는 점은 프로토타이핑의 가장 큰 장점이었다. 애써 프로토타입으로 만든 결과물 이 생각만큼 사용하기 편리하지 않더라도 여기서 발견한 불편함은 다음 프로젝트를 개선할 수 있는 힌 트와 아이디어가 됐다. 모든 디지털 제품은 결국 코드와 숫자로 만들어진다. 코드와 숫자로 표현된 디자인이 제품으로 구현하 기 쉽다는 뜻이다. 디자인을 코드로 표현하는 것은 디자이너의 책임일까, 개발자의 임무일까? 어떻게 해야 디자인이 실제로 반영될 가능성이 높을지, 어떻게 해야 반영된 디자인의 완성도가 좋을지는 독자 여러분의 판단에 맡긴다. 코드와 숫자로 디자인을 표현해 본 덕에 우리는 디자인을 좀 더 현실적으로 바 라보게 됐다.

6

모바일웹디자인.indd 6

2017-03-16 오후 3:23:02


머리말

표현의 범위를 넓히는 순수한 즐거움 많은 디자이너가 '프로토타이핑과 코딩 배우기'를 할 일 목록에 넣는다. 이는 제품을 만드는 과정에서 디자이너 스스로 아쉬움을 느끼기 때문이 아닐까 생각한다. 당장의 아쉬움을 단번에 해결하지는 못하 더라도 프로토타이핑과 코딩이 표현의 범위를 넓힐 수 있는 하나의 강력한 수단이 될 수 있다는 점은 분명하다. 그런 의미에서 이 책은 프로토타이핑 학습서가 아니라 새로운 디자인 방식을 도입한 사례집에 가깝다. 부담감은 잠시 내려놓고 ‘이렇게 문제를 해결하려고 했구나’, ‘이런 방법도 있었구나’라고 생각하며 가벼 운 마음으로 읽어 보기를 바란다. 그러나 우리의 경험을 온전히 느끼고 싶은 독자라면 책을 읽기 전에 먼저 Framer를 준비하시라! 뭔가를 만드는 재미에 빠져 하룻밤을 꼴딱 새우는 경험을 오랜만에 하게 될 것이라고 장담한다. 독자 여러분에게 이 이야기를 전할 수 있도록 도와주신 많은 분들에게 감사드린다.

7

모바일웹디자인.indd 7

2017-03-16 오후 3:23:02


목차

01

추천사

4

머리말

5

들어가기 전에

13

누구를 위한 책인가

13

이 책의 구성

14

기타 알아둘 사항

16

왜 프로토타이핑인가

17

프로토타이핑이란

17

인터페이스, UX 디자인에서의 프로토타이핑

18

하이피델리티 프로토타이핑

19

하이피델리티 프로토타이핑 도구의 등장

21

나에게 맞는 프로토타이핑 도구 선택하기

23

Framer를 이용한 프로토타이핑

02

20

인터페이스 디자인 도구의 혁신

26

왜 Framer인가

26

디자이너가 Framer를 배워야 하는가

27

네이버에서는 Framer를 어떻게 활용하는가

33

프로토타이핑 시작하기

39

프로토타이핑 도구 준비

39

커피스크립트 이해하기

43

코드 기본 문법

47

오류 찾기

52

8

모바일웹디자인.indd 8

2017-03-16 오후 3:23:02


목차 변수

54

조건문

57

배열과 반복문

59

함수

63

객체

66

유효범위

67

이미지 리소스 준비하기

69

디자인 파일 불러오기

69

불러온 레이어에 이름 붙이기

73

뷰어 설정하기

76

기기/브라우저로 확인하기

77

레이어 개념 이해하기

03

79

Framer의 레이어 개념 이해

79

속성

80

위치와 크기

85

계층 관계

88

정리

93

이벤트와 애니메이션을 이용한 인터랙션 만들기.

95

애니메이션

96

이벤트

103

머티리얼 디자인 인터랙션 만들기

108

플로팅 액션 버튼 인터랙션 만들기

112

애니메이션 저장하기

114

정리

118

9

모바일웹디자인.indd 9

2017-03-16 오후 3:23:03


목차

04

05

06

사이드 메뉴가 있는 인터페이스 만들기

119

상태

120

상태 추가

122

상태 전환

122

상태 삭제 및 덮어쓰기

124

좌우 사이드 메뉴가 있는 네이버 앱 구조 만들기

124

정리

131

퀵 메뉴 만들기

133

드래그

134

제한 범위

135

오버드래그, 바운스, 모멘텀

135

드래그 이벤트

137

드래그 애니메이션

138

네이버 앱 퀵 메뉴 만들기

139

편집 모드의 순서 편집 기능 만들기

146

정리

155

브라우저 스크롤 인터랙션 만들기

157

스크롤

158

스크롤 컴포넌트

158

콘텐츠인셋

159

래핑

160

스크롤 이벤트

161

스크롤 애니메이션 이벤트

162

10

모바일웹디자인.indd 10

2017-03-16 오후 3:23:03


목차

07

08

스크롤해서 바 숨기기 인터랙션 만들기

163

스크롤해서 내비게이션 디자인 바꾸기

170

정리

172

좌우 페이지 인터랙션 만들기

173

페이지

174

페이지 컴포넌트

174

페이지 추가하기

175

래핑

176

포커스와 페이지 순서

177

페이지 인디케이터

178

네이버 앱 페이지 구조 만들기

182

워크스루 만들기

185

정리

196

스크롤하면 크기가 변하는 헤더 만들기

197

모듈레이트

198

스크롤 위치에 따라 요소가 변하는 헤더 만들기

200

정리

204

11

모바일웹디자인.indd 11

2017-03-16 오후 3:23:03


목차

09

10

11

12

스티키 헤더 인터랙션 만들기

205

체인지 이벤트

207

스티키 헤더 만들기

209

정리

216

슬라이더로 미디어 플레이어 조정하기

217

슬라이더 컴포넌트

218

비디오 플레이어 만들기

222

정리

228

스틸컷 디자인에서 인터랙션까지

229

네이버 앱 콘셉트 디자인

229

네이버 앱 콘셉트 프로토타입 만들기

234

마치며

250

찾아보기

252

12

모바일웹디자인.indd 12

2017-03-16 오후 3:23:03


들어가기 전에

누구를 위한 책인가 이 책은 이런 사람들을 위해 만들어졌다. ≑≑

인터페이스 디자이너(UI/UX 디자이너, 앱 디자이너, 웹 디자이너 등) 혹은 인터페이스 디자인에 관심이 많은 사람

1

≑≑

어도비 프로그램만 쓰기 지겨운 디자이너

≑≑

개발자와 소통할 때 어려움을 호소하는 디자이너

≑≑

HTML/CSS를 제외하고, 코딩 경험이 거의 없는 디자이너

≑≑

모바일 앱 프로로타이핑을 배우고 싶지만 혼자 하기 어려운 사람

≑≑

워크플로1 위주의 프로토타이핑 도구가 성에 차지 않는 사람

≑≑

인터랙티브 디자인 제작에 도전해 보고 싶은 사람

 크플로는 디지털 제품의 전체적인 동작이나 시나리오를 확인하기 위한 산출물이다. 제품을 구성하는 화면들이 어떤 동작으로 연결되는지 이어 워 서 보여 준다.

들어가기 전에

모바일웹디자인.indd 13

13

2017-03-16 오후 3:23:03


다음과 같은 사람들에게는 이 책이 쉽게 느껴질 수 있다. 이미 알고 있는 지식을 Framer에 적용 해 보고, 웹과 커뮤니티를 활용해 스스로 공부한다면 더 효율적일 것이다. ≑≑

인터랙션이나 인터페이스 디자인에 관심이 많은 개발자

≑≑

액션 스크립트, 자바스크립트 등 개발 언어에 대한 경험이 풍부한 디자이너

이 책의 구성 이 책의 내용은 다음과 같이 구성돼 있다. “1. 왜 프로토타이핑인가”에서는 이 책에서 다루는 프로토타이핑은 무엇이며 왜 프로토타이핑 이 필요한지 설명한다. 다양한 프로토타이핑 도구 중에서 Framer를 선정한 이유는 무엇인지, 또 네이버에서는 Framer를 어떻게 활용하고 있는지 알아본다. “2. 프로토타이핑 시작하기”에서는 Framer로 프로토타이핑하는 데 필요한 Framer와 커피스크 립트를 소개한다. 프로토타이핑에 사용할 이미지 리소스를 준비하는 방법과 Framer를 사용하 려면 알아야 할 커피스크립트의 기초 문법을 설명한다. 3장부터 10장까지는 실제 네이버 서비스에 적용된 다양한 인터페이스를 만드는 방법을 예제 위 주로 소개한다.

14

≑≑

이벤트와 애니메이션을 이용한 인터랙션 만들기

≑≑

사이드 메뉴가 있는 인터페이스 만들기

≑≑

퀵 메뉴 만들기

≑≑

브라우저 스크롤 인터랙션 만들기

≑≑

좌우 페이지 인터랙션 만들기

≑≑

스크롤하면 크기가 변하는 헤더 만들기

≑≑

스티키 헤더 인터랙션 만들기

≑≑

슬라이더로 미디어 플레이어 조정하기

모바일 앱 프로토타이핑

모바일웹디자인.indd 14

2017-03-16 오후 3:23:03


다음과 같이 Framer를 사용해 네이버 앱에 적용된 다양한 프로토타입을 만들어 볼 것이다.

그림 네이버 앱 만들기 예

각 장의 예제를 따라 하다 보면 이벤트와 애니메이션, 드래그, 스크롤 등 Framer의 여러 가지 기 능을 사용하게 된다. 이 책은 독자가 프로토타이핑을 직접 해 보면서 참고하도록 만들었다. 따라 서 단순히 책만 읽기보다는 실습 환경을 갖춘 상태에서 예제를 따라 해 보는 것을 권장한다. 실 습 예제는 이 책의 예제 사이트에서 다운로드할 수 있다. 예제 사이트는 다음과 같다. ≑≑

https://github.com/wikibook/framer

모든 예제에는 완성된 프로토타입을 바로 확인할 수 있는 페이지로 이동 하는 QR 코드를 함께 실었다. 그림 QR 코드 이미지 예

들어가기 전에

모바일웹디자인.indd 15

15

2017-03-16 오후 3:23:03


“11. 스틸컷 디자인에서 인터랙션까지”에서는 Framer의 여러 가지 기능을 종합적으로 활용해 네이버 앱 콘셉트의 프로토타입을 만들어본다. “12. 마치며”는 이 책의 독자에게 하고 싶은 짧은 조언을 담고 있다.

기타 알아둘 사항 이 책을 읽는 데 도움이 될 만한 내용을 설명한다.

팁 예제를 완성하는 데 큰 영향은 없지만 알아두면 유용한 내용을 따로 묶어 다음과 같이 표시했다.

팁 제목 알아두면 유용한 내용

정리 3~10장에는 각 장의 마지막에 반드시 알아둬야 할 핵심 내용을 따로 정리했다.

업데이트 이 책은 Framer v62를 기준으로 만들어졌다. 따라서 이후 Framer의 업데이트 상황에 따라 책 에서 기술한 내용이 최신 Framer의 기능과 일치하지 않을 수 있음을 미리 알려둔다. 책과 공식 사이트의 설명이 다를 때는 공식 사이트의 설명을 참고하기를 바란다. 예제 사이트의 예제는 Framer의 최신 버전에 맞춰 꾸준히 업데이트할 예정이다.

16

모바일 앱 프로토타이핑

모바일웹디자인.indd 16

2017-03-16 오후 3:23:04


01

왜 프로토타이핑인가

프로토타이핑이란 프로그램이든 자동차든 모바일 앱이든 완제품을 만들기 전에 보통 여러 번의 테스트를 거친다. 제품이 출시되고 나면 작은 것을 수정해도 비용이 많이 들고 위험 부담도 커지기 때문이다. 이 과정에서 꼭 필요한 것이 ‘프로토타입’이다. 프로토타입은 본격적인 개발에 앞서 성능을 검증하고 개선할 목적으로 제작하는 시제품을 말한 다. 프로토타입으로 제품을 완성하기 전에 완성된 모습을 상상할 수 있고, 주요 기능이 얼마나 유 용한지 미리 확인할 수 있다. 이런 프로토타입을 만드는 행위를 ‘프로토타이핑’이라 한다. 아래 그림에서 왼쪽은 애플 컴퓨터의 프로토타입이고 오른쪽은 최초 마우스의 프로토타입이다.

그림 1-1 이 모든 것이 프로토타입이다2

2 애플 컴퓨터 프로토타입에 대한 자세한 내용은 위키백과의 "Apple I"(https://en.wikipedia.org/wiki/Apple_I)를 참고하고, 최초 마우스의 프 로토타입에 대한 자세한 내용은 "Why the Computer Mouse's Inventor Isn't the Big Cheese"(http://time.com/3831359/computermouse-history)를 참고한다.

01 _ 왜 프로토타이핑인가

모바일웹디자인.indd 17

17

2017-03-16 오후 3:23:04


프로토타이핑은 애플리케이션 개발 과정에서도 자주 사용하는 기법이다. 제품의 문제를 미리 발 견해 더 적합한 방향으로 개선하거나, 나아가 프로젝트의 성공 가능성을 조기에 판단하고 매몰 비용을 아낄 수 있다.

인터페이스, UX 디자인에서의 프로토타이핑 프로토타이핑이 ‘시제품을 만든다’는 추상적인 개념이다 보니 제품을 개발하는 과정에서 상황에 따라 전혀 다른 의미로 사용되기도 한다. 이로 인한 혼란을 미리 방지하기 위해 앞으로 살펴볼 프로토타이핑이 어떤 개념인지 먼저 정확하게 짚고 넘어가자. 애플리케이션 개발 과정에서 흔히 사용하는 ‘프로토타입’의 사례를 추려 보면 다음과 같다. ≑≑

사례 1) 기능을 확인하기 위해 디자인 없이 만든 테스트 버전

≑≑

사례 2) 주요 기능과 디자인이 일부 적용됐지만 완성되지 않은 상태의 제품

≑≑

사례 3) 정지된 디자인 시안 이미지

≑≑

사례 4) 디자인 이미지를 바탕으로 워크플로를 재현한 콘셉트 영상

≑≑

사례 5) 제품이 동작하는 것처럼 보이지만 특정 워크플로만 이미지로 연결한 웹 페이지

사례 1은 기능을 검증하기 위한 프로토타입이라고 할 수 있다. 사례 2는 프로토타입이라기보다 는 완제품에 더 가까운 형태로 진척도에 따라 알파 혹은 베타 버전이라 부를 수 있다. 사례 1, 2 모두 다른 작업자의 도움 없이 디자이너 혼자 만들기는 어려운 형태의 산출물이다. 사례 3과 4는 디자인 단계에서 흔히 볼 수 있는 ‘디자인 산출물’이다. 인터랙션을 확인할 수 없기 때문에 프로 토타입이라기보다는 제품의 구체적인 모습을 확인하기 위한 수단으로 볼 수 있다. 디자인 산출물이나 와이어프레임3을 바탕으로 워크플로를 만드는 사례 5가 바로 이 책에서 다룰 프로토타입에 해당한다. 이처럼 실제로 작동하는 것처럼 보이는 프로토타입을 ‘워킹 프로토타 입(working prototype)’이라 한다. 워킹 프로토타이핑은 기능이 구현되지 않은 화면들을 ‘동작 하는 것처럼’ 연결해서 제품의 핵심 경험을 사용자에게 전달하는 기법이다. 추가 개발 비용 없이

3 제품을 디자인하기 전의 설계 과정으로, 선과 면 등 단순한 요소를 사용해 화면을 구성한 설계도다. 세부적인 배치보다는 필요한 기능과 전체적인 흐름을 설계할 때 많이 사용하는 기법이다.

18

모바일 앱 프로토타이핑

모바일웹디자인.indd 18

2017-03-16 오후 3:23:04


디자인, 설계 단계에서 완제품에 가까운 경험을 이끌어 낼 수 있기 때문에 UI/UX 디자이너가 유 용하게 실무에 활용할 수 있다. 이전에는 워킹 프로토타입을 구현할 때 HTML과 자바스크립트를 활용하는 경우가 많았으나 최근에는 시중에 있는 여러 도구를 활용해서 웹 개발 없이 손쉽게 만들 수 있게 됐다. 프로토타 이핑 도구를 활용하면 화면의 특정 요소를 클릭했을 때 화면이 전환되는 것처럼 워크플로가 연 결된다.

하이피델리티 프로토타이핑 프로토타입을 제품과 얼마나 비슷하게 만들어야 할까? 프로토타이핑의 목적은 제품의 효용성을 빠르게 검증하는 것이므로 너무 많은 비용을 투자하는 것은 비효율적이다. 운용할 수 있는 시간 과 비용에 맞춰 프로토타이핑 방법과 완성도를 결정하는 것이 바람직하다. 페이퍼 목업(paper mock-up)은 인터페이스를 종이 위에 표현해서 워크플로를 테스트하는 프 로토타이핑 기법이다. 빨리 만들어 결과를 얻을 수 있다는 장점이 있지만 종이로 만들어진 프로 토타입을 진짜 제품처럼 사용하는 사람은 거의 없을 것이다. 반면 실제 제품과 똑같은 인터랙션이 포함된 프로토타입을 만들 수 있다면 사용자의 몰입도와 반응도 실제 제품을 사용했을 때와 거의 비슷할 것이다. 그러나 실제 제품처럼 동작하는 인터랙션 프로토타입을 만들 방법 자체가 마땅치 않았다. 와이 어프레임을 연결하는 데 사용하는 도구는 인터랙티브 디자인, 애니메이션 등의 디자인 요소를 표현하는 데 적합하지 않았기 때문이다. 특히 디자이너들은 인터랙티브 디자인을 표현하기 위해 영상 프로그램까지 동원하는 일이 많았다. 이때 등장한 개념이 바로 ‘하이피델리티 프로토타입(high-fidelity prototype)’이다. 하이피델 리티 프로토타입은 네이티브 앱과 동일하거나 유사한 인터랙션까지 구현해 완제품에 가까운 경 험을 할 수 있게 해 주는 프로토타입을 일컫는다.

01 _ 왜 프로토타이핑인가

모바일웹디자인.indd 19

19

2017-03-16 오후 3:23:04


하이피델리티 프로토타입은 워크플로뿐만 아니라 세부적인 인터랙션까지 테스트할 수 있다는 점에서 워킹 프로토타입이 진화한 형태라고 할 수 있다.

그림 1-2 하이피델리티 프로토타입은 완제품에 가까운 경험을 준다

하이피델리티 프로토타이핑 도구의 등장 최근 몇 년 사이 Framer, Origami, Pixate, Form 등 하이피델리티 프로토타이핑 도구로 분류되 는 소프트웨어가 연달아 등장했다. 이 소프트웨어들은 인터랙션, 애니메이션을 포함해 얼마든지 자유로운 표현이 가능하다는 점에서 Balsamiq(https://balsamiq.com), Omnigraffle(https:// www.omnigroup.com/omnigraffle) 등과 같은 기존의 워킹 프로토타이핑 도구와 차별화된다. 하이피델리티 프로토타이핑 도구에 대한 디자이너들의 반응은 뜨거웠다. 모바일 인터페이스의 인터랙션이 진화할수록 디자이너들은 기존 인터페이스 디자인 도구4의 한계를 느낄 수밖에 없었 는데, 하이피델리티 프로토타이핑 도구를 활용하면 앱 개발 지식이 없더라도 다양한 표현을 할 수 있기 때문이다.

4

20

이 책에서는 인터페이스를 그리는 용도로 사용하는 그래픽 소프트웨어를 말한다.

모바일 앱 프로토타이핑

모바일웹디자인.indd 20

2017-03-16 오후 3:23:04


그림 1-3 하이피델리티 프로토타이핑 도구 중 하나인 Origami Studio의 인터페이스5

인터페이스 디자인 도구의 혁신 어도비 포토샵(Adobe Photoshop)으로 대표됐던 인터페이스 디자인 도구 시장에도 스케치 3(Sketch 3), 어도비 XD(Adobe XD, Adobe Experience Design CC)6, 피그마(Figma)7 등 개 발 친화적인 도구들이 등장하면서 디자이너들이 더 쉽게 프로토타이핑에 도전할 수 있는 환경이 마련됐다.

그림 1-4 프로젝트를 한 화면에서 관리할 수 있는 스케치 3의 인터페이스

5

"Design Prototyping with Origami Studio", http://origami.design

6

"Adobe XD 공식 사이트", http://www.adobe.com/kr/products/experience-design.html

7

"피그마 공식 사이트", https://www.figma.com

01 _ 왜 프로토타이핑인가

모바일웹디자인.indd 21

21

2017-03-16 오후 3:23:04


‘하이피델리티 프로토타이핑’ 도구로 가장 먼저 유명해진 것은 페이스북에서 개발한 Origami 다. 특히 Facebook Paper의 개발 과정에서 활용했다고 알려져 큰 화제를 모았다. 기존의 ‘워킹 프로토타입’이 단순히 화면과 화면을 연결하는 데 그쳤다면, Origami는 디자이너가 독자적으로 인터랙션을 디자인할 수 있는 방법을 제시했기 때문이다.

그림 1-5 Facebook Paper의 소개 페이지8

이 책에서 다루는 Framer는 코드 기반의 프로토타이핑 도구로서 구글과 드롭박스 등의 실리콘 밸리 기업에서 사용하면서 유명해졌다. Origami보다 빠르게 커뮤니티를 확대하면서 전 세계적 으로 많은 사용자를 확보하고 있다. Framer는 자바스크립트에서 파생된 언어인 커피스크립트(CoffeeScript)를 사용하며, 디자인 과정에서 생산되는 코드를 실제 모바일 앱, 웹 개발에도 참고할 수 있다는 것이 장점이다.

8

22

2016년 7월 서비스가 종료되어 안타깝게도 지금은 사용해 볼 수 없다.

모바일 앱 프로토타이핑

모바일웹디자인.indd 22

2017-03-16 오후 3:23:05


그림 1-6 Framer의 개발 화면

나에게 맞는 프로토타이핑 도구 선택하기 프로토타이핑을 처음 시작하는 사람은 다양한 프로토타이핑 도구 가운데 어떤 것을 선택해야 하 는지부터 고민될 것이다. Origami와 Framer는 자유도가 높은 대신 프로그래밍의 원리와 개발 언어를 어느 정도 익혀야 하는 부담이 있다. 이와 달리 Flinto9나 InVision10처럼 클릭 몇 번만으 로 그럴듯한 프로토타입을 만들 수 있는 도구도 있다. 프로토타이핑의 핵심은 가용한 자원을 활 용해 빠른 시간에 결과를 얻는 것이다. 따라서 덮어놓고 어려운 도구를 배우는 것보다는 프로젝 트의 성격과 목적에 맞는 도구를 선택하는 것이 중요하다.

9 10

 크플로 중심의 프로토타이핑 도구. 스케치 파일 불러오기와 인터랙션을 지원한다. 자세한 내용은 "Flinto 공식 사이트"(https://www.flinto. 워 com)를 참고한다. 디자인 파일을 바탕으로 프로토타이핑과 커뮤니케이션을 지원하는 웹 서비스. 자세한 내용은 "InVision 공식 사이트"(http://www.invisionapp.com)를 참고한다.

01 _ 왜 프로토타이핑인가

모바일웹디자인.indd 23

23

2017-03-16 오후 3:23:05


워크플로와 시나리오를 검증할 목적으로 모바일 운영체제에서 사용하는 기본적인 트랜지션(화 면을 옆으로 밀어내거나 아래에서 위로 덮는 효과 등)이 필요하다면 Flinto Lite나 InVision을 추천한다. 두 가지 도구 모두 화면을 연결해서 워크플로를 만드는 데 초점을 맞추고 있다. Flinto는 이미 많은 사용자를 확보하고 있는 프로토타이핑 도구로서 Flinto Lite11와 Flinto for Mac12 두 가지 버전이 있다. Flinto Lite는 웹으로 간단하게 워크플로를 구현할 수 있는 도구이 며, Flinto for Mac은 하이피델리피 프로토타이핑을 지향하는 맥 애플리케이션이다. InVision은 웹 기반의 워크플로 프로토타이핑 도구다. 프로토타이핑 외에도 디자인 파일을 바탕 으로 협업자들이 커뮤니케이션하거나 프로젝트를 관리할 수 있게 관련 기능을 제공하고 있어 다 양한 용도로 활용할 수 있다. 인터랙션과 애니메이션을 상세하게 구현하거나 더 나아가 직접 새로운 인터랙티브 디자인을 시 도하고 싶다면 Origami 또는 Framer가 최선의 선택일 것이다. 두 가지 도구 모두 자유도가 높 은 만큼 학습 비용도 크다. 이 밖에도 빠른 시간에 높은 품질의 프로토타입을 완성할 수 있는 Principle13, 스마트폰의 센서 와 마이크까지 활용할 수 있는 ProtoPie14 역시 주목할 만하다. 어도비 XD는 스케치 3을 겨냥한 그래픽 소프트웨어로, 손쉽게 워킹 프로토타입을 만들 수 있는 기능을 제공한다. 프로토타이핑 도구 시장은 변화가 빠르다. 다양한 도구가 끊임없이 서로의 장점을 흡수하고 변 화하며, 사용자의 선택을 받지 못하면 사라지기도 한다. 따라서 도구를 선택하느라 너무 많은 시 간을 쓰기보다는 일단 나에게 맞는 도구를 정하고 익숙해지는 것이 중요하다. 한 가지 도구에 익 숙해지면 다른 도구도 어렵지 않게 익힐 수 있다. 다양한 프로토타이핑 도구의 장단점을 비교한 자료15는 웹에서 쉽게 찾아볼 수 있으니 관심을 두 고 지속적으로 업데이트 정보를 확인해 보자.

24

11

"Flinto Lite 공식 사이트", https://www.flinto.com/lite

12

"Flinto for Mac 공식 사이트", https://www.flinto.com/mac

13

"Principle 공식 사이트", http://principleformac.com

14

"ProtoPie 공식 사이트", http://www.protopie.io

15

 세한 내용은 위키백과의 "Comparison of software prototyping tools"(https://en.wikipedia.org/wiki/Comparison_of_software_ 자 prototyping_tools)를 참고한다.

모바일 앱 프로토타이핑

모바일웹디자인.indd 24

2017-03-16 오후 3:23:05


표 1-1 프로토타이핑 도구 비교16 프로토타이핑 도구

학습 난이도

인터랙션 제공 범위

코딩

작업 환경

가격

어려움

완전 자유

필요

Mac

$129/1년간 업데이트

어려움

완전 자유

필요

Mac

무료

쉬움

넓음

-

Mac

$99/1년간 업데이트

보통

넓음

-

Mac

베타 무료

보통

부분적 제한

-

Mac

베타 무료

쉬움

부분적 제한

-

Web

무료~$99/월

쉬움

제한적

Web

$20/월

Mac

$99

Framer

Origami

Principle

ProtoPie

Adobe XD

InVision

Flinto Lite Flinto for Mac

쉬움

넓음

16 프로토타이핑 도구를 서로 비교한 글은 웹에서도 쉽게 발견할 수 있다.

김지홍, "프로토타이핑 이야기", https://brunch.co.kr/magazine/prototyping,

"Designer's Toolkit: Prototyping Tools", http://www.cooper.com/prototyping-tools

01 _ 왜 프로토타이핑인가

모바일웹디자인.indd 25

25

2017-03-16 오후 3:23:06


Framer를 이용한 프로토타이핑 왜 Framer인가 다양한 프로토타이핑 도구 가운데 이 책에서 Framer를 선택한 이유는 다음과 같다. 첫째, 지속적인 지원 가능성이 높다. 프로토타이핑 도구는 지금 이 순간에도 계속 등장하고, 기능을 강화하며 치열한 경쟁을 하고 있다. 그러나 결국에는 한두 개의 도구만 선택받아 시장에서 살아남을 것이다. 전 세 계적으로 많은 사용자와 커뮤니티17를 보유하고 있는 Framer는 유리한 고지를 차지하고 있다. 둘째, 코드를 기반으로 한다. Framer가 사용하는 커피스크립트는 자바스크립트에서 파생된 언어다. 자바스크립트는 디자이너, 프런트엔드 개발자, 서버 사이드 개발자 등 비교적 많은 사람들에게 친숙하다. 커피스크립트나 Framer를 접해 보지 않은 사람이라도 자바스크립트를 안다면 쉽게 해석 할 수 있고 커뮤니케이션에도 유리하다. 페이스북의 Origami는 코드를 작성하는 대신 컴포넌트를 선으로 연결하는 인터페이스를 사용하는데, 코드를 직접 작성하지 않을 뿐 프로그래밍을 할 때와 동일한 사고 능력이 필 요하다. 코딩이 필요하다면 굳이 돌아갈 필요 없이 바로 시작하는 길을 선택했다. 셋째, 디자인 파일을 쉽게 불러온다. Framer의 프로토타이핑 작업 도구는 같은 이름의 데스크톱 애플리케이션인 Framer(구 Framer Studio)다. Framer의 가장 큰 장점은 포토샵과 스케치로 만들어진 디자인 파일 (PSD, Sketch)을 한 번에 불러올 수 있다는 것이다. 클릭 한 번으로 디자인 이미지를 레이 어로 구분해 주므로 별도의 이미지 슬라이스 작업이 필요 없다.

17 "Framer 공식 커뮤니티", https://www.facebook.com/groups/framerjs "Framer 한국 커뮤니티", https://www.facebook.com/groups/511309105667409

26

모바일 앱 프로토타이핑

모바일웹디자인.indd 26

2017-03-16 오후 3:23:06


그림 1-7 Framer의 불러오기 화면

넷째, 공유하기가 편리하다. 프로토타이핑 작업은 대체로 데스크톱에서 이뤄진다. 모바일에서 프로토타입을 구동하려 면 별도의 뷰어가 필요하다. 일부 프로토타이핑 도구는 뷰어 애플리케이션에서만 프로토 타입을 확인할 수 있다. 이런 방식은 작업자 본인이 프로토타입을 확인할 때는 문제가 없 지만 공동 작업자나 외부에 프로토타입을 공유할 때 곤란할 수 있다. 반면 웹을 기반으로 하는 Framer는 데스크톱과 모바일에 관계없이 기본 브라우저로 프로토타입을 공유할 수 있다.

디자이너가 Framer를 배워야 하는가 인터랙티브 디자인을 어떻게 활용할 것인가 Framer는 분명히 강력한 하이피델리티 프로토타이핑 도구다. 그러나 코드를 작성해야 하는 만 큼 디자이너가 접근하기 쉽지 않은 것이 사실이다. 많은 시간과 노력을 들여야 하니 실제로 이를 얼마나 활용할 수 있을지도 고민될 것이다. 이런 걱정 때문에 많은 디자이너가 프로토타이핑을 시작도 하기 전에 배우기를 포기한다. 01 _ 왜 프로토타이핑인가

모바일웹디자인.indd 27

27

2017-03-16 오후 3:23:06


하이피델리티 프로토타이핑의 최대 장점은 인터랙티브 디자인과 애니메이션을 구현하는 것이 다. 문제는 이 작업이 제품 개발에서 우선순위가 가장 낮은 것으로 취급된다는 점이다. 애니메이 션 추가를 고집하는 디자이너는 협업자들에게 자아도취에 빠진 미디어 아티스트 취급을 당하기 딱 좋다.

Facebook Paper

National Geographic Atlas

Flipboard

그림 1-8 인터랙션, 애니메이션이 제품의 성공을 좌우할 수 있을까

상황이 이렇게 된 이유 가운데 하나는 디자이너 스스로 인터랙티브 디자인을 인터페이스에 추가 하는 ‘옵션’처럼 다뤘기 때문이다. 인터랙티브 디자인은 여유가 있을 때 제품에 멋을 부리기 위한 부가 요소가 아니라 사용자의 경험을 돕는 인터페이스의 일부가 돼야 한다. 애니메이션도 인터 페이스 디자인의 강력한 무기가 될 수 있다.

“ 애니메이션의 목적은 단순히 사용자를 즐겁게 하는 것이 아니라, 사용자에게 어떤 일이 일어나고 있 는지 이해시키고 어떻게 제품을 사용해야 가장 효과적인지 알려주는 것이다.

18

..

- Michael Villar, Stripe 디자이너

18 "Improve the payment experience with animations", https://medium.com/bridge-collection/improve-the-payment-experience-withanimations-3d1b0a9b810e

28

모바일 앱 프로토타이핑

모바일웹디자인.indd 28

2017-03-16 오후 3:23:06


결제 서비스 Stripe의 체크아웃 애니메이션19은 이를 증명하는 좋은 예다. 첫 화면에서는 최소한의 입력 양식만 보여 주어 가장 중요한 과업에 집중할 수 있게 하고, 추가 로 입력해야 할 정보는 사용자가 확인란을 선택하면 보여준다.

그림 1-9 Stripe 체크아웃의 정보 저장 인터랙션과 애니메이션

확인란이 있던 위치에 입력창이 나타나기 때문에 다음에 수행할 동작을 쉽게 유추할 수 있다. 특정 과업을 수행하지 않았을 때는 입력란을 붉은 테두리로 강조해 이를 알려 주고 창을 좌우로 흔들어 실행이 불가능하다는 힌트를 준다.

그림 1-10 Stripe 체크아웃의 실행 불가 인터랙션과 애니메이션

19 "Stripe의 체크아웃 모듈", https://stripe.com/docs/checkout

01 _ 왜 프로토타이핑인가

모바일웹디자인.indd 29

29

2017-03-16 오후 3:23:07


사용자는 다음 단계로 넘어가기 위한 정보가 불충분하다는 것을 직관적으로 알 수 있다. ‘빈 입력 창을 모두 채우고 결제 버튼을 눌러 주세요’ 같은, 흔히 볼 수 있는 경고 메시지를 표시하는 것보 다 끊김이 없고, 거부감 또한 적다.

인터랙션과 애니메이션은 제품을 차별할 수 있는 브랜딩 요소다 사용자가 많은 대형 앱들을 살펴보면 고유한 애니메이션이나 인터랙션을 브랜딩 요소처럼 사용 한다. ‘당겨서 새로 고침(pull to refresh)’과 ‘좋아요(Like, Favorite)’ 애니메이션을 떠올려 보자. 구글 의 디자인 원칙 머티리얼 디자인 가이드라인20에는 대화 상자가 펼쳐지는 상세한 애니메이션까 지 모두 명시돼 있다. 표준화된 모바일 앱 디자인 패턴 가운데 제품의 정체성을 표현할 수 있는 열쇠가 인터랙티브 디 자인에 있다. 페이스북의 ‘당겨서 돌아가기(pull to return)’나 인스타그램에서 사진을 두 번 눌러서 ‘좋아요 (Like)’를 하는 것처럼 편리한 인터랙션은 다른 앱에서 비슷한 행동을 하게 만들기도 한다. 쓰기 에도 편하고 뇌리에도 남는 인터랙티브 디자인으로 제품을 차별화하는 것은 디자이너에게 주어 진 새로운 숙제인 셈이다.

인터랙션의 디테일을 완성할 수 있는 사람은 디자이너 본인뿐 인터랙티브 디자인을 완성하려면 상당한 정밀함이 필요하므로 완전하게 구현할 수 있는 사람은 디자이너 본인뿐이다. 다른 제품에서 사용된 인터랙티브 디자인을 보고 “이것과 똑같이 만들어 주세요”라고 개발 팀에 요청해 본 적이 있다면 그것이 결코 쉽지 않은 일임을 경험했을 것이다. 개발 요청 문서로 인터 랙션을 전달하는 과정은 대개 놀랄 만큼 부정확한 방식으로 이뤄진다(의성어, 의태어를 많이 사 용하게 된다). 당연히 구현의 완성도가 떨어질 수밖에 없다. 디자이너가 인터랙션을 ‘상상만 하 고’ 정작 중요한 구현 과정은 개발 담당자에게 떠넘겨 버린 셈이다.

20 "Material design", https://material.io/guidelines/material-design/introduction.html

30

모바일 앱 프로토타이핑

모바일웹디자인.indd 30

2017-03-16 오후 3:23:07


인터랙티브 디자인은 적절한 수준의 움직임을 찾는 과정이기도 하다. 개발이 완료된 제품을 조 작해 보면 정지된 상태에서 상상한 디자인에 비해 움직임이 과장되게 느껴지는 경우가 많다. 디 자이너가 직접 프로토타이핑을 할 수 있다면 개발자의 도움 없이 완제품과 디자인 사이의 괴리 를 스스로 줄여 나갈 수 있다.

그림 1-11 직접 조작해 보지 않고 인터랙션의 디테일을 찾을 수 있을까(Mailbox 앱)

Framer는 디자이너가 코딩을 시작하기 위한 가장 좋은 도구다 코딩이 필요 없는 프로토타이핑 도구들이 있는데 굳이 Framer를 선택한 이유는 무엇일까? 최적의 프로토타이핑은 필요한 기능을 가장 빠르게 구현할 수 있는 것이라고 앞서 이야기했 다. 워크플로만 확인하면 되는데 코딩을 배우느라 많은 시간을 투자할 이유는 전혀 없다. 그 러나 프로토타이핑에 그치지 않고, 장기적인 코딩 학습과 개발 친화적 디자인에 관심이 있다면 Framer가 여러분의 코딩 첫걸음을 함께할 좋은 친구가 될 것이다. 많은 디자이너가 입버릇처럼 하는 이야기가 ‘코딩 공부 해야지’인데, 실제로 실행에 옮기는 사 람은 매우 드물다. 가장 큰 이유는 개발 도구의 인터페이스가 디자이너의 작업 방식과 동떨어져 있기 때문일 것이다. 디자이너가 사용하는 그래픽 디자인 도구의 작업 방식은 대체로 화면의 요 소를 직접 끌어서 움직이거나 변형하는 것이다. 따라서 문자로 모든 작업을 수행하는 개발 환경

01 _ 왜 프로토타이핑인가

모바일웹디자인.indd 31

31

2017-03-16 오후 3:23:07


을 생소하게 느끼는 것은 당연하다. 심지어 개발 언어의 학습 과정은 대체로 일정 수준에 이르 기 전까지는 ‘그림’을 볼 일이 전혀 없다. 기타를 치고 싶어서 학원에 갔더니 화성학 교재를 펼치 는 격이다. 반면 Framer는 디자인 화면을 미리 보기로 보면서 변경된 내용을 바로 확인할 수 있기 때문에 코드에 익숙하지 않은 디자이너도 이해하기 쉽다. ‘오토 코드(Auto-code)’ 기능을 사용하면 그 래픽 도구처럼 마우스로 레이어를 조작해서 코드를 작성할 수도 있다. 정석대로 코딩 기초부터 시작하는 것과는 차이가 있겠지만, 시작도 하지 못하는 것보다는 먼저 코딩에 흥미를 붙인 다음 난관에 부딪힐 때마다 스스로 해결해 나가는 방식 또한 흥미로울 것이다. Framer에서 사용하는 커피스크립트는 다른 개발 언어에 비해 직관적이고 군더더기가 적다. 코 딩 경험이 전혀 없는 사람도 단어와 구조를 보고 대략의 내용을 유추할 수 있다. 용기를 갖고 아 래 코드를 직접 해석해 보자.

배경 레이어를 새로 만들고, 색상은 ‘#28affa’이다. 이 레이어를 화면의 맨 앞으로 가져온다.

새로 만들 레이어의 이름은 ‘layerA’ 이고, 높이와 너비는 각각 250픽셀, 색상은 ‘#fff’(흰색)이다. 모서리는 8픽셀만큼 둥글게 처리한다. ‘layerA’는 화면 가운데 위치한다.

‘layerA’를 누르면 애니메이션으로 움직이는데, 클릭할 때마다 90도씩 회전한다. 회전 애니메이션의 속도는 스프링 곡선(400, 25, 0)을 사용한다.

그림 1-12 Framer의 커피스크립트 예제

32

모바일 앱 프로토타이핑

모바일웹디자인.indd 32

2017-03-16 오후 3:23:07


모바일 앱 프로토타이핑 : Framer를 활용한 인터랙션 디자인  

김정민, 오경식 지음 | TECH@NAVER 시리즈_014 | ISBN: 9791158390587 | 22,000원 | 2017년 03월 27일 발행 | 256쪽 | Framer, Framer.js, 앱 인터랙션 디자인, 프레이머, 프로토타이핑, 프로...

Read more
Read more
Similar to
Popular now
Just for you