26.05.22(DoTween - R&D)

최완용·2026년 5월 22일

DOTween 기능 R&D

1. R&D 목적

DOTween과 DOTween Pro에서 제공하는 주요 기능을 정리하고, Unity Inspector와 DOTween Animation 컴포넌트만으로 실습 가능한 항목을 확인한다.

이 문서는 특정 인트로 연출 흐름을 위한 문서가 아니라, DOTween 기능 자체를 이해하고 테스트하기 위한 R&D 문서이다.

2. DOTween 개요

DOTween은 Unity에서 오브젝트의 위치, 회전, 크기, 색상, 투명도, 카메라 값 등을 시간에 따라 부드럽게 변경할 수 있게 해주는 Tween 엔진이다.

Tween은 다음과 같은 개념이다.

현재 값 → 목표 값까지 일정 시간 동안 보간하는 애니메이션

예시:

Position X 0 → 5
Scale 1 → 2
Alpha 1 → 0
Color White → Red

3. DOTween / DOTween Pro 차이

DOTween

스크립트 기반 Tween 기능을 제공한다.

대표 기능:

DOMove
DORotate
DOScale
DOColor
DOFade
DOShake
DOPunch
Sequence
Callback
Ease
Loop

DOTween Pro

Unity Inspector에서 사용할 수 있는 시각적 컴포넌트 기능을 제공한다.

대표 기능:

DOTween Animation 컴포넌트
DOTween Path 컴포넌트
Visual Editor
Inspector Events

코드 없이 실습하려면 DOTween Pro의 DOTween Animation 컴포넌트를 중심으로 테스트하면 된다.

4. 기본 설치 확인

Unity 상단 메뉴에서 다음 항목이 있는지 확인한다.

Tools → Demigiant → DOTween Utility Panel

처음 설치했다면 Setup을 실행해야 한다.

Tools → Demigiant → DOTween Utility Panel → Setup DOTween

5. DOTween Animation 컴포넌트

DOTween Pro에서 가장 기본적으로 사용하는 컴포넌트이다.

GameObject에 붙여서 Inspector에서 Tween을 설정할 수 있다.

기본 옵션

옵션	설명
Animation Type	어떤 값을 Tween할지 선택
Duration	Tween 진행 시간
Delay	시작 전 대기 시간
Ease	움직임 곡선
Loops	반복 횟수
Loop Type	반복 방식
AutoPlay	시작 시 자동 재생
AutoKill	완료 후 Tween 자동 제거
From	목표 값에서 시작하지 않고 지정한 시작 값에서 시작
Relative	현재 값 기준으로 상대 이동
Snapping	정수 단위로 값 보정

6. Animation Type R&D

6-1. Move

오브젝트의 위치를 이동시킨다.

실습 방법

Cube 또는 Sprite 생성
DOTween Animation 추가
Animation Type을 Move로 설정
To 값을 변경
AutoPlay 켜고 Play 모드 실행

확인 포인트

오브젝트가 현재 위치에서 To 위치로 이동하는가?
Duration 값에 따라 속도가 달라지는가?
Ease 값에 따라 움직임 느낌이 달라지는가?

사용 예시

UI 패널 등장
캐릭터 등장 연출
투사체 이동
버튼 눌림 연출

6-2. Rotate

오브젝트를 회전시킨다.

실습 방법

Sprite 또는 Cube 생성
DOTween Animation 추가
Animation Type을 Rotate로 설정
Z 값을 360으로 설정
Ease를 Linear로 설정
Loops를 -1로 설정하면 무한 회전 확인 가능

확인 포인트

360도 회전이 정상적으로 되는가?
Loop Type을 Incremental로 하면 계속 누적 회전되는가?
Linear Ease일 때 일정한 속도로 회전하는가?

사용 예시

로딩 아이콘
아이템 회전
스킬 이펙트 회전
UI 장식 회전

6-3. Scale

