안드로이드에서 한 글자씩 텍스트가 타이핑되는 애니메이션 구현하는 방법

채팅 앱이나 게임 대사 장면에서 자주 볼 수 있는 '타이프라이터(Typewriter)' 효과는 텍스트가 한 글자씩 순차적으로 화면에 나타나는 애니메이션입니다. 이번 예제에서는 안드로이드에서 커스텀 TextView를 활용해 이 효과를 구현하는 방법을 단계별로 알아보겠습니다.

1단계: 새 프로젝트 생성

Android Studio에서 File → New Project 메뉴로 이동한 뒤, 새 프로젝트 생성에 필요한 모든 정보를 입력하여 프로젝트를 만듭니다.

2단계: MainActivity.java 코드 작성

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

package com.example.andy.myapplication;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        Typewriter writer = new Typewriter(this);
        setContentView(writer);
        writer.setCharacterDelay(150);
        writer.animateText("Sample String...Sample String...Sample String...");
    }
}

위 코드에서는 커스텀 클래스인 Typewriter 객체를 생성해 MainActivity의 뷰로 설정했습니다. 이제 실제 애니메이션 로직을 담당할 Typewriter.java 파일을 생성하고 다음 코드를 작성합니다.

Typewriter.java 전체 코드

package com.example.andy.myapplication;
import android.content.Context;
import android.os.Handler;
import android.util.AttributeSet;
import android.widget.TextView;

public class Typewriter extends TextView {
    private CharSequence mText;
    private int mIndex;
    private long mDelay = 500;

    public Typewriter(Context context) {
        super(context);
    }

    public Typewriter(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    private Handler mHandler = new Handler();
    private Runnable characterAdder = new Runnable() {
        @Override
        public void run() {
            setText(mText.subSequence(0, mIndex++));
            if (mIndex <= mText.length()) {
                mHandler.postDelayed(characterAdder, mDelay);
            }
        }
    };

    public void animateText(CharSequence text) {
        mText = text;
        mIndex = 0;
        setText("");
        mHandler.removeCallbacks(characterAdder);
        mHandler.postDelayed(characterAdder, mDelay);
    }

    public void setCharacterDelay(long millis) {
        mDelay = millis;
    }
}

코드 동작 원리

핵심은 Handler와 Runnable의 조합입니다. animateText() 메서드가 호출되면 인덱스를 0으로 초기화하고, postDelayed()를 통해 일정 시간마다 characterAdder가 실행되도록 등록합니다. Runnable이 실행될 때마다 subSequence(0, mIndex++)로 문자열을 한 글자씩 잘라 화면에 표시하고, 모든 문자가 출력될 때까지 이 과정을 반복합니다. setCharacterDelay() 메서드를 사용하면 글자가 나타나는 간격(밀리초)을 자유롭게 조절할 수 있습니다.

애플리케이션 실행하기

실제 안드로이드 기기를 컴퓨터에 연결했다고 가정하고 앱을 실행해 보겠습니다. Android Studio에서 프로젝트의 액티비티 파일 중 하나를 연 뒤, 툴바의 Run 아이콘을 클릭하세요. 실행 옵션에서 연결된 모바일 기기를 선택하면 기기 화면에서 결과를 확인할 수 있습니다.

실행 결과

위 코드를 실행하면 설정한 지연 시간(예제에서는 150ms) 간격으로 텍스트가 한 글자씩 차례대로 화면에 표시되는 것을 확인할 수 있습니다.