[Episode.4] Flutter 레시피 앱 UX 리프레시 | 화면 구조 개편하고 자잘한 UI 에러 수정 및 마이크로카피 다듬기
note

[Episode.4] Flutter 레시피 앱 UX 리프레시 | 화면 구조 개편하고 자잘한 UI 에러 수정 및 마이크로카피 다듬기

9 min read

지난 이야기

이전 에피소드에 토끼굴 마일스톤을 붙이며 "한 층씩 파 내려가는 재미"를 만들었던 이야기를 담았다. 다만 기능은 만들어졌어도 화면은 여전히 거칠고 버튼 배치가 제멋대로였다. 이번 글에는 직접 쓰며 불편했던 UI/UX를 집중적으로 다듬은 한 주의 작업에 대해 담았다.

이 글에서 다루는 내용

  • 토끼굴 마일스톤 작업 이후 UI 개선이 필요하다고 판단한 배경
  • 빈티지 톤 컬러 시스템과 Material 3 컴포넌트 적용 과정
  • Bottom Navigation·AppBar 구조 개편과 SafeArea 오류 수정
  • 진행 메시지·감정 메모 UI 재작성 예시 케이스
  • 직접 테스트하며 발견한 개선 포인트들

사용자 동선을 줄이는 정보 구조 재정비

토끼굴 작업을 마무리한 뒤에 앱을 써 보았는데 전체적으로 화면이 정돈되어 있지 않다는 느낌이 들었다. 가장 큰 문제는 상단 AppBar와 하단 Bottom Navigation이 동시에 존재한다는 점이었다. 실제 사용자는 하단 탭으로만 이동하게 만들었는데 AppBar가 제목과 설정 버튼 영역을 차지해 크기가 작은 화면에서는 콘텐츠 영역을 잠식하고 있었다. 그래서 AppBar를 걷어내고 이동 탭은 하단 5가지(홈·토끼굴·통계·보관함·설정)로 통일했다. 각 화면 상단에는 텍스트 헤더(토끼굴, 보관함 등)만 남겨 사용자가 '지금 어디에 있는지' 알 수 있도록 했다.

Before: 상단 AppBar + 하단 4탭
┌──────────────────────────────┐
│ AppBar (Recipesoup 제목)      │ ← 중복된 헤더
├──────────────────────────────┤
│ 탭: 전체 | 즐겨찾기 | 최근        │ ← 필요한 정보가 묻힘
├──────────────────────────────┤
│         화면 콘텐츠             │
├──────────────────────────────┤
│ Bottom Navigation (5탭)       │
└──────────────────────────────┘

After: 텍스트 헤더 + 탭 + 하단 5탭
┌──────────────────────────────┐
│ 보관함                   🔍    │ ← 텍스트 헤더 + 검색 아이콘
├──────────────────────────────┤
│ 탭: 전체 | 즐겨찾기 | 최근        │ ← 필요한 정보만 남긴 탭바
├──────────────────────────────┤
│         화면 콘텐츠             │ ← SafeArea로 여백 정리
├──────────────────────────────┤
│ Bottom Navigation (5탭)       │
└──────────────────────────────┘

검색 기능도 별도 탭에서 보관함 내부로 옮겼다. 사용자가 미리 저장해 둔 레시피를 찾고 싶을 때 떠올릴만한 가장 자연스러운 공간은 '보관함'이라고 가정했기 때문이다. 또한 이전에는 Search 탭으로 이동한 뒤 다시 돌아오면 즐겨찾기·정렬 정보가 끊겼다. 이제는 보관함 헤더의 검색 아이콘을 누르면 바텀시트가 열리고 필터·검색·즐겨찾기를 한 화면에서 만날 수 있다.

바텀시트에는 최근 레시피에서 추려낸 '추천 태그'를 항상 노출하게 했다. 태그를 탭하면 곧바로 검색어가 채워지고 다시 누르면 해제되는 구조라 긴 문장을 입력하지 않아도 원하는 레시피를 빠르게 찾을 수 있다. 검색 결과 리스트도 바텀시트 바로 아래에 붙여 "검색 → 레시피 카드 → 상세 보기" 흐름이 끊기지 않게 했다.

감정 기반 앱다운 언어로 다시 말하기

UI 구조 못지않게 화면을 채우는 문장도 중요했다. 사용자가 입력을 시작하기 전부터 '어떻게 쓰면 될지'를 안내하기 위해 레시피 작성·챌린지 후기·재료 추천 같은 주요 폼에 예시 키워드를 심었다. 레시피 작성 화면에는 제목 예시(예: 직장인 힐링 히야시츄카), 감정 스토리 샘플 문장, 재료와 조리 단계의 기본 포맷을 넣었다. 냉장고 재료 추천 화면은 "양상추, 무화과, 썬드라이 토마토"처럼 조합 사례를 보여 주고 "쉼표로 구분하거나 + 버튼으로 추가하세요"라는 힌트를 덧붙여 흐름을 이어 갈 수 있도록 했다.

