모션 그래픽으로 요금제를 설명하는 방법

두 요금제 모두 “$6부터”라고 적혀 있습니다. 하나는 도달한 최종 구간의 단가를 모든 단위에 적용합니다. 다른 하나는 사용량의 각 부분에 해당 구간 단가를 적용합니다. 영상이 두 요금제에 똑같이 매력적인 최저가를 보여 주면 시청자는 청구액에 관해 서로 전혀 다른 오해를 할 수 있습니다.

요금 설명 영상을 보고 나면 무엇을 단위로 세는지 파악하고, 요금 규칙을 적용하며, 결제 기간을 알아내어 청구액을 계산할 수 있어야 합니다. 따라서 유용한 이야기는 계산입니다. 무엇을 세고, 어떤 규칙을 적용하며, 어떻게 납부할 금액이 나오는지 보여 주는 것입니다.

모션은 이 계산을 단계적으로 드러낼 수 있습니다. 반대로 감출 수도 있습니다. 낮은 월 환산액이 먼저 나타나고 연간 약정은 읽기에 너무 늦게 나타날 수 있습니다. 카운터가 수량을 빠르게 지나가면서 규칙이 언제 바뀌는지 보여 주지 않을 수 있습니다. 할인은 화면을 지배하고 종료 시점은 전환 속으로 사라질 수 있습니다.

완전한 청구액에서 시작해 역으로 시퀀스를 구성하세요. 수량을 식별하고, 단가를 적용하고, 총액 옆에 결제 기간을 유지합니다.

시청자가 실제로 답을 구하는 질문부터 시작하기

“요금을 설명하자”는 여러 뜻일 수 있습니다. 구매를 검토하는 사람은 요금제를 고르거나, 사용량 청구액을 추정하거나, 연간 결제를 이해하거나, 제공량을 다 쓴 뒤 어떻게 되는지 알아야 할 수 있습니다. 관련된 질문이지만 필요한 시연은 서로 다릅니다.

영상의 주된 질문 하나를 고르세요. 사용량 요금제라면 “이번 달 6단위를 쓰면 얼마일까?”가 될 수 있습니다. 연간 구독이라면 “오늘 $348을 내는데 왜 페이지에는 월 $29라고 쓰여 있을까?”가 될 수 있습니다. 좌석 기반 요금제라면 “누가 유료 좌석에 포함될까?”가 될 수 있습니다.

질문이 좁다고 답을 바꾸는 조건을 빼도 되는 것은 아닙니다. 오히려 그런 조건을 식별하기 쉬워집니다. 금액이 통화, 청구 기간, 활성 좌석, 최소 약정에 따라 달라진다면 그 사실은 계산에 포함해야 합니다. 장식용 제품 기능 목록은 필요하지 않습니다.

스토리보드 전에 예상 답을 쓰세요. 팀이 평문으로 된 계산에도 합의하지 못한다면 애니메이션은 의견 차이를 더 키웁니다. 담당 제품 책임자나 청구 책임자와 요금 규칙을 확정한 뒤 시각적으로 설명할 방법을 정하세요.

Stripe 구간 예시로 단일 단가와 누진 요금 설명하기

Stripe의 구간별 요금 문서는 가상의 글꼴 사업으로 두 모델을 구분합니다. 예시 구간은 15단위에 $7, 610단위에 $6.50, 10단위 초과에 $6입니다. 6단위에서 수량 구간별 단일 단가 방식(volume pricing)의 합계는 $39이고, 구간별 누진 방식(graduated pricing)의 합계는 $41.50입니다.

차이는 단가를 적용하는 범위입니다. 단일 단가 방식은 도달한 구간의 단가를 6단위 전체에 적용합니다. 누진 방식은 첫 5단위에 $7을, 여섯 번째 단위에 $6.50을 부과합니다. 따라서 수량과 요금표가 같아도 시각적 설명은 달라야 합니다.

단일 단가 애니메이션에서는 하나의 단가로 전체 수량과 합계를 연결할 수 있습니다. 누진 방식에서는 앞선 단위가 왜 앞선 단가를 유지하는지 보여 줄 만큼 각 묶음을 충분히 오래 유지해야 합니다. 전체 묶음 위의 “$7”을 단순히 “$6.50”으로 바꾸면 잘못된 모델을 전달합니다.

