Flask와 Vue.js 기반 스마트养老 서비스 시스템 구현 가이드

기술 스택 선택 및 아키텍처 설계

본 시스템은 Flask를 메인 백엔드 프레임워크로 활용하고, Vue.js로 프론트엔드를 구축하는 구조로 설계되었다. 개발 환경으로는 PyCharm을 사용하며, 필요에 따라 Django를 확장형 관리 백엔드로 활용할 수 있다.

시스템 구성 요소

  • 백엔드: Flask (RESTful API 제공)
  • 프론트엔드: Vue.js (반응형 SPA)
  • 개발도구: PyCharm Community/Professional
  • 데이터베이스: MySQL 또는 PostgreSQL
  • 확장옵션: Django Admin (관리자 페이지)

핵심 기능 모듈 설계

1. 사용자 관리 모듈

노인/가족/관리자의 3단계 사용자 권한 체계를 구현한다.

2. 건강 모니터링 모듈

IoT 기기(심박수, 혈압 등) 연동을 통한 실시간 건강 데이터 수집 시스템이다.

3. 긴급 호출 모듈

SOS 버튼 연동으로 응급 상황 발생 시 즉각적인 알림 및 대응 체계를 구축한다.

4. 서비스 예약 모듈

청소, 의료护理 등 다양한 서비스의 온라인 예약 기능을 제공한다.

5. 데이터 시각화 모듈

Vue.js와 ECharts를 활용하여 건강 데이터 및 서비스 이용 현황을 시각화한다.

개발 환경 구축

  1. Python 3.8 이상 설치
  2. Node.js 및 npm 설치
  3. PyCharm에서 Flask 프로젝트 생성
  4. Vue CLI로 프론트엔드 프로젝트 초기화
  5. MySQL/PostgreSQL 데이터베이스 연결 설정

API 인터페이스 설계

JWT 토큰 기반 인증을 채택하며, 표준화된 응답 형식을 사용한다.

{
  "status": 200,
  "payload": {},
  "description": "success"
}

백엔드 구현 예제

Flask 기반의 노인 정보 조회 API 구현 코드이다.

from flask import Flask, jsonify, request
from flask_jwt_extended import JWTManager, jwt_required, create_access_token

application = Flask(__name__)
application.config['SECRET_KEY'] = 'secure-key-2024'
jwt = JWTManager(application)

# 노인 정보 데이터 (테스트용)
resident_info = {
    "id": 1,
    "name": "홍길동",
    "age": 78,
    "health_condition": "양호",
    "room_number": "301"
}

@application.route('/api/residents', methods=['GET'])
@jwt_required()
def fetch_resident_data():
    """노인 정보 조회 엔드포인트"""
    return jsonify({
        "status": 200,
        "payload": resident_info,
        "description": "데이터 조회 성공"
    })

@application.route('/api/auth/login', methods=['POST'])
def authenticate():
    """인증 엔드포인트"""
    credentials = request.get_json()
    access_token = create_access_token(identity=credentials.get('username'))
    return jsonify({"access_token": access_token}), 200

if __name__ == '__main__':
    application.run(host='0.0.0.0', port=5000, debug=True)

데이터베이스 모델 설계

from flask_sqlalchemy import SQLAlchemy
from flask_migrate import Migrate

db = SQLAlchemy()
migrate = Migrate()

class Resident(db.Model):
    """노인 정보 테이블"""
    __tablename__ = 'residents'
    
    id = db.Column(db.Integer, primary_key=True)
    name = db.Column(db.String(100), nullable=False)
    birth_date = db.Column(db.Date)
    health_condition = db.Column(db.String(200))
    admission_date = db.Column(db.DateTime, default=datetime.utcnow)
    assigned_room = db.Column(db.String(20))
    
    # 관계 설정
    emergency_contacts = db.relationship('EmergencyContact', backref='resident', lazy=True)
    health_records = db.relationship('HealthRecord', backref='resident', lazy=True)

class EmergencyContact(db.Model):
    """긴급 연락처 테이블"""
    __tablename__ = 'emergency_contacts'
    
    id = db.Column(db.Integer, primary_key=True)
    resident_id = db.Column(db.Integer, db.ForeignKey('residents.id'), nullable=False)
    contact_name = db.Column(db.String(100))
    phone_number = db.Column(db.String(20))
    relationship = db.Column(db.String(50))

class HealthRecord(db.Model):
    """건강 기록 테이블"""
    __tablename__ = 'health_records'
    
    id = db.Column(db.Integer, primary_key=True)
    resident_id = db.Column(db.Integer, db.ForeignKey('residents.id'), nullable=False)
    recorded_at = db.Column(db.DateTime, default=datetime.utcnow)
    heart_rate = db.Column(db.Integer)
    blood_pressure_systolic = db.Column(db.Integer)
    blood_pressure_diastolic = db.Column(db.Integer)
    temperature = db.Column(db.Float)

프론트엔드 Vue 컴포넌트

노인 정보 카드 컴포넌트 구현 예제이다.

<template>
  <div class="resident-profile">
    <div class="profile-header">
      <h2>{{ resident.name }}</h2>
      <span class="room-badge">{{ resident.assignedRoom }}호</span>
    </div>
    
    <div class="health-info">
      <health-monitor :healthData="resident.healthCondition"/>
    </div>
    
    <button @click="toggleDetails" class="details-btn">
      {{ showDetails ? '상세 정보 접기' : '상세 정보 보기' }}
    </button>
    
    <div v-if="showDetails" class="extended-info">
      <p>입소일: {{ resident.admissionDate }}</p>
      <emergency-contact-list :contacts="resident.emergencyContacts"/>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ResidentCard',
  props: {
    resident: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      showDetails: false
    }
  },
  methods: {
    toggleDetails() {
      this.showDetails = !this.showDetails;
    }
  }
}
</script>

<style scoped>
.resident-profile {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 16px;
  background: #ffffff;
}

.profile-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.room-badge {
  background: #4CAF50;
  color: white;
  padding: 4px 12px;
  border-radius: 16px;
  font-size: 14px;
}
</style>

테스트 전략

  • 단위 테스트: pytest 프레임워크 활용
  • API 테스트: Postman 또는 Insomnia 활용
  • 프론트엔드 테스트: Jest + Vue Test Utils
  • 부하 테스트: Locust 도구 활용

배포 아키텍처

  • 웹 서버: Nginx (리버스 프록시)
  • 애플리케이션 서버: Gunicorn
  • 컨테이너화: Docker 활용
  • CI/CD: GitHub Actions 또는 GitLab CI

확장성 설계

  • Django Admin 인터페이스 연동 가능
  • 마이크로서비스 아키텍처로의 전환 지원
  • 微信小程序 및 모바일 앱 연동을 위한 API 노출

태그: flask Vue.js python rest-api jwt

6월 3일 21:21에 게시됨

인기 태그

©2026 괴물 클럽