안드로이드에서 흔들림(Shake) 뷰 애니메이션 구현하는 방법

안드로이드 흔들림 애니메이션이란?

이 튜토리얼에서는 안드로이드에서 이미지나 뷰를 좌우로 흔드는 흔들림(Shake/Wobble) 애니메이션을 구현하는 방법을 단계별로 알아봅니다. 흔들림 애니메이션은 잘못된 입력 알림, 오류 강조, 사용자 주의 환기 등 다양한 UI 상황에서 유용하게 활용됩니다.

1단계: 새 프로젝트 생성

Android Studio에서 새 프로젝트를 생성합니다. 상단 메뉴에서 File ⇒ New Project를 선택하고, 프로젝트 생성에 필요한 모든 세부 정보를 입력합니다.

2단계: 레이아웃 파일 작성

res/layout/activity_main.xml 파일에 아래 코드를 추가합니다.

<?xml version = "1.0" encoding = "utf-8"?>
<RelativeLayout
    xmlns:android = "https://schemas.android.com/apk/res/android"
    xmlns:tools = "https://schemas.android.com/tools"
    android:layout_width = "match_parent"
    android:layout_height = "match_parent">
    <Button
        android:id = "@+id/button"
        android:layout_centerHorizontal = "true"
        android:layout_marginTop = "100dp"
        android:layout_width = "150dp"
        android:text = "Click"
        android:layout_height = "wrap_content"/>
    <ImageView
        android:id = "@+id/imageView"
        android:src = "@mipmap/ic_launcher_round"
        android:layout_width = "match_parent"
        android:layout_height = "300dp" />
</RelativeLayout>

위 코드에서는 버튼과 ImageView를 배치했습니다. 버튼을 클릭하면 ImageView에 흔들림 애니메이션이 적용되도록 구성할 것입니다.

3단계: MainActivity 작성

src/MainActivity.java 파일에 아래 코드를 추가합니다.

package com.example.andy.myapplication;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.view.animation.ScaleAnimation;
import android.view.animation.TranslateAnimation;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.LinearLayout;

public class MainActivity extends AppCompatActivity {
    ImageView view;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        view = findViewById(R.id.imageView);
        findViewById(R.id.button).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Animation animShake = AnimationUtils.loadAnimation(MainActivity.this, R.anim.shake);
                view.startAnimation(animShake);
            }
        });
    }
}

위 코드에서는 사용자가 버튼을 클릭하면 shake 애니메이션을 로드하여 ImageView에 적용합니다. 이를 위해 anim 폴더에 shake.xml 파일을 생성해야 합니다.

4단계: shake.xml 애니메이션 리소스 생성

res/anim 폴더에 shake.xml 파일을 만들고 아래 코드를 추가합니다.

<?xml version = "1.0" encoding = "utf-8"?>
<set xmlns:android = "https://schemas.android.com/apk/res/android">
    <translate android:duration = "150"
        android:fromXDelta = "-10%"
        android:repeatCount = "5"
        android:repeatMode = "reverse"
        android:toXDelta = "10%"/>
</set>

여기서 translate 요소는 X축 방향으로 -10%에서 +10%까지 이동하는 효과를 정의합니다. duration 값(150ms)은 한 번의 이동 시간을, repeatCount 값(5)은 반복 횟수를, repeatMode의 "reverse"는 왕복 운동처럼 자연스럽게 흔들리도록 설정합니다.

앱 실행 및 결과 확인

이제 애플리케이션을 실행해 보겠습니다. 실제 안드로이드 기기를 컴퓨터에 연결한 상태라고 가정합니다. Android Studio에서 프로젝트의 액티비티 파일 중 하나를 열고 툴바의 Run 아이콘을 클릭한 후, 실행 옵션에서 연결된 모바일 기기를 선택하세요.

앱이 실행되면 기본 화면이 표시됩니다.

버튼을 클릭하면 아래와 같이 배경 이미지가 좌우로 흔들리는 것을 확인할 수 있습니다.

마무리

이렇게 XML 애니메이션 리소스와 AnimationUtils만으로 간단히 흔들림 효과를 구현할 수 있습니다. duration, fromXDelta, repeatCount 등의 값을 조절하면 흔들림의 강도와 속도를 자유롭게 변경할 수 있으니, 여러분의 앱에 맞게 응용해 보세요.