Android Compose & iOS SwiftUI의 선언형 UI, 근데 이제 Flutter를 곁들인

💬 Android XML 기반 개발도 충분한데 Android Compose를 배워야할까?

안드로이드 개발자로써, 나는 오랫동안 XML 기반으로 UI를 구현해왔고, 컴포즈에 대한 언급이 많아졌을 때도 굳이 새롭게 배워야 할 이유가 있을까? 의문이 들었다. XML로도 충분히 잘 개발할 수 있었고, 새로운 것을 도입하는 게 실제로 얼마나 큰 이점이 있을지 의문이었다.

 

솔직히 말하면, 기존 방식에 익숙하고 불편함도 없었기 때문에 귀찮음이 앞섰다..^^

XML로 이미 원하는 결과를 쉽게 얻을 수 있었으니, 굳이 컴포즈를 배울 필요를 느끼지 못했다. 나처럼 이미 안드로이드 개발 경험이 있는 사람에게는 XML은 기본적으로 사용 가능한 옵션이기 때문에, 처음 안드로이드를 배우는 개발자에게는 컴포즈가 최신 기술이니 XML과 컴포즈를 선택한다면 컴포즈를 배우는 것이 더 나을 거라는 생각이 들었다. 그치만 나는 이미 XML이 가능했으니.. 큰 필요성을 느끼지 못해 컴포즈를 배우려하지 않았고, 전환하지 않았다.

---

💬 그런데 왜 Android Compose를 접했을까,

현재 나는 Flutter 앱 개발을 하고 있다. 원래는 안드로이드 개발자로 입사했지만, 회사 상황에 따라 Flutter 개발을 해볼 기회가 생겨 몇 개월 동안 Flutter 프로젝트를 진행해왔다. 그러다 보니 Flutter 프로젝트만으로도 바쁜 나날을 보내면서 안드로이드 네이티브 개발에는 잠시 손을 놓고 있었다. 그동안 플러터 개발로 인해 선언형 UI 개발에 익숙해져 있었는데, 다시 Kotlin과 XML 기반으로 안드로이드 신규 프로젝트를 함께 진행하려니 예전에 안드로이드 개발을 할 때 처럼 빠른 속도가 나지 않을 것 같았고 헷갈릴 것 같다는 생각이 들었다.

 

다시 안드로이드 개발을 시작하면 마치 새롭게 공부하며 개발하는 느낌이 들 것 같았다. (막상 하게되면 다시 속도가 붙겠지만..) 그리하여 이왕이면 Jetpack Compose를 공부해볼까 싶었다.

컴포즈에 대해 알아보니 선언형 UI로 개발하는 방식이라는 것을 알게 되었고, 예제 코드를 보니 Flutter 코드와 비슷한 느낌이었다. 직장 동료인 iOS 개발자분과 이야기를 나누면서 SwiftUI도 선언형 방식이라는 것을 듣고, Flutter, Compose, SwiftUI 모두 개념이 비슷하다면 공부와 프로젝트를 동시에 진행할 수 있겠다고 생각했다. 그래서 컴포즈를 공부하기 시작했고, 이전부터 관심 있었던 iOS 개발도 SwiftUI로 함께 시작하게 되었다.

---

명령형 개발(Imperative Programming)

명령형 개발은 "어떻게" 할지를 직접적으로 지시하는 방식이다. 안드로이드 XML 기반 UI를 명령형 방식의 대표적인 예로 들 수 있다.

이를 일상적인 상황에 비유하자면, 요리 레시피를 하나하나 따라가는 것과 비슷하다.

 

예를 들어, 명령형 방식으로 내가 친구에게 "커피믹스로 커피를 만드는 방법"을 설명한다면 아래와 같다.

 

명령형 방식:

1. 물을 주전자에 넣고 끓인다.
2. 컵에 커피 가루를 넣는다.
3. 물이 끓으면 컵에 물을 붓는다.
4. 설탕과 크림을 넣고 젓는다.

이렇게 모든 세부 단계를 하나하나 직접 지시하여, 친구가 이 과정을 따라야만 원하는 결과가 나오도록 지시하는 방식이다.

---

선언형 개발(Declarative Programming)

선언형 개발은 "무엇을" 할지를 설명하는 방식이다. 이 방식은 원하는 결과를 말하면, 나머지는 알아서 처리되는 것을 기대하는 상황과 비슷하다.

 

선언형 방식:

• 커피를 만들어줘

나는 친구에게 결과만 말하는 방식이고, 친구는 스스로 커피를 만드는 방법을 알고 있기 때문에 커피를 만들 때 필요한 모든 과정을 자동으로 처리한다.

나는 세부 과정을 알 필요가 없고, 그저 최종 결과인 커피를 받기만 하면 된다.

 

 

💬 아마 일상적인 상황에서 비유한 위 설명을 보면 이게 개발에는 어떤식으로 적용된다는거지? 싶을 것이다.

이 개념을 UI 개발에 적용해보겠다.

---

명령형 방식과 선언형 방식의 UI 개발에서의 차이

💡 화면에서 버튼을 클릭하면 텍스트 색상이 빨간색으로 바뀌는 기능을 구현해야할 때

 

