Framer.js를 활용한 프로토타이핑과 분석 이야기

프로토타이핑과 데이터 분석의 기초 환경을 마련하다

본 글은 바이널씨 전략기획실에서 약 1달간 제작한 모바일 UX디자인 연구 내용을 담은 글입니다. 해당 내용은 바이널씨의 의견과 무관한 개인 프로젝트임을 알려드립니다.

1. 고민의 시작 - 왜 별도의 모바일 UX 연구가 필요한가

디지털 서비스 업을 하는 사람으로써, 사내에 모바일 UX 관련 디자인, 자료, 방법론이 더욱 강화되어야 한다는 사실을 알게 되었습니다. 실제로 저 또한 모바일에 특화된 UX 방법론, 인터랙션, UI 디자인 노하우를 찾지 못해 매번 구글/네이버/페이스북 구독을 하여 그때 끄때 트렌드를 알고 이를 디자인에 적용하는 것이 전부였습니다. 따라서 직접 조사도 해보고, 만들어보고, 쌓은 지식과 노하우를 사내에 전파하고 공유하기 위해 '왜 모바일 UX Components 구축이 필요한지'에 대한 내용을 담은 제안서를 작성하여 저희 팀장님에게 보고하였습니다. 

읽어보실 필요는 없습니다만 대강 저런식입니다..

다행스럽게도 이러한 취지를 아신 대표님, 임원분들이 모두 공감해주셔서 1명의 정규 인력, 1명의 객원 인력, 총 2명이 나서 '추후 회사가 필요할 시 언제든 참고/활용 할 수 있는 모바일 UX 컴포넌트를 만들자'는 취지의 발칙한 모바일 UX디자인 연구 프로젝트가 시작되었습니다. 

2. 막막하기만 한 시작 단계 (1주차)

자, 이제 허가는 떨어졌다. 무엇부터 해야 하는가? 이것이 중요했습니다. 막연히 '모바일 UX 디자인 트렌드'를 수집하여 문서를 통해 사내에 배포하는 것보다는, 직접 만들어 '살아있는 제작 노하우'를 전달하고, 실무에 쓰일 수 있는 컴포넌트를 만드는 것이 더욱 중요하다고 판단하였습니다. 회의 끝에 우리 팀은 '월별 1개씩 새로운 모바일 UI/인터랙션 트렌드가 담긴 프로토타입'을 제작하기로 결정하였고, 해당 과정을 상세하게 담아 블로그로 대내외 배포를 시행하기로 합의하였습니다. 

그러나, 어떤 모바일 서비스이든 간에 제작자의 '의도'가 없이 공허한 인터랙션 디자인만을 한다면 그것은 시간 낭비에 불과할 수 있었습니다. 이에 따라, 파일럿으로 진행할 수 있는 가벼운 앱 서비스를 선택하고, 이를 분석 후 개선방향을 결정하여 기존 앱 대비 편의성이 강화된 프로토타입을 제작하기로 하였습니다. 다만 기존 디자인 방법론과 같은 4D Process(조사 > 디자인 > 개발 > 전달)를 따르기 보다는, 빠르게 시범적으로 디자인하여 이를 검증하는 Design sprint process를 채택하기로 하였습니다.  Lean UX는 '개발자'가 포함되어 실증적인 검증을 진행하는 반면, 디자인 스프린트는 구글 벤처스가 아래 도표와 같이 '최대한 빠른 시간에 MVP를 제작하여 아이디어를 반복적으로 개선하여 검증한다'는 취지에서 만든 '아이디어 검증 프로세스'입니다. (Lean Cycle도 길다는 것이죠. 그러나 Design sprint는 그 성격 상 너무 간단하여 그 연구의 깊이도, 디자인의 완성도도 떨어지는 단점이 있기는 한 것 같습니다.)

아이디어 > 프로토타입 > 검증의 반복 = Design sprint

파일럿 프로젝트로 금융 입/출금 알림 앱을 새롭게 개선하기로 결정

