brunch

라이킷 24 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 보슨생 Jun 16. 2022

UIUX 역량강화 스터디 : AE 1편

마이크로 인터랙션을 위한 애펙 기초, 그리고 개발 친화적 모션 디자인

UIUX 디자이너로 일하고 있는 보슨생입니다

안녕하세요?

저는 올해로 10년 차에 접어든 시니어 UIUX 디자이너, 보슨생이라고 합니다.

지난 10년 동안 쉼 없이 달리며 다양하게 겪어온 직무 경험과 시니어로서의 노하우를 이제부터 차근차근 기록해 보려 합니다. 먼저 어떤 주제를 시작할 것인지 고민이 많았는데요.

고민을 거듭한 끝에, 지난 2020년 10월부터 약 6개월 동안 9명의 동료들을 이끌었던 ‘UIUX 역량강화 스터디’ 운영 경험을 기록해 보기로 했습니다.

총 네 편에 걸쳐 스터디 요약과 후일담을 소개합니다.

#팀 단위의 역량강화 필요성

여러분은 어떤 이름의 디자이너로 일하고 계신가요?

프로덕트 디자이너, UX 디자이너, UI 디자이너, 플랫폼 디자이너, 인터랙션 디자이너... 결국은 참여한 프로젝트에서 맡았던 역할과 책임(R&R, Role and Responsibility)에 따라 정의하는 이름이 달라집니다. 역할을 수행할 수 있는 역량만 받쳐준다면 ‘디자이너’ 앞에 붙는 수식어는 얼마든지 바꿀 수 있습니다.

IT 제품 개발팀의 직군과 역할 예. 프로젝트의 이해관계에 따라 다르게 정의됩니다.

동일 직군으로 팀이 이루어져 있다면 효율적인 업무 분장은 곧 시니어의 역할입니다.

제가 일하는 실무 환경에서는 불과 3년 전까지만 하더라도, 인터랙션 디자인(IxD, Interaction Design)이 직접적으로 분량을 차지하는 비중이 많지 않았습니다. 늘 고도화 우선순위에 밀리는 대상이었죠. 필요하다면 모바일은 구글 머터리얼(Material)이나 iOS HIG(Human Interface Guidelines)를 따르고, 전자제품은 R&D(Research and Development)를 통해 만든 가이드라인을 이용해 효율성을 최대화 하는 것이 우선이었으니까요. 그래서 규모가 큰 프로덕트의 시나리오는 혼자 감당하기엔 조금 벅차긴 했지만, 가능하긴 했습니다.

하지만 점차 서비스 기획의 실험적 프로토타이핑 요청과 프로덕트 단위의 디자인 시스템 개발 프로젝트가 늘면서 업무가 과중되었고, 결국은 효율적인 업무 분장을 위해 UIUX 디자인팀 단위에 인터랙션 디자인 역량의 강한 필요성을 느끼게 되었습니다.

2020년 10월 말, 사내 슬랙 채널에 최초로 공지한 인터랙션 스터디

인터랙션 디자인의 정의는 UX만큼이나 넓지만, 그중에도 프로젝트에서 요구되는 팀원들의 능력은 ‘마이크로 인터랙션(Micro Interaction)’을 양산하는 능력이었습니다. 모션을 디자인한 뒤 개발 환경에 맞춰 시퀀스 이미지 리소스나 영상 파일, JSON, 인터랙션 가이드라인 등 다양한 형식으로 지원할 수 있는 능력이 바로 제가 필요로 하는 인터랙션 팀의 능력입니다.

그래서 ‘UIUX 역량강화 스터디’는 개발 친화적 모션 디자인을 목적으로 가지게 되었습니다. 장기간 진행되고 있는 프로젝트의 성격 상 애프터 이펙트를 이용하기로 했습니다.

더불어 이 스터디는 제 개인의 경력 발전에도 도움을 주었지만, 다수의 인원을 동시에 지도하는 경험을 통해 시니어로서의 또 다른 역량 발전 계기가 되었던 스터디가 되기도 했습니다.

스터디의 첫 번째 파트는 「애프터 이펙트 기초」,
그리고 「개발 친화적 모션 디자인」입니다.

#애프터 이펙트(After Effects)

애프터 이펙트(After Effects)는 어도비(Adobe) 사에서 개발한 전문적인 모션 그래픽 제작 툴입니다. 같은 회사의 프로그램인 포토샵처럼 레이어 지향 작업 방식을 가지고 있으며, 컴포지션(Composition)이라는 그룹 안에서 레이어의 타임 라인을 각각 편집해 사용합니다. 영상 편집 툴로 유명한 프리미어 프로(Premiere Pro)와 비교했을 때, 타임 라인 안에서 레이어를 이어 붙이는 트랙 지향 작업 방식을 사용한다는 점에서 뚜렷한 차이가 있습니다.

영상 제작 프로그램 작업 방식 비교 도식화

위 두 가지 프로그램에서 영상이 출력되는 원리를 이미지 파일 형식에 비유하자면, 애프터 이펙트는 벡터(Vector) 형식, 프리미어 프로는 비트맵(Bitmap) 형식과 유사합니다.

