LogPage 만들기 두 번째 편이에요.
지난 편에서 날짜, 시간, 장소 입력 필드까지 만들었어요.
이번엔 이 앱에서 가장 고민을 많이 한 부분, 참석 업체 카드 구조를 이야기해볼게요.
왜 업체 카드가 필요했냐고요?
처음 구상할 때는 단순하게 생각했어요.
고객사 하나, 담당자 하나. 이렇게 입력하면 되는 거 아닌가?
그런데 실제 영업 현장은 달랐어요.
미팅에 여러 업체가 동시에 참석하는 경우가 생각보다 많아요.
A업체 담당자 두 명, B업체 담당자 한 명이 함께 앉아서 미팅하는 경우도 있고, 각 업체마다 담당자가 여러 명인 경우도 있어요.
이걸 하나의 텍스트 필드에 다 적으면 나중에 데이터로 활용하기가 어려워요.
업체별로, 담당자별로 따로 관리해야 People 페이지에서 히스토리를 볼 수 있거든요.
그래서 나온 게 업체 카드 구조예요.
업체 카드 구조 설계
업체 카드는 하나의 업체를 나타내는 단위예요.
카드 안에는 업체명을 입력하는 TextField가 있고, 그 아래 담당자 이름들이 태그 형태로 나열돼요.
담당자 추가 버튼을 누르면 새 담당자를 추가할 수 있어요.
그리고 업체 카드 오른쪽 상단에 X 버튼이 있어서 잘못 추가한 업체를 삭제할 수 있어요.
가장 바깥에 Container가 있고, 그 안에 Column이 들어가요. Column 안에는 위쪽에 업체명 TextField와 X 버튼이 나란히 있는 Row가 있고, 그 아래 담당자 칩들이 가로로 나열되는 Wrap 위젯이 있어요. Wrap 안에 담당자 추가 버튼도 함께 있어요.
Wrap 위젯을 쓴 이유
담당자 이름들을 나열할 때 Column 대신 Wrap을 썼어요.
Column은 세로로 쌓아요. 담당자가 많아지면 카드가 길어지고 화면을 많이 차지해요.
Wrap은 가로로 나열하다가 자리가 없으면 자동으로 다음 줄로 넘겨요.
담당자 이름이 몇 개든 상관없이 카드 너비 안에서 자동으로 정리돼요.
김철수 부장, 이영희 과장, 박민준 대리가 있다면 한 줄에 나란히 표시되고, 이름이 더 많아지면 자연스럽게 두 줄, 세 줄로 늘어나요.
담당자 칩 스타일
담당자 이름은 태그 형태로 표시했어요.
작은 Container 안에 Text를 넣고, Container에 민트 테두리와 연한 민트 배경을 입혔어요.
테두리 둥글기를 99로 설정하면 완전히 둥근 알약 모양이 돼요.
배경색은 #E0F7F4, 테두리 색상은 #00C9A7, 텍스트 색상은 #0F6E56으로 설정했어요.
폰트 크기는 12, 패딩은 좌우 12, 상하 6이에요.
이 스타일은 앱 전체에서 일관되게 쓰는 태그 스타일이에요.
대화 키워드 태그, 선물 태그, 담당자 태그 모두 같은 스타일로 통일했어요.
업체 추가 버튼
업체 카드 아래에 + 업체 추가 버튼을 만들었어요.
이 버튼의 스타일은 일반 채워진 버튼이 아니라 테두리만 있는 Outlined 스타일이에요.
속이 빈 버튼은 메인 액션보다 덜 중요한 보조 액션에 써요.
+ 업체 추가는 필요한 경우에만 쓰는 기능이니까 SAVE 버튼보다 시각적으로 덜 강조하는 게 맞아요.
테두리 색상은 민트, 텍스트 색상도 민트, 배경은 투명으로 설정했어요.
테두리 둥글기는 99로 완전히 둥글게 만들었어요.
SAVE 버튼 두 곳에 배치한 이유
저장 버튼을 두 곳에 넣었어요.
하단에 큰 SAVE 버튼, 그리고 상단 AppBar 오른쪽에 작은 저장 텍스트 버튼.
이유는 간단해요.
입력 필드가 많아서 스크롤을 한참 내려야 하단 버튼이 보여요.
입력을 다 하고 나서 다시 스크롤을 올리거나 내릴 필요 없이 어느 위치에서든 저장할 수 있게 하려고 두 곳에 배치했어요.
하단 버튼은 네이비 배경에 흰 텍스트로 가장 눈에 띄게 만들었어요.
이게 이 화면에서 가장 중요한 메인 액션이니까요.
자동완성 기능은 나중에
처음 설계할 때는 업체명 입력 필드에 자동완성 기능을 넣으려고 했어요.
글자를 입력하면 이전에 기록한 업체들이 필터링되어 나오는 기능이에요.
그런데 Firebase 연동이 되기 전에는 불러올 데이터가 없어요.
그래서 프로토타입 단계에서는 직접 입력 방식으로 시작하고, 나중에 Firebase에 고객사 데이터가 쌓이면 그때 자동완성을 추가하기로 했어요.
처음부터 모든 기능을 완벽하게 구현하려고 하지 않는 게 중요해요.
지금 단계에서 꼭 필요한 기능에만 집중하고, 나머지는 다음 버전으로 미루는 용기가 필요해요.
LogPage를 만들면서 배운 것
LogPage를 만드는 과정에서 FlutterFlow 위젯들의 특성을 많이 배웠어요.
Column, Row, Wrap, Container. 이 네 가지 위젯만 잘 이해해도 웬만한 화면은 다 만들 수 있어요.
복잡해 보이는 화면도 결국 이 위젯들의 조합이에요.
그리고 화면을 만들기 전에 구조를 먼저 그려보는 습관이 얼마나 중요한지 깨달았어요.
머릿속으로만 생각하면 막상 만들다가 중간에 구조를 뒤엎는 경우가 생겨요.
종이에 먼저 스케치하고 시작하면 훨씬 빠르게 만들 수 있어요.
'06. 자동화 및 개발' 카테고리의 다른 글
| #12 앱 디자인 일관성의 비밀 [1/3] — Padding 기준을 미리 정해야 하는 이유 (0) | 2026.04.15 |
|---|---|
| #11 FlutterFlow 위젯 완전 정복 — Column, Row, Container, Wrap, ListView 언제 쓰나? (0) | 2026.04.12 |
| #09 LogPage 만들기 1 — 미팅 기록 입력 화면 레이아웃 잡기 (0) | 2026.04.10 |
| #08 Light Mode와 Dark Mode 동시에 설정하는 방법 (0) | 2026.04.10 |
| #07 앱 컬러 시스템 만들기 — 네이비 + 민트 조합을 선택한 이유 (0) | 2026.04.10 |