버튼을 눌렀을 때 살짝 눌렸다 튀어 오르는 느낌, 보상 창이 열리며 빛이 번지는 연출은 게임의 손맛을 크게 좌우합니다. 이런 UI 모션은 애프터 이펙트로 먼저 설계하고 엔진에서 구현하는 경우가 많습니다. 게임 UI 모션을 처음 만들 때 필요한 기초를 정리합니다.

게임 UI 모션의 역할

UI 모션은 장식이 아니라 정보 전달 수단입니다. 버튼이 눌렸다는 확인, 새 창이 어디서 열렸는지에 대한 방향 감각, 보상을 받았다는 만족감을 움직임으로 알려 줍니다. 반대로 너무 길거나 화려한 모션은 반복해서 보는 플레이어를 지치게 합니다. 자주 보는 화면일수록 짧고 간결하게, 드물게 보는 보상 화면일수록 연출을 크게 가져가는 것이 기본 원칙입니다.

애프터 이펙트 기본 개념

UI 리소스는 포토샵 파일을 레이어가 유지되도록 불러오면 바로 움직일 수 있습니다. 미리 레이어 이름과 그룹을 정리해 두면 작업이 훨씬 빨라집니다.

모션 종류별 만드는 포인트

• 버튼 누름: 크기를 살짝 줄였다가 원래보다 약간 크게 튀어 오른 뒤 제자리로 돌아오게 합니다. 아주 짧은 시간 안에 끝나야 반응이 빠르게 느껴집니다.
• 팝업 열림: 아래에서 위로 떠오르거나 중앙에서 커지며 등장하고, 뒤 배경은 어둡게 깔아 시선을 모읍니다.
• 보상 획득: 아이템이 커지며 등장하고, 빛 번짐과 반짝임 입자를 더해 기대감을 만듭니다. 등급이 높을수록 연출을 한 단계씩 키우는 식으로 차이를 둡니다.
• 숫자 증가: 재화가 올라갈 때 숫자가 빠르게 증가하며 아이콘이 살짝 튀면 획득감이 커집니다.
• 알림 배지: 새 소식 표시는 작게 흔들리거나 맥박처럼 커졌다 작아지게 해 주목을 끌되, 계속 거슬리지 않도록 간격을 둡니다.

이징이 손맛을 만든다

키프레임을 찍고 아무 설정도 하지 않으면 일정한 속도로 움직여 기계적으로 보입니다. 키프레임에 이징을 적용한 뒤 그래프 편집기에서 곡선을 다듬어 보세요. 등장은 빠르게 시작해 천천히 멈추게, 퇴장은 천천히 시작해 빠르게 사라지게 하는 것이 일반적입니다. 튀어 오르는 느낌은 목표값을 살짝 넘었다가 돌아오는 키를 하나 더 넣어 만듭니다.

같은 게임 안의 모션은 속도와 이징 규칙을 통일하는 것이 좋습니다. 화면마다 움직임 성격이 다르면 UI가 산만해 보입니다. 자주 쓰는 이징 값을 문서로 정리해 두면 팀원과 개발자 모두 같은 기준으로 작업할 수 있습니다.

엔진으로 전달하는 방법

1. 모션 시안을 영상으로 렌더링해 기획자·개발자와 공유하고 느낌을 합의합니다.
2. 엔진에서 직접 구현할 모션은 각 요소의 시작·끝 값, 시간, 이징 방식을 표로 정리해 전달합니다.
3. 빛 번짐처럼 엔진에서 만들기 어려운 효과는 PNG 시퀀스나 시트 이미지로 뽑아 이펙트 리소스로 넘깁니다.
4. 엔진에 들어간 결과를 실제 기기에서 확인하고, 시안과 다른 부분을 함께 조정합니다.

모든 효과를 이미지 시퀀스로 넘기면 용량이 커집니다. 위치·크기 변화는 엔진에서 처리하고 이미지 리소스는 꼭 필요한 부분에만 쓰는 것이 좋습니다. SBS아카데미게임학원 3D 이펙트(VFX) 과정은 애프터 이펙트를 이용한 소스 제작과 엔진 적용 단계를 포함하고 있어, UI 연출에 쓰이는 이펙트 소스를 만드는 기초를 익힐 수 있습니다.

자주 묻는 질문