처음 시작하는 단계에서 상대적으로 콘텐츠/상품 위주의 서비스를 디자인하기 보다는, '당장 눈으로 봐도 개선이 가능한 앱'을 디자인하기로 결정하였습니다. 필자가 거의 하루에 한 번씩은 들어가 보는 앱인 '입출금 알림 앱' 서비스는 말 그래도 이러한 테스트에 적합하였습니다. 디자인 페이지가 적고, 기능이 단순하며, 새로운 인터랙션을 시험하기에 좋았던 것이죠.

우리은행 / 기업은행의 입출금 알림 앱

현재 위와 같은 앱의 핵심 기능은 다음과 같이 나열될 수 있습니다.

As-Is Features

1) 입/출금 내역 조회하기 (일별, 특정 기간 별)

2) 메모 남기기

3) 친구에게 송금/수금 내역 공유하기

4) 내 현금 흐름 파악하기 (그래프 제공)

우리는 기존 은행이 제공하는 편의 기능의 문제점을 발견하여 개선하는 방향 혹은 KPI효율을 높이기 위한 비즈니스 콘셉트 수립을 하기보다, '편의 기능을 추가'하는 방향으로 개선 초점을 맞추었습니다. 저희가 진행하는 프로젝트는 실제 프로젝트가 아닌 최대한 빠르게 만드는 파일럿 프로젝트였으니까요. 따라서 우리는 Design sprint에 나타난 바에 따라 아이디어 발상(Diverge)을 진행하였고, 편의 기능을 UI에 녹여 테스트를 진행해보기로 '결정(Decide)'하였습니다. 

(복잡한 조사, 전략수립, Value 설정 등의 과정이 없으니 비즈니스적 당위성을 설명하는 데 시간을 낭비할 필요가 없지만, 실제 비즈니스에서 이렇게 하다간 바로 퇴짜를 맞겠죠..^.^;;)

현 UI의 불편함을 나름대로 분석한 결과, 아래와 같은 기능을 넣기로 하였습니다.

To-be Features

1) 내 현금 흐름을 한눈에 파악할 수 있는 UI 제공 (달력 UI 형태 혹은 기타)

리스트 타입과 달력 타입

기존 리스트 타입의 UI는 최신 내역의 카드를 최상단에 제공하여 앱 실행 시 '즉각 최신 내역을 보는 데 집중' 하였고, 수입/지출 발생 '건별 정보'를 충실히 전달하기 쉽다는 장점이 있었습니다. 그러나 이러한 UI의 한계점이 있다면, 내가 해당 조회를 통해 알고 싶은 정보는 '금액 정보'만 포함되어 있을 수 있음에도 불구하고, 각 리스트에 포함되어 있는 상세 정보(시간, 계좌 정보 등)를 끊임없이 반복적으로 봐야만 하는 단점, 나아가 리스트 타입은 월별 수입/지출 흐름을 '한눈에 볼 수 없다'는 단점이 있었습니다. 그러나 앞서 말씀드린 단점은 저희가 세운 '가설'에 불과하므로, 1안을 리스트 타입으로 제공하고, 2안을 달력 UI 타입으로 제작하여 추후 사용자 검증을 통해 최종 디자인 안을 결정하기로 하였습니다.

2) 빠른 일/주/월별 조회 & 조회 결과 UI의 다양화

기간 조회 결과 또한 리스트 UI로 국한되는 현 As-Is 

금융 업계의 카드 앱 혹은 금융 앱이 제공하는 '기간별 조회 UI'는 '원하는 기간의 사용 내역만 리스트 타입으로 보여주겠다'는 한계가 존재하였습니다. 사실 사용자가 '특정 기간의 사용 내역'을 보겠다는 니즈는 여러가지로 나뉠 수 있다고 판단하였습니다. 사용자가 조회 기간 검색을 통해 1주일 치의 내역을 탐색하고자 검색을 시도했다면, 이것이 특정 날짜의 상세 내역을 쉽고 빠르게 파악하겠다는 의도인지, 원하는 기간의 지출/수입 내역을 종합해서 합산하여 보겠다는 의도인지 등의 목적으로 나뉠 수 있다는 것이었습니다. 기존 조회 UI는 이러한 여러 니즈를 충족하지 못했습니다. 

