Flutter Web과 SPA(Single Page Application) #

목차 #

1. 서론
2. Flutter Web의 개요
3. SPA의 개요
4. 적용 예시
5. 회고
6. 결론

서론 #

웹 애플리케이션의 발전과 함께, 다양한 플랫폼에서 동작하는 효율적이고 강력한 솔루션을 찾는 웹 개발자들의 수요가 증가하고 있다. 이러한 흐름 속에서 Google에서 개발한 Flutter는 특히 모바일, 웹, 데스크톱 플랫폼에서 동일한 코드 베이스로 애플리케이션을 개발할 수 있는 강력한 도구로 떠오르고 있다. 이와 더불어, Single Page Application(SPA)은 사용자 경험과 성능 측면에서 현대 웹 개발의 핵심으로 자리 잡고 있다. 본 글에서는 Flutter Web과 SPA의 결합이 현대 웹 애플리케이션 개발에 어떤 영향을 미치고 있는지 살펴보겠다.

Flutter Web의 개요 #

Flutter는 Dart 언어를 기반으로 하는 오픈 소스 UI 프레임워크로, 풍부한 위젯을 활용하여 모바일, 웹, 데스크톱 플랫폼에서 일관된 사용자 인터페이스를 제공한다. Flutter Web은 이 프레임워크를 이용하여 웹 애플리케이션을 개발하는 데 중점을 둔 것이다.

주요 특징 #

• 다중 플랫폼 호환성: Flutter Web은 다양한 플랫폼에서 같은 코드 베이스로 작동한다. 개발자는 안드로이드, iOS, 웹 등 다양한 플랫폼을 대상으로 애플리케이션을 개발할 수 있다.

• 위젯 기반 UI: Flutter는 모든 것이 위젯으로 이루어져 있어 UI를 구성하고 조립하는 데에 있어서 뛰어난 유연성을 제공한다. 이로써 일관된 디자인과 뛰어난 상호작용성을 달성할 수 있다.

• Hot Reload: 코드를 수정한 즉시 변경 사항이 적용되는 Hot Reload 기능은 개발자들이 실시간으로 애플리케이션을 수정하고 테스트할 수 있게 해준다.

SPA의 개요 #

Single Page Application은 단일 HTML 페이지를 기반으로 하며, 페이지를 새로 로드하지 않고도 동적으로 콘텐츠를 업데이트하는 웹 애플리케이션 형태를 의미한다.

주요 특징 #

• 사용자 경험 향상: 페이지 전환이 없이 동적으로 콘텐츠를 업데이트함으로써 사용자 경험이 향상되며, 부드러운 페이지 전환이 가능하다.

• 빠른 로딩 속도: 초기 페이지 로딩 이후에는 서버로부터 필요한 부분만 동적으로 불러오기 때문에 효율적인 로딩 속도를 제공한다.

• 개발 생산성 향상: 단일 페이지의 모든 로직이 포함되어 있어 전체 애플리케이션의 상태를 쉽게 관리할 수 있으며, 코드의 재사용성이 높아진다.

적용 예시 #

현재 보고 있는 화면은 AI VOUCHER 사업의 산출물로 개발된 웹 솔루션(ABC diet)의 대시보드 화면이다. URL Path의 끝이 Template임을 확인할 수 있다. 만약 여기서 '대시보드'가 아닌 '식단 처방' 탭을 누른다면, 전통적인 MPA 방식으로 구현된 웹 애플리케이션일 경우 '식단 처방'페이지의 뷰를 가지고 있는 HTML을 서버에 요청하고 반환된 화면을 보여줄 것이다.

그림: MPA(Multiple Page Application) 라이프사이클

출처: https://velog.io/@sangyoung23/MPA-SPA-CSR-SSR-%EA%B0%84%EB%8B%A8-%EC%A0%95%EB%A6%AC

하지만 필자가 구현한 웹 애플리케이션은 조금 다른 결과를 보여준다. #

어떻게 이런 일이 가능하게 했을까? SPA의 라이프 사이클을 보겠다.

그림: SPA(Single Page Application) 라이프사이클

출처: https://velog.io/@sangyoung23/MPA-SPA-CSR-SSR-%EA%B0%84%EB%8B%A8-%EC%A0%95%EB%A6%AC

통상 페이지의 전체가 아닌 일부 뷰의 변화시켜 줄 때는 Javascript의 Ajax를 사용한다. 서버에 GET이나 POST 등을 요청하여 JSON 데이터를 받아오면, 페이지 전체가 아닌 화면의 일부를 변화시켜서 불필요한 비용을 줄일 수 있다. 쉽게 말하면 페이지에서 상태가 변하지 않는 부분까지 깜빡거리는 것을 방지할 수 있다.

필자는 GetX 상태관리 라이브러리를 이용하여 이를 구현했다. #

혹자는 Template 페이지의 컨트롤러에 모든 비즈니스 로직이 있는 것은 아닐까하여 리소스의 낭비를 우려할 수 있을 것이다.

이에 필자는 해당 뷰가 보일 때 뷰와 관련된 뷰 모델의 의존성을 주입하는 방법으로 리소스의 최적화가 가능하게 하였다. 즉, 뷰가 바뀌면 기존의 뷰 모델을 소멸시키며, 데이터가동기화 되기 전까지 로딩 화면을 보여준다.

회고 #

AI VOUCHER 사업의 AI 솔루션을 Flutter Web으로 구현하는 것은 커다란 도전이었다. 당장의 구글링만 해보아도, Flutter Web이 가지고 있는 단점들을 쉽게 찾을 수 있다. 필자는 Flutter Web에 대한 경험이 있기 때문에 단점들 대다수를 해결할 수 있지만, Flutter Framework 단에서 해결하지 못하는 부분도 있기 때문에 개발자 개인의 역량과 노하우에 의존할 수밖에 없는 구조는 안타까운 현실이다. 필자 또한 많은 시행착오를 겪으며, 웹 접근성을 최대한 살리는 방향으로 솔루션을 개발하였다. 개발에 많은 어려움이 있겠지만 SPA뿐 아니라 Progressive Web Application도 적용하여 클라이언트가 만족하는 모습을 보는 기쁨은 많은 Flutter 개발자가 느껴보았으면 하는 바람이다.

결론 #

Flutter Web과 GetX 라이브러리를 활용하여 SPA를 구현하면 강력한 상태 관리와 편리한 라우팅을 이용할 수 있다. GetX의 간결하면서도 강력한 기능은 Flutter 개발을 빠르게 만들어 주며, Flutter Web에서 SPA를 구현하는 데도 뛰어난 선택지가 될 것이다. 이를 통해 빠르게 변화하는 웹 애플리케이션 개발 환경에서 높은 생산성과 성능을 달성할 수 있다.