오브젝트의 크기를 변경한다.

실습 방법

UI Image 또는 Sprite 생성
DOTween Animation 추가
Animation Type을 Scale로 설정
To 값을 1.2 또는 2로 설정
Ease를 OutBack으로 설정

확인 포인트

오브젝트가 커지거나 작아지는가?
OutBack을 사용하면 튕기는 느낌이 나는가?
From을 사용하면 지정한 크기에서 시작하는가?

사용 예시

타이틀 등장
버튼 강조
아이템 획득 연출
피격 이펙트

6-4. Punch

짧게 튕기는 효과를 만든다.

실습 방법

Button 또는 Sprite 생성
DOTween Animation 추가
Animation Type을 Punch Position, Punch Rotation, Punch Scale 중 하나로 설정
Duration을 짧게 설정
Vibrato와 Elasticity 값을 조절

확인 포인트

오브젝트가 순간적으로 튕겼다가 돌아오는가?
Vibrato를 높이면 떨림 횟수가 증가하는가?
Elasticity를 조절하면 반동 느낌이 바뀌는가?

사용 예시

버튼 클릭 반응
피격 흔들림
강조 연출
UI 알림 효과

6-5. Shake

오브젝트를 흔드는 효과를 만든다.

실습 방법

Camera 또는 Sprite 생성
DOTween Animation 추가
Animation Type을 Shake Position, Shake Rotation, Shake Scale 중 하나로 설정
Strength, Vibrato, Randomness 값을 조절

확인 포인트

Strength가 클수록 흔들림이 커지는가?
Vibrato가 클수록 더 자주 흔들리는가?
Randomness가 클수록 예측하기 어려운 흔들림이 되는가?

사용 예시

카메라 흔들림
폭발 연출
피격 연출
위험 경고 UI

6-6. Color

색상을 변경한다.

실습 방법

SpriteRenderer, Image, TextMeshPro 오브젝트 준비
DOTween Animation 추가
Animation Type을 Color로 설정
To 색상을 지정
AutoPlay로 테스트

확인 포인트

색상이 자연스럽게 변하는가?
SpriteRenderer, UI Image, TextMeshPro에서 각각 작동하는가?

사용 예시

피격 시 빨간색 점멸
버튼 Hover 색상 변경
상태 이상 색상 표시
경고 UI

6-7. Fade

투명도를 변경한다.

실습 방법

UI Image, TextMeshPro, SpriteRenderer, CanvasGroup 중 하나 준비
DOTween Animation 추가
Animation Type을 Fade로 설정
Alpha 값을 0 또는 1로 설정

확인 포인트

Alpha가 정상적으로 변경되는가?
UI는 Image 색상의 Alpha 또는 CanvasGroup Alpha로 제어되는가?
TextMeshPro 텍스트도 Fade가 적용되는가?

사용 예시

페이드 인
페이드 아웃
텍스트 등장
검은 화면 전환

6-8. Camera

카메라 값을 Tween한다.

실습 방법

Camera 오브젝트 선택
DOTween Animation 추가
Camera 관련 Animation Type 선택
Field of View 또는 Orthographic Size 값을 변경

확인 포인트

카메라 줌 인/아웃이 되는가?
화면 전환 연출에 사용할 수 있는가?

사용 예시

보스 등장 줌인
스킬 사용 시 줌 효과
시네마틱 연출

7. Ease R&D

Ease는 Tween의 속도 곡선을 결정한다.

같은 Move라도 Ease에 따라 느낌이 완전히 달라진다.

Ease	느낌
Linear	일정한 속도
InQuad	천천히 시작 후 빨라짐
OutQuad	빠르게 시작 후 천천히 멈춤
InOutQuad	천천히 시작, 중간 빠름, 천천히 종료
OutBack	목표 지점을 살짝 넘었다가 돌아옴
OutBounce	튀는 느낌
OutElastic	탄성 있는 느낌

