이미지 첨부 기능 — 사진과 함께 기억하기

메모는 텍스트로만 존재할 필요는 없다.
때로는 사진 한 장이 글보다 더 많은 이야기를 담는다.

이번 글에서는 Flutter 메모 앱에 사진 첨부 기능을 구현하여 텍스트 + 이미지 기반의 풍부한 메모를 만들어보자.

---

📷 필요한 패키지 설치

// pubspec.yaml
dependencies:
  image_picker: ^1.0.7
  path_provider: ^2.1.2

image_picker는 사진을 갤러리/카메라에서 선택하거나 찍는 데 사용된다.

---

🖼️ 이미지 선택 함수 만들기

Future<String?> pickImage() async {
  final picker = ImagePicker();
  final image = await picker.pickImage(source: ImageSource.gallery);

  if (image != null) {
    return image.path;
  }
  return null;
}

갤러리에서 이미지를 선택하면 해당 파일 경로를 반환하고, 추후 메모와 함께 저장할 수 있다.

---

📦 메모 모델에 이미지 필드 추가

class Memo {
  final int? id;
  final String content;
  final String? imagePath;

  Memo({this.id, required this.content, this.imagePath});
}

이미지 파일은 앱 외부로 업로드하지 않고, 단순히 로컬 파일 경로로 연결해두는 방식으로 처리한다.

---

📱 메모 작성 화면에 이미지 첨부 UI

String? _selectedImagePath;

ElevatedButton.icon(
  onPressed: () async {
    final path = await pickImage();
    if (path != null) {
      setState(() {
        _selectedImagePath = path;
      });
    }
  },
  icon: Icon(Icons.image),
  label: Text("사진 첨부"),
)

if (_selectedImagePath != null)
  Padding(
    padding: const EdgeInsets.only(top: 12),
    child: ClipRRect(
      borderRadius: BorderRadius.circular(12),
      child: Image.file(File(_selectedImagePath!)),
    ),
  )

이미지 선택 버튼을 누르면 미리보기를 제공하여 사용자가 어떤 이미지를 첨부했는지 확인할 수 있도록 한다.

---

📖 메모 상세 보기에서 이미지 보여주기

if (memo.imagePath != null)
  ClipRRect(
    borderRadius: BorderRadius.circular(12),
    child: Image.file(File(memo.imagePath!)),
  ),

텍스트와 이미지가 조화롭게 어우러진 상세 페이지는 메모 앱의 감성을 크게 끌어올린다.

---

📌 UX 팁

• 여러 장 첨부 기능으로 확장 가능 (List<String> 이미지 경로)
• 저장 시 이미지가 삭제되지 않도록 앱 전용 디렉토리로 복사 고려
• 이미지 용량 줄이기: image/image.dart로 리사이징 처리

---

🧘 마무리하며

사진이 담고 있는 감정과 기억은 글보다 더 생생하다.
Flutter 메모 앱에 이미지 첨부 기능을 더한다면,
당신의 하루는 더 깊고 선명하게 기록될 것이다.

기억은 흐려져도, 사진은 남는다.

✍️ 이 글은 터미널 밖으로 나온 개발자의 Flutter 메모 앱 만들기 여정입니다.