Interaction Design Workshop 1

After Effects 로 Simple Loader 만들어, Framer JS 로 프로토타이핑 하고, 개발팀에 애니메이션 파일 공유 하기

들어가며..

종종 주변 디자이너분들이나 학생분들에게 인터랙션 디자인은 뭐고 인터랙션 디자이너는 어떤 업무를 어떤 프로세스로 일하는지에 대한 질문을 받는다. 다양한 프로젝트에 필요한 정말 많은 부분들을 만들지만, 여러 이유들로 인해 공유하기가 쉽지 않다는 점이 참으로 아쉽다.

최근 개발에서도 인터랙션에 대해 다양한 관심과 시도들이 있고, 디자이너가 직접 제작해볼만한 쉬운? 것들을 만드는 튜토리얼을 진행해보고자 한다. 첫 편에서는, 에펙으로 간단한 loader 를 만들어 시퀀스와 apng 로 프로토타이핑하여 확인하고 개발 가이드 전달하는 과정을 소개할 생각이다.

다만, 기초적인 에펙 사용 메뉴얼을 숙지해야만 이해할 수 있는 내용들이 다소 있음을 참고하길 바란다. 허나 그런만큼 쉽게 이해할 수 있도록 하겠다.


1. After Effects 로 Simple Loader 만들기

after effects, cmd+n 새 프로젝트를 시작한다
ellipse tool(q): shape layer drawing tool

step 1. comp settings

1.comp name: loader
2.size: 300
3.fps: 30
4.duration: 90 frame(3s)

mobile device screen size에 들어갈 실사이즈 보다 넉넉한 loader comp 를 만든다.

fill: none, stroke: 15, color: grey
circle 이 회전해야 하기 때문에, 화면 중앙에 배치한다

step 2.draw circle

1.shift+cmd+drag
2.right click → transform
3.center in view
4.center anchor point layer content

ellipse tool 로 circle 을 그리고, fill 은 비우고 원하는 굵기와 색상을 stroke, color 로 맞춰준다.

rotation 을 빙빙 돌려야 하니 화면 정중앙에 위치 시킨다.

그리고, anchor point(origin) 도layer content 기준으로 정가운데로 맞춰준다.

add: trim paths

step 3. trim paths

circle 에 trim paths 속성을 추가하면, stroke animation 효과를만들 수 있다.

start, end(%): changing value

trim paths start, end value(%) 를 바꿔보면 어떤 속성인지 쉽게 알 수 있다.

start(%): 100(0:00 f) → 0(00:20 f) → 0(00:40 f)

start 의 value key(%) 를 잡아보지만, 원하던 모습은 아직이다.

이제야 빙빙 돌기 시작한다

1.start(%): 100(0:00f) → 0(0:20f)
2.end(%): 0 →→→→→ 0(0:20f) → 100(0:40f)

start 와 end 는 서로 교차하는 값이기 때문에, 각각 나누어 key를 잡는다. 그런 후 key 타이밍을 조절하니, stroke 움직임이 자연스러워졌다.

offset 회전을 추가하니, 조금 더 그럴싸 해졌다

3.offset: 0x(0:00f) → -1x(0:40f) / (rotation 으로 회전을 줘도 무관하다)

단조로움을 줄이기 위해, 약간 응용을 해보자

step 4. simple apply

1.shape layer choose → cmd+d
2.stroke color change: violet

레이어를 복사하고 기존색과 대비가 큰 색상으로 바꾼다.

trim paths 로 간단한 loader 만들기 끝!

1 shape layer 2

1.start(%): 0 →→→→ 95(0:20f) → 0(0:40f)
2.end(%): 0 →→→→→→→→→ 100(0:40f) → 0(0:60f)
3.offset: 0x(0:20f) →→→→→→→→→→→→ -1x(0:60f)

2 shape layer 1

start(%): 95(0:00f) → 0(0:20f)

trim paths 의 start/end 활용 Tip!!
loop animation 만들때 보통 첫 frame과 마지막 frame의 value 를 같은 수치로 key 를 잡는데, 마지막 한 frame을 render에서 빼주거나 마지막 frame+1 위치에 key 를 잡으면 된다. 위 예시에서도 circle loader 가 완벽하게 사라진 빈 frame이 없도록, 1. shape layer 의 end value 가 마지막 frame+1 위치로 밀려있는 것을 볼 수 있다.

