[💻] 공부 - Flutter 앱 개발 기초 14/44강: Flutter 환경 세팅, 핵심 위젯, Dart 기본 문법

✨ Gemini 2.5 Pro의 요약 　

Flutter 앱 개발 기초 강의

DevStory - 인프런 DevStory

, 개발 지식이 없어도 괜찮아요!입문자도 할 수 있는 Flutter 앱 개발 기초 🏃‍♂️왕초보도 배울 수 있는Flutter 앱 개발 기초[사진]앱 개발을 배우면 그동안 상상만 해오던 나만의 앱 서비스를 전 세계에 출시할 수 있어요. 사실

• 원문: http://blog.naver.com/hyeogikarp/223882864462
• 네이버 발행 시각: 2025/05/30 11:30 KST
• 원문 카테고리: 개발 공부

원문

Flutter 앱 개발 기초 강의

DevStory - 인프런

DevStory

, 개발 지식이 없어도 괜찮아요!입문자도 할 수 있는 Flutter 앱 개발 기초 🏃‍♂️왕초보도 배울 수 있는Flutter 앱 개발 기초[사진]앱 개발을 배우면 그동안 상상만 해오던 나만의 앱 서비스를 전 세계에 출시할 수 있어요. 사실 앱을 만드는

www.inflearn.com

1. Flutter 란?

• 크로스 플랫폼 프레임워크: Google에서 개발했으며, 하나의 코드 베이스로 Android, iOS, Web, Desktop 애플리케이션 개발이 가능하다.

• Dart 언어 사용: UI를 코드로 작성한다.

1. 핵심 컨셉: 모든 것은 위젯 (Widget)

• UI 구성 단위: 위젯을 조립하여 화면을 구성한다.

• 위젯 트리 (Widget Tree): 위젯들의 계층 구조로, 부모-자식 관계로 구성된다.

• Key? key와 super(key: key): 위젯 생성자에서 Key는 위젯 트리가 재구성될 때 위젯의 상태를 보존하고 효율적으로 업데이트하는 데 사용된다. 현재 단계에서는 이러한 개념이 있다는 정도로 이해하면 충분하다.

• BuildContext context: 위젯 트리에서 현재 위젯의 위치를 나타내며, 상위 위젯의 데이터나 테마에 접근할 수 있게 하는 중요한 객체이다. Navigator.pop(context)와 같이 다양한 곳에서 활용된다.

• 주요 위젯 분류:

• StatelessWidget: 상태가 없는 정적인 위젯이다.

• StatefulWidget: 상태 변화에 따라 다시 그려질 수 있는 동적인 위젯이다. (코드 예시 생략)

• StatefulWidget: 상태 변화에 따라 다시 그려질 수 있는 동적인 위젯이다. (코드 예시 생략)

1. 기본적인 앱 구조 및 주요 위젯

• main() 함수 & runApp() & MaterialApp & Scaffold:

• MaterialApp의 home: 애플리케이션의 첫 화면을 지정한다. (예: home: HomePage())

• MaterialApp의 home: 애플리케이션의 첫 화면을 지정한다. (예: home: HomePage())

• AppBar 상세 속성:

• 레이아웃 위젯:

• Column & Row:

• Padding: 자식 위젯 주변에 여백을 추가한다.

• Padding: 자식 위젯 주변에 여백을 추가한다.

• Container: 다양한 스타일링(크기, 색상, 여백, 테두리 등)이 가능한 사각형 위젯이다.

• Container: 다양한 스타일링(크기, 색상, 여백, 테두리 등)이 가능한 사각형 위젯이다.

• Expanded: Row나 Column의 자식 위젯이 남은 공간을 채우도록 확장시킨다.

• Expanded: Row나 Column의 자식 위젯이 남은 공간을 채우도록 확장시킨다.

• SingleChildScrollView: 자식 위젯의 내용이 화면을 벗어날 경우 스크롤 가능하게 한다.

• SingleChildScrollView: 자식 위젯의 내용이 화면을 벗어날 경우 스크롤 가능하게 한다.

• ListView.builder: 많은 수의 아이템을 효율적으로 표시하는 스크롤 가능한 목록을 만든다. 화면에 보이는 아이템만 생성한다.

• ListView.builder: 많은 수의 아이템을 효율적으로 표시하는 스크롤 가능한 목록을 만든다. 화면에 보이는 아이템만 생성한다.