따라서 본 스터디에서는 개발 데이터 전환에 용이한 ‘벡터 형식’의 영상을 출력할 수 있는 애프터 이펙트를 이용하여 UX 인터랙션 디자인에 사용할 수 있는 다양한 모션 디자인 기초 과정을 공부합니다.

오늘날 UX 업계는 협업과 협동이라는 이름 아래 스케치(Sketch), 피그마(Figma), 프레이머(Framer), 프로토파이(Protopie) 등 많은 저작 툴을 사용하여 인터랙션을 디자인하고 있습니다. 하지만 여전히 애프터 이펙트가 매력적인 점은, 애프터 이펙트에서만 표현할 수 있는 디테일이 존재하기 때문입니다.

#이징 함수(Easing Function)

우리는 다양한 개발 운영 체제를 대상으로 인터랙션을 디자인해야 하므로, 애프터 이펙트로 디자인하는 모션이 데이터로 전환되는 상관관계를 이해할 필요가 있습니다.

이징(완화, Ease-ing)은 움직임에 생동감을 불어넣는 가속･감속의 개념을 부르는 말로, 특정 값의 수치가 변화하는 과정을 시간 위에 나타내는 수학 함수를 기반으로 합니다. 이 함수는 시간(X축, → 방향)이 진행되는 동안 수치(Y축, ↑방향)가 변화하는 과정이 시작과 끝점을 가진 베지어(Bezier) 곡선으로 그려집니다.

* 이미지 출처 : https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function

3차 이징 함수 곡선의 예시

컴퓨터 공학자들은 이 함수를 간편하게 사용하기 위해 규칙을 만들고 이름을 붙였습니다. 시작점은 In, 끝점은 Out, 곡선 유형에 따른 세제곱(Cubic), 네제곱(Quart), 다섯 제곱(Quint)과 같은 이름들이 그것입니다. 이렇게 특정 유형의 이름이 부여된 함수들은 오픈 소스 라이브러리로 공유되어 사용하고 있습니다.

* 웹 사이트 : https://easings.net/

이징 함수 라이브러리를 시각화 자료와 함께 공유하는 오픈 소스. 이징이 그라디언트, 크기 등에도 반영됨을 알 수 있습니다.

‘이징’은 주로 웹 개발이나 각종 저작 툴에서 가장 보편적으로 사용되는 이름이며, 안드로이드는 ‘인터폴레이터(Interpolator)’, iOS는 ‘커브(Curve)’ 등 부르는 명칭과 표현식에는 차이가 있습니다.

#사전과제 1 - 참여자 역량 조사

본 스터디는 업력 16년 차의 UIUX 디자인 개발 에이전시에서 진행되었습니다. 스터디 참여 대상은 UX팀의 주니어･시니어 급 디자이너 9명으로, 2020년 10월부터 2021년 4월까지 약 2주에 한 번씩 하루 4시간 이상의 실습 시간을 가졌습니다.

종종 점심시간에 어몽어스를 함께했던 직장 동료들과 스터디를 진행합니다

스터디 참여자들과의 소통은 사내 메신저인 슬랙 채널을 이용해 진행했습니다. 이곳에서 스터디에 대한 간략한 오리엔테이션을 마치고 참여 의사를 확인한 뒤 가장 먼저 한 일은 ‘모션 그래픽 역량 조사’였습니다. 스터디 참여자의 경력이 1년 차부터 13년 차까지 다양했기 때문에, 균형 있는 커리큘럼을 짜기 위해서는 모두의 현재 수준을 상세히 알아둘 필요가 있었습니다.

설문조사 1 모션 그래픽 / 인터랙션 디자인에 대한 총체적 경험 유무 [응답비율 무경험자 44%, 초급자 56%, 중･상급자 0%]

이 설문조사 결과는 이후 실습 과제에 대한 설명과 수준별 첨삭에 많은 도움을 주었습니다.

#사전과제2 - 모빌리티(Mobility) 그려오기

앞서 설명한 이징(Easing)을 애프터 이펙트에서 구현하는 것이 학습 목표인 ‘개발 가능한 모션 디자인하기’를 달성하기 위한 핵심입니다. 이것을 실습하기 위해선 움직임을 부여할 물체가 필요합니다.

사전과제2 모빌리티의 레이어는 7개(5개+바퀴 2개)로 이루어져 있습니다

스터디 시작 전 참여자들은 각자의 취향에 맞는 모빌리티를 디자인해오는 숙제를 부여받았습니다. 이때 중요한 것은 두 가지 확장자(*.psd, *.ai)로 준비해오는 것, 그리고 샘플의 레이어 구조를 되도록 유지하는 것이었습니다. 둘 다 애프터 이펙트의 중요한 기초 기능 설명을 위해 필요한 부분이기 때문이었습니다.

바퀴가 남들보다 2개 더 많은 것, 진행 방향이 반대인 것, 사람이 타고 있는 것은 전혀 문제 되지 않습니다. 바퀴가 역방향으로 구르는 건 약간 문제입니다...

