Figma → Flutter → Firebase 제작 구성예시

Figma → Flutter → Firebase를 순서대로 따라 하시면 실제 어플 개발이 가능합니다.

---

✅ 1. Figma 템플릿 구성 예시

아래는 병원 예약 앱을 위한 Figma 설계 기본 구조입니다.

📱 앱 구조 예시 (Figma에서 그릴 화면 순서)

1. 시작 화면 (Splash)
2. 로그인 / 회원가입 화면
3. 메인 홈화면 (검색창, 필터 버튼, 병원 목록)
4. 병원 상세 페이지
   - 병원 이름, 설명, 장단점, 지도, 후기
   - [예약하기] 버튼
5. 예약 화면 (날짜 선택, 시간 선택)
6. 마이페이지 (내 예약 내역, 즐겨찾기 병원)

💡 Figma 사용 팁:

• 텍스트 스타일: Pretendard, 14~18pt
• 컴포넌트화: 버튼, 카드 등은 재사용 가능하게 설정
• Auto Layout을 활용해 반응형 UI 설계

---

✅ 2. Flutter 기본 구조 예시 (main.dart)

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '도수치료 병원 예약앱',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: HomeScreen(), // 홈화면으로 이동
    );
  }
}

📁 폴더 구조 예시:

lib/
├── main.dart
├── screens/
│   ├── home_screen.dart
│   ├── detail_screen.dart
│   └── reservation_screen.dart
├── models/
│   └── hospital_model.dart
├── services/
│   └── firebase_service.dart

---

✅ 3. Firebase 연동 샘플 코드

① Firebase 설치 & 초기화

# pubspec.yaml에 추가
dependencies:
  firebase_core: ^2.0.0
  cloud_firestore: ^4.0.0

// main.dart 상단
import 'package:firebase_core/firebase_core.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}

---

② 병원 리스트 불러오기 (Firestore)

import 'package:cloud_firestore/cloud_firestore.dart';

class FirebaseService {
  final FirebaseFirestore _firestore = FirebaseFirestore.instance;

  Future<List<Map<String, dynamic>>> getHospitals() async {
    final snapshot = await _firestore.collection('hospitals').get();
    return snapshot.docs.map((doc) => doc.data()).toList();
  }
}

---

③ 예약 데이터 저장하기

Future<void> makeReservation(String userId, String hospitalId, DateTime date) async {
  await FirebaseFirestore.instance.collection('reservations').add({
    'userId': userId,
    'hospitalId': hospitalId,
    'date': date.toIso8601String(),
    'createdAt': FieldValue.serverTimestamp(),
  });
}

---

✅ Firebase Firestore 데이터 구조 예시

Collection: hospitals

{
  "name": "서울정형외과",
  "location": "강남역 5번 출구",
  "specialty": "도수치료",
  "advantages": ["전문 치료사", "야간 진료"],
  "disadvantages": ["주차 협소"],
  "stars": 4.6,
  "hasWomenTherapist": true
}

---

✅ 추가 팁

• Firebase Auth → Google 로그인, 이메일 로그인 구현
• Firebase Hosting → 앱 설명 웹페이지도 만들 수 있음
• Push 알림 → firebase_messaging 패키지 사용

---

완성도 높은 어플 만드는 과정 – 비전공자도 가능한 A to Z

완성도 높은 어플 만드는 과정 – 비전공자도 가능한 A to Z