이는 산술에서 비롯되는 편집상의 요구입니다. 복잡한 애니메이션은 필요하지 않습니다. 관계가 정확하다면 표시 여섯 개, 눈에 보이는 구간 경계, 유지되는 소계가 회전하는 가격 카드보다 더 많은 것을 설명할 수 있습니다.

이해할 만큼 작고 신뢰할 만큼 완전한 청구액 만들기

계산 예시에는 정해진 수량, 세는 단위, 기간, 통화, 총액이 있어야 합니다. 예시 소계에서 세금이 제외된다는 점처럼 없으면 시청자의 해석이 달라지는 제외 사항도 알리세요. 화면을 포괄적으로 보이게 하려고 무관한 예외를 넣지는 마세요.

6단위 누진 예시에서는 이름이 붙은 단위 여섯 개로 시작할 수 있습니다. 다섯 개를 한데 묶고 하나는 따로 둡니다. 첫 묶음 옆에 “5 × $7 = $35”, 두 번째 묶음 옆에 “1 × $6.50 = $6.50”을 보여 줍니다. 그런 다음 두 금액을 “이번 달 6단위에 $41.50”으로 모읍니다.

마지막 상태가 중요합니다. 총액이 나오기 전에 소계가 사라지면 시청자는 움직임을 따라가면서 숫자도 기억해야 합니다. 결과를 소개할 때 계산 근거가 계속 보이게 하세요. 완전한 수식은 설명을 그냥 받아들이는 대신 확인할 기회를 줍니다.

영상의 주된 질문에 도움이 되지 않는 한 이 예시에 수수료나 할인을 더하지 마세요. 항이 하나 늘 때마다 이해해야 할 관계도 늘어납니다. 실제 제품에 필수 기본 요금이 있다면 포함해야 합니다. 복잡한 예외가 선택 사항이라면 영상 옆 별도 예시에 두는 편이 나을 수 있습니다.

직관이 빗나갈 수 있는 경계 보여 주기

하나의 수량만으로도 산술을 보여 줄 수 있지만 요금제의 작동 방식까지 드러나지는 않을 수 있습니다. 유용한 두 번째 장면은 수량이 경계를 넘도록 바꿉니다. 질문은 규칙에서 무엇이 바뀌고 무엇이 그대로인가입니다.

누진 방식에서 5단위에서 6단위로 이동하면 다음 구간에 단위 하나가 추가됩니다. 첫 다섯 개는 원래 단가로 제자리에 남습니다. 모든 단위의 색을 바꾸는 대신 새 단위를 두 번째 묶음으로 움직이세요. 그 움직임이 앞선 소계가 유지된다는 사실을 강화합니다.

단일 단가 방식에서는 경계를 넘을 때 전체 수량에 적용하는 단가가 달라질 수 있습니다. 별도의 가상 예시로, 100단위까지는 개당 $10이고 101단위 이상은 개당 $8이라고 해 봅시다. 100단위의 합계는 $1,000이고 101단위는 $808입니다. 낮은 단가가 모든 단위에 적용되므로 이 예시에서는 단위 하나가 추가되면 총액이 줄어듭니다.

불연속적인 수량 사이의 비용 곡선을 설명 없이 보간하지 마세요. 매끄러운 곡선은 요금제가 지원하지 않는 소수 단위나 연속 규칙을 암시할 수 있습니다. 제품이 정수 좌석을 센다면 정수 좌석을 보여 주세요. 소수 사용량이 가능하다면 카운터를 디자인하기 전에 실제 단위와 반올림 방식을 명시하세요.

5단위에서 6단위로 넘어갈 때 차이가 특히 명확합니다. 두 모델 모두 5단위에서는 $35로 시작합니다. 단일 단가 방식에서는 여섯 번째 단위에 표시된 단가가 $6.50인데도 합계가 $4만 증가해 $39가 됩니다. 첫 다섯 개에도 낮은 단가가 적용되기 때문입니다. 누진 방식은 새 단위에만 해당 단가를 적용하므로 $41.50이 됩니다. 7단위에서는 각각 $45.50과 $48이 됩니다.

이는 좋은 스토리보드 확인 지점입니다. 다섯 단위와 현재 합계를 보여 주고, 여섯 번째를 드러낸 뒤 정확히 어느 단가 표기가 바뀌는지 보여 주세요. 단일 단가 버전에서는 여섯 단가 표기를 함께 바꿉니다. 누진 버전에서는 첫 다섯 개를 그대로 두고 여섯 번째 소계를 별도로 더합니다. 그러면 시청자는 최종 금액에서 규칙을 역으로 추론하지 않고 직접 볼 수 있습니다. 두 소계를 총액 옆에 충분히 오래 유지해 더해 볼 수 있게 하세요.

가격·단위·결제 시점을 함께 유지하기

가상의 연간 구독은 더 간단합니다. 연간 $348을 결제하며 월 $29에 해당합니다. 그래도 잘못 애니메이션하기 쉽습니다. 큰 “$29”를 몇 초간 보여 준 뒤 연간 결제를 드러내면 장면 대부분에서 불완전한 인상을 줍니다.

숫자, 단위, 결제 조건을 하나의 정보 묶음으로 다루세요. 시각적 강조는 달라도 무관한 사실처럼 따로 들어와서는 안 됩니다. 월 환산액을 가장 큰 글자로 두고 바로 아래에 “$348 billed annually”를 놓아 동시에 등장하고 안정적으로 함께 유지되게 할 수 있습니다.

가상 구독 장면은 이 관계를 사용합니다. 두 줄이 모두 0.8초에 자리를 잡고 4.8초까지 안정적으로 유지됩니다. 더 복잡한 청구액에는 더 긴 유지 구간이나 단계별 계산이 필요할 수 있습니다.

요금 전환에서 헤드라인 숫자는 남기고 조건을 지우지 마세요. 카드가 구석으로 줄어들면서 “$29”만 남는다면 작은 버전은 다른 메시지가 된 것입니다. 마지막 카드와 소셜용 크롭을 포함한 모든 구도 상태를 각각 하나의 요금 안내로 검토하세요.

납부액이 아니라 설명에 움직임 주기

숫자 카운팅은 세련돼 보이는 경우가 많지만 의미가 모호합니다. 실시간 사용량일까요, 누적 소계일까요, 추정치일까요, 단순한 등장 효과일까요? 시청자가 어느 것인지 추측하게 해서는 안 됩니다.

금액이 고정되어 있다면 아무도 내지 않을 중간 가격을 하나씩 세는 것보다 확정 값을 보여 주는 편이 더 명확할 수 있습니다. 누적을 설명하려는 목적이라면 변하는 합계가 유용할 수 있지만, 추가되는 단위와 연결되어야 합니다. 그러면 카운터는 시각적 장식이 아니라 계산이 됩니다.

할인에는 특히 주의하세요. $100에서 $60으로 내려가는 애니메이션은 비교를 전달할 수 있지만 비교 기준이 보여야 합니다. $100은 이전 가격인가요, 월 결제 대안인가요, 처음 제공하는 할인 적용 전 가격인가요? 원래 제안에 없는 정의를 타이포그래피와 모션이 대신 제공할 수는 없습니다.

모호한 이름을 극적인 움직임으로 보완하지 마세요. 시청자가 “사용량”이 무엇을 세는지 설명할 수 없다면 움직이는 점 천 개를 더해도 해결되지 않습니다. 추상적인 표기를 구체적인 단위로 바꾸거나, 대표 사건 하나가 집계되는 모습을 보여 준 뒤 전체로 확장하세요.

추정 청구액이라면 불확실성 드러내기

어떤 요금 영상은 고정된 가정 아래 정확한 청구액을 보여 줍니다. 다른 영상은 미래 행동에 따라 결과가 달라지는 계산기를 보여 줍니다. 서로 다른 약속입니다. 정밀해 보이는 숫자는 추정치를 실제보다 확실하게 느끼게 할 수 있습니다.

관찰한 값이 아니라 가정한 입력값에 표시를 붙이세요. 예를 들어 한 달 내내 활성 좌석 12개를 쓰고 중간 변경이 없다고 가정할 수 있습니다. 그 가정을 계산 근처에 보여 주면 사용자가 자기 금액이 달라질 수 있는 이유를 이해하는 데 도움이 됩니다.

실제 시스템의 사용량이 변한다면 거짓으로 보편적인 답 하나보다 의미 있는 시나리오 몇 가지를 고려하세요. 적음·보통·많음의 예시는 정의가 명확할 때 유용할 수 있습니다. 그런 데이터가 없다면 실제 고객 분포를 측정한 결과처럼 제시해서는 안 됩니다.

예시를 더 현실적으로 만들려고 반올림, 일할 계산, 세금, 환율 규칙을 지어내지 마세요. 관련 규칙을 검증하거나 그것이 필요 없는 범위 안에서 교육 예시를 유지하세요. 실제 제품인 듯 확신에 차서 보여 주는 상세한 가상 청구서보다 작고 정확한 설명이 더 유용합니다.

비교하고 확인할 수 있는 화면 디자인하기

가격 장면에는 보통 최소 세 가지 읽기 수준이 있습니다. 금액, 이를 설명하는 규칙, 예시의 범위를 한정하는 맥락입니다. 아래 수준을 사실상 읽을 수 없게 만들지 않으면서 위계로 시선을 안내해야 합니다.

가까이 배치해 어떤 이름이 어느 숫자에 속하는지 보여 주세요. 단위는 멀리 떨어진 범례가 아니라 금액 옆에 둡니다. 비교할 구간에는 같은 정렬을 반복해서 쓰세요. 두 요금제를 비교한다면 공통 가정을 같은 위치에 두어 차이를 확인하기 쉽게 만드세요.

색상은 활성 구간이나 새로 추가된 수량을 구분할 수 있지만, 묶음을 식별하는 유일한 수단으로 삼지 마세요. 이름, 괄호, 일관된 공간 묶음을 사용하면 정지 화면이나 색을 다르게 인지하는 시청자에게도 설명을 유지할 수 있습니다.

실제 배포 크기에서 결과를 확인하세요. 전체 화면 편집기에서 읽을 수 있는 조건도 작은 카드에 삽입하면 사라질 수 있습니다. 가격을 이해하는 데 필요한 조건이라면 구도에서 보호해야 합니다. 숫자를 더 작게 만드는 것이 올바른 선택일 수 있습니다.

이후 수정도 요금 규칙과 연결하기

요금 자료는 제작 팀이 계산을 다시 검토하기로 해서가 아니라 캠페인이 바뀌어서 수정되는 경우가 많습니다. 누군가 헤드라인 금액을 교체하고 나머지 애니메이션도 여전히 유효하다고 가정합니다. 이전 수량, 소계, 청구 기간, 마지막 카드 조건이 눈에 띄지 않은 채 남을 수 있습니다.

프로젝트에서 입력값과 표시 합계를 함께 관리하세요. 연간 결제를 월간으로 바꾸면 납부액, 비교 기준, 결제 표기, 같은 제안을 재사용하는 모든 장면을 검토해야 합니다. 눈에 보이는 수식을 무관한 텍스트 레이어 묶음이 아니라 의존 관계로 다루세요.

간단한 회귀 점검으로 일반적인 수량 하나와 경계 수량 하나를 골라 각각 독립적으로 계산한 뒤 내보낸 영상과 비교할 수 있습니다. 가격을 수정할 때마다 일반 수량과 경계 수량을 다시 확인하세요.

스타일 승인이 아니라 직접 계산하게 하며 검토하기

시청 후 검토자는 영상의 원래 질문에 답할 수 있어야 합니다. 누진 예시라면 7단위의 가격을 물어보세요. 예상 결과는 $48입니다. 다섯 개에 $7, 두 개에 $6.50을 적용한 값입니다.

오답은 유용한 진단 정보를 줍니다. 누군가 일곱 개 모두에 $6.50을 적용한다면 묶음이나 전환이 단일 단가 방식을 암시했을 수 있습니다. 청구 기간을 알아내지 못한다면 기간 표기가 잘못된 시점에 나오거나 실용성을 잃을 만큼 시각적으로 밀려났을 수 있습니다.

내보낸 영상의 경계 프레임도 살펴보세요. 퇴장 전 마지막 안정 프레임을 읽고, 요금제 전환 직후 첫 프레임도 읽어 보세요. 금액은 남아 있는데 조건이 잠깐 사라진다면 최종 카드가 정확하더라도 애니메이션이 오해를 부르는 중간 상태를 만든 것입니다.

목표는 구조를 숨겨 요금을 단순하게 느끼도록 만드는 것이 아닙니다. 관련된 구조를 이해하게 하는 것입니다. 성공적인 요금 설명은 시청자에게 청구액을 예상하는 방법과 그 예상의 바탕이 되는 가정을 분명하게 남깁니다. 애니메이션이 그 추론에 도움이 될 때 자신의 역할을 해낸 것입니다.