00010. [APP-00002] 사진 기반 식물/동물 인식 앱 개발기 #1

#1. 아이디어와 기획 배경

언제 어디서나 길을 걷다 보면 "이 꽃 이름이 뭐지?", "이 나무는 어떤 종류일까?" 하는 궁금증이 들 때가 많다. 마찬가지로 산책 중에 만난 동물이 어떤 종류인지 바로 알고 싶을 때도 있다. 이런 일상 속 궁금증을 해결해주는 사진 기반 식물/동물 인식 앱을 만들고자 한다.

🎯 핵심 기능

• 이미지 업로드 기반 인식: 사진을 찍거나 업로드하면 AI가 해당 식물/동물의 이름과 정보를 추측.
• 실시간 카메라 인식 (추후 기능): 카메라를 켜두면 자동으로 인식 결과를 보여줌.
• API 연동 기반 분석: Plant.id, Clarifai 등의 외부 AI API를 통해 정확한 식별 결과 제공.
• 간단한 도감 저장: 사용자가 인식한 생물들을 도감처럼 저장해두고 다시 볼 수 있음.

🛠️ 개발 환경

• 개발 프레임워크: Flutter (iOS/Android 동시 개발 대응)
• 언어: Dart
• AI 모델/API: Plant.id API, Clarifai API (비용과 정확도 고려 후 선택)

✨ 예상 유용성

• 자연을 좋아하는 사람들에게 좋은 반응 예상
• 아이들과 함께하는 야외 활동에서 유용
• 교육용 앱으로도 확장 가능

---

#2. Flutter 프로젝트 세팅 및 기본 UI 구성

이번 시간에는 실제로 개발을 시작해보자.

📌 대상자: Flutter를 처음 접해보는 사람도 따라할 수 있게 쉽게 설명합니다.

✅ 준비물

항목설명

Flutter SDK	https://flutter.dev/docs/get-started/install
Android Studio	Flutter 개발 시 가장 많이 쓰이는 도구. (iOS도 Xcode로 가능)
VS Code	코드 편집기로 경량화된 Flutter 개발도 가능
Android Emulator or Physical Device	앱 실행 및 테스트 용도

🔧 1단계: Flutter 프로젝트 생성

터미널 또는 Android Studio에서 다음 명령어 실행:

flutter create app_00002_plant_detector

디렉토리로 이동:

cd app_00002_plant_detector

🗂️ 2단계: 폴더 구조 설계

초보자도 보기 쉽게 디렉토리를 나눠줄 거야.

/lib
  ├── main.dart              # 앱 진입점
  ├── screens/               # 각 화면별 위젯 파일들
  │     └── home_screen.dart
  ├── widgets/               # 공통 위젯들
  └── services/              # API 호출 관련 코드

🎨 3단계: 기본 UI 틀 만들기

lib/main.dart

import 'package:flutter/material.dart';
import 'screens/home_screen.dart';

void main() {
  runApp(const PlantDetectorApp());
}

class PlantDetectorApp extends StatelessWidget {
  const PlantDetectorApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Plant Detector',
      theme: ThemeData(
        primarySwatch: Colors.green,
        useMaterial3: true,
      ),
      home: const HomeScreen(),
    );
  }
}

lib/screens/home_screen.dart

import 'package:flutter/material.dart';

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('사진 기반 식물/동물 인식'),
        centerTitle: true,
      ),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            const Text('이미지를 선택해주세요.'),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                // 이미지 선택 기능 구현 예정
              },
              child: const Text('갤러리에서 이미지 선택'),
            ),
          ],
        ),
      ),
    );
  }
}

✅ 결과 화면 미리보기 (기획)

• 간단한 화면: 타이틀 + 버튼 1개
• 향후 기능 확장: 이미지 표시, 인식 결과 출력 등

---

다음 에피소드 예고

#3. 이미지 선택 및 표시 구현하기

• 갤러리 접근 권한 처리
• 이미지 가져오기 및 화면에 표시
• image_picker 패키지 사용법