캐릭터의 비율을 왜곡하지 않고 스케일 이징 편집하기

스케일은 각 축을 따라 크기를 조절합니다. 가로와 세로 스케일에 같은 배수를 적용하면 캐릭터의 종횡비가 유지됩니다. 배수가 다르면 형태가 달라집니다. MDN 기술 문서에서는 이 차이를 균일 스케일링과 비균일 스케일링으로 설명합니다. MDN: scale() CSS 함수

이징은 키프레임 사이에서 애니메이션 값이 어떻게 변하는지를 조절합니다. 두 축이 모두 80%에서 시작해 100%로 끝난다고 가정해 보세요. 가로 스케일은 96%에 도달했는데 세로 스케일은 아직 88%라면, 캐릭터는 일시적으로 높이에 비해 더 넓어집니다. 시작점과 끝점은 올바르게 보여도 전환 중에는 눈에 띄게 늘어날 수 있습니다.

처음부터 왜곡이 없는 캐릭터라면 전환 내내 X와 Y 스케일 값을 같게 유지해 비율을 보존할 수 있습니다. 더 일반적으로는 승인된 기준 비율을 유지하세요. 준비된 에셋의 시작 스케일 값이 의도적으로 서로 다르다면, 둘 다 같은 변화 배수를 곱하면 됩니다. 기준값을 자동으로 같은 숫자로 바꾸지 마세요.

작업용 복사본을 저장하고 캐릭터 전체를 제어하는 트랜스폼을 찾으세요. 이 안내에서는 기준 크기에서 이미 올바르게 보이는 단일 2D 캐릭터 레이어로 시작합니다. 아트워크가 여러 파트로 나뉘어 있다면 먼저 전체 크기 변경을 위한 공통 트랜스폼을 설정하세요. 그렇지 않으면 몸체만 편집할 때 얼굴이나 액세서리에 비해 몸체 크기가 달라질 수 있습니다.

After Effects에서 캐릭터 레이어를 선택하고 S를 눌러 Scale을 표시하세요. 비례하는 크기 변화를 입력할 때는 스케일 값 옆의 아이콘인 Constrain Proportions를 켜세요. Adobe는 이 컨트롤을 연결된 스케일 편집에 사용하는 기능으로 설명합니다. Adobe: After Effects에서 레이어 속성 조정하기

변경하기 전에 승인된 시작 값, 끝 값, 키프레임 시간을 기록하세요. 기존 중간 키도 확인합니다. 연결 컨트롤은 편집을 돕는 기능으로 사용하고, 켰다고 해서 이전 편집이 바로 수정되었다고 가정하지 말고 애니메이션 전체에서 실제 값을 확인하세요.

타이밍을 다듬기 전에 크기가 커질 기준점을 정하세요. After Effects는 레이어의 앵커 포인트를 기준으로 크기를 조절합니다. 가운데를 중심으로 커지게 하려면 중앙 앵커가 적합하고, 캐릭터가 커지는 동안 시각적으로 바닥에 고정되어 있어야 한다면 아래쪽 중앙 앵커가 적합할 수 있습니다. Adobe: 레이어 앵커 포인트

크기를 확인할 때는 Value Graph를 사용하고, 크기가 변하는 속도를 조절할 때는 Speed Graph를 사용하세요. Adobe는 값 그래프를 시간에 따른 속성 값으로, 속도 그래프를 그 값의 변화율로 정의합니다. 기본 보기만 믿지 말고 Graph Editor 옵션에서 원하는 그래프를 직접 선택하세요. Adobe: After Effects 애니메이션 기본 사항

Value Graph에서 관련된 모든 스케일 구성 요소를 함께 살펴보세요. 기준값이 같다면 균일한 스케일 애니메이션 전체에서 각 축의 곡선이 겹쳐야 합니다. 두 곡선 사이에 간격이 보이면 해당 프레임을 확인하세요. 승인된 기준값이 서로 다르다면 곡선이 겹치는지 보는 대신 비례 변화량을 비교하세요.

키가 지정된 크기는 그대로 유지하면서 가속이나 안정되는 시점을 바꾸고 싶다면 Speed Graph를 사용하세요. 의미 있는 조정을 할 때마다 Value Graph로 돌아와 확인합니다. 이렇게 하면 타이밍이 자연스러운지, 크기의 비율이 올바르게 유지되는지 각각 점검할 수 있습니다.

다음과 같은 통제된 예시를 사용하세요. 비율이 올바른 2D 캐릭터가 12프레임 동안 80%, 80%에서 100%, 100%로 커집니다. 이는 설명을 위한 설정이며, 반드시 따라야 하는 시간이나 크기 범위는 아닙니다.

1. 캐릭터 레이어를 선택하고 Scale을 표시한 다음 Constrain Proportions를 켭니다.
2. 첫 번째 Scale 키프레임을 80%, 80%로 설정하고, 12프레임 뒤 두 번째 키프레임을 100%, 100%로 설정합니다.
3. 두 Scale 키프레임을 모두 선택하고 Animation > Keyframe Assistant > Easy Ease를 적용합니다.
4. Graph Editor를 열고 Edit Speed Graph를 선택합니다.
5. 스케일 키를 함께 선택합니다. 작은 핸들 조정으로 관련 구성 요소를 동일한 방식으로 조절합니다.
6. Edit Value Graph로 전환해 키 사이의 축 값을 확인합니다.

Easy Ease는 선택한 키에서 속도가 0인 전환을 만드는 시작점입니다. 더 정밀하게 조정하려면 Animation > Keyframe Velocity를 사용해 들어오는 속도나 나가는 속도와 영향력을 편집하세요. Adobe에 따르면 속도 핸들을 가로로 움직이면 인접한 키에 미치는 영향 범위가 바뀝니다. Adobe: After Effects에서 속도 변화 적용 및 제어하기