• Stack: 위젯들을 겹쳐서 배치할 수 있게 한다 (Z축).

• Stack: 위젯들을 겹쳐서 배치할 수 있게 한다 (Z축).

• AspectRatio: 자식 위젯의 가로 세로 비율을 고정시킨다.

• AspectRatio: 자식 위젯의 가로 세로 비율을 고정시킨다.

• double.infinity: Container 등의 width나 height 속성에 사용되어, 부모 위젯이 허용하는 최대 크기로 채우도록 한다.

• double.infinity: Container 등의 width나 height 속성에 사용되어, 부모 위젯이 허용하는 최대 크기로 채우도록 한다.

• SizedBox: 특정 크기의 빈 공간을 만들거나, 자식 위젯의 크기를 명시적으로 지정할 때 사용한다.

• SizedBox: 특정 크기의 빈 공간을 만들거나, 자식 위젯의 크기를 명시적으로 지정할 때 사용한다.

• 기본 UI 위젯:

• Text & TextStyle: 텍스트를 표시하고 스타일을 지정한다.

• Image.network: 네트워크 URL로부터 이미지를 로드하여 표시한다.

• Image.network: 네트워크 URL로부터 이미지를 로드하여 표시한다.

• fit: BoxFit.cover: 이미지가 비율을 유지하면서 지정된 공간을 꽉 채우도록 한다. (공간보다 이미지가 크면 잘릴 수 있다)Icon: 머티리얼 디자인 아이콘을 표시한다.

• fit: BoxFit.cover: 이미지가 비율을 유지하면서 지정된 공간을 꽉 채우도록 한다. (공간보다 이미지가 크면 잘릴 수 있다)

• fit: BoxFit.cover: 이미지가 비율을 유지하면서 지정된 공간을 꽉 채우도록 한다. (공간보다 이미지가 크면 잘릴 수 있다)

• Icon: 머티리얼 디자인 아이콘을 표시한다.

• TextField & InputDecoration 상세: 사용자로부터 텍스트 입력을 받는다.

• TextField & InputDecoration 상세: 사용자로부터 텍스트 입력을 받는다.

• ElevatedButton, TextButton, IconButton: 다양한 형태의 버튼 위젯이다.

• ElevatedButton, TextButton, IconButton: 다양한 형태의 버튼 위젯이다.

• Card: 머티리얼 디자인의 카드 형태 UI를 만든다. 약간의 그림자와 둥근 모서리를 가진다.

• Card: 머티리얼 디자인의 카드 형태 UI를 만든다. 약간의 그림자와 둥근 모서리를 가진다.

• Divider: 시각적인 구분선을 만든다.

• Divider: 시각적인 구분선을 만든다.

• CircleAvatar: 주로 사용자 프로필 이미지처럼 원형 이미지를 표시할 때 사용한다.

• CircleAvatar: 주로 사용자 프로필 이미지처럼 원형 이미지를 표시할 때 사용한다.

• Colors.black.withOpacity(0.5): 색상에 투명도를 적용한다. 0.0 (완전 투명) ~ 1.0 (완전 불투명).

• Colors.black.withOpacity(0.5): 색상에 투명도를 적용한다. 0.0 (완전 투명) ~ 1.0 (완전 불투명).

• Drawer 및 관련 위젯:

• Drawer: Scaffold의 drawer 속성에 지정되며, 화면 한쪽에서 슬라이드 되어 나오는 패널이다.

• DrawerHeader: Drawer 상단 영역을 꾸밀 때 사용하는 위젯이다.

• ListTile: Drawer 내의 각 항목을 구성할 때 자주 사용한다. leading, title, trailing, onTap 등의 속성을 가진다.

• ListTile: Drawer 내의 각 항목을 구성할 때 자주 사용한다. leading, title, trailing, onTap 등의 속성을 가진다.

• PageView: 여러 페이지(화면)를 좌우로 스크롤 하며 볼 수 있게 하는 위젯이다. (예: 이벤트 배너)

1. 내비게이션 기초

• Navigator.pop(context): 현재 화면(라우트)을 스택에서 제거하고 이전 화면으로 돌아갈 때 사용한다. Drawer를 닫거나 다이얼로그를 닫을 때 유용하다.

1. 데이터 다루기 (간단 예시)

• List<Map<String, dynamic»: ListView.builder 등에서 사용할 데이터를 Dart의 리스트와 맵으로 구성하는 것은 일반적인 방식이다. 각 Map은 하나의 아이템 정보를 담고, String 키로 값에 접근한다.