실습 방법

같은 Move Tween을 만들고 Ease만 바꿔서 비교한다.

확인 포인트

Linear는 기계적인 느낌이 난다.
OutQuad는 UI 이동에 자연스럽다.
OutBack은 버튼이나 타이틀 등장에 어울린다.
OutBounce는 귀여운 UI 연출에 어울린다.

8. Loop R&D

Tween 반복 기능이다.

옵션	설명
Loops 0	반복 없음
Loops 1 이상	지정 횟수 반복
Loops -1	무한 반복
Restart	처음부터 다시 반복
Yoyo	갔다가 되돌아옴
Incremental	값이 누적되며 반복

실습 방법

Move Tween 생성
Loops를 2로 설정
Loop Type을 Restart, Yoyo, Incremental로 바꿔가며 테스트

확인 포인트

Restart는 같은 이동을 반복한다.
Yoyo는 왕복한다.
Incremental은 값이 누적된다.

사용 예시

반짝이는 UI
위아래로 움직이는 아이템
로딩 아이콘
경고 표시

9. Delay R&D

Tween 시작 전 대기 시간을 설정한다.

실습 방법

DOTween Animation 추가
Delay를 1초로 설정
AutoPlay 켜기
Play 모드 실행

확인 포인트

게임 시작 후 1초 뒤 Tween이 시작되는가?
여러 오브젝트에 서로 다른 Delay를 주면 순차 등장처럼 보이는가?

사용 예시

UI 순차 등장
타이틀 연출
스테이지 시작 카운트다운

10. From R&D

From은 현재 값에서 목표 값으로 가는 것이 아니라, 지정한 값에서 현재 값 또는 목표 값으로 이동하게 만든다.

실습 방법

UI Image를 중앙에 둔다.
DOTween Animation Type을 Move로 설정한다.
From을 체크한다.
From 위치를 화면 밖으로 설정한다.
Play 모드 실행

확인 포인트

오브젝트가 From 위치에서 시작하는가?
처음부터 From 위치로 이동한 뒤 Tween이 시작되는가?

주의점

From을 사용하면 Tween 시작 시점에 오브젝트가 From 위치로 이동할 수 있다.

그래서 현재 위치에서 자연스럽게 이어지는 연출에는 주의가 필요하다.

11. Relative R&D

Relative는 목표 값을 절대 좌표가 아니라 현재 값 기준의 상대 값으로 사용한다.

실습 방법

Sprite 위치를 X 0에 둔다.
Move To 값을 X 3으로 설정한다.
Relative를 켠다.
Tween 실행

확인 포인트

X 3으로 이동하는 것이 아니라 현재 위치에서 X + 3 만큼 이동하는가?

사용 예시

버튼을 현재 위치에서 살짝 이동
피격 시 살짝 밀림
아이템이 현재 위치 기준으로 점프

12. Snapping R&D

Snapping은 Tween 값이 정수 단위로 움직이도록 보정한다.

실습 방법

Move Tween 생성
Snapping 체크
천천히 이동하도록 Duration을 길게 설정
움직임 확인

확인 포인트

부드러운 소수점 이동이 아니라 정수 단위로 끊겨 움직이는가?

사용 예시

픽셀 아트 게임
그리드 기반 게임
정수 좌표 이동

13. Events R&D

DOTween Animation 컴포넌트에는 Tween 상태에 따라 호출되는 이벤트가 있다.

Event	호출 시점
OnStart	Tween이 처음 시작될 때
OnPlay	Tween이 재생될 때
OnUpdate	Tween이 진행되는 동안 매 프레임
OnStepComplete	Loop 한 단계가 끝날 때
OnComplete	Tween 전체가 끝났을 때
OnRewind	Tween이 되감기 완료되었을 때

실습 방법

DOTween Animation의 Events 펼치기
OnComplete에 다른 오브젝트 SetActive 연결
OnPlay에 버튼 비활성화 연결
OnRewind에 버튼 다시 활성화 연결