본격적으로 자동차를 움직이기 전, 각 모빌리티의 움직임이 자연스럽게 보일 수 있도록 도와주는 위 이미지의 제자리 애니메이션을 먼저 실습했습니다. 이 과정을 통해 참여자들은 *.psd와 *.ai를 푸티지(Footage)로 사용할 때의 차이점과 원본 일러스트에서 레이어를 분리한 이유를 알 수 있고, 시각 애니메이션을 구현하는 감각을 익히게 됩니다.

회의실에서 진행된 스터디의 전경

#실습 1 - 이징으로 모빌리티 움직이기

이제는 본격적으로 모빌리티를 움직일 시간입니다. 앞서 사전과제로 실습한 제자리 애니메이션에 ‘위치(Position)’ 키프레임을 삽입하여 생동감 있는 움직임을 만듭니다. 이징의 종류와 수치 값은 오픈 소스 라이브러리의 데이터를 참고했습니다. 이 실습 과제는 샘플 이미지처럼 하나의 이미지에 모든 동작을 나열함으로써 향후 이징을 사용할 때 어떤 느낌이 부여되는지 참고할 수 있는 개인의 라이브러리 역할을 하게 됩니다.

애프터 이펙트에서 이징을 적용하여 만든 애니메이션 샘플 12개

이미지의 A행은 가속･감속 개념이 없는 단순한 동작 샘플임을 알 수 있습니다. 눈으로 보이는 속도와 뒤에 그려진 각 함수 그래프를 직관적으로 확인할 수 있도록 만들었습니다. B~D행은 각각 순서대로 출발하는 움직임(In), 도착하는 움직임(Out), 출발과 도착을 한 번에 보여주는 움직임(InOut)이며, 1･2･3열은 함수 그래프의 가파름 정도에 따라 급진적인 속도감을 보여줍니다.

개발 친화적 모션 디자인을 위하여 키프레임에 이징을 표현하는 방법

스터디 참여자들은 샘플을 실습하면서 애프터 이펙트의 프로젝트 관리법과 키프레임에 속도를 부여하는 방법을 익히게 됩니다.

#번외 실습 - 퍼펫 툴

참여자들이 준비해 온 모빌리티 일러스트 중에는 한 가지 재미있는 샘플이 있었습니다. 바로 라마님의 ‘씽씽이’입니다. 유일한 인간 형태의 일러스트를 이용해 초기 계획에는 없던 재미있는 실습을 해보기로 했습니다. 바로 퍼펫(인형, Puppet) 툴을 이용한 애니메이션입니다. (사진출처 : 위키피디아 https://en.wikipedia.org/wiki/Cutout_animation)

컷-아웃 애니메이션(Cut-out Animation)

퍼펫 툴은 전통적 애니메이션 기법인 컷-아웃 애니메이션(Cut-out Animation)과 방식이 유사합니다.

컷-아웃 애니메이션은 종이 인형을 부위 별로 나누고 압정으로 관절을 만들어 연속적인 움직임을 촬영하는 애니메이션 기법 중 하나입니다. 애프터 이펙트의 퍼펫 툴은 이미지에 관절점을 삽입하여 움직임을 만들면, 이것이 자연스러워 보이도록 동화(動畫) 프레임을 자동으로 연산해 주는 툴입니다. 단 한 장의 이미지로 자연스러운 관절 표현이 가능합니다.

흔히 방송 콘텐츠에서 고전 인물 초상화를 이용한 간단한 움직임을 표현할 때 사용되는 툴이기도 하며, 게임 업계에서 쓰이는 Live2D 기술과 시각적 원리가 비슷하다고도 할 수 있습니다.

애프터 이펙트의 퍼펫 툴을 이용하여 정적 이미지를 동적 애니메이션으로 작동하도록 연습해 봅니다

이 기능은 인터랙션과는 연관성이 없어 스터디 주제에선 살짝 벗어나지만, 참여자들이 애프터 이펙트와 친숙해질 수 있었던 가벼운 번외 실습이었습니다. 이러한 번외 실습은 참여자들에게 흥미와 재미를 유발해 스터디 분위기를 환기시키고 참여도를 높이는 데에도 도움을 줄 수 있었습니다.

#실습작 리뷰

위와 같은 과정을 통해 참여자들은 스터디 첫 번째 파트 「애프터 이펙트 기초」와 「개발 친화적 모션 디자인」을 실습했습니다. 애프터 이펙트는 이미 포토샵, 일러스트레이터 등으로 디자이너들에겐 친숙한 회사인 어도비의 프로그램인 덕분에 특별한 어려움 없이 매끄럽게 실습을 진행할 수 있었습니다. 때문에 참여자들의 결과물 또한 문제없이 다음 파트로 넘어갈 수 있을 정도의 높은 완성도를 보여주었습니다.

반면, 애니메이션을 만드는 감각은 개인마다 차이가 있음을 알 수 있었습니다. 이는 시간과 리소스를 관리하는 능력과 경험치에 따른 차이로 보였으며, 이를 바탕으로 개인별 첨삭 방향성을 정할 수 있었습니다.