명령형 방식:

명령형 방식에서는 버튼을 누르면 발생하는 세부적인 단계를 모두 작성해야한다.

• 버튼을 클릭하면, 해당 버튼의 클릭 이벤트를 감지한다.
• 이벤트가 발생하면, 특정 UI 요소의 텍스트 색상을 빨간색으로 변경한다.

선언형 방식:

선언형 방식에서는 상태에 대한 선언을 해두면, 클릭 여부에 따라 UI가 알아서 바뀐다.

• 이 텍스트는 버튼이 클릭됐을 때, 빨간색이 돼야해. (=버튼이 눌리면 텍스트가 빨간색이 돼야해.)

 

선언형 방식에서는 상태에 대한 선언을 해두면 과정 단계 설명 없이 UI가 알아서 바뀐다는 개념인데..

여기서 보이는 키워드가 상태이다.

 

"상태에 대한 선언을 해두면"

 

선언형 방식으로 개발할 때는 상태(State)가 중요한 역할을 한다.

---

선언형 개발의 상태(State)

선언형 UI는 "어떻게" 렌더링할지를 직접 지시하지 않고, 현재 상태에 따라 UI가 어떻게 보여야할지를 선언한다.

즉, 상태에 따라 UI를 자동으로 업데이트하는 것이 핵심이기 때문에, 상태감지 또는 상태관리 개념은 필수적이다.

 

상태(Status)는 쉽게 말해 UI가 그려질 때 영향을 주는 데이터나 값들을 의미한다. 이 상태에 따라 UI가 동적으로 변한다.

 

상태의 예:

• 버튼이 눌림 / 안눌림
• 사용자가 로그인 함 / 로그인 안함
• 조회된 날짜가 오늘임 / 내일임 / 모레임 / ~

---

상태감지

선언형 방식에서는 명령형 방식처럼 UI를 직접 업데이트 하지 않는다. 대신 상태의 변화를 감지하고 있다가 상태가 바뀌면 그에 맞춰 UI가 자동으로 생신된다. 이 과정을 상태감지라고 한다.

 

상태감지의 예:

• 버튼을 클릭했을 때 클릭 여부가 상태로 저장되면, UI는 그 상태가 "변했다"는 것을 감지하고, 그 값에 따라 화면을 다시 렌더링한다.

---

상태관리(State Management)

상태관리는 상태를 어떻게 저장하고 변경할지를 관리하는 방식이다.

선언형 UI에서 상태는 중요하기 때문에, 상태를 잘 관리해야 UI가 원하는 대로 동작한다.

 

상태관리의 예:

• 어디에 상태를 저장할 것인지
• 상태가 변할 때마다 UI가 제대로 갱신되는지
• 상태가 여러 컴포넌트에서 공유될 때 일관성을 유지하는지

---

상태관리가 필수적인 이유

선언형 개발에서 UI는 상태에 따라 자동으로 갱신되기 때문에, 상태가 없으면 UI를 제어하기 어렵다.

예를 들어, 버튼이 눌렸는지 여부를 상태로 관리하지 않으면 그에 따른 UI 업데이트를 할 수 없다.

즉, 상태관리가 제대로 이루어지지 않으면 UI가 사용자 입력이나 데이터 변화에 반응하지 않거나, 일관성이 깨질 수 있다.

 

상태관리가 필수적인 상황의 예:

• 버튼 클릭 여부: 버튼을 클릭했을 때, 클릭 여부에 따른 상태를 관리해야 UI가 변경되는 상황
• 로그인 상태: 사용자가 로그인을 했는지, 로그아웃 했는지에 따라 화면이 다르게 보여져야 할 때
• 리스트 상태: 목록에 새로운 아이템이 추가되어, 자동으로 목록이 업데이트 돼야할 때

---

💬 위 내용으로 더 얘기해보자면

명령형 개발과 선언형 개발에 대해 설명하다 보면 자연스럽게 상태 관리라는 개념까지 이어진다. 사실, 선언형 개발을 설명하면서 상태를 언급하지 않는다면 그 설명에는 모순이 생긴다.

 

선언형 개발을 제대로 이해하려면, 반드시 상태에 대한 개념을 함께 이해해야 한다.

선언형 개발은 UI를 상태에 따라 그리는 방식이기 때문에, 상태에 대한 개념 없이 선언형 개발을 이해한다고 할 수 없다.

 

예를 들어, 선언형 개발에 대해 공부했다고 했는데 상태 관리는 모른다면, 그건 선언형 개발을 제대로 이해했다고 보기 어렵다.

왜냐하면 선언형 개발은 상태의 변화를 기반으로 UI가 동작하는 구조이기 때문에, 상태 관리를 모른다면 그 개발 방식의 핵심을 놓친 것이기 때문이다.

 

결론적으로 선언형 개발과 상태 관리는 별개의 개념으로 설명할 수는 있지만, 떼려야 뗄 수 없는 관계다.

어디가서 면접을 볼 때, 선언형 개발에 대해 설명을 하고 상태관리는 모른다는, 핸들 없는 자동차를 탄다는 것과 같은 말은 하지 말자!