'스케치'와 '애프터 이펙트(AE)'를 더 가깝게 만들었습니다 [Bringing Sketch and After Effects Closer Together]

이 글은 Josh Fleetwood Bringing Sketch and After Effects Closer Together 글을 번역했습니다. 저의 모든 글은 허가를 받고 진행 하였습니다.

Google의 UX Motion Design에서 제공하는 두 가지 새로운 애니메이션 워크 플로우 도구 소개

presentation
Inspector Spacetime 및 Sketch2AE 소개
좋은 UX 모션 디자인은 단순히 에셋(assets)을 애니메이션화하는 것이 아니다. 우리가 즐거움과 재미를 불어 넣고, 확장 가능한 새로운 패턴을 정의하거나, 아니면 완전히 새 제품을 개념화하든, 모션은 이야기를 말해준다. 그리고 우리가 에셋(assets)을 다시 만들고 스팩을 작성하는 데 시간을 보낼 때, 우리는 우리 일의 가장 중요한 부분인 스토리텔링에 집중할 시간이 줄어든다.
구글(Google)의 UX 모션 디자이너로서, 나는 우리의 플랫폼과 어플리케이션의 충실도가 높아지는 것을 보았다. 상호작용 디자인과 애니메이션 사이의 격차를 부분적으로 메우기 위해서다. 구글은 이야기를 하는 것과 화면을 클릭하는 것의 결정적인 중요한 차이를 이해한다. 이러한 권한 부여는 우리의 작업흐름에 남아있는 격차에 대한 좌절과 결합되어 우리에게 이야기 전달을 위한 더 많은 시간을 주도록 Adam Plouff¹에게 영감을 주었다.

디자인 도구는 고통이 될 수 있습니다. ¯ \ _ (ツ) _ / ¯

진전이 있었음에도 불구하고, 우리가 가장 좋아하는 많은 모션 디자인 도구들은 아직 따라잡지 못했다. Bodymovin이나 Lottie와 같은 애니메이션 도구들이 우리의 작업흐름을 향상시키는데 도움을 주지만, 우리 모두는 아마도 우리 과정의 일부분이 여전히 약간, 음, 고장났다는 것에 동의할 수 있을 것이다.
UX 디자이너인 Adam과 나는 주로 애프터 이펙트(AE)에서 일하는 동안 스케치(Sketch)를 사용한다. 이 도구들이 업계 표준이 되고 있음에도 불구하고, 이 도구들은 서로 잘 어울리지 못한다. 우리가 가장 싫어하는 날들은 일러스트레이터나 애프터 이펙트(After Effects)에서 자산을 다시 만드는 데 소비되며, 종종 의미 있는 무언가를 만들기 위해 몇 시간만 남겨둔다. 그리고 우리가 마침내 무언가를 만들고 나면, 또 다른 지루한 작업이 있는데, 그것은 엔지니어링(╯°□°)에게 동작 스펙을 설명하는 방법을 알아내는 것이다. 시간을 낭비하는 것에 지쳐서 Adam은 우리가 혼자 있는 것을 상상할 수 없었던 SUMux2 Motion Design 팀을 위해 몇 가지 황금 도구를 부화시켰고, 그래서 우리는 이것을 공유하게 되어 기쁘다.
Sketch2AE : Sketch와 AE 사이의 땅콩 버터와 젤리 Inspector Spacetime: 엔지니어 용 Google 번역

Sketch2AE : 스케치(Sketch) - 애프터 이펙트(After Effects)에서 아스피린 빼기

Sketch2AE는 스케치 플러그인과 AE 스크립트로, 외부 파일이 필요 없이 스케치부터 애프터 이펙트까지 아트보드를 형상 레이어 및 편집 가능한 텍스트로 전달한다. 그룹 및 심볼은 보존되는 반면 간단한 도형은 애니메이션이 용이한 파라메트릭 도형으로 가져오게된다. 마치 누군가가 당신을 위해 모든 스케치 자산을 몇 초 안에 재창조하고 조직한 것 같다. 고마워, Adam!
우리 팀에게 이 과정은 탐나는 Adobe Illustrator => AE 워크플로우에서 한 단계 더 나아간 것이다. 디자이너로부터 일러스트레이터 파일을 받을 때, AE에서 애니메이션을 시작하기 전에 앱들 사이를 왔다 갔다 하는 등 많은 준비 작업이 여전히 많다. 스토리텔링을 미루는 시대는 지났다.
presentation
스케치에서 After Effects로 애셋 붙여 넣기

실제로 흐르는 워크 플로우

Sketch2AE는 여러 개의 중간 단계를 제거하고 Sketch 프로젝트와 유사한 AE로 구성을 구축한다. 스케치2AE는 다음을 변환한다.

  • After Effects에서 프로젝트 전체의 사전 컴파일로 심볼을 스케치한다. 모든 곳에서 어디에서나 업데이트를 한 번 업데이트한다.
  • 스케치 그룹을 스케일링 및 위치 재 지정을 위해 부모가있는 레이어로 옮기십시오. 이것은 표준 그룹화 기능과 같은 기능을 수행합니다.
  • 스케치 마스크를 설정하여 매트 효과(matte effects)가 설정된 그룹으로 만드십시오. 스크래치에서 마스크를 다시 만들 필요가 없습니다.
  • 스케치 도형(Shapes)을 기본 AE 모양 레이어로 작업합니다. 직사각형은 직사각형을 유지하고 타원(ovals)은 타원형(ellipses)을 유지합니다. 효율적으로 애니메이션을 완성합니다 (마침내).
