Today I Learned 18회차(3) - Flutter 레시피 앱 만들어보기

오늘은 Flutter로 레시피 앱 UI를 구현하면서 이미지 비율 조정과 모서리 둥글게 만들기를 배워보았습니다. AspectRatio와 ClipRRect 위젯의 활용법을 익혔어요!

🎯 학습 목표

• 레이아웃을 컴포넌트 단위로 나누는 방법 학습
• AppBar의 구조와 구성요소 이해
• AspectRatio로 이미지 비율 제어하기
• ClipRRect로 이미지 모서리 둥글게 만들기

📚 학습 내용

1. 레이아웃 나누기

효율적인 UI 구성을 위해 각 요소를 컴포넌트화하여 관리합니다.

레이아웃 구조

Scaffold
  ├─ AppBar (상단 바)
  │   ├─ leading (왼쪽 영역)
  │   ├─ title (중앙 제목)
  │   └─ actions (오른쪽 액션 버튼들)
  └─ body (본문 콘텐츠)
      ├─ RecipeCard (레시피 카드 1)
      ├─ RecipeCard (레시피 카드 2)
      └─ ...

2. AppBar 위젯

AppBar는 Material Design의 상단 앱 바를 구현하는 위젯입니다.

AppBar의 주요 영역

영역	설명
leading	왼쪽 영역 (보통 메뉴 아이콘이나 뒤로가기 버튼)
title	중앙 제목 영역
actions	오른쪽 액션 버튼들 (리스트로 여러 개 가능)
flexibleSpace	AppBar 내부의 커스텀 공간
bottom	AppBar 하단에 탭바 등을 배치

주요 속성

속성	설명
backgroundColor	배경색
elevation	그림자 높이
centerTitle	제목 중앙 정렬 여부
toolbarHeight	AppBar 높이

3. AspectRatio로 이미지 비율 정하기

AspectRatio는 특정 종횡비로 자식 위젯의 크기를 조정하는 위젯입니다.

AspectRatio의 동작 원리

기본 개념

• 레이아웃 제약에서 허용하는 가장 큰 너비를 먼저 결정
• 주어진 크기(부모 위젯으로부터 받은 크기)에 의해 width 결정
• 정해진 width에 맞춰서 가로세로 비율을 적용하여 세로의 길이 결정

예시

화면 크기: 300 x 600
AspectRatio(aspectRatio: 2/1)를 적용하면?
  → 너비: 300 (부모로부터 받은 최대 너비)
  → 비율: 2:1
  → 높이: 300 ÷ 2 = 150

간단한 이해

• 비율의 값을 가로:세로 비율로 준다고 생각
• 2:1 비율로 하고 싶으면 aspectRatio: 2/1
• 16:9 비율로 하고 싶으면 aspectRatio: 16/9
• 1:1 비율(정사각형)로 하고 싶으면 aspectRatio: 1/1

4. ClipRRect 위젯으로 이미지 모서리에 곡선 주기

ClipRRect는 둥근 사각형을 사용하여 자식을 자르는(clip) 위젯입니다.

ClipRRect 이름의 의미

• Clip: (가위 같은 것으로) 자르다, 깎다
• R: 둥근(Rounded)의 약자
• Rect: 직사각형(Rectangle)

영어를 잘하면 개발할 때 편하다고들 하는 이유가 바로 이것입니다! 이름만 봐도 용도를 유추할 수 있거든요.

주요 사용처

• 이미지 모서리를 둥글게 만들 때 주로 사용
• Container는 decoration에서 borderRadius로 수정할 수 있지만, Image 위젯은 ClipRRect로 감싸야 함

주요 속성

속성	설명
borderRadius	모서리의 둥근 정도 설정
child	자르고 싶은 자식 위젯

💻 구현 예시 코드

AspectRatio 사용 예시

AspectRatio(
  aspectRatio: 16 / 9,  // 16:9 비율
  child: Image.asset(
    'assets/recipe_image.jpg',
    fit: BoxFit.cover,
  ),
)

ClipRRect 사용 예시

ClipRRect(
  borderRadius: BorderRadius.circular(12.0),  // 12픽셀 둥근 모서리
  child: Image.asset(
    'assets/recipe_image.jpg',
    fit: BoxFit.cover,
  ),
)

AspectRatio + ClipRRect 조합

AspectRatio(
  aspectRatio: 16 / 9,
  child: ClipRRect(
    borderRadius: BorderRadius.circular(12.0),
    child: Image.asset(
      'assets/recipe_image.jpg',
      fit: BoxFit.cover,
    ),
  ),
)

💡 핵심 개념 정리

AppBar 구조

AppBar
  ├─ leading (왼쪽)
  ├─ title (중앙)
  ├─ actions (오른쪽) [IconButton, IconButton, ...]
  ├─ flexibleSpace (커스텀 영역)
  └─ bottom (하단, 보통 TabBar)

AspectRatio 계산 흐름

부모 위젯 크기 확인
  ↓
최대 너비 결정
  ↓
aspectRatio 값 적용
  ↓
높이 자동 계산
  ↓
자식 위젯에 크기 전달

ClipRRect의 활용

이미지 위젯 (모서리 직각)
  ↓
ClipRRect로 감싸기
  ↓
borderRadius 설정
  ↓
둥근 모서리의 이미지 완성

위젯 조합 패턴

AspectRatio (비율 고정)
  └─ ClipRRect (모서리 둥글게)
      └─ Image (실제 이미지)

🚀 다음 학습 목표

1. Card 위젯: Material Design 카드 UI 구현
2. ListView: 스크롤 가능한 레시피 목록 만들기
3. 상세 화면: 레시피 상세 정보 페이지 구현