Flutter는 강력한 UI 프레임워크로서 빠른 렌더링을 제공하기 위해 GPU(Graphics Processing Unit)를 적극 활용합니다. 특히, Skia 엔진을 사용하여 다양한 플랫폼에서 일관된 그래픽 성능을 보장해왔습니다. 하지만 성능 향상과 최적화를 위해 Flutter 팀은 새로운 렌더링 엔진인 Impeller를 도입했습니다. 이번 글에서는 Flutter의 GPU 렌더링 과정과 Impeller 엔진의 등장 배경 및 특징을 자세히 살펴보겠습니다.1. Flutter의 렌더링 엔진: Skia와 ImpellerSkia: 기존의 렌더링 엔진Flutter는 기본적으로 Skia라는 2D 그래픽 엔진을 사용하여 UI를 렌더링합니다. Skia는 Chrome, Android 등에서도 사용되는 강력한 오픈소스 그..

Flutter 앱을 개발할 때, 사용자 인증 정보, API 키, 토큰과 같은 민감한 데이터를 안전하게 저장하는 것은 필수적입니다. flutter_secure_storage 패키지는 iOS에서는 Keychain, Android에서는 EncryptedSharedPreferences를 활용하여 보안성이 뛰어난 데이터 저장소를 제공합니다.이 글에서는 flutter_secure_storage의 필요성, 설정 방법, 사용법 및 추가 기능에 대해 알아보겠습니다.왜 flutter_secure_storage를 사용해야 할까?보안이 중요한 이유는 데이터가 노출되면 사용자 정보 유출, API 남용 등의 위험이 발생할 수 있기 때문입니다. flutter_secure_storage를 사용하면 다음과 같은 이점이 있습니다.민감한..

Flutter는 강력하고 유연한 애니메이션 기능을 제공하여, 개발자가 매력적이고 직관적인 사용자 경험을 만들 수 있도록 돕습니다. 애니메이션은 앱의 인터페이스를 보다 자연스럽고 역동적으로 만들기 때문에, 효과적으로 활용하면 더욱 멋진 애플리케이션을 개발할 수 있습니다.이번 글에서는 Flutter에서 제공하는 암시적 애니메이션(Implicit Animations) 과 명시적 애니메이션(Explicit Animations) 의 차이점과 활용 방법을 소개하겠습니다. -> 나름 공부하면서 적은거라 미흡한 부분이 있습니다 Flutter 애니메이션의 종류Flutter의 애니메이션은 크게 암시적 애니메이션(Implicit Animation) 과 명시적 애니메이션(Explicit Animation) 으로 나눌 수 있습..

Flutter에서 상태 관리는 항상 고민되는 부분입니다. 여러 가지 방법이 있지만, 규모가 커질수록 명확한 구조가 필요한데, 그중 하나가 BLoC(Business Logic Component) 패턴입니다. 이번 글에서는 BLoC 패턴이 무엇인지, 왜 사용하는지, 그리고 실제 코드 예제를 통해 적용하는 방법을 정리해보겠습니다.BLoC 패턴이란?BLoC 패턴은 비즈니스 로직과 UI를 분리하는 아키텍처 패턴입니다. 즉, UI와 상태 관리 로직을 독립적으로 유지하여 유지보수성과 테스트 가능성을 높이는 방식입니다.BLoC 패턴을 사용하는 이유UI와 로직 분리 → UI 코드와 비즈니스 로직을 명확히 구분하여 가독성을 높입니다.일관된 상태 관리 → 이벤트와 상태를 사용해 관리할 수 있어 예측 가능한 코드 작성이 가능..

Flutter와 Dart는 개발자 생산성 향상과 더 나은 사용자 경험을 위해 꾸준히 진화하고 있습니다. 이번 Flutter 3.29와 Dart 3.7 업데이트에서는 특히 렌더링 엔진, 플랫폼 인터롭, 웹 성능, DevTools 개선 등 여러 핵심 기능들이 대폭 강화되었습니다. 아래에서 주요 변경 사항을 살펴보겠습니다.1. 엔진 및 렌더링 개선iOS – Impeller가 기본 렌더러로 전환Skia 완전 제거: 이제 iOS에서는 Skia 대신 Impeller가 유일한 렌더러로 사용됩니다.바이너리 크기 감소 및 성능 최적화: 불필요한 코드가 제거되어 앱의 크기가 줄고, 렌더링 효율이 크게 향상되었습니다.새로운 렌더링 기능: BackdropFilter 최적화와 ImageFilter.shader 생성자 등을 통해..