Sketch2AE에 대해 더 자세히 알아 보거나 다운로드하십시오.

Inspector Spacetime : 사양을 코드에 맞게 설정

Inspector Spacetime은 플러그인과 AE 스크립트도 있지만 모션 디자인 마법이 일어난 후에 작동된다. Inspector Spacetime은 클릭 한 번으로 레퍼런스 비디오에 대한 모션 스펙을 생성하므로 당신은 엔지니어링 팀의 일에 간섭하지 않을 수 있다.
Bodymovin과 Lottie가 AE 중에서 사용 가능한 코드를 수출하는 것을 더 쉽게 만들지만, 이 코드 마법사는 시간 지연이나 총 전환 기간과 같은 사양 통신에 필요하지 않다. 그리고 동적 콘텐츠를 포함하는 확장 가능한 UI 요소에 항상 도움이 되는 것은 아니다.
내 경험에 따르면, 좋은 애니메이션의 미묘한 점을 전달하고 코드로 변환하는 것은 많은 양의 대화를 필요로 한다. 하지만, 만약 당신이 당신의 전환이 완전하게 재현되기를 원한다면 그것은 가치가 있다. 그리고 그때가 일이 잘 풀리는 때다. 같은 개념을 기술하는 애니메이터들과 엔지니어들 사이의 언어 장벽으로 인한 혼란의 순간들을 셀 수 없다. 그것이 프레임 대 프레임의 밀리초 단위에서 끊기거나 혹은 단지 숫자를 원하는 사람에게 움직임 곡선의 시각적 표현을 설명하려 하든지 간에, 아무도 그 방정식에서 재미를 보지 못한다.
나는 종종 글쓰기 스펙의 고통과 지루함을 생략하는 마술 지팡이를 원해 왔다. 나는 차라리 설거지를 하든지 집 먼지를 털고 싶다. 이제, 내가 Inspector Spacetime를 사용할 때, 내가 해야 할 일은 키프레임 쌍들의 그룹을 선택하고 버튼을 클릭하는 것이다. 응. 바로 그거야. 미적분학은 없다.
presentation
After Effects 키 프레임에서 엔지니어링 사양 생성
After you click the button, the timing, relation between keys, and cubic Bezier curve are collected as text and added to the comp that you render out as a reference video. Whatever data the engineers need is married to the render, blending your visual and data references into one.
버튼을 클릭하면 키와 큐브 사이의 관계, 큐빅 베 지어 커브가 텍스트로 수집되어 참조 비디오로 렌더링되는 컴포지션에 추가됩니다. 엔지니어가 필요로하는 모든 데이터가 렌더링과 결합되어 시각 및 데이터 참조를 하나로 결합합니다.
어떤 키가 어떤 것인지 효과적으로 라벨을 붙이기 위해 텍스트를 편집할 수 있지만 타이밍을 전달하는 주된 방법은 텍스트 계층의 표현에서 나온다. 이 표현은 시작 마커와 끝 마커를 이동하더라도 플레이헤드가 활성 키 프레임으로 이동할 때 텍스트를 업데이트한다.
Inspector Spacetime에 대해 자세히 알아 보거나 다운로드하십시오.

당신이 더 많은 시간을 즐길 수 있도록 hum drum을 자동화한다.

Sketch2AE와 Inspector Spacetime은 팀 간의 작업흐름을 개선했고 우리가 창의적인 일에 더 많은 에너지를 쏟을 수 있게 했다. 우리는 당신이 사랑하는 일에 집중할 수 있도록 도울 수 있는 몇 가지 방법을 공유하게 되어 기쁘다.
도구를 사용해보고 더 나은 도구를 만들 수 있도록 도와주세요.
  • Sketch2AE
  • Inspector Spacetime
  • 우리와 함께 일하고 싶습니까? 포트폴리오 또는 데모 릴을 motiondesign@google.com으로 보내십시오.
— — — —
1. Adam Plouff left Google to pursue other endeavors. His former Google family keeps a warm place in their hearts. Find out more about Adam’s solo projects at battleaxe.co
1. Adam Plouff는 다른 새로운 도전들을 하기 위해 구글을 떠났다. 그의 전직 구글 가족들의 마음 속에 따뜻한 장소다. battleaxe.co.에서 더 Adam의 솔로 프로젝트에 대해 알아내다.
2. The Search, User, and Maps UX team (SUMux) designs products like The Google Assistant, Google Search App, and Google Maps.
2. 검색, 사용자 및 지도 UX 팀 (SUMux)은The Google Assistant, Google Search App, 및 Google Maps와 같은 제품을 디자인합니다.

이 글은 번역 글입니다. 원본 링크입니다.


https://www.facebook.com/groups/224179755005643/

안녕하세요! Early adopter입니다.
페이스북 [DTF] 디자인 번역 공장 - Design Translation Factory 그룹도 많이 가입해주시길 바랍니다.
"보버"에서 "디자인 번역 공장" 연재를 저와 함께 해주실 분을 찾습니다. 하단 "리뷰" 또는 "페이스북"으로 편하게 메시지 주세요!
PS. 제가 사용하는 블로그 "보버"에 "함께 쓰는 블로그"라는 기능이 요번에 추가됐네요 ㅋ (미디엄에 퍼블리케이션 같은 기능..)
하단 링크 글을 보시면 "디자인 번역 공장"에 어떻게 함께 연재할 수 있는지 자세히 설명되어있습니다. 또는 쉽게 FB 메시지 주세요!
https://bit.ly/2L6WsZp