위 가설 또한 '검증'이 필요하기에, 저희는 컨셉 1안에는 기존 리스트 타입을 유지하되 손쉽게 기간 조회 검색이 가능한 플로팅 버튼을 하단에 제공하기로 하였고, 컨셉 2안에는 '드래그  UI' 및 '달력 UI'를 통해 원하는 날짜/기간을 빠르게 탐색하고 파악할 수 있는 편의 기능을 제공하기로 하였습니다. 

3) 각 지출별 카테고리 설정&관리 기능 (식비/교통비 등)

지출 카테고리 설정이 가능한 트라비포켓 & 벤토이 앱 

우리는 통상 가계부를 작성할 때 해당 지출 내역이 교통비인지, 식비인지, 경조사 비인지 손쉽게 분류하여 어떤 지출 카테고리가 수입/지출 폭이 크며, 이러한 데이터를 통해 합리적 소비생활을 하고 싶어합니다. 그러나 현재 은행 계열에서 제공하는 입출금 조회 서비스는 특정 카테고리가 지나치게 광범위한 탓인지, 아니면 자동화가 덜된 탓인지 저희가 사용한 내역을 카테고리화하여 보여주지 않더군요. 아마 DB상에서 이를 분류하기 어렵다면, '수입/지출 알림 발생 시 이를 쉽게 분류'할 수 있도록 기능을 제공하면 어떨까 생각해보았습니다. 사용자는 몇번의 클릭을 해야만 하는 작은 Effort가 존재하긴 하나, 자신의 지출 내역을 스스로 관리하고 추후 이를 통계로 볼 수 있다면, 일련의 만족감을 얻을 수 있을 것이라고 가정하였습니다. 

4) 계좌별 이름 설정 및 별도 관리 기능

계좌별 전환이 불편한 기존 은행 모바일 뱅킹

모든 사용자가 복수의 계좌를 가지고 있지는 않으며, 오히려 은행별로 통장의 목적을 관리하는 경우도 있을 것입니다. 그러나 금융 법이 개선되어 모든 카드/통장의 지출 내역을 한번에 관리할 수 있는 궁극적인 시스템은 국내에 존재하지 않기에, 입/출금 조회 서비스는 하나의 은행에 귀속될 수밖에 없습니다. 따라서 저희는 '하나의 사용자가 하나의 은행에 단수 혹은 복수계좌를 관리할 경우'를 가정하고, 단수는 물론 복수별 계좌 관리에 대응하는 UI를 만들기로 하였습니다.

5) 보다 고도화된 수입/지출 내역 리포트

기간별 수입/지출 내역만 도표화 한 뱅킹 앱

저희가 조사한 은행 입/출금 조회 서비스의 경우 수입/지출 내역을 단순한 그래프 형태로 제공하였습니다. 사실 이러한 정보를 단순히 수입/지출 그래프 형태로만 제공한다면, 평소보다 소폭의 수입증가 혹은 지출증가가 발생할 경우에는 그 정보의 실효성이 있으나, 비정상적인 수입/지출 발생 시(이를테면 보증금 납입이라던지)에는 그 실효성이 크게 떨어집니다. 이러한 단점은 위의 수입/지출 카테고리 설정 기능을 통해 보다 보완될 것이라는 가정하에, 조금 더 고도화된 지출 리포트를 시안에 녹여보기로 하였습니다. (그러나 시간 부족으로 인해 해당 화면은 프로토타입에 포함하지 않았습니다.)

3. 일단 만들어보자. 그래픽 디자이너가 없어도! (2주차)

회사 내에서는 사실 시범적일 수 있는 사이드 프로젝트였기 때문에, 많은 사람들과 함께 할 수 없다는 단점이 있었습니다. (따라서 곧 보실 아래의 프로토타입의 디자인이 개발 세발이어도 널리 이해해주세요.) 나머지 1명이신 선임님께서는 사실 사내의 '인터랙션/모션 디자이너'였기 때문에, GUI에 온전히 집중하는 데 한계가 있으셨던 배경도 있었습니다. 

