[Flutter 9기 창업반] 앱 개발 창업 부트캠프 45일차

TIL: Flutter 심화 개념 및 아키텍처 정리

오늘은 Flutter 심화 과정 강의를 들었다
애니메이션부터 UX 최적화, 네이티브 기능 연동, 성능 최적화, 그리고 클린 아키텍처까지
앱 개발의 심화 내용을 학습했다.

1. 애니메이션 (Animation)

Flutter의 애니메이션은 크게 암시적(Implicit)과 명시적(Explicit) 두 가지로 나뉜다.

 

• 암시적 애니메이션 (Implicit Animation)

    ◦ 개발자가 세부 동작을 구현하지 않고 위젯 속성만 변경하면 자동으로 애니메이션이 적용되는 방식이다.

    ◦ 주요 위젯: AnimatedAlign, AnimatedContainer, AnimatedOpacity, AnimatedPositioned, Hero.

    ◦ 핵심 속성:

        ▪ duration: 애니메이션 진행 시간.

        ▪ curve: 속도 변화 제어 (예: Curves.linear, Curves.bounceIn 등).

    ◦ Hero 위젯: 화면 전환 시 이미지나 텍스트 같은 요소가 부드럽게 연결되는 효과를 주며,
두 화면의 연결 고리는 tag 속성으로 묶는다.

 

• 명시적 애니메이션 (Explicit Animation)

    ◦ AnimationController를 사용해 시작, 정지, 반복 등을 개발자가 직접 제어하는 방식이다.

    ◦ 구현 단계:

        1. State 클래스에 TickerProviderStateMixin을 with로 적용.

        2. AnimationController 생성 (vsync: this, duration 설정).

        3. Tween 객체로 시작값과 끝값(예: 0~300)을 정의하고 animate()로 컨트롤러와 연결.

        4. AnimatedBuilder로 감싸서 애니메이션 값이 변경될 때마다 화면을 다시 그리도록 설정.

    ◦ 제어: forward()(실행), stop()(중지), reset()(초기화), reverse()(역재생).

    ◦ 주의: 위젯이 사라질 때 메모리 누수 방지를 위해 dispose() 메서드에서 컨트롤러를 반드시 해제해야 한다.

 

2. UX 최적화 패턴

• 스로틀링 (Throttling) & 디바운싱 (Debouncing)

    ◦ 스로틀링: 특정 시간 간격 내에 이벤트가 여러 번 발생해도 한 번만 실행 (예: 검색 버튼 연속 클릭 방지).

    ◦ 디바운싱: 이벤트가 연속 발생할 때 마지막 이벤트만 처리 (예: 검색어 입력 시 실시간 API 요청 최적화).

    ◦ 구현 시 Timer 클래스를 활용하여 타이머를 설정하고 취소(cancel)하는 방식으로 제어한다.

 

• 스크롤 UX

    ◦ 무한 스크롤: NotificationListener를 사용하여 스크롤 위치(pixels)가
최대 범위(maxScrollExtent)에 도달했는지 감지하여 데이터를 추가로 요청한다.

    ◦ 당겨서 새로고침: RefreshIndicator 위젯으로 리스트를 감싸고 onRefresh 속성에 퓨처 함수를 연결하여 구현한다.

 

3. UI 및 테마 (Theme & Responsive)

• 테마 커스터마이징 (Theme Extensions)

    ◦ 기본 ThemeData 외에 디자이너가 정의한 다양한 색상(Main, Sub 등)을 사용하기 위해
ThemeExtension 클래스를 상속받아 구현한다.

    ◦ lerp 메서드를 재정의하여 테마 변경(Light ↔ Dark) 시 색상이 자연스럽게 변하도록 애니메이션을 처리한다.

 

• 반응형 UI (Responsive UI)

    ◦ LayoutBuilder: 부모 위젯의 크기 제약조건(BoxConstraints)에 따라 자식 위젯을 배치할 때 사용.

    ◦ MediaQuery: 디바이스 전체 화면 크기나 해상도 정보를 가져올 때 사용 (MediaQuery.sizeOf(context)).

    ◦ 분기점(Breakpoint)을 설정하여 모바일, 태블릿, PC별로 다른 위젯을 리턴하도록 구현한다.

 

4. 내비게이션 (GoRouter)

• GoRouter 특징

    ◦ 선언형(Declarative) 라우팅 방식으로 URL 기반의 스택 관리를 제공한다.

    ◦ 웹 개발 시 유리하며, 딥링크 처리가 간편하다.

 

• 기능:

    ◦ pathParameters: URL 경로에 변수를 포함 (예: /post/:id).

    ◦ queryParameters: URL 뒤에 키-값 쌍으로 전달 (예: /search?text=abc).

    ◦ redirect: 특정 조건(로그인 여부 등)에 따라 경로를 변경.

    ◦ errorBuilder: 잘못된 경로 진입 시 에러 페이지 표시.

 

5. 네이티브 기능 및 AI

• 로컬 알림 (Local Notifications)

    ◦ flutter_local_notifications 패키지를 사용하며, Android(AndroidManifest.xml)와
iOS(AppDelegate.swift)의 네이티브 설정이 필요하다.

    ◦ 앱 실행 중(Foreground)과 백그라운드(Background) 상태에서의 알림 처리를 별도 함수로 구현해야 한다.

 

• 객체 감지 (TensorFlow Lite)

    ◦ tflite_flutter 패키지와 YOLO 모델을 사용하여 오프라인 객체 감지를 구현할 수 있다.

    ◦ 이미지 전처리(크기 640x640 변환, 픽셀 정규화) 과정이 필요하며, 결과값(좌표, 클래스 인덱스)을 가공해 화면에 바운딩 박스를 그린다.

 

6. 핵심 동작 원리 및 성능

• 생명주기 (Lifecycle)

    ◦ StatefulWidget의 생명주기: createState → initState → didChangeDependencies
→ build → deactivate → dispose.

    ◦ didUpdateWidget: 부모 위젯이 재빌드되어 설정이 바뀔 때 호출되며,
애니메이션 값이 갱신되어야 할 때 유용하게 사용된다.

 

• 아이솔레이트 (Isolate)

    ◦ Flutter는 싱글 스레드(Event Loop) 기반이므로 대용량 데이터 처리 시 UI 버벅임(Jank)이 발생할 수 있다.

    ◦ 별도의 메모리 공간을 갖는 Isolate를 생성하거나, 간편하게 compute 함수를 사용하여
무거운 작업을 백그라운드에서 처리해야 한다.

 

• const 키워드

    ◦ 컴파일 타임 상수(불변 객체)를 생성하여 메모리에 캐싱하고 재사용한다.

    ◦ build 메서드 호출 시 const가 붙은 위젯은 다시 그려지지 않아 성능 최적화에 필수적이다.

 

7. 클린 아키텍처 (Clean Architecture)

• 개념:

소프트웨어를 관심사에 따라 계층(Layer)으로 분리하고, 의존성 규칙(바깥에서 안쪽으로만 참조)을 지켜 유지보수와 테스트를 용이하게 한다.

 

• 3가지 레이어:

    1. Presentation Layer: UI, ViewModel (화면 표시 및 입력 처리).

    2. Domain Layer: Entity, Usecase, Repository Interface (비즈니스 로직 핵심, 외부 의존성 없음).

    3. Data Layer: Repository Implementation, Data Source, DTO (데이터 통신 및 가공).

 

• 구현 포인트:

계층 간의 의존성을 역전시키기 위해 Interface를 활용하고, 외부 데이터 소스와의 의존성을 끊기 위해
Mock 객체를 활용한 테스트가 가능하다.