Instagram 프로필 사진은 원 안에 표시되고, 정사각 업로드에서 잘리며, 곁의 썸네일 그리드보다 작은 크기로 보입니다. 풀 4:5 컬럼을 차지하는 피드 게시물과 9:16로 화면을 채우는 릴을 더하면, 기하학을 거의 공유하지 않는 세 가지 배치 형태가 됩니다.
본능은 그리드용으로 만들고 축소하는 것입니다. 그것이 다시 그리기를 만드는 순서입니다. 넓은 게시물을 채우도록 그린 마크는 아바타에 닿기도 전에 미세한 디테일을 잃기 때문입니다. 대신 원에서 바깥으로 만드세요. 마크를 전혀 애니메이션해 본 적 없다면 로고 애니메이션의 기본부터 시작해 배치로 돌아오세요.
Instagram에서 애니메이션 로고가 다르게 작동하는 이유
비디오 플랫폼에서는 마크가 보통 더 큰 구성의 일부입니다. Instagram에서는 그것이 종종 전체 구성입니다 — 프로필 아바타가 프레임 없이, 캡션 없이, 그것이 놓인 그리드 너머 맥락 없이 브랜드인 것입니다.
그것은 형태에 유별난 무게를 둡니다. 정사각을 가장자리까지 채우는 마크는 페이지에서는 맞아 보이고 원에서는 잘립니다. 넓은 락업을 가진 마크는 크롭 안에서 워드마크 끝을 잃습니다. 그리고 아바타가 프로필 페이지, discover 피드, 댓글 스레드에 걸쳐 여러 크기로 나타나기 때문에 중요한 버전은 가장 큰 것이 아니라 가장 작은 것입니다.
두 번째 차이는 소리입니다. Reels는 음소거로 자동 재생되고, 상당한 비중의 시청자는 음소거를 푸지 않습니다. 웹사이트 히어로는 그곳에 있기로 선택한 시청자를 가정할 수 있는 반면, 릴은 스크롤을 놓고 경쟁하므로 애니메이션은 오디오가 꺼진 채 도착을 전달해야 합니다. 그것이 컷의 타이밍을 트랙 자체보다 더 중요하게 만듭니다.
세 가지 배치와 각자가 실제로 필요로 하는 것
각 배치를 리사이즈가 아니라 디자인 제약으로 다루는 것이 도움이 됩니다. 세 곳은 마크 자체 외에는 공통점이 거의 없기 때문입니다.
프로필 아바타
정사각 업로드, 원형 표시, 작음. 그 정사각형의 내접원 바깥의 모든 것은 사라지므로, 마크는 주변에 공간이 우연히 있는 사각형이 아니라 디자인상 원 안에 구성되어야 합니다. 지름의 8~10%를 모든 면의 여백으로 두고, 브랜드에 워드마크가 있다면 반드시 여기서 살아남아야 할 것이 아니라 더 넓은 배치용 별도 자산으로 다루세요.
피드 게시물
가장 긴 컬럼 포맷은 대부분의 브랜드가 풀블리드 비주얼용으로 쓰는 것이고, 세 곳 중 가장 넉넉한 배치입니다. 워드마크가 살 수 있고, 태그라인이 나타날 수 있으며, 타이밍이 급하게 느껴지지 않고 더 긴 애니메이션이 돌 수 있는 곳입니다. 또한 소리와 함께 볼 가능성이 가장 높은 배치라, 박자 컷이 완전히 인정받는 유일한 곳이 됩니다.
릴
전체 화면, 세로, 기본 음소거, 스크롤 제스처와 경쟁. 두 가지 결과가 따릅니다. 첫 프레임은 스스로 서야 합니다. 계속 볼지 결정하는 시청자는 그 프레임만 보기 때문입니다. 그리고 오프너는 1초 미만이어야 합니다. 첫 3초를 로고에 쓰는 릴은 그 시간을 나쁘게 쓴 것입니다.
원형 크롭을 먼저 만드세요
가장 힘든 제약에서 시작해 바깥으로 나가세요. 원이 가장 힘든 것이고, 이유는 기계적입니다. 작은 것에서 큰 것으로 가면 손실이 없습니다. 아바타 크기에서 읽히는 마크는 그보다 큰 모든 크기에서 읽히기 때문입니다. 큰 것에서 작은 것으로 가면 디테일을 잃고, 애니메이션이 끝난 후에야 알게 됩니다.
두 가지 형태가 크롭에서 항상 실패합니다. 경계 상자의 모서리에 중요한 콘텐츠가 있는 것 — 왼쪽에서 오른쪽으로 바짝 맞춘 워드마크, 이름 옆에 심볼이 있는 락업 — 은 이름의 양끝을 잃습니다. 그리고 그 너비를 가정한 내부 간격으로 만들어진 넓은 사각형은 원이 파고들면 중심에서 벗어나 보입니다.
통하는 구조는 모노그램에 선택적 워드마크를 더한 것입니다. 모노그램은 모든 배치를 견디는 자산이고, 워드마크는 가로 공간이 있는 피드 게시물과 릴용으로 더해집니다. 작은 포맷 브랜드 자산을 먼저 심볼로 만드는 것과 같은 논리이고, 그래서 로고 GIF의 제약이 이를 위한 유용한 예행연습인 것입니다. 포맷이 아바타 크롭과 같은 디테일을 벌합니다.
음소거 자동 재생용으로 애니메이션을 디자인하세요
Reels는 소리 없이 재생되므로, 애니메이션은 오디오가 꺼진 채 등장을 먹고 들어와야 하고, 그 다음 트랙과 함께 더 좋아야지 의존하면 안 됩니다.
테스트는 90초짜리 작업입니다. 타임라인을 음소거하고 끝까지 보세요. 도착이 여전히 의도적으로 읽힌다면 사운드 디자인은 보너스입니다. 음소거했을 때 컷 지점이 임의적으로 느껴진다면 문제는 타이밍에 있고, 서로 다른 세 지점에 whoosh, riser, sub-drop을 더한다고 마크에서 몇 프레임 어긋난 컷을 고치지 못합니다. 사운드 이펙트를 층층이 쌓는 것도 2초 조각을 훨씬 긴 무언가의 트레일러처럼 들리게 하고, 즉시 촌스러워집니다.
자동 재생 음소거는 선호가 아니라 브라우저와 플랫폼 정책이고, 메커니즘은 문서화되어 있습니다 — MDN의 자동 재생 미디어 가이드는 음소거 재생이 허용되고 음소거되지 않은 재생이 차단되는 이유를 설명합니다: developer.mozilla.org — autoplay guide. 그 문서가 지적하듯, muted 속성이 대부분의 브라우저에서 자동 재생을 합법으로 만드는 조건이고, 그것이 바로 음소거 컷이 당신이 테스트해야 할 컷인 이유입니다.
프레임 크기와 내보내기 설정
각 배치를 하나의 소스 파일에서 내보내 항목 지속 시간, 박자 정렬, 홀드 길이가 동일하게 유지되게 하세요. 바뀌어야 하는 것은 마크 주변 프레임뿐입니다. 채널마다 오프너 타이밍을 다시 맞추는 브랜드는 자기 애니메이션이 무엇인지 모른다고 보이기 때문입니다.
릴용으로, 게시된 비디오 사양은 추측이 아니라 가장 안전한 기준입니다. 9:16 화면비, 권장 1080×1920픽셀에 최소 540×960, 초당 24~60프레임, 그리고 2~5초의 closed GOP와 48kHz 스테레오 AAC 오디오를 가진 H.264 또는 H.265 압축 — <a href="https://developers.facebook.com/docs/video-api/guides/reels-publishing">developers.facebook.com — Reels publishing</a>. 평면 배경 위의 채도 높은 마크는 일반 영상이 필요로 하는 것보다 높은 비트레이트의 이점이 있고, 파일이 몇 초뿐이어서 크기 불이익은 무의미합니다.
프로필의 정적 측면에도 다른 어디와 같은 단순화 규칙이 적용됩니다. 로고는 고대비 기하학이고, 그것이 손실 압축이 가장 못 다루는 콘텐츠입니다 — 가는 획과 얇은 글자는 링링 아티팩트가 먼저 나타나는 곳입니다. 소스 파일의 알파 채널이 진짜 투명인지, 목업 배경이 우연히 가린 흰 사각형이 아닌지 확인하는 것은 무엇이든 발행하기 전에 한 번 돌릴 가치가 있는 다른 점검입니다.
아마추어 작업처럼 보이는 네 가지 실수
이 네 가지가 Instagram에서 미완성으로 읽히는 애니메이션 브랜드 마크 대부분을 설명하고, 각각은 구체적인 해결이 있습니다.
정사각 가장자리까지 채우고 원에 잘리는 워드마크. 해결: 내접원 안에 구성하고 워드마크는 피드 게시물과 릴로만 옮기세요.
콘텐츠가 시작되기 전 3초를 도는 오프너. 해결: 마크가 24프레임 미만에 도착할 때까지 등장을 자르고, 지속 시간을 더하는 대신 2프레임 안착을 더하세요.
프로필, 그리드, 릴에 걸친 마크의 네 가지 다른 버전. 해결: 모든 배치를 하나의 소스 파일에서 내보내 타이밍이 동일하고 프레임만 다르게 하세요.
몇 프레임 늦게 착지하는 박자 컷. 해결: 그림을 배치하기 전에 박자를 표시한 뒤 도착 프레임이 마커에 정확히 놓이게 하세요. 아무도 그 오류를 이름 붙일 수 없지만, 모두가 볼 수 있습니다.
피드와 Reels의 공통점
두 포맷은 반대처럼 보입니다 — 하나는 여유롭게 읽는 고려된 그리드 게시물, 다른 하나는 전체 화면 스크롤 결정 — 하지만 세 가지 제약을 공유하고, 그 세 가지가 일이 있는 곳입니다.
둘 다 폰에서, 세로로, 적어도 절반의 시간은 소리 꺼진 채 봅니다. 둘 다 인내할 의무 없는 피드 안에 삽니다. 그리고 둘 다 마크를 브랜드가 아니라 시청자 기기가 정한 크기로 보여주므로, 가장 작은 가능한 렌더링이 디자인해야 할 것입니다.
그 마지막 지점이 아바타가 아바타 너머로 중요한 이유입니다. 그것은 다른 모든 배치에서 최악의 경우를 위한 예행연습입니다. 썸네일 크기의 원형 크롭을 견디는 마크는 4:5 게시물, 전체 화면 릴, 그리고 둘 중 하나에서 뽑은 정지 이미지를 견딥니다. 그러므로 프로필 사진은 콘텐츠 계획 옆에 따로 앉아 있는 별개의 잡일이 아니라, 그림을 결정하는 테스트 케이스입니다.
그림이 견디면 남은 결정은 타이밍에 관한 것이고, 모션을 계정 전체의 공유 언어로 다루는 데는 꽤 설득력 있는 논거가 있습니다. 다른 처리가 전달하는 것에 대한 관례 — 빌드에 대한 리빌, 루프에 대한 안착 — 은 브랜드가 실제로 쓰는 스타일에 모아져 있고, 세 개가 생긴 것을 발견하는 것보다 하나를 의도적으로 고르는 것이 더 싸습니다.
발행하기 전 짧은 체크리스트
여섯 항목, 모두 빠르고, 각각은 게시물이 예약된 후 고치기 비싼 실수를 잡습니다.
마크는 모든 면에 여백을 두고 내접원 안에 앉아 있고, 인지 가능하려면 워드마크가 필요하지 않습니다.
소스 파일은 진짜 투명성을 가지고, 가정하는 대신 어두운 배경에서 보는 것으로 확인됩니다.
릴의 첫 프레임은 정지 이미지로 통합니다. 스크롤하는 시청자가 결정하기 전 보는 유일한 프레임이기 때문입니다.
애니메이션은 음소거되어, 피드 크기로, 폰에서 보였습니다.
세 비율 모두 하나의 소스 파일에서 왔으므로, 항목 지속 시간과 홀드 길이는 프로필, 피드, 릴에 걸쳐 동일합니다.
퇴장은 하드 컷이나 루프이지 느린 페이드가 아닙니다 — 그리고 움직이는 요소로 쓰인다면 파일은 첫 프레임으로 깔끔하게 루프합니다.
자주 묻는 질문
Instagram 애니메이션 로고는 어떤 크기여야 하나요?
릴은 9:16으로 1080×1920픽셀로 내보내세요. 권장 해상도에 최소 540×960입니다. 아바타는 내접원 안에서 통하는 정사각형으로 디자인하고, 각 면에 8~10% 여백을 두세요. 마스터 해상도가 아니라 가장 작은 표시 크기에서 마크를 만들고 판단하세요.
Instagram 프로필 사진으로 애니메이션 로고를 쓸 수 있나요?
아니요 — Instagram의 프로필 사진은 정지 이미지입니다. 애니메이션 버전은 같은 마크가 움직이는 피드 게시물, 스토리, 릴에 속합니다. 실제로 그것은 정적 아바타를 먼저 만들고 콘텐츠로 발행하는 버전을 애니메이션하는 것을 뜻하며, 그 반대가 아닙니다.
애니메이션은 소리 없이 작동해야 하나요?
그래야 합니다. Reels는 음소거로 자동 재생되고 상당한 비중의 시청자는 음소거를 풀지 않으므로, 도착은 침묵 속에서 의도적으로 읽혀야 합니다. 타임라인을 음소거하고 끝까지 보세요 — 오디오 없이 컷 지점이 임의적으로 느껴진다면 문제는 트랙이 아니라 타이밍입니다.
Instagram에서 애니메이션은 얼마나 길어야 하나요?
릴 안 도착은 1초 미만, 피드 게시물의 풀 오프너는 1~3초입니다. 릴의 첫 프레임은 스스로 통해야 합니다. 계속 볼지 결정하기 전 시청자가 보는 유일한 프레임이기 때문입니다.
만들려면 비디오 편집 소프트웨어가 필요한가요?
아니요. 브라우저 편집기는 브랜드 마크가 필요로 하는 경우를 커버합니다. 투명한 SVG나 PNG를 업로드하고, 배경 프레임과 트랙을 고른 뒤 9:16, 1:1, 16:9로 내보내세요. 편집 스위트는 애니메이션이 실사 영상 위에 합성되어야 할 때 설치 가치를 얻지, 2초 마크 리빌용이 아닙니다.
결론
먼저 원을 만드세요. 그것은 세트에서 가장 작고 힘든 크롭이고, 그것을 견디는 마크는 두 번째 그림 없이 4:5 게시물과 전체 화면 릴을 견딥니다 — 그것이 다른 무엇보다 먼저 아바타를 푸는 전적인 이유입니다. 그런 다음 릴을 음소거하고 한 번 보세요. 소리 꺼진 채 도착이 여전히 먹고 들어온다면 애니메이션은 끝입니다. 전체 제작을 정하기 전에 브라우저 편집기에서 직접 마크의 원형 크롭을 시험할 수 있습니다.