1. Flutter 프로젝트 구조 이해
플러터 프로젝트는 여러 구성요소로 이루어져 있으며, 각 폴더와 파일은 다음과 같은 역할을 한다.
- lib 폴더:
앱의 주요 로직과 UI를 구현하는 코드가 들어간다.
플러터 개발의 대부분은 이 폴더에서 이루어진다. - test 폴더:
코드가 올바르게 동작하는지 확인하기 위한 테스트 코드를 작성한다.
위젯 테스트, 단위 테스트 등을 수행할 수 있다. - android / ios / web 등 플랫폼 폴더:
네이티브 기능(GPS, 카메라, 알림 등)을 사용하기 위한 코드를 포함한다. - pubspec.yaml:
- 외부 패키지 의존성을 추가 및 관리한다.
- 이미지나 폰트 같은 정적 리소스를 등록할 수 있다.
- 기타 구성요소
- .gitignore: Git에 포함되지 않아야 할 파일을 지정한다.
- analysis_options.yaml: 코드 규칙과 린트 설정을 관리한다.
프로젝트 구조를 이해하면 전체 앱의 동작 흐름을 명확하게 파악할 수 있다.
2. 기본 위젯과 레이아웃 (스토어 앱 만들기)
스토어 앱을 만들며 플러터의 기본 위젯과 레이아웃 구조를 익혔다.
- Column / Row
- Column: 위젯을 세로 방향으로 배치
- Row: 위젯을 가로 방향으로 배치
- 두 위젯을 조합하여 화면의 기본 구조를 만든다.
- Text 위젯
문자열을 화면에 출력할 때 사용하며, style 속성으로 글자 크기, 색상, 굵기 등을 설정할 수 있다. - Image 위젯
이미지를 표시하며, 프로젝트 내 assets 폴더에 이미지를 추가하고 pubspec.yaml에 경로를 등록해야 한다. - SafeArea 위젯
기기 상태바나 노치 영역과 겹치지 않게 여백을 자동으로 추가한다. - Scaffold 위젯
화면의 기본 틀을 구성하는 위젯으로 AppBar, Body, FloatingActionButton 등의 구조를 제공한다.
이 과정을 통해 화면 구성의 기본 원리와 위젯 트리의 구조를 이해할 수 있었다.
3. 컴포넌트화 개념과 실전 적용 (레시피 앱)
레시피 앱을 만들며 “컴포넌트화(Componentization)” 개념을 실습했다.
컴포넌트화는 하나의 화면을 여러 블록 단위로 나누어 각각을 독립적인 위젯으로 관리하는 방식이다.
- 컴포넌트화의 장점
- 코드의 가독성이 높아진다.
- 중복되는 구조를 쉽게 재사용할 수 있다.
- 유지보수 및 디자인 수정이 간편해진다.
예를 들어, ‘Made Coffee’와 ‘Made Burger’ 섹션이 같은 구조라면 RecipeListItem 위젯 하나만 만들어서 재사용할 수 있다.
이 과정에서 다음 위젯들을 학습했다.
- AppBar: 상단 고정 영역
- Icon: 아이콘 버튼 표시
- Container: 패딩, 마진, 배경색 등을 설정할 수 있는 박스 위젯
- ListView: 스크롤 가능한 리스트를 구현하는 위젯
또한 파일명은 스네이크 표기법(recipe_list_item.dart), 클래스명은 파스칼 표기법(RecipeListItem)을 사용하는 것이 코드 컨벤션임을 배웠다.
4. 폰트와 리소스 관리
앱의 시각적 완성도를 높이기 위해 커스텀 폰트를 적용했다.
- 구글 폰트에서 Noto Sans KR을 다운로드한다.
- /fonts 폴더를 만들고 ttf 파일을 추가한다.
- pubspec.yaml에 폰트 파일 경로와 weight 정보를 등록한다.
- MaterialApp의 theme 속성에 fontFamily를 지정하여 앱 전체에 적용한다.
MaterialApp(
theme: ThemeData(fontFamily: 'NotoSansKR'),
home: const RecipePage(),
);이 과정을 통해 앱 전체의 텍스트 스타일을 일관성 있게 유지할 수 있었다.
이번 학습을 통해 플러터의 기본 구조와 앱 제작 흐름을 이해할 수 있었다.
단순히 화면을 그리는 수준을 넘어서 패키지 관리, 레이아웃 구성, 위젯 재사용, 리소스 관리 등 앱 개발의 전체적인 과정이 연결되어 있음을 느꼈다.
또한 위젯을 효율적으로 구조화하고 재사용하는 습관이 코드 품질을 크게 향상시킨다는 점을 깨달았다.