[안드로이드] UI 레이어 아키텍처

안드로이드 앱의 UI 레이어는 사용자와의 상호작용을 처리하며, 화면에 데이터를 표시하는 핵심적인 역할을 한다.

유지보수성과 확장성을 고려한 UI를 구축하려면 관심사의 분리, 단방향 데이터 흐름(UDF), 상태 관리 등의 원칙을 따르는 것이 중요하다.

 

1. UI 레이어의 핵심 구성 요소

UI 레이어는 크게 두 가지 요소로 구성된다.

• UI 요소: View 또는 Jetpack Compose를 사용해 UI를 구성한다.
• 상태 홀더(State Holder): UI 상태를 관리하며, UI 요소와 데이터 소스를 연결한다. 일반적으로 ViewModel이 이 역할을 수행한다.

📌 핵심 개념: UI 요소는 상태를 표현하는 역할만 담당하고, 상태 관리는 상태 홀더(ViewModel)가 책임지도록 분리하는 것이 중요하다.

 

2. 단방향 데이터 흐름(UDF)의 중요성

UDF(Unidirectional Data Flow)는 UI 상태가 한 방향으로만 변경되는 구조를 의미한다. 이를 통해 예측 가능하고 유지보수하기 쉬운 UI를 만들 수 있다.

 

📌 UDF의 흐름

1. UI 요소가 상태를 렌더링한다.
2. 사용자가 이벤트를 발생시키면 이를 상태 홀더(ViewModel)로 전달한다.
3. 상태 홀더가 데이터를 처리하고 새로운 UI 상태를 생성한다.
4. UI 요소가 새로운 상태를 반영하여 화면을 업데이트한다.

이러한 흐름을 따르면 UI와 상태 관리가 분리되므로 코드의 가독성과 재사용성이 높아진다.

 

3. 상태 홀더의 역할과 구현 방법

상태 홀더는 UI 상태를 관리하고, UI 요소가 데이터를 쉽게 가져올 수 있도록 돕는 중재자 역할을 한다.

 

✔️ 상태 홀더로 ViewModel을 사용하는 이유

• 생명 주기와 연동: ViewModel은 화면 회전이나 구성 변경에도 데이터를 유지할 수 있다.
• UI 상태 저장: ViewModel에서 StateFlow 또는 LiveData를 활용해 UI 상태를 관리할 수 있다.
• 비즈니스 로직과 UI 로직 분리: ViewModel을 활용하면 UI 코드에서 데이터 처리 로직을 분리할 수 있다.

 

4. UI 이벤트 처리

사용자의 버튼 클릭, 스크롤, 입력 등 이벤트를 처리하는 방식도 중요하다.

 

✔️ 이벤트 처리 원칙

• UI 요소는 ViewModel에 이벤트를 전달하고, UI 상태를 직접 변경하지 않는다.
• ViewModel에서 이벤트를 처리한 후 새로운 UI 상태를 생성하여 UI 요소에 전달한다.
• StateFlow 또는 LiveData를 사용해 UI 상태 변경 사항을 UI 요소가 구독(subscribe)할 수 있도록 한다.

이 방식은 UI 요소와 상태 로직을 분리하고, 이벤트 처리 흐름을 예측 가능하게 한다.

 

5. UI 상태 생성 및 데이터 흐름

UI 상태는 다양한 소스를 통해 생성된다.

 

✔️ UI 상태를 구성하는 입력 소스

• 사용자 입력: 버튼 클릭, 텍스트 입력 등의 이벤트
• 데이터 레이어: 네트워크 API, 데이터베이스, SharedPreferences 등
• 앱의 내부 상태: 설정 값, 테마 변경, 네트워크 연결 상태 등

📌 ViewModel에서 UI 상태를 관리하는 방법

• StateFlow 또는 LiveData를 사용하여 UI 상태를 저장하고 UI 요소에서 구독
• 데이터가 변경될 때마다 UI 상태를 새롭게 생성하여 UI에서 변경 사항을 감지하도록 구현

 

6. UI 상태를 최적화하는 방법

UI 상태를 최적화하면 성능과 유지보수성이 향상된다.

 

✔️ UI 상태 관리 시 고려할 점

• 불필요한 재구성(Recomposition) 최소화: Compose에서는 remember와 rememberSaveable을 활용해 불필요한 리컴포지션을 방지
• UI 상태를 캡슐화: private val _uiState = MutableStateFlow() 와 같이 상태를 private으로 만들고, 외부에는 StateFlow로만 노출하여 직접 수정 방지
• Compose와 ViewModel 연동: collectAsState()를 사용해 ViewModel의 StateFlow를 UI에서 구독

이렇게 하면 UI 상태 변경이 명확해지고, 불필요한 UI 업데이트를 방지할 수 있다.

 

7. UI와 상태를 분리하면 얻을 수 있는 장점

• 유지보수성 증가 → UI와 로직을 분리하여 코드의 복잡도를 낮춤
• 테스트 용이성 → UI 상태를 독립적으로 테스트 가능
• 성능 최적화 → 불필요한 리컴포지션 방지

📌 ViewModel + UDF + Compose를 활용하면 더욱 직관적이고 견고한 UI 아키텍처를 구축할 수 있다.

 

결론

• 안드로이드 UI 레이어 아키텍처는 UI 요소와 상태 홀더의 분리, 단방향 데이터 흐름, 최적화된 상태 관리를 통해 유지보수성을 높이는 것이 핵심이다.
• ViewModel과 UDF패턴을 활용하면 예측 가능하고 성능이 좋은 UI를 구축할 수 있다.