URL 가져오기 화면도 "블로그나 웹사이트의 레시피 URL을 입력하면…"이라는 설명과 함께 플레이스홀더를 넣어 처음 보는 사용자도 구조를 이해하도록 했다. 특히 링크로 가져오기의 경우 영상 링크를 필드에 넣자마자 '지원 불가' 메시지를 띄웠다. 해당 기능을 지원하기 전까지는 사용자가 링크를 넣은 뒤 불필요하게 버튼을 누르고 결과값이 나오기를 기다리는 상황이 생기지 않도록 하고 싶었다.

경고 메시지는 빨간 박스 대신 빈티지 팔레트로 정돈했다. 치명적인 문제가 발생한 게 아닌 이상 상태 메시지만 잘 보여주면 될 것이었다. 안내 박스와 다이얼로그는 공통 컴포넌트를 사용해 제목·문구·아이콘 배치를 맞춰주었다. 사진 분석 실패, 비디오 URL 경고 등 상황이 달라도 같은 톤으로 들리도록 맞춘 과정이다.

빈티지 톤 전 화면에 입히기

감정 기반 앱이라는 메시지를 시각적으로도 전달하고 싶어 Material 3 팔레트를 다시 정리했다. 베이스(#F8F3EC)와 포인트(#D4A574, #8C7A6B)를 전체 테마에 적용하고 카드 그림자와 라운드 형태를 토끼굴 카드와 동일하게 맞췄다. 감정 태그 뱃지 색상도 카테고리별로 다시 지정했다. + 버튼을 누르면 나타나는 스피드 다이얼 메뉴도 각 아이콘마다 다른 컬러를 주어 구분이 더 잘 되도록 수정했다. 또한 가장 많이 쓰일 기능이기에 텍스트를 눌러도 이동하도록 했다. 가족들 대상으로 진행했던 베타 테스트 때 버튼을 눌러야만 랜딩이 되어서 에러처럼 느껴진다는 의견을 반영한 작업이었다.

실사용 환경에서 반복 검증하기

디자인을 수정했다고 끝이 아니었다. 가장 작은 화면 사이즈인 iPhone 12 mini 기기와 기타 시뮬레이터를 통해 Bottom Navigation 정렬, SafeArea 침범 여부, 토끼굴 탭 레벨 배지가 제대로 보이는지 반복 확인했다. 홈화면 콘텐츠 영역에는 50% 너비의 레시피 이미지를 추가하고 이미지가 없으면 기본 팔레트 색상이 보이도록 에셋 구조를 정리했다. 이미지가 깨져도 톤이 흐트러지지 않는 장치다.

마무리하며

한 주 내내 화면을 들여다보며 UI 네비게이션과 UX 카피, 플로우, 디자인 톤 등을 정리했다. 그 결과 진행 메시지는 단계가 명확해졌고 Bottom Navigation은 심플해졌다. 홈 카드·감정 메모·스플래시가 같은 팔레트로 묶이면서 토끼굴에서 시작한 감정 여정이 앱 전체로 이어져 통일감이 생겼다. SafeArea, 검색, 레시피 전환 루틴까지 직접 손보고 나니 실기기에서도 삐걱거리던 부분이 거의 사라졌다. 이제 다음은 감정 기반 챌린지를 붙여 이 UI 리듬 위에 기록 동기를 더할 차례다.

핵심 요약

  • 빈티지 아이보리 팔레트로 주요 화면의 색감을 묶고, Material 3 요소를 정돈했다.
  • Bottom Navigation과 탭 구조를 재정비해 이동 경로를 단순화했다.
  • 감정 메모·진행 메시지·종료 카피를 학습자 톤으로 다듬어 다음 행동을 유도했다.
  • SafeArea, 그림자, 타이포그래피를 조정해 화면에 자연스럽게 표시되도록 했다.
  • 실기기 테스트는 시뮬레이터에서 못보았던 노치·SafeArea 이슈를 발견하게했다.
  • 마이크로카피는 기능만큼이나 사용자의 인지와 행동에 영향을 준다.

다음 에피소드 예고

이제 UI가 정리됐으니 '기록을 계속하고 싶은 장치'를 붙일 차례다. 이어지는 이야기에서는 감정 기반 챌린지와 홈화면 추천 콘텐츠를 통해 토끼굴 성장과 일상 기록을 어떻게 연결했는지 다룬다.

다음 편에 계속...

All notes