1. 학습 개요
이번 학습에서는 Flutter의 기본 구조부터 실제 앱 구현까지 이어지는 전 과정을 통해, 하나의 프로젝트가 어떤 구조로 만들어지고 작동하는지를 전체적으로 이해했다.
단순히 위젯을 나열하는 수준이 아니라, 위젯들이 어떻게 상호작용하며 화면을 구성하고 상태를 반영하는지를 구체적으로 익힌 시간이었다.
2. Flutter 프로젝트 구조 이해
Flutter 프로젝트는 여러 폴더로 나뉘어 있으며, 각 폴더가 명확한 역할을 가진다.
lib 폴더는 앱의 핵심 로직과 UI를 담고, pubspec.yaml은 사용하는 패키지와 리소스를 정의한다.
android, ios, web 폴더는 플랫폼별 실행 환경을 담당하고, test 폴더에서는 코드 동작을 검증할 수 있다.
이 구조를 이해한 덕분에 이후 패키지 추가나 경로 인식 문제 같은 환경 설정 오류를 스스로 해결할 수 있었다.
3. 위젯의 개념과 화면 구조
Flutter의 가장 중요한 특징은 모든 것이 위젯으로 이루어져 있다는 점이다.
텍스트, 이미지, 버튼은 물론 화면 전체까지 위젯으로 구성된다.
위젯은 두 가지 형태로 나뉜다.
- StatelessWidget: 변하지 않는 상태의 화면
- StatefulWidget: 사용자 입력이나 상태 변화에 따라 갱신되는 화면
앱은 보통 MaterialApp을 루트로 두고, Scaffold, AppBar, Body, FloatingActionButton 등을 조합해 전체 구조를 완성한다.
UI는 build() 함수 안에서 선언적으로 구성되며, 화면의 갱신은 상태 변화(setState())를 통해 이루어진다.
4. 스토어 앱 – 상태 관리의 시작
스토어 앱에서는 상태 관리의 핵심인 setState()의 개념을 실습했다.
버튼 클릭 시 장바구니가 갱신되고, 그 즉시 화면에 변화가 반영되는 과정을 통해 Flutter의 반응형 구조를 이해했다.
ListView.builder()로 동적인 리스트를 구현하고, Navigator.push()와 Navigator.pop()을 이용해 화면 이동과 데이터 전달을 직접 구현했다.
이를 통해 UI 갱신과 화면 전환의 기본 흐름을 완전히 익혔다.
5. 레시피 앱 – 비동기 데이터 처리
레시피 앱에서는 FutureBuilder()를 사용해 비동기 데이터 로딩을 구현했다.
API로부터 레시피 정보를 불러오고, 데이터가 준비되기 전과 후의 화면을 다르게 표현하는 방식을 실습했다.
GestureDetector()로 터치 이벤트를 감지하고, Image.network()로 외부 이미지를 표시하며 사용자 인터페이스를 완성했다.
이를 통해 Flutter가 단순한 정적 화면 제작 도구가 아닌, 실제 데이터 기반의 앱 개발 프레임워크임을 체감했다.
6. 영화관 좌석 예매 앱 – 상태 변화와 사용자 피드백
영화관 예매 앱에서는 좌석 선택과 예매 피드백을 구현했다.
GridView.builder()로 좌석을 격자로 배치하고, InkWell()을 통해 클릭 이벤트를 감지하여 선택 상태를 시각적으로 표현했다.
예매를 진행할 때는 AlertDialog()로 확인 창을 띄우고, 예매 완료 후에는 SnackBar()를 사용해 안내 메시지를 표시했다.
이 과정을 통해 사용자의 행동에 실시간으로 반응하고, 시각적 피드백을 제공하는 UX 설계의 중요성을 배웠다.
7. BMI 계산기 앱 – 계산 로직과 결과 표현
BMI 계산기 앱에서는 입력값과 계산 로직을 연결하는 과정을 중심으로 학습했다.
Slider()를 이용해 키와 몸무게를 실시간으로 입력받고, 버튼 클릭 시 calculateBMI() 함수로 결과를 계산했다.
Navigator.push()를 통해 결과 화면으로 이동시키고, Card와 Text 위젯을 활용해 계산 결과를 시각적으로 표현했다.
단순한 계산 결과라도 시각적으로 명확하게 보여주는 방식의 중요성을 배웠다.
이번 챕터를 통해 Flutter의 기초를 단단히 다지고, 앱 개발의 전체적인 흐름을 몸으로 익혔다.
Flutter는 코드의 양보다 구조와 사고방식이 더 중요하다는 점을 깨달았다.
상태 변화의 시점, 사용자 피드백의 타이밍, 위젯의 배치와 조합이 모두 앱의 완성도를 결정한다.
앞으로는 Provider나 Riverpod 같은 상태관리 패턴을 적용해 더 안정적이고 확장성 있는 구조로 발전시킬 계획이다.