그러나 이왕 시작하기로 한 것을 멈출 수는 없는 법, 포토샵을 켜 GUI 제작을 하였고, 아래와 같은 2가지의 콘셉트를 빠르게 제작하였습니다. 또한 모바일에서만 가능한 제스처/드래그 앤 릴리즈 인터랙션을 실험적으로 적용하여 모바일에 특화된 앱 서비스를 만들기로 하였습니다.

1안 - 리스트 타입 중심의 입/출금 조회 앱

기존 리스트 타입을 유지하지만, 계좌별 이동 및 내역별 이동을 '최대한 빠르게 유도'하였습니다.

* 특징

다수의 계좌를 탭 형태로 제시하고, 좌/우 스와이핑을 통해 탐색

일/주/월 조회 기능을 담은 플로팅 메뉴를 통해 원하는 기간을 빠르게 탐색하도록 유도

상세 내역 탐색 시 카테고리/메모/공유를 한 번에 실행

2안 - 달력 타입을 통해 지출 내역을 한눈에 볼 수 있는 앱

월별 지출/수입 내역을 한꺼번에 보고, 원하는 기간별로 조회한 후, 이를 메모/공유 할 수 있도록 하였습니다.

* 특징

달력 UI와 리스트 타입의 UI를 조합하여 내 현 위치/내역을 직관적으로 탐색 가능

기간을 조회하고 싶은 경우 '드래그 앤 릴리즈'기능을 적용하여 해당 기간의 수입/지출 합계 탐색이 가능

좌/우 스와이핑을 통한 메모/공유 기능

4. 프로토타이핑 전, 도입할 인터랙션을 정의하다. 

테스트 가능한 모바일 인터랙션의 종류를 정의

GUI를 제작하고 나면, 생동감을 살리기 위해 해당 디자인을 '자율성이 높은 프로토타이핑'으로 제작하는 것이 무엇보다도 가장 중요한 작업이었습니다. 모바일 UX 디자인을 깊이 이해하려면, 이전 PC웹 시대와는 다른 새로운 인터페이스 및 인터랙션 연구가 필요한 것이 자명하였기 때문입니다. 이를 대표적으로 분류하자면 아래와 같습니다.

PC웹 시대의 대표 인터페이스 (주로 마우스에 귀속됨)

- 클릭

- 더블클릭

- 드래그 (휠)

- 드래그 앤 드롭

- 마우스 오버 (Hover)

모바일 시대의 대표 인터페이스 및 인터랙션

- 탭 (마우스 클릭과 같은 역할)

- 더블 탭 - 원하는 부분만 사진 확대하기, 혹은 인스타그램의 '좋아요' 참조

- 스와이프 (좌/우/상/하로 쓸어 넘기기)

- 롱 프레스 (길게 누르기)

- 핀치 (두 손가락으로 줌인/줌아웃 하기)

- 포스 터치 (3D touch, 힘껏 누르기 - 아이폰 6S)

- 틸트 (스마트폰을 좌/우로 움직임에 따라 이미지가 함께 움직이는 인터랙션) - 페이스북의 Paper 참조

- 패닝 (한 손가락을 고정 축으로 하고, 두 번째 손가락의 이동을 통해 화면 전체를 이동시키기) - 구글 지도의 회전 제스처 참조

- 드래그 앤 드롭

등등....

다양한 인터랙션  = 더 많은 디자인 가능성

모바일 디자인은 PC웹 시대와는 달리 '제스처' 인터랙션과 더불어 수많은 가능성을 내포하고 있습니다. PC웹 시대의 디자인은 위와 같이 4개의 대표적 인터페이스에 귀속된 나머지 그 표현 방식이 매우 정적이었지만, 모바일 디자인은 수없이 많은 신규 인터랙션을 담고 있으며, 이에 따라 그 디자인 표현 또한 달라져야만 했습니다. PC웹 디자인이 플래시 사양 현상으로 인해 더욱 정적인 디자인으로 변해가는데 반해, 모바일 디자인은 다양한 인터랙션으로 인해 매우 동적으로 변한 것이 한몫 한 셈입니다. 

