새 로고가 흰 배경에서 승인되는 순간은 그것을 애니메이션하기에 최악의 순간입니다. 영상에서 잘못될 모든 것 — 98픽셀에서 무너지는 워드마크, 인쇄용으로 만들어진 외곽선, 압축 내보내기에서 회색 상자가 되는 투명 영역 — 은 디자인 팀이 막 사인한 파일에서는 보이지 않습니다.
그러니 작업은 정해진 순서로 돌아갑니다. 여섯 가지 점검, 모두 저렴하고, 모두 키프레임 하나가 생기기 전에 끝냅니다. 한 자리에서 돌리면 애니메이션은 20분짜리입니다. 건너뛰면 애니메이션은 다시 만들기입니다. 마크를 애니메이션해 본 적 없다면 메커니즘은 로고 애니메이션 방법에 다루고, 이 글은 그 이전에 참이어야 할 모든 것에 관한 것입니다.
비디오 로고는 로고 파일이 아닙니다
첫 번째 정신적 수정은 비디오 로고가 다른 로고가 아니라는 것입니다. 그것은 같은 마크이되 훨씬 가혹한 조건의 집합에 존재하고, 그것이 어떤 결정이 하중을 견디는지 바꿉니다.
인쇄 로고는 편안한 크기로, 그것을 다시 압축하지 않는 표면에서 한 번 봅니다. 비디오 로고는 손실 인코딩이 이미 미세한 디테일을 버린 뒤, 팔 길이에서 98픽셀 아바타로 봅니다. 때로는 캡션 바가 프레임 아래쪽 3분의 1을 덮고 있습니다. 그 어느 것도 디자인에 대한 비평이 아닙니다. 단지 다른 시청 조건이고, 그것을 견디는 자산은 그 조건을 염두에 두고 만들어집니다.
그래서 아래 점검들이 그 순서인 것입니다. 먼저 작은 크기, 그것이 결정적이고 나중에 고치기 가장 비싸기 때문입니다. 그다음 기술 속성, 그다음 프레임 크기, 그다음 모션 처리, 그다음 내보내기입니다. 처음 세 가지 중 어느 것을 뒤집어도 다시 그리기 비용이 듭니다. 움직임을 위해 전혀 디자인되지 않은 마크에서 시작한다면 제약은 로고 애니메이션이 실제로 요구하는 것에 모아져 있습니다.
1단계 · 마크를 98픽셀에서 테스트하세요
마크를 실제 표시 크기로 내보내 폰에 올리고 1초 동안 보세요. 확대하지 말고, 모니터가 아니라, 파일 이름이 곁에 있는 전체 해상도로 보지 마세요.
보통 세 가지가 실패합니다. 가는 획은 완전히 사라집니다 — 원본의 1픽셀 헤어라인은 스케일링 후 아무것도 되지 않습니다. 여백은 닫히고, 그래서 카운터가 채워지고 글자가 합쳐집니다. 그리고 모든 그라데이션은 단일 중간 톤으로 평면화되는데, 그것은 심볼과 워드마크 사이 색 관계를 조용히 바꿀 수 있습니다.
해결은 전부 다시 그리는 것이 아닙니다. 가장 작은 배치가 무엇을 보여주는지 결정하는 것입니다. 아바타용 심볼 전용 버전과 넓은 프레임용 심볼+워드마크 버전은 표준 분할이고, 리브랜딩 하나가 아니라 하루 오후가 듭니다.
큰 캔버스로 디자인하고 작은 크기로 결정하는 것이 전체 방법이고, 이후 모든 자산에서 보답하는 하나의 습관입니다. 같은 논리가 GIF에 들어가는 마크의 정적 버전에도 적용됩니다. 포맷이 같은 단순화를 강제하기 때문에, 비디오만 발행하더라도 로고 GIF 뒤의 팔레트 제약을 이해할 가치가 있습니다.
2단계 · 투명성이 진짜인지 확인하세요
로고 파일은 투명해 보이면서 그렇지 않을 수 있습니다. PNG를 어두운 배경에서 열고 마크 주변 영역이 진짜로 없는지, 목업 배경이 우연히 가린 흰색 사각형이 아닌지 확인하세요.
이것은 다른 어디보다 영상에서 더 중요합니다. 애니메이션 마크가 사진 배경 위에 합성되기 때문입니다 — 말하는 사람, 제품 샷, 야간 도시 풍경. 마크 뒤의 흰 판은 흰 판으로 즉시 보이고, 아무리 모션 디자인해도 숨겨지지 않습니다. 반투명한 부드러운 섀도우가 다른 흔한 실패입니다. 인코더가 알파 채널을 평균낼 때 회색 상자로 읽힙니다.
안전한 포맷은 SVG와 진짜 알파 채널을 가진 PNG이고, 둘의 차이는 내보내기 전에 아는 가치가 있습니다. PNG는 전체 알파 블렌딩을 지원하는 반면, GIF 포맷은 프레임당 하나의 완전 투명 인덱스로 제한되어 부드러운 가장자리가 거칠게 보입니다 — w3.org — PNG specification. 유일한 파일이 JPEG라면 아직 투명 로고가 없는 것입니다.
3단계 · 가장 작은 프레임을 먼저 정하세요
프레임 크기는 내보내기 설정이 아니라 디자인 결정이고, 세트에서 가장 작은 것이 구도를 결정합니다.
세로 9:16은 일반 콘텐츠 세트에서 가장 타이트한 크롭입니다 — 워드마크를 위한 가로 공간이 가장 적어, 락업이 통하거나 다시 만들어야 하는 곳입니다. 정사각 1:1은 공격적으로 자르는 피드 배치용 안전한 중간입니다. 가로 16:9는 4K까지 YouTube, 웹사이트 히어로, 물리적 방의 화면 무엇이든 커버합니다.
콘텐츠가 소셜 우선이라면 세로 버전을 먼저 만드세요. 그런 다음 바깥으로 적응시키세요. 넓은 마스터에서 세로로 적응시키는 것은 가장 많은 다시 그리기를 만드는 실수입니다. 구도가 세로 프레임이 결코 갖지 못할 공간을 위해 풀렸기 때문입니다. 문제가 애니메이션이 아니라 락업이라면 배치 관례는 로고 비디오 기본에 다루어집니다.
4단계 · 모션 처리를 마크 자신의 기하학에서 고르세요
처리는 마크 자체에서 읽을 수 있어야 합니다. 딱딱한 각이 있는 기하학 심볼은 마스크 리빌이나 부분 조립을 취합니다. 기하학이 이미 조각이 어디서 오는지 시사하기 때문입니다. 원형이나 유기적 마크는 방사형 스케일이나 안착을 취합니다. 가독성을 유지해야 하는 워드마크는 거의 아무것도 안 취합니다 — 짧은 페이드업과 홀드뿐입니다.
통하지 않는 것은 효과 목록에서 애니메이션을 골라 앞에 있는 마크에 적용하는 것입니다. 그것은 마크가 자신의 형태에 거슬려 움직이는 것처럼 보이는 알아볼 수 있는 실수의 메커니즘이고, 관객은 이유를 설명할 수 없어도 아마추어처럼 읽습니다.
효과 선택보다 결과를 더 결정하는 두 값: 등장에 몇 프레임이 걸리는지, 그리고 멈춤 주변 두 프레임에서 무슨 일이 일어나는지입니다. 초당 24프레임에서 24프레임 미만 등장은 자신감 있어 보입니다. 40프레임 등장은 기다림처럼 보입니다. 그리고 도착해 딱 멈추는 마크는 움직임이 아니라 점프 컷으로 읽히므로, 어떤 지속 시간을 더하기 전에 2프레임 안착을 더하는 것이 가치 있습니다.
5단계 · 애니메이션하기 전에 기술 기준을 정하세요
이 네 값을 한 번 적어 두고 모든 내보내기에 재사용하세요. 플랫폼 사양은 바뀌고, 기억에서 다시 만드는 것이 세트가 채널마다 일관성 없게 끝나는 방식이기 때문입니다.
프레임 레이트: 안착과 홀드가 있는 것은 24, 공격적으로 다시 인코딩하는 플랫폼은 30. 화면비: 9:16, 1:1, 16:9, 모두 타이밍이 동일하게 유지되도록 하나의 소스에서 내보냅니다. 지속 시간: 오프너는 1~3초, 런치 컷은 2~6초. 그리고 색 공간: Rec. 709로 내보내고 즉흥적으로 하지 마세요. 트랜스코딩 후 바뀌는 채도 높은 브랜드 색은 어떤 압축 아티팩트보다 나쁘고, 파일이 남의 폰에서 재생되기 전까지 보이지 않습니다.
플랫폼 숫자는 가정하는 대신 확인할 가치가 있습니다. 사람이 기대하는 것보다 더 다르기 때문입니다. Meta의 Reels Publishing API는 요구 사항을 명시적으로 문서화합니다 — 9:16 화면비, 권장 1080×1920픽셀에 최소 540×960, 초당 24~60프레임, 그리고 2~5초의 closed GOP를 가진 H.264 또는 H.265 압축 — developers.facebook.com — Reels publishing. 그 사양이 보여주듯, 1~3초 오프너는 모든 게시된 제약 안에 편안히 들어가므로 제한 요소는 플랫폼 한계가 아니라 당신의 타이밍 규율입니다.
6단계 · 음소거하고 피드 크기로 보세요
마지막 점검은 90초 걸리고 다른 다섯이 잡지 못하는 실패를 잡습니다. 완성된 조각을 내보내 폰에서 실제 피드 크기로, 소리 없이 재생하세요.
오디오가 꺼져 있어도 도착이 여전히 의도적으로 읽힌다면 타이밍이 일을 하고 트랙은 보너스입니다. 음소거했을 때 컷이 임의적으로 느껴진다면 문제는 컷 지점이지 음악이 아닙니다 — whoosh나 riser를 더한다고 박자에서 몇 프레임 어긋난 컷을 고치지 못합니다. 그것이 또한 메트로놈 같은 그리드의 프레임 수준 정밀도가 도움이 되는 곳이고, 지속 시간에 걸쳐 타이밍이 어떻게 표현되는지의 기본 모델은 W3C의 <a href="https://www.w3.org/TR/web-animations-1/">Web Animations specification</a>에 문서화되어 있으며, 조정하는 것을 위한 어휘가 필요하다면 볼 가치가 있습니다.
발행하기 전에 한 번이 아니라 세 번 보세요. 첫 번째 보기는 로고를 봅니다. 두 번째는 타이밍을 봅니다. 세 번째는 낯선 사람이 보는 것을 보는데, 그것은 중요한 유일한 것입니다.
새 로고가 작업을 바꾸는 점
확립된 마크를 애니메이션하는 것과 새로 만든 마크를 애니메이션하는 것 사이에는 하나의 구조적 차이가 있고, 그것은 여섯 단계 순서 중 얼마나 건너뛸 수 있는지 결정합니다.
확립된 마크는 이미 공개적으로 이 필터를 거쳤습니다. 수년의 자산에 걸쳐 작은 크기로 나타났고, 누군가는 읽히지 않는 버전에 불만을 제기했으며, 단순화한 변형은 아마 이미 보조 파일로 존재합니다. 점검은 여전히 문제를 잡지만, 마크는 보통 어딘가에서 이미 테스트되었습니다.
새 마크는 정확히 하나의 맥락에서만 테스트되었습니다. 프레젠테이션, 편안한 크기, 아무도 지나 스크롤하지 않는 디스플레이입니다. 그것은 마크가 겪을 수 있는 가장 관대한 시청 조건입니다. 98픽셀 아바타는 고려된 적 없고, 투명 내보내기는 아직 없을 수 있으며, 포스터 스케일에서 버티는 외곽선이 비디오 인코딩을 견디는지 아무도 확인하지 않았습니다.
그래서 여섯 단계는 의도적으로 앞에 실립니다. 그중 세 가지 — 작은 크기 테스트, 투명성 확인, 프레임 결정 — 은 애니메이션이 아니라 소스 파일에 대한 점검입니다. 애니메이션이 존재한 후에 고치는 것은 애니메이션을 다시 하는 것을 뜻합니다. 미리 고치는 것은 하루 오후와, 대부분의 경우 마크의 단순화한 하나의 변형이 듭니다.
전체 규율의 짧은 버전을 온전히 만들기 전에 원한다면, 애니메이션 마크의 해부 — 등장, 안착, 홀드 — 는 브랜드가 실제로 쓰는 스타일에 제시되어 있고, 대안을 이름 붙일 수 있으면 처리를 고르기가 더 쉽습니다: 애니메이션 로고 스타일.
인수인계 시트
숫자 한 페이지, 내보내기 파일 곁에 둡니다. 한 번 쓰는 데 10분 걸리고, 일관된 브랜드와 각각 조금씩 표류한 파일 세트의 차이입니다.
소스 파일: 애니메이션하는 투명한 SVG나 PNG, 단순화한 심볼 전용 변형을 별도 저장.
모션: 프레임 단위 등장 지속 시간, 초 단위 홀드 길이, 총 지속 시간, 그리고 마크가 최종 상태로 앉아 있는 처리된 케이스의 이름.
기술: 프레임 레이트, 세 가지 화면비, 색 공간, 그리고 내보내는 코덱 프로파일.
음악: 트랙, 분당 비트 수 단위 템포, 그리고 상업 발행용으로 클리어되었는지 확인.
그런 다음 재구축할 때마다 기억이 아니라 그 시트에 맞춰 여섯 가지 점검을 돌리세요. 6개월 뒤에 키프레임 간격을 기억하는 사람은 없고, 브랜드 오프너의 두 번째 버전이 보통 불일관성이 들어오는 곳입니다.
자주 묻는 질문
새 비디오 로고가 통하려면 무엇이 필요한가요?
98픽셀에서 읽히는 마크, 파일의 진짜 투명성, 정해진 프레임 크기, 마크 기하학에서 얻은 모션 처리, 그리고 재사용하는 기술 기준입니다. 애니메이션 자체는 마지막 단계이자 가장 짧은 단계입니다 — 대부분의 노력은 그 앞의 점검에 있습니다.
JPEG로만 있는 로고를 애니메이션할 수 있나요?
할 수는 있지만, 먼저 마크를 오려내야 합니다. JPEG에는 알파 채널이 없으므로 로고 주변 영역은 모든 비디오 배경 위에 분명히 놓일 단색입니다. 애니메이션하기 전에 투명한 PNG나 SVG로 다시 내보내고, 알파가 진짜인지 확인하려면 어두운 배경에서 결과를 보세요.
비디오 로고 애니메이션은 얼마나 길어야 하나요?
채널 오프너는 1~3초, 런치나 공지 조각은 2~6초입니다. 그보다 긴 것은 보통 세 가지 일을 한꺼번에 지고 있습니다 — 로고, 타이틀, 태그라인 — 그리고 해결은 세 모두의 타이밍을 조이는 대신 그중 두 개를 지우는 것입니다.
세로와 가로용 다른 파일이 필요한가요?
다른 화면비는 예, 다른 타이밍은 아니오. 항목 지속 시간, 박자 정렬, 홀드 길이가 동일하게 유지되도록 같은 소스 파일에서 9:16, 1:1, 16:9를 내보내세요. 바뀌는 것은 마크 주변 프레임뿐이고, 그것이 브랜드가 세 채널에서 세 다른 회사처럼 보이는 것을 막습니다.
애니메이션은 루프해야 하나요, 아니면 페이드 아웃되나요?
루프하세요. 첫 프레임으로 돌아오는 자동 재생 영상은 피드에서 하나의 연속된 객체로 읽히고, 검은 화면으로 페이드는 끝난 클립으로 읽혀 지나 스크롤됩니다. 같은 영상, 다른 파일 끝맺음, 측정 가능하게 다른 시청 시간 — 그러므로 하드 컷을 하거나 루프하고, 필요하다면 페이드는 웹사이트 히어로용으로 남기세요.
결론
다른 무엇이든 하기 전에 1단계를 하세요. 마크를 98픽셀로 내보내 폰에 올리고 1초 동안 보세요 — 그 크기에서 견디면 다른 다섯 가지 점검은 재설계가 아니라 산수입니다. 결국 애니메이션을 다시 그리게 된 모든 팀은 그 테스트를 건너뛰었습니다. 가장 작은 배치가 마크에 대한 진실을 말해주는 유일한 것이기 때문입니다. 자체 파일로 브라우저 편집기에서 약 10분 안에 돌릴 수 있습니다.