추가적으로 각 value 의 animation 변경이나 trim paths 의 다른 속성들을 가지고 보다 디테일하고 다양한 응용이 가능하다. 이제 이렇게 만들어본 loader 를 시퀀스 이미지로 렌더링하여 apng 만드는 방법과 프로토타이핑툴로 다양하게 활용하는 방법에 관하여 알아보자.


2. Sequence image 와 Apng 만드는 방법

video output > channels: rgb + alpha, 이미지 사이즈를 줄이고 싶을때는 resize를 사용하자
총 60프레임/2초, 지난 편 팁에서 언급했다시피 텅빈 프레임이 없다

Step 5. sequence render

1.video output: channels: rgb + alpha 설정
2. resize: 원하는 사이즈 설정
3. render

프로토타이핑 툴이나 개발에서 빠른 처리를 위해, 용량 최적화는 반드시 해주는 것이 좋다.

개발 용량 이슈로 인해 반복되는 번거로움이 자주 발생한다. 이럴 때는, frame rate 를 낮춰 초당 이용되는 이미지 프레임 수를 줄여주거나, 이미지 사이즈를 줄이는 방법이 있다.

mac app pngyu 사용하는 시, 렌더링 폴더를 drop here 에 던지면 된다

Step 6. images compress

pngyu(app), tinypng(web) 을 활용하여, image 용량 최적화를 해준다.

이때 주의할 점은 mask feather, blur, glow, gradient 등을 사용한 이미지는 압축으로 인한 원본 대비 손상이 많을 수 있으므로 확인을 반드시 해야한다.

복잡한 옵션이 없어 매우 간편하다

Step 7. create apng

1.최적화된 loader 폴더 압축
2. apng assembler(web) 접속
3. frame rate: 1/30 설정
4. 찾아보기: loader.zip 선택
5. create apng 버튼 클릭

Step 8. apng

1.이미지 우클릭
2. 다른 이름으로 저장. 끝

apng 확인은 chrome, safiri, firefox 브라우저에 던지면 된다.


3. Framer JS 에서 PNG Sequence Images 활용하기

다 쓰고 다시 보니 난이도가 높다 ㅠㅠ

Step 9. 기본 테스트 셋팅

1.bg: 스크린 size로 randomimage 지정
2.loader_a layer 는 적당한 size로 align.center

Step 10. sequence lmage import

1.fps = 30(frame rate)
2. for loop 문으로 60 frame(총 이미지 수) 지정
3. 1/30 second 의 속도로 loader_a.image 에 sequence image 덮어쓰기

즉, 2초동안 60장의 이미지를 갱신해줌으로 애니메이션처럼 보여준다.

60장을 1/30초에 한장씩 불러오니 2초뒤에 다시부르면 2번 재생된다

Step 11. loading modularize

1.loader_loop=-> 안에 image sequence 불러오기를 묶음
2. loader_a.opacity = 1
3. loader_loop() 로 언제든지 똑같은 코드 호출 가능

Step 12. trigger + animation

1.bg.animate brightness: 30 (dim effects)
2. loading_loop() 시작
3. 2초 후 loading_loop() 재시작
4. 다시 2초 후
5. loader_a.opacity = 0
6. bg.image 랜덤 교체
7. bg.animate brightness:100

image sequence

framer 에서 sequence image 를 활용하여 시뮬레이션 할 경우, 
1/30 초에 한번씩 이미지를 갱신해주는 방법으로 flip book 처럼 동영상 효과를 준 것이기 때문에, device 나 브라우징 환경에 따라 이미지 로딩의 딜레이로 인하여 loader 의 움직임이 느려지거나 frame drop 현상이 발생할 수도 있다.

그렇기에 개발 환경과 사뭇 다를 수 있지만, 사이즈나 fps 등 여러모로 용량 및 퍼포먼스 최적화를 할 수 있는 테스트 기회이기도 하다.