그러나 새로운 인터랙션을 적용하더라도 그에 대한 보편성을 고려하지 않을 수 없었습니다. 아이폰6S 유저가 아닌 안드로이드 유저에게 '포스 터치'로만 기능하는 서비스를 제공한다면, 이는 지극히 낮은 보편성을 띄기 마련입니다. 포스 터치는 안드로이드 기기가 지원하지 않기 때문이죠. 따라서 우리는 수용성이 높은 인터랙션을 시안에 포함하기로 결정하되 조금의 실험을 곁들였습니다. 먼저 모바일 인터랙션 기본 요소(탭, 스와이프)와, 다소 실험적일 수 있는 요소 (드래그 앤 드롭, 롱 프레스)를 넣어 테스트를 진행하기로 하였습니다.

6. framer.js를 통해 프로토타이핑을 시작하다. 

이에 따라 인터랙션을 가장 잘 표현할 수 있는 툴을 찾아보았고, 저희 2명은 모바일 디자인에 특화된 커피 스크립트 기반의 프로토타이핑 툴인 framer.js를 선택하여 디자인을 시작하였습니다. framer.js는 비교적 난이도가 높은 코드형 모바일 프로토타이핑 툴이지만, 그 자유도, 쉬운 공유(웹 링크 공유), 활용성(구글 애널리틱스 분석 연계 등)이 매우 뛰어나기 때문에 이를 느리더라도 공부하는 마음으로 시작하게 되었습니다.

