[Android/오르다 다이어리] 레거시 리팩토링 09 - HomeFragment 애니메이션 적용 & UI 개선

 [Android/오르다 다이어리] 레거시 리팩토링 09 - HomeFragment 애니메이션 적용 & UI 개선

 

지난 글:https://yujinius45.tistory.com/163

 

이제 기능 미완성이었던 것도 완성되고 UI/UX 개선도 완료되어서 릴리즈를 하려고 한다.

그 전에 마지막으로 HomeFragment를 개선했다.

---

🎨 HomeFragment UI 개선 및 애니메이션 적용

오르다 다이어리의 홈 화면(HomeFragment)에 애니메이션을 적용하여 UX를 개선했다.

기존에는 화면에 정적인 UI 요소만 배치되어 있었는데, 처음 앱을 실행하는 사용자가 어떤 동작을 해야 하는지 안내가 부족했다. 만약 처음 앱을 설치한 사람이었다면 Home 화면이 splash 화면이라고 오해했을 수도 있을 것 같아 개선이 필요함을 느꼈다.

 

▼ 아무런 안내가 없고 Home 화면이 정적이다.

 

이를 해결하기 위해 아래와 같은 작업을 수행했다.

1. "하단 버튼을 눌러 시작하세요" 문구에 fade in/out 애니메이션 추가하여 앱 사용 안내하기
2. 타이틀, 서브타이틀, 메인 이미지에 슬라이드 애니메이션 추가하여 동적 요소 추가하기
3. Fragment 생명주기에 맞춰 애니메이션을 관리하여 메모리 누수 방지하기

---

💡 개선 전 문제점

• 홈 화면이 너무 정적 → 첫 화면에서 아무런 UI 변화가 없어 사용자가 어떻게 시작해야 하는지 알기 어려움
• 사용자 안내 부족 → 앱을 실행하면 아무런 인터랙션 없이 로고와 타이틀만 표시
• UX 향상 필요 → 애니메이션을 활용하여 자연스럽게 UI 요소를 배치하고 안내할 필요가 있음

---

✨ 개선된 UI 설계

🔹 적용된 애니메이션

UI 요소	적용된 애니메이션
메인 이미지 (imageViewMain)	위에서 아래로 슬라이드 등장
타이틀 (textViewTitle)	위에서 아래로 슬라이드 등장
서브타이틀 (textViewSubTitle)	위에서 아래로 슬라이드 등장
안내 문구 (textViewInfo)	Fade In/Out 반복

 

---

🛠 애니메이션 적용 과정

1️⃣ 애니메이션 XML 추가

애니메이션을 정의한 XML 파일을 res/anim/ 디렉토리에 추가해서 사용했다.

✅ 슬라이드 애니메이션 (text_slide_up.xml)

📌 위에서 아래로 부드럽게 내려오는 애니메이션

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromYDelta="-50%"
    android:toYDelta="0"
    android:duration="1000"
    android:interpolator="@android:anim/decelerate_interpolator"/>

✅ Fade In/Out 애니메이션 (fade_in_out.xml)

📌 안내 문구가 부드럽게 깜빡이며 사용자에게 안내

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/accelerate_decelerate_interpolator">

    <alpha
        android:duration="2000"
        android:fromAlpha="0.0"
        android:toAlpha="1.0"
        android:repeatMode="reverse"
        android:repeatCount="infinite" />
</set>

 

---

2️⃣ HomeFragment UI 변경 (fragment_home.xml)

📌 TextView ID 및 UI 구조 개선

• "하단 버튼을 눌러 시작하세요" 안내 문구 추가

<TextView
    android:id="@+id/textViewInfo"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:fontFamily="@font/nanumleo_bold"
    android:gravity="center"
    android:text="@string/home_fragment_info"
    android:textColor="@color/orda_is_your_diary"
    android:textSize="16sp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@id/textViewSubTitle" />

---

3️⃣ HomeFragment에서 애니메이션 적용

📌 ViewBinding을 활용하여 UI 요소를 바인딩하고, Fragment 생명주기에 맞춰 애니메이션을 관리

📌 onResume()에서 애니메이션 시작 / onPause()에서 정지하여 메모리 누수 방지

package smu.team3_orda_diary.ui.home;

public class HomeFragment extends Fragment {

    private FragmentHomeBinding binding;
    private Animation fadeAnimation, slideAnimation;

    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        binding = FragmentHomeBinding.inflate(inflater, container, false);
        return binding.getRoot();
    }

    @Override
    public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);

        // 애니메이션 로드
        fadeAnimation = AnimationUtils.loadAnimation(requireContext(), R.anim.fade_in_out);
        slideAnimation = AnimationUtils.loadAnimation(requireContext(), R.anim.text_slide_up);
    }

    @Override
    public void onResume() {
        super.onResume();
        // 애니메이션 시작
        binding.imageViewMain.startAnimation(slideAnimation);
        binding.textViewTitle.startAnimation(slideAnimation);
        binding.textViewSubTitle.startAnimation(slideAnimation);
        binding.textViewInfo.startAnimation(fadeAnimation);
    }

    @Override
    public void onPause() {
        super.onPause();
        // 애니메이션 정지
        binding.imageViewMain.clearAnimation();
        binding.textViewTitle.clearAnimation();
        binding.textViewSubTitle.clearAnimation();
        binding.textViewInfo.clearAnimation();
    }

    @Override
    public void onDestroyView() {
        super.onDestroyView();
        binding = null; 
    }
}

---

📸 애니메이션 적용 후 실행 화면

 

---

🚀 결과 & 개선 효과

✅ 홈 화면이 정적이지 않고 자연스러운 UI 변화 제공

✅ "하단 버튼을 눌러 시작하세요" 안내 추가로 사용자 경험 개선

✅ Fragment 생명주기에 맞춰 애니메이션 관리

✅ ViewBinding 적용으로 더 안전한 UI 참조 방식 적용

---

💡 마무리

홈 화면에서의 사용자 경험을 개선하고, 보다 직관적인 안내를 제공할 수 있게 되었다.

이제 홈 화면을 더 쉽게 이해할 수 있으며, 앱을 처음 실행하는 사용자가 자연스럽게 다음 동작을 유도할 수 있다.