드디어 본격적인 화면 작업이에요.
페이지 구조도 잡았고, 컬러 시스템도 설정했고, 이제 실제로 화면을 만들 차례예요.
그 중에서도 가장 먼저 만든 건 LogPage였어요.
LogPage는 이 앱의 심장이에요. 미팅 기록을 입력하는 화면이거든요.
아무리 다른 기능이 좋아도 기록 입력이 불편하면 아무도 안 써요. 그래서 가장 공을 많이 들인 페이지예요.
먼저 레이아웃 구조를 잡았어요
화면을 만들기 전에 종이에 먼저 스케치를 했어요.
위에서 아래로 어떤 순서로 입력 필드가 배치될지 생각해봤어요.
날짜, 시작 시간과 종료 시간, 장소, 그리고 참석 업체 및 담당자. 이 순서가 가장 자연스러웠어요. 미팅을 회상하는 순서와 같거든요. 언제, 몇 시에, 어디서, 누구를 만났는지.
FlutterFlow 레이아웃의 기본 — Column과 Container
FlutterFlow에서 화면을 만들 때 가장 기본이 되는 위젯이 두 가지 있어요.
Column은 위젯들을 세로로 쌓아올리는 컨테이너예요. 입력 필드들을 위에서 아래로 나열할 때 써요.
Container는 하나의 위젯을 감싸서 배경색, 테두리, 여백 등 스타일을 입히는 박스예요.
LogPage의 전체 구조는 가장 바깥에 Container가 있고, 그 안에 Column이 들어가요.
Column 안에는 위에서 아래 순서로 DATE 라벨과 TextField, TIME 라벨과 시작 종료 Row, LOCATION 라벨과 TextField,
구분선인 Divider, ATTENDEE 라벨, 업체 카드 Container, 업체 추가 버튼, 그리고 맨 아래 SAVE 버튼이 순서대로 들어가 있어요.
Column 설정에서 막혔던 부분
Column을 처음 추가했을 때 화면을 꽉 채우지 않고 작게 보이는 문제가 있었어요.
여러 가지 시도를 했는데 계속 안 됐어요. 나중에 알고 보니 Cross Axis Alignment를 Stretch로 설정하면 해결됐어요.
이거 찾는 데만 꽤 오래 걸렸어요.
개발하다 보면 이런 사소한 설정 하나 때문에 한참 헤매는 경우가 많아요.
처음이라 그런 거니까 너무 낙담하지 마세요.
섹션 라벨 스타일 — 영문 대문자로 통일
각 입력 필드 위에 섹션 라벨을 넣었어요.
처음엔 한글로 미팅 날짜, 미팅 시간, 미팅 장소라고 했는데, 나중에 DATE, TIME, LOCATION으로 바꿨어요.
이유는 두 가지예요.
첫째, 영문 대문자에 Letter Spacing을 주면 훨씬 세련된 느낌이 나요. 작은 디테일인데 앱 전체 분위기가 달라져요.
둘째, 라벨이 짧아서 좁은 화면에서도 잘려 보이지 않아요.
섹션 라벨은 Font Size 11, Font Weight Medium, 색상은 민트(#00A389), Letter Spacing은 1.5로 설정했어요.
TextField 스타일 통일
입력 필드인 TextField도 스타일을 통일했어요.
높이는 52, 테두리 타입은 Outline, 기본 테두리 색상은 회색(#D3D1C7), 포커스 테두리 색상은 민트(#00C9A7),
테두리 둥글기는 8, 배경색은 Secondary Background로 설정했어요.
여기서 중요한 포인트가 있어요.
기본 테두리 색상과 포커스 테두리 색상을 다르게 설정한 거예요.
평소엔 회색 테두리, 사용자가 클릭해서 입력 중일 때는 민트색 테두리로 바뀌어요.
이런 작은 피드백이 사용자 경험을 훨씬 좋게 만들어요.
시작 시간과 종료 시간 나란히 배치하기
시간 입력 필드는 시작과 종료가 나란히 보여야 해요.
이럴 때 쓰는 위젯이 Row예요.
Row는 위젯들을 가로로 나열하는 컨테이너예요.
Column의 가로 버전이라고 생각하면 돼요.
Row 안에 TextField 두 개를 넣고, 각각 Width를 Expand로 설정하면 화면을 반반씩 나눠서 차지해요.
시작, 종료 라벨은 TextField 안에 Label Text로 넣지 않고, 별도 Text 위젯으로 Row 위에 따로 만들었어요.
TextField 안에 넣으면 크기에 따라 라벨이 잘리거나 위치가 어색해지는 경우가 생기거든요.
Trailing Icon 추가
각 TextField 오른쪽에 아이콘을 추가했어요.
날짜 필드에는 calendar_month 아이콘, 시간 필드에는 schedule 아이콘, 장소 필드에는 location_on 아이콘을 넣었어요.
아이콘이 있으면 사용자가 이 필드에 뭘 입력해야 하는지 글자를 읽지 않아도 직관적으로 알 수 있어요.
설정 방법은 간단해요. TextField 선택 후 우측 패널에서 Trailing Icon Properties를 찾아 Icon에서 아이콘 이름을 검색하면 돼요.
Divider로 섹션 구분하기
기본 정보 입력 필드들과 참석 업체 섹션 사이에 Divider를 넣었어요.
Divider는 얇은 구분선이에요. 섹션과 섹션 사이를 시각적으로 나눠줘서 화면이 훨씬 정돈되어 보여요.
여기까지 완성된 LogPage 상단 구조
이렇게 해서 LogPage의 상단 기본 정보 섹션이 완성됐어요.
날짜, 시간, 장소 입력 필드가 깔끔하게 배치된 화면을 처음 봤을 때 꽤 뿌듯했어요.
아직 데이터 연동은 안 됐지만, 화면만 봐도 실제 앱처럼 느껴졌거든요.
다음 편에서는 LogPage의 핵심이라고 할 수 있는 참석 업체 카드 구조를 어떻게 만들었는지 이야기해볼게요.
여러 업체를 동시에 기록할 수 있는 UX를 어떻게 설계했는지, 그리고 담당자를 업체별로 각각 추가하는 구조를 어떻게 구현했는지 다룰 거예요.
'06. 자동화 및 개발' 카테고리의 다른 글
| #11 FlutterFlow 위젯 완전 정복 — Column, Row, Container, Wrap, ListView 언제 쓰나? (0) | 2026.04.12 |
|---|---|
| #10 LogPage 만들기 2 — 여러 업체와 담당자를 동시에 기록하는 UX 설계 (0) | 2026.04.10 |
| #08 Light Mode와 Dark Mode 동시에 설정하는 방법 (0) | 2026.04.10 |
| #07 앱 컬러 시스템 만들기 — 네이비 + 민트 조합을 선택한 이유 (0) | 2026.04.10 |
| #06 FlutterFlow 시작하기 — 첫 페이지 6개 만들고 Nav Bar 연결하기 (0) | 2026.04.10 |