확인 포인트

OnStart와 OnPlay 차이를 구분할 수 있는가?
OnComplete로 다음 Tween을 실행할 수 있는가?
OnStepComplete는 Loop가 있을 때 호출되는가?
OnUpdate는 매 프레임 호출되므로 과한 작업을 넣지 않는가?

사용 예시

Tween 완료 후 다음 연출 실행
Tween 완료 후 버튼 활성화
Tween 완료 후 씬 전환
Loop 완료 시 효과음 재생

14. Control 함수 R&D

DOTween Animation 컴포넌트는 Inspector 이벤트나 Button OnClick에서 제어 함수를 호출할 수 있다.

함수	역할
DOPlay	Tween 재생
DOPause	Tween 일시정지
DOTogglePause	재생/일시정지 토글
DORewind	시작 지점으로 되감기
DORestart	처음부터 다시 시작
DOComplete	즉시 완료 상태로 이동
DOKill	Tween 제거
DOPlayForward	정방향 재생
DOPlayBackwards	역방향 재생

실습 방법

Canvas에 버튼을 만들고 각각 연결한다.

PlayButton → DOTweenAnimation.DOPlay()
PauseButton → DOTweenAnimation.DOPause()
RewindButton → DOTweenAnimation.DORewind()
RestartButton → DOTweenAnimation.DORestart()
CompleteButton → DOTweenAnimation.DOComplete()

확인 포인트

DOPlay는 현재 위치에서 재생되는가?
DORestart는 처음 상태로 돌아간 뒤 다시 시작하는가?
DORewind는 시작 지점으로 되돌리는가?
DOComplete는 즉시 끝 상태로 보내는가?

주의점

DORestart()는 현재 위치에서 이어가는 것이 아니라, Tween의 시작 상태로 되돌린 뒤 다시 시작할 수 있다.

현재 위치에서 이어지는 연출이 필요하면 DOPlay() 또는 다음 Tween 분리가 더 적절하다.

15. DOTween Path R&D

DOTween Pro에서 제공하는 Path 기능은 오브젝트가 여러 지점을 따라 이동하게 만든다.

실습 방법

오브젝트 생성
DOTween Path 컴포넌트 추가
Scene View에서 Waypoint 생성
Path Type과 Path Mode 설정
AutoPlay로 이동 확인

확인 포인트

오브젝트가 Waypoint를 따라 이동하는가?
Path가 직선인지 곡선인지 확인되는가?
Orientation 옵션에 따라 회전 방향이 바뀌는가?

사용 예시

적 이동 경로
카메라 시네마틱 이동
미사일 곡선 이동
UI 장식 이동

16. Sequence R&D

Sequence는 여러 Tween을 순서대로 묶어서 실행하는 기능이다.

개념

Move 실행
→ Scale 실행
→ Rotate 실행
→ Fade 실행

DOTween 코드에서는 Sequence를 자주 사용하지만, 컴포넌트만 사용할 경우에는 OnComplete 이벤트로 다음 DOTween Animation을 실행하는 방식으로 비슷하게 구성할 수 있다.

컴포넌트 방식 대체 구조

Tween A OnComplete
→ Tween B DOPlay

Tween B OnComplete
→ Tween C DOPlay

Tween C OnComplete
→ Tween D DOPlay

확인 포인트

OnComplete 연결만으로 간단한 순차 연출을 만들 수 있는가?
복잡한 연출은 코드 Sequence가 더 관리하기 쉬운가?

17. UI R&D

DOTween은 UI 연출과 잘 맞는다.

실습 대상

Button
Image
TextMeshPro
CanvasGroup
Panel

실습 항목

Panel Move
Button Scale
Text Fade
Image Color
CanvasGroup Fade

확인 포인트

