#06 FlutterFlow 시작하기 — 첫 페이지 6개 만들고 Nav Bar 연결하기

드디어 FlutterFlow를 본격적으로 열었어요.

앱 아이디어도 있고, 페이지 구조도 설계했고, 이름도 다 정했어요. 이제 진짜로 만들어야 할 차례였어요.

처음 FlutterFlow 화면을 봤을 때 솔직한 느낌은 이랬어요.

"생각보다 복잡한데?"

 

왼쪽엔 위젯 트리, 가운데엔 캔버스, 오른쪽엔 속성 패널.

처음 보면 어디서 뭘 눌러야 할지 막막해요. 그런데 하나씩 해보면 생각보다 금방 익숙해져요.

---

첫 번째 작업 — Blank Page 6개 만들기

가장 먼저 한 일은 페이지를 만드는 거였어요.

FlutterFlow에서 페이지 만드는 방법은 간단해요.

좌측 사이드바 Pages 클릭 → 우측 상단 + 버튼 → Blank Page 선택 → 이름 입력

이렇게 해서 총 6개 페이지를 만들었어요.

순서	페이지 이름
1	FeedPage
2	LogPage
3	SummaryPage
4	PeoplePage
5	InsightPage
6	MyPage

페이지 이름은 영문 대소문자를 정확하게 입력해야 해요.

나중에 Firebase랑 연동하거나 페이지 간 이동을 설정할 때 이름이 틀리면 헷갈리거든요.

---

두 번째 작업 — Nav Bar 설정

페이지를 만들었으면 이제 하단 네비게이션 바를 연결해야 해요.

FlutterFlow에서 Nav Bar는 각 페이지에서 개별적으로 설정해요.

페이지를 클릭하면 오른쪽 패널 하단에 Nav Bar 섹션이 나와요.

여기서 두 가지 토글을 켜야 해요.

 

첫째, Show this page on the Nav Bar를 ON으로 설정해요.

둘째, Always show Nav Bar on page도 ON으로 설정해요.

이걸 5개 페이지에 반복해서 설정해야 해요.

FeedPage, LogPage, SummaryPage, PeoplePage, InsightPage 순서대로요.

MyPage는 탭에 넣지 않기로 했으니까 이 설정을 하지 않아요.

---

처음에 만난 에러

5개 페이지 설정을 다 하고 나서 App Settings로 들어갔더니 빨간 에러가 떴어요.

"Nav Bar requires at least two pages to have Show on Nav Bar set."

 

처음엔 당황했는데, 알고 보니 간단한 문제였어요.

각 페이지에서 토글을 켜야 하는데 빠뜨린 페이지가 있었던 거예요. 하나씩 확인하면서 다 켜주니까 에러가 사라졌어요.

개발하다 보면 이런 사소한 에러들을 자주 만나요. 처음엔 당황스럽지만 차근차근 읽어보면 대부분 해결할 수 있어요.

---

세 번째 작업 — 아이콘 설정

Nav Bar에 들어갈 아이콘을 설정했어요.

FlutterFlow는 Material Icons를 기본으로 사용해요. 아이콘 이름을 검색창에 입력하면 바로 찾을 수 있어요.

각 탭에 설정한 아이콘은 이래요.

탭	아이콘 이름	선택 이유
Feed	dynamic_feed	피드 느낌이 가장 잘 나는 아이콘
Summary	calendar_month	캘린더라는 의미가 명확
Log	add_circle	가운데 FAB 스타일로 강조
People	people	페이지 이름과 완벽하게 일치
Insight	insights	분석/통계 느낌이 딱 맞음

아이콘 선택할 때 팁이 있어요.

아이콘 이름을 영어로 검색하면 훨씬 빠르게 찾을 수 있어요.

예를 들어 캘린더를 찾고 싶으면 calendar라고 치면 관련 아이콘이 쭉 나와요.

---

네 번째 작업 — Entry Page 설정

Nav Bar 설정을 마치고 나서 또 에러를 발견했어요.

"Entry Page is not an existing page in the project."

 

Entry Page란 앱을 처음 실행했을 때 보여줄 페이지예요. 설정하지 않으면 앱이 어디서 시작해야 할지 모르는 거예요.

FeedPage를 Entry Page로 설정했어요. 앱을 열면 팀 활동 피드가 가장 먼저 보이는 게 자연스럽거든요.

FeedPage 우클릭 → Set as Entry Page 선택. 끝이에요.

---

여기까지 완성된 것

FlutterFlow를 처음 연 날 여기까지 했어요.

• 페이지 6개 생성 ✅
• Nav Bar 5탭 설정 ✅
• 각 탭 아이콘 설정 ✅
• Entry Page 설정 ✅

캔버스에서 하단 Nav Bar에 아이콘 5개가 나란히 늘어선 걸 처음 봤을 때, 그 작은 성취감이 생각보다 컸어요.

아, 진짜 앱이 만들어지고 있구나.

코딩 한 줄 없이 여기까지 왔다는 게 믿기지 않았어요.