4. Framer JS 에서 APNG 활용하기

apng modulate 가 있지만, 재생 제어를 않기에 간단히 image 로 사용

Step 13. loading module 대신, image 로 apng import

1.apng 는 자동 재생, 무한 반복이기에 필요할때 부르고 버리자
2. 앞서 설명한 sequence image 달리, loader_a.image 지정만으로 완료

Step 14. 훨씬 짧은 코드, 적은 리소스

2초 짜리 apng 이기 때문에 4초 뒤에 loader_a.image = “” 로 날려주면 끝

apng image

framer 에서 apng 활용한 시뮬레이션의 경우, apng 파일을 따로 만들어와야 하는 등 몇가지 불편함이 있지만, agif 처럼 1 file = 1 animated image 이기 때문에 리소스 관리에 유리하다.

동영상처럼 미리보기 지원되지 않는 점은 아쉽지만, 사파리, 크롬, 파이어폭스 등 브라우저로 확인이 가능하다.

그리고 개발에서 duration 으로 fps 를 조절하는 효과를 볼 수 있기에 매우 유용한 animated image format 이다.


5. Sequence/APNG Image Sharing

언제나 네이밍이 중요하다

Step 15. 파일명 정하기

1.filename_0000.png 회사마다 개발 환경 마다 다르니, 잘 확인 후 정해야 한다.

2. 파일명 수정은, 맥 os finder 에서 우클릭 후 항목 이름 변경 메뉴를 사용하면 간단하다.

Step 16. frame rate

퍼포먼스를 위한 멀티 fps 전달, 이미지/디바이스 등 다양한 환경과 사양에 따라 애니메이션 퍼포먼스 결과물이 달라진다.

보통 30/24/20/15 를 전달하여 테스트 하지만, 30/24 추천한다.

에펙으로 렌더링 해도 무방한 공유용 agif

Step 17. image file spec 전달

1.name: screen_img_loading
2. format: png sequence/apng
3. size: 50x50(pt)
4. time(duration): 2sec, 2000ms
5. frame: 60 frame
6. frame rate: 30fps

Step 18. 참고용 첨부

1.framer url 주소
2. agif 파일 첨부

실제 프로토타이핑을 공유하여 직접 인터랙션을 확인해 볼 수있도록 하는 것이 좋다. 코드가 필요한 경우엔 개발팀에서 직접 프레이머 코드를 확인하는 경우도 있다.

그리고 사내메신저나 위키, 이메일 혹은 슬랙 등으로 개발에 공유할때는 agif 를 첨부하는 것이 좋다. apng 에 비해 화질이 떨어지지만 커뮤니케이션용으로는 사용성이 뛰어나다.


마무리하며…

실무에서 이렇게 모션을 활용한 프로토타이핑으로 공유되면 디자인팀 뿐만 아니라, 기획과 개발 등 유관 부서의 구성원들이 직접 사용해보는 경험을 통한 빠르고 직관적인 피드백이 가능하다. 또한 클라이언트나 글로벌 오피스 등 물리적 거리가 있는 구성원과의 커뮤니케이션에서도 효과가 매우 크다.

물론 이러한 모든 피드백이 언제나 긍정적이라고 할 수는 없겠으나, 다양하고 건설적인 프로세스임은 틀림없다.

단, 이러한 활용에 필요한 높은 숙련도 때문에 익숙하지 못할 경우, 필요 이상의 코스트로 인해 제대로 된 효과를 보기 어려울 수 있다. 해서 인터랙션 전문 인력에 대한 지속적인 관심과 투자가 회사차원에서 이뤄져야한다.

모션의 에펙과 프로토타이핑의 프레이머 두 프로그램의 학습 난이도가 높은 관계로 직접 따라 해보길 바라기 보단, 의식의 흐름을 통해 인터랙션 디자인 프로세스에 대한 이해를 높일 수 있는 기회가 되었으면 하는 바람이다.

참고로 사실 이번 로딩 예제처럼 인터랙티브 요소가 크게 작용하지 않는 경우에는, 에펙에서 mp4, agif 로 커뮤니케이션 한후에 이미지 파일을 개발에 전달해도 무방하다.