UI는 Transform보다 RectTransform 기준 이동이 필요한가?
CanvasGroup Fade로 패널 전체 투명도를 제어할 수 있는가?
버튼 클릭 연출은 Punch Scale이 자연스러운가?

18. TextMeshPro R&D

TextMeshPro 오브젝트에서도 색상과 투명도 Tween을 실습할 수 있다.

실습 방법

TextMeshProUGUI 생성
DOTween Animation 추가
Animation Type을 Color 또는 Fade로 설정
AutoPlay 테스트

확인 포인트

텍스트 색상이 변경되는가?
텍스트 Alpha가 변경되는가?
타이틀 등장 연출에 사용할 수 있는가?

19. 성능 R&D

DOTween은 가볍지만, 사용 방식이 나쁘면 성능 문제가 생길 수 있다.

주의할 점

OnUpdate에 무거운 작업을 넣지 않는다.
반복적으로 Tween을 새로 만들기보다 재사용 가능한 구조를 고려한다.
AutoKill 설정을 이해하고 사용한다.
무한 Loop Tween은 필요 없을 때 Kill 또는 Pause 처리한다.
비활성화되는 오브젝트의 Tween 상태를 확인한다.

확인 포인트

Tween이 끝난 뒤에도 불필요하게 남아 있지 않은가?
무한 Loop Tween이 계속 돌고 있지 않은가?
UI가 꺼졌는데 Tween이 계속 실행되고 있지 않은가?

20. 실습 체크리스트

Transform 계열

UI 계열

UI Panel Move 실습 완료
Button Punch Scale 실습 완료
Image Fade 실습 완료
Image Color 실습 완료
TextMeshPro Fade 실습 완료
CanvasGroup Fade 실습 완료

제어 계열

옵션 계열

Events 계열

Pro 기능

DOTween Animation 실습 완료
DOTween Path 실습 완료
Path Waypoint 수정 실습 완료
Path 방향 전환 실습 완료

21. R&D 결과 정리 양식

각 기능을 실습한 뒤 아래 형식으로 기록한다.

기능명:
실습 오브젝트:
설정값:
결과:
문제점:
사용 가능 상황:
실제 프로젝트 적용 후보:

예시:

기능명: Punch Scale
실습 오브젝트: StartButton
설정값: Duration 0.2, Vibrato 8, Elasticity 1
결과: 버튼이 눌렸을 때 튀는 느낌이 좋음
문제점: 너무 강하면 UI가 가벼워 보임
사용 가능 상황: 버튼 클릭, 보상 획득, 경고 표시
실제 프로젝트 적용 후보: StartButton 클릭 연출

22. 실제 프로젝트 적용 우선순위

먼저 적용하기 좋은 기능:

1. Button Punch Scale
2. Panel Move
3. Text Fade
4. Image Fade
5. OnComplete를 이용한 순차 연출
6. Camera Shake

나중에 적용해도 되는 기능:

1. DOTween Path
2. 복잡한 Sequence
3. Incremental Loop
4. Custom Ease
5. Runtime Tween 제어 코드

23. 결론

DOTween 기능 R&D에서 먼저 익혀야 할 핵심은 다음과 같다.

Move / Rotate / Scale
Fade / Color
Punch / Shake
Ease / Loop / Delay
From / Relative / Snapping
Events / Control 함수
DOTween Path

코드 없이 실습할 때는 DOTween Animation 컴포넌트와 Events 연결만으로도 대부분의 기본 연출을 확인할 수 있다.

복잡한 연출이 많아지면 OnComplete 연결이 복잡해질 수 있으므로, 그때는 코드 기반 Sequence 사용을 검토한다.

24. 참고 자료

DOTween 공식 문서
DOTween Pro 공식 페이지
Unity Inspector의 DOTween Animation 컴포넌트
Unity Inspector의 DOTween Path 컴포넌트

최완용

이전 포스트

26.04.19(Steam 리뷰 데이터 수집과 간단한 분석)

다음 포스트