PopupMenuButton (팝업 메뉴 버튼)Flutter에서 제공하는 드롭다운 형태의 팝업 메뉴 위젯으로, 특정 아이콘이나 버튼을 클릭하면 여러 선택지를 포함한 메뉴가 나타납니다.Transform.translate( offset: const Offset(6, 0), child: PopupMenuButton( /// 팝업 메뉴의 테두리와 round 처리 shape: RoundedRectangleBorder( ..

Flutter는 뛰어난 성능과 부드러운 애니메이션을 제공하는 UI 프레임워크입니다. 이러한 성능을 유지하기 위해 내부적으로 렌더링 파이프라인을 활용하는데, 이 과정은 크게 Build → Layout → Paint 단계로 나뉩니다.이번 글에서는 그중에서도 첫 번째 과정인 Build 단계에 대해 자세히 알아보겠습니다. 이 단계에서는 화면을 구성하는 위젯 트리(Widget Tree) 를 생성하며, 상태 변화가 발생할 때마다 빌드가 다시 실행됩니다.1. Flutter의 렌더링 파이프라인Flutter에서 UI가 화면에 표시되는 과정은 다음 세 단계로 진행됩니다.Build 단계: 위젯 트리를 생성하고 업데이트하는 단계입니다.Layout 단계: 위젯의 크기와 위치를 계산하는 과정입니다.Paint 단계: 실제 화면에 ..

Flutter 앱을 개발하다 보면 이미지를 다룰 일이 많다. 하지만 원본 이미지는 용량이 크고 해상도도 높아서 그대로 사용하면 앱 성능이 저하되거나, 업로드 시 많은 데이터가 소모될 수 있다. 이를 해결하기 위해 우리는 이미지 크기를 조절하는 리사이징(Resizing) 작업을 해야 한다.오늘은 Flutter에서 빠르고 간편하게 이미지 크기를 조절할 수 있는 fast_image_resizer 패키지를 소개하려고 한다. 이 패키지를 사용하면 높은 성능과 간단한 코드만으로 이미지를 효율적으로 리사이징할 수 있다.왜 이미지 리사이징이 필요할까?이미지 크기를 줄이는 것은 앱 개발에서 중요한 역할을 한다. 특히 다음과 같은 상황에서 필수적이다.1. 사용자가 사진을 업로드할 때스마트폰에서 찍은 원본 사진은 보통 해상..

Flutter에서는 다양한 애니메이션과 인터랙션을 쉽게 구현할 수 있습니다. 이번에는 사용자의 움직임(터치 또는 드래그)에 따라 이미지가 기울어지는 카드 효과를 만들어보겠습니다. 이 효과는 게임 카드, 상품 카드, 포켓몬 카드 등 다양한 곳에서 활용할 수 있습니다. 특히 3D 느낌을 강조할 수 있는 디자인 요소로, UI의 생동감을 더하는 데 유용합니다. 0. 결과물 1. 기울기 효과란?일반적인 정적인 UI가 아니라, 사용자의 입력(터치 또는 마우스 이동)에 따라 카드가 기울어지는 효과를 구현하는 것이 목표입니다.! 사용자가 카드를 터치하고 움직이면, 기울기가 변함! 손을 떼면 원래 위치로 부드럽게 복귀! 기울기에 따라 빛 반사(Glare) 효과 적용이제 이를 어떻게 Flutter에서 구현할지 살펴보겠습니..

Flutter가 3.29 버전으로 업데이트되면서 다양한 성능 향상과 기능 개선이 이루어졌습니다. 특히, Web, iOS, macOS 플랫폼 지원이 더욱 강화되었으며, 개발자 경험을 향상시키는 여러 기능이 추가되었습니다. 이번 업데이트의 핵심 내용을 정리해 보겠습니다.주요 업데이트1. Web 성능 최적화Flutter Web은 지속적으로 개선되고 있으며, 이번 3.29 버전에서는 WebAssembly (Wasm) 기반 렌더러가 실험적으로 도입되었습니다. 이를 통해 기존보다 로딩 속도와 실행 성능이 크게 향상되었습니다. 또한, 더 나은 메모리 관리와 최적화된 렌더링을 제공하여 웹 애플리케이션의 사용자 경험을 개선할 수 있습니다.WebAssembly 적용하기WebAssembly를 활성화하려면 flutter bu..