(코드 기반의 툴.. 어렵다! 어려워 ㅠㅠ

저희 2명은 이전 별도의 스터디를 통해 framer.js를 약 2개월 간 공부한 바 있습니다. 저의 경우 개인적으로 개발 배경 지식이 전혀 없던 탓에 초기 제작 시 난해한 개념들을 이해하기 위해 수많은 밤을 고민으로 지새울 수밖에 없었습니다. 이 과정에서 이고잉님의 자바스크립트 강좌는 정말 큰 도움이 되었습니다. 이후 몇 가지 패턴과 원리를 이해하고 나자, 매우 기본적인 제스처 및 드래그 인터랙션은 구현할 수 있게 되었습니다. 그러나 아직은 초중급 단계에 머물러 있어 기본적으로 쉬운 안인 1안을 제가 코드로 짜고, 평소 플래시 액션 스크립트에 대한 이해도가 뛰어난 선임님께서는 인터랙션 시스템이 복잡한 2안을 선택하여 제작에 도입하였습니다. 

그리고 약 1주일간을 노오력한 결과... 아래와 같은 프로토타입을 완성하였습니다. (아직 코드가 불완전한 것은 사실입니다. 오류투성이지만 이해해주세요 ㅠ)

1안

>>>> 직접 테스트해보기 
(사파리 혹은 크롬에서 잘 동작합니다.)

2안

>>>> 직접 테스트해보기
(사파리 혹은 크롬에서 잘 동작합니다.)

7. 우여곡절 끝에 완성, 그러나.. 어떻게 이것을 평가/개선하지?

'최대한 빨리' 만들어보고 반복적으로 개선을 하자는 취지로 시작하였지만, 항상 염두에 두었던 것은 평가/개선 방법이었습니다. 기존 UX 디자인 방법론에서 찾아볼 수 있는 '사용자 조사' 및 '사용성 테스트'는 정성적 리서치에 기반합니다. 이는 사용자를 직접 초청하여 물어보거나, 관찰하는 행위를 뜻하는 것이죠. 

그러나 개인적으로 수많은 사용자 조사를 진행한 결과, 기존 사용자 조사는 일정 부분 조사자의 편향이 들어갈 수밖에 없으며, 쓰는 사람을 불러놓고 '물어본다는 행위' 자체가 고객에게 있어 어색한 활동일 수 있다고 생각합니다. (사용자 조사 관련 책을 썼는데 이런 발언을 한다는 것 자체가 좀 어폐가 있네요...)  이러한 단점을 극복하기 위해 고객의 실제 행동 패턴을 담은 Usage Data가 필요한데요. 다행히도 framer.js는 자바스크립트 기반이고, html로 퍼블리싱되기 때문에 기존 웹분석 시스템 장착이 가능한 것을 알게 되었습니다. 

framer.js와 구글 애널리틱스가 만나면, '프로토타이핑을 통한 데이터 분석'이 가능하지 않을까?

또한 바이널씨 내부에서도 정량적 분석 관련의 니즈가 강했습니다. 쉽게 말해 기획자/디자이너가 열심히 시안과 플래시 프로토타입을 만들어 임원 보고를 진행하게 되면, 임원이나 실무자의 취향에 따라 뒤집어지는 경우가 많았습니다. 기존 '정성적 사용자 조사 데이터' 혹은 '벤치마킹을 통한 분석 데이터'가 이를 뒷받침 하긴 했지만, 이 또한 분석가의 개인적 역량 및 클라이언트의 상황에 따라 지나치게 불안정할 수 있다는 단점이 있었습니다. 에이전시의 경우, 디자인이 뒤집히는 순간 큰 비용 손실을 초래할뿐더러, 제작자들의 사기를 떨어뜨리고 맙니다. 그러나 보고 시 정량적 데이터가 정성적 데이터와 결합할 경우, 숫자는 절대적 결정 권한을 갖게 됩니다. 데이터는 거짓말을 하지 않기 때문이죠.

이러한 중요성을 깨닫고서, 저는 '데이터 분석 환경'을 갖추고, 새로운 디자인 개선 가능성을 위해 몸을 움직였습니다. 

8. 정량적 데이터 분석의 기초를 마련하다.  = 구글 애널리틱스 & Hotjar

프로토타이핑 도중 정량적 테스트 환경을 마련하기 위해 많은 리서치를 진행한 결과, 구글 애널리틱스 및 Hotjar라는 툴을 발견하게 되었습니다. 구글 애널리틱스는 익히 알려져 있는 툴이며, 많은 디지털 마케터가 애용하기도 합니다. 고객이 얼마나 유입했는지, 그들은 누구인지, 어떤 경로를 통해 지나갔는지, 어디서 이탈했는지를 모두 볼 수 있습니다. 

1. 구글 애널리틱스를 통한 이벤트 분석 환경 세팅

2. Hotjar를 통한 페이지 클릭율/퍼널 분석 세팅

Hotjar의 경우 '사용성 테스트'에 특화된 서비스인데요. 대표적 기능으로 '히트맵 = 사용자가 많이 클릭하거나 이동한 부분을 강조하여 시각화하는 기능'이 있으며, 사용자 동선 녹화 기능, 퍼널 분석 (고객의 흐름을 추적) 등이 있습니다. 

위 2개의 툴을 토대로 프로토타이핑을 테스트할 시 매우 적합하다고 판단한 이유는 첫째로 '쉽다'는 점이었으며, '무료'라는 점이었습니다. Hotjar는 트래픽이 1000명을 넘지 않을 경우는 무료(베이직 플랜)이며, 적절한 모수(800-1000명)만 확보된다면 테스트에 전혀 무리가 없었습니다.

실제 트래킹을 시연한 영상

9. 정량적 평가를 수행해보자.. 하지만!

프레이머 + 구글 애널리틱스 + Hotjar의 조합을 통해 새로운 가능성을 알게 된 저희로써는 새로운 가능성에 매우 격양된 것이 사실입니다. 일단 제가 몸 담은 부서인 전략기획실의 인원을 대상으로 테스트를 진행하였습니다. 그러나 우리가 간과한 점이 있었습니다. 테스트를 진행하기 전, 아니 프로토타이핑을 진행하기 전 '무엇을 분석할 것인가'를 명확히 하지 않았다는 것입니다. 일종의 '데이터 분석 모델링'을 시행하지 않았던 것이죠. 

데이터 분석 모델링이란, 프로토타이핑을 시행하기 전 기획단계에서 '문제'를 인식한 이후, '무엇을 측정할지에 대한 목표'를 정하고, '상세 데이터 측정 요소'를 정의하는 활동을 말합니다. 가령 '삼성카드'와 같은 애플리케이션을 테스트한다면, 고객이 접속 후 사용 내역 조회 시까지 기존에는 몇 초가 걸렸으며 (문제 인식), 조회 시간을 줄이자고 결정한 후(목표 및 KPI 설정), 메뉴 > 조회 > 확인(상세 데이터 측정 요소 결정)까지의 Task로 측정 기준을 마련하는 것입니다. 

사전 As-Is안의 문제점을 위와 같이 분석했다면, 그 측정 결과 값을 기반으로 개선하고자 하는 To-be 안을 제작한 후 A/B 테스트를 시행할 수 있게 됩니다. 테스트 결과 값은 곧 정량적 근거가 되며, 새롭게 디자인한 기능을 측정, 개선에 성공할 경우, 해당 디자인은 곧 '검증이 완료된' 디자인으로써 매듭을 짓게 됩니다. 이것이 고도화가 된다면, 큰 파급력을 발휘할 수 있습니다.

이러한 과정이 필수라는 것을 깨닫고 나서, 이번 1차 모바일 UX 컴포넌트 제작 프로젝트는 '제작 > 분석'환경을 구축했다는 데 만족해야만 했습니다. 처음부터 해당 사항을 고려하여 다시 디자인을 시작해야 한다는 의미죠. 

현재 측정한 1안의 히트맵, 플로팅 버튼과 상단 메뉴가 가장 많이 클릭된 것을 볼 수 있습니다.

10. 아직은 시작단계에 불과, 그러나.. 새로운 가능성을 향해

모바일 UX 컴포넌트를 제작한다는 취지로 시작한 사이드 프로젝트를 한 달여 보낸 결과, 새로운 업무 방법을 구축하는 데는 성공했지만 아직은 부족한 점이 많습니다. 저 개인적으로 프레이머를 통한 프로토타입 제작, 정량적 분석의 경험이 없기도 하거니와, 방법적인 면에서 개선해야 할 부분이 너무 많기도 합니다. 

또한 기획자 & 디자이너분들 입장에서는 '내가 제작한 디자인이 냉혹한 검증을 받는다'라는 사실에 거부감이 드실 수도 있고, 부담감이 클 수도 있습니다. 그러나 디자인이 '예술 활동'이 아니라 '비즈니스 활동'인 점과, 중간에 시안이 뒤집어져 다시 디자인을 시작해야 하는 상황보다 데이터 검증을 통해 빠른 통과가 더욱 나음을 감안했을 때, 저희가 시작하는 시도는 조금은 유의미한 한걸음이 아닐까 싶습니다.

아직은 위와 같은 방법이 실무에 즉각 투입되기는 어렵습니다. 방법론적인 면에서 불확실한 점이 많고, 모두가 생소하기 여기기 때문이죠. 그러나 향후 컨설팅 프로젝트 및 구축 프로젝트를 진행할 상황을 고려하고, 적용 가능성을 꾸준히 연구할 계획입니다. 

초기 취지는 '많은 모바일 특화 UI를 만들자'라는 부분이었지만, 제가 잘하는 트렌드 리포트를 배포하여 참고 자료를 제공하는 데 그치는 것보다는 직접 시행하는 업무 방식을 쇄신할 수 있는 방법을 우연히 찾았으며, 노력을 기울인다는 데 많은 격려를 부탁드리겠습니다. 

감사합니다. 궁금하신 점은 언제나 joseph@vinylc.com 으로 문의주세요!

그럼 2편에서 만나요~! 

(2편은 본격적으로 데이터 분석 고도화가 진행될 계획이며, 5월 말 중에 보실 수 있습니다.)

참고 링크

framer.js 공식 사이트 : http://framerjs.com 

Google Analytics : http://analytics.google.com 

Hotjar : http://www.hotjar.com