1. 프로젝트 구조 및 개발 환경

• lib 폴더: 주로 Dart 코드를 작성하는 곳이다. main.dart가 기본 시작 파일이다.

• pubspec.yaml 파일: 프로젝트의 메타데이터, 의존성(라이브러리/패키지) 관리, SDK 버전 등을 설정하는 파일이다.

• VSCode: 주요 개발 도구로 사용된다.

• Command Palette (Ctrl+Shift+P / Cmd+Shift+P): Flutter: New Project, Flutter: Launch Emulator 등 다양한 Flutter 명령어를 실행한다.

• 유용한 단축키: 자동완성 (Ctrl+Space/Option+Esc), 리팩터 (Ctrl+Shift+R), 매개변수 보기 (Ctrl+Option) 등 유용한 단축키 익히기 필수! (생산성 향상 목적)

• 나중에 VSCode 단축키 위주로 간단한 포스팅을 많이 해볼 예정이다.

• ex) VSCode에서 Presentation Mode 켜는 방법

• Emulator: 가상 모바일 기기로, 실제 기기 없이 앱을 테스트한다.

• Hot Reload (핫 리로드): 코드 변경 사항을 앱 상태를 대부분 유지하면서 빠르게 화면에 반영한다. (번개 모양 아이콘)

• Hot Restart (핫 리스타트): 앱 상태를 초기화하고 앱을 다시 시작한다. (원 모양 아이콘)

• analysis_options.yaml: Dart 코드 분석 규칙을 설정하는 파일이다. (예: 특정 린트 규칙 활성화/비활성화)

• 예를 들어, print 함수를 써서 Debug Console에 텍스트를 출력하려고 하면, production에서는 쓰면 안 된다고 난리를 친다.

• 그건 production 때 알아서 빼면 될 일이니, 린트 규칙에서 ‘avoid_print’를 제거해 보자.해결법 1. 해당 dart 파일 상단에 ignore_for_file 코멘트를 작성한다.

• 그건 production 때 알아서 빼면 될 일이니, 린트 규칙에서 ‘avoid_print’를 제거해 보자.

• 해결법 1. 해당 dart 파일 상단에 ignore_for_file 코멘트를 작성한다.

• 해결법 2. 프로젝트 루트단에 있는 analysis_options.yaml에서 무시 처리한다.

• 해결법 2. 프로젝트 루트단에 있는 analysis_options.yaml에서 무시 처리한다.

• 해결법 2. 프로젝트 루트단에 있는 analysis_options.yaml에서 무시 처리한다.

1. Flutter 학습 방법

• Widget Catalog & Widget of the week: Flutter 공식 문서의 위젯 카탈로그와 ‘Widget of the week’ 시리즈를 통해 다양한 위젯을 학습한다.

• 커뮤니티 활용: Flutter 관련 커뮤니티(온라인 포럼, 오픈챗 등)에서 질문하고 답변하며 함께 성장한다.

• Dart 문법 숙지: Flutter는 Dart 언어를 사용하므로, Dart 문법을 충분히 이해하는 것이 중요하다.

💭 일기

이미 C, C++, Java, Javascript, Python, … 수많은 언어들을 다뤄봤고, Spring, Vue.js, Django, FlutterFlow 등 다양한 프레임워크/툴까지 다뤄본 시점이지만, 혹시나 놓치고 가는 기본 개념이 있을까 싶어 Flutter 기초 강좌부터 듣기 시작했다.

이미 알고 있는 개념들이라고 생각하고 빠르게 스킵 하려 했는데, 이거 생각보다 너무 오랫동안 개발에서 손을 놨나 보다. 뇌 근육이 굳었는지, 머릿속에 빠릿빠릿하게 어떤 식으로 코드를 짜면 될지 구상이 잘 안되더라.

이제는 VSCode에서 Inline Chat(Gemini 2.5 Pro)이나 Code Recommendation(GitHub Copilot) 등 AI의 도움을 받으면서, 금방금방 궁금증을 묻고, 답을 찾아내고, 자동완성을 활용하면서 효율적으로 코딩하는 시대가 되었기에, 더욱 빠르게 코딩 뇌 근육을 복구시킬 수 있을 것으로 기대한다.

갈 길이 멀다! 가즈아!

첨부 이미지