brunch

매거진 서비스 기획자 성장기

라이킷 8 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 이철수 Aug 18. 2019

네이버 테크콘서트:모바일 정리

김기범 님의 [사용자 경험을 높이는 애니메이션 만들기] 세션

개요

김기범 님 발표 화면, 출처 : https://tv.naver.com/v/9342816

네이버 테크콘서트 : 모바일

Android와 iOS 주제로 개발에 대한 인사이트를 공유하는 자리. 대부분 강연자는 네이버의 재직자로 구성되어 있다. 개발에 관심 있는 대학(원)생을 대상으로 신청 가능했고, 해당 내용은 온라인으로도 시청이 가능하다. 대부분의 내용은 개발에 대한 내용이었는데, 애니메이션에 대한 기능을 강조하는 주제라 관심 있게 보았다. 기록 차원 + 공유 차원에서 자세한 API 사용에 대한 부분은 빼고 서비스 기획 측면에서 관심 있게 볼 수 있는 부분만을 정리했다.

김기범 님은?

네이버 iOS 개발자. 제품 디자인 전공 중 개발자로 전향.

콘서트 주제

대학생이 대상인만큼 조금 더 넓은 범위의 주제를 선정했다.

왜 애니메이션이 필요한지

어떤 애니메이션을 만들어야 하는지

어떻게 애니메이션을 구현해야 하는지

왜 애니메이션이 필요한가

좋은 애니메이션을 만들기 위해서는 왜 애니메이션이 필요한지에 대한 공감을 충분하게 해야 한다. 그렇다면 왜 애니메이션이 필요할까?

형태는 기능을 따른다 - Louis Sullivan

제품을 디자인할 때는 그 제품이 어떤 기능을 해야 하는지 먼저 생각하고 그 후 제품의 목적에 맞는 생김새나 모양을 결정해야 한다. 앱 개발에서 애니메이션은 화려하게 만드는 것이 아니라 유용한 기능을 만들기 위해 애니메이션을 넣는 것이다.

Human Interface Guidelines

애플에는 앱 디자인 가이드라인이 있다. iOS Design Themes 중 중요한 한 가지 문장을 보자.

Fluid motion and a crisp, beautiful interface help people understand and interact with content while never competing with it.

애니메이션은 앱의 핵심인 컨텐츠를 쉽게 이해할 수 있도록 만드는 기능이다. 애플에서 애니메이션을 3가지 기능으로 정의했다. 첫 번째는 중요한 컨텐츠를 강조하는 기능, 두 번째는 컨텐츠의 맥락을 유지, 세 번째는 사용자의 제스처에 따라 컨텐츠의 반응을 보여주는 기능이다. 각각의 기능에 대해 자세히 살펴보자

중요한 컨텐츠 강조

컨텐츠의 변화가 있으니 사용자가 인지하도록 도와주는 기능을 뜻한다.

카카오 톡이 오거나, 이메일이 왔을 때 아이콘에 배지가 뜨는 기능, 아이콘이 통통 튀는 기능,

전화 중일 때 상단바가 초록색으로 변하고 깜박깜박하는 기능 등이 있다.

한 번 재생되면 멈추지 않고 쭉 재생하는 경우가 많음(Fire-and-forget)이라고 한다.

컨텐츠의 맥락을 유지

한 페이지에서 다른 페이지로 넘어갈 때 나타나는 효과로 트랜지션 효과를 이야기한다. 사용자가 선택한 컨텐츠로 넘어갈 때 흐름이 연결되도록 보여주는 기능이다.

앱스토어에서 카드 누르면 카드가 넓어지면서 다음 페이지로 자연스럽게 넘어가는 효과, 년 단위의 달력에서 월 단위로 전환할 때 애니메이션을 통해 자연스럽게 넘어가는 효과 등을 말한다.

보통은 Fire-and-forget 방식이지만, 사용자 제스처에 따라 점진적으로 재생되기도 한다. 예를 들면 날씨 앱 경우 핀치 제스처에 따라 점진적으로 진행하는 방식이다.

사용자의 제스처에 따라 컨텐츠의 반응을 보여주는 기능

사용자의 움직임에 반응하며 진행하는 애니메이션 형태를 말한다. 사용자와 컨텐츠가 대화하는 느낌을 제공한다.

아이폰의 하단에서 올라오는 제어센터는 사용자의 손가락 움직임 속도에 의존적이다. 이 애니메이션 구현의 어려움은 애니메이션을 각각 정의해주어야 한다는 것이다.

어떻게 애니메이션을 구현할 것인가

애니메이션 구현은 어렵다.

애니메이션 구현은 다음과 같은 이유로 어렵다.

시간 요소가 들어가서 복잡하다.

디버깅이 어렵다.

API의 어려움과 생소한 개념

스펙 분석의 어려움

그렇기에 꾸준히 공부하고 시간을 들여서 진행해야 한다.

애니메이션 3요소

애니메이션을 정의하면 ‘특정 이벤트가 발생했을 때 UI 요소를 시간에 따라 변화시키는 것’이다.

이를 단위별로 쪼개면 3가지로 나눠볼 수 있다.

1. 애니메이션이 어떻게 시작하는가 : 트리거

애니메이션이 무엇에 의해 시작하는지에 대한 내용이다. 모든 애니메이션에는 시작이 있다.

1) 단발성 트리거

한 번 발동하면 알아서 재생된다. 애니메이션의 시작 조건을 명확하게 파악해야 한다. 또한 논스탑 애니메이션이기 때문에 사전에 애니메이션에 대한 값을 잘 정의해야 한다.

2) 연속적인 트리거

연속적인 인풋이 있어야 애니메이션이 진행된다. 사용자의 제스처나 데이터의 변화에 의해 애니메이션이 점진적으로 실행된다. Pan, Rotate, Pinch와 같은 데이터가 연속적으로 들어오는 제스처를 사용하게 된다.

2. 애니메이션은 무엇을 변화시키는가 : 타겟

애니메이션이 어떻게 UI를 움직이는지에 대한 내용이다. 시간에 따라 변화할 수 있는 시각적 속성은 전부 타겟이 될 수 있다.

3. 애니메이션은 어떤 빠르기로 얼마나 지속되는가 : 타임

시간에 대한 내용. 어떤 빠르기로 얼마나 실행되는지에 대한 내용이다. 평균적으로 애니메이션은 0.3초 ~ 0.5초 사이에 진행된다. 어떤 빠르기로 진행될 것인가를 조절하는 방법으로 커브 값을 조절할 수 있다. 등속도로 진행하는 애니메이션을 커브 조절을 통해 완급을 조절할 수 있다. 가속도를 포함한 애니메이션 효과를 통해 현실의 애니메이션이라는 느낌을 줄 수 있다.