이 예시에서는 빠르게 커진 뒤 더 길게 안정되는 움직임을 시도해 보세요. 마지막 키의 들어오는 영향력을 조정하고 미리 보기를 재생해 원본과 비교합니다. 이 단계에서는 끝 크기와 12프레임 길이를 고정해 이징 변화만 따로 판단할 수 있게 하세요.

조정 후 캐릭터가 늘어나면 해당 변경을 실행 취소하고 어떤 구성 요소가 선택되어 있었는지 확인하세요. 계속하기 전에 중간 값과 끝점을 모두 다시 확인합니다. Adobe의 Graph Editor 튜토리얼에서는 키 선택, 핸들 표시, Speed Graph 조정, 결과 미리 보기 방법을 보여줍니다. Adobe: Graph Editor로 키프레임 사이의 역동적인 움직임 만들기

곡선을 비교하기 어려울 때는 비례 변화 테스트를 사용하세요. 선택한 프레임에서 각 축의 현재 스케일을 승인된 기준 스케일로 나눕니다. 균일한 크기 변화라면 결과가 같아야 합니다. 이 테스트는 두 치수에 동일한 배수를 적용한다는 원리에서 바로 도출됩니다.

상태	X 스케일	Y 스케일	X ÷ 기준 X	Y ÷ 기준 Y	해석
승인된 기준	80%	80%	1.00	1.00	기준 형태
올바른 중간 프레임	92%	92%	1.15	1.15	비율 유지
왜곡된 중간 프레임	96%	88%	1.20	1.10	가로 방향으로 더 많이 커짐
승인된 끝점	100%	100%	1.25	1.25	기준 비율 복원

왜곡된 예시에서는 너비 대 높이의 비율이 96 ÷ 88 ≈ 1.091배가 됩니다. 따라서 기준에 비해 캐릭터의 너비가 높이 대비 약 9.1% 더 넓어집니다. 이 수치는 설명을 위한 계산 예시이며, 특정 애니메이션에서 측정한 값은 아닙니다.

의도적으로 서로 다른 120%, 100%를 기준으로 삼는 경우, 1.10배로 균일하게 확대하면 132%, 110%가 됩니다. 두 축 모두 10%씩 커지므로 승인된 외형이 유지됩니다. 끝점을 132%, 132%로 바꾸면 기존 비율이 달라집니다.

이징을 다시 조정하기 전에 눈에 보이는 증상부터 진단하세요. 멈춘 프레임을 보고 형태 변화인지, 위치 이동인지, 이미지 세부 표현의 변화인지 구분합니다.

증상	다음 확인 사항
전환 중 너비와 높이가 서로 다르게 변함	해당 시점의 축 값, 중간 키, 곡선 핸들을 비교합니다.
커지는 동안 캐릭터 전체가 움직임	앵커 포인트와 Position 애니메이션을 확인합니다.
캐릭터의 한 파트만 상대적인 크기가 달라짐	해당 파트의 트랜스폼과 캐릭터 공통 트랜스폼을 확인합니다.
안정되기 전에 캐릭터가 의도보다 커짐	Value Graph에서 목표 크기를 넘어서는 구간이 있는지 확인합니다.
실루엣 비율은 유지되지만 가장자리가 각져 보임	원본 아트워크의 해상도와 확대 배율을 확인합니다.

크기가 일시적으로 목표를 넘어가더라도 두 축이 함께 초과한다면 비율은 유지될 수 있습니다. 애니메이션에 더 큰 크기를 넣을지는 별도로 판단하세요. 요청이 단순히 커졌다가 멈추는 동작이라면 선택한 시작 크기와 끝 크기 범위 안에서 스케일 값을 유지하세요.

래스터 이미지를 확대하면 비율은 바뀌지 않아도 아트워크가 달라 보일 수 있습니다. Adobe는 래스터 레이어를 크게 확대하면 픽셀이 각져 보일 수 있고, 축소하면 이미지가 부드러워질 수 있다고 설명합니다. 이 문제는 이징을 바꿔도 원본의 세부 표현이 개선되지 않습니다. Adobe: 레이어 크기 조정 또는 뒤집기

시작 프레임, 여러 중간 프레임, 가장 큰 크기의 프레임, 끝점을 살펴보세요. 스케일 변화가 가장 빠르거나 형태가 달라져 보이는 구간은 더 촘촘히 확인합니다. 샘플 프레임은 문제를 찾는 데 도움이 되고, 전체 곡선을 검사하면 샘플 사이의 차이도 발견할 수 있습니다.

그런 다음 의도한 재생 속도로 미리 보기를 재생합니다. Adobe의 Graph Editor 튜토리얼은 미리 보기가 실시간으로 재생되는지 Info 패널에서 확인하라고 권장합니다. 미리 보기가 완전히 생성되지 않으면 타이밍을 판단하기 어려울 수 있기 때문입니다. Adobe: Graph Editor 애니메이션 미리 보기 및 조정하기

캐릭터가 의도한 크기에 도달하고, 전환 내내 승인된 비율을 유지하며, 의도한 대로 가속하고 안정되면 완료입니다. 스케일 배수 하나를 일관된 기준으로 삼고, 그래프로 타이밍을 살펴본 뒤, 편집을 확정하기 전에 중간 프레임의 형태를 확인하세요.

• Adobe — After Effects에서 레이어 속성 조정하기
• Adobe — After Effects 애니메이션 기본 사항
• Adobe — After Effects에서 속도 변화 적용 및 제어하기
• Adobe — Graph Editor로 키프레임 사이의 역동적인 움직임 만들기
• MDN — scale() CSS 함수