안심 (Ansim) - 개인 맞춤형 재난 대비 정보 플랫폼

프로젝트 개요

안심(Ansim)은 개인의 특성에 맞는 맞춤형 재난 대비 정보를 제공하는 웹 애플리케이션입니다. 사용자의 신체적 특성, 가족 상황, 의료 정보 등을 고려하여 개인화된 비상가방 준비물과 대피 지침을 제공합니다.

주요 기능

1. 재난 유형 선택

• 지진, 홍수, 화재, 태풍, 폭염 등 다양한 재난 유형 지원
• 직관적인 아이콘과 설명으로 쉬운 선택

2. 개인 특성 입력

• 신체적 특성: 안경 착용, 임신, 보행 어려움, 고령자, 청각/시각 장애 등
• 가족 및 반려동물: 미성년 자녀, 반려동물 보유 여부
• 의료 정보: 만성질환, 정기 복용 약물
• 기타 정보: 거주 지역, 자동차 보유, 비상연락처 등

3. 맞춤형 정보 제공

• 비상가방 준비물: 72시간용 필수품, 의료용품, 개인용품, 반려동물용품 등
• 대피 지침: 개인 특성에 맞는 구체적인 대피 방법
• 추가 주의사항: 특별한 상황에 대한 안전 수칙

4. 사용자 친화적 인터페이스

• 3단계 간단한 프로세스
• 고령자 친화적 큰 글씨와 버튼
• 모던하고 깔끔한 디자인 (NYC 지하철 디자인 영감)
• 반응형 웹 디자인

기술 스택

• Frontend: React 18 + TypeScript
• Build Tool: Vite
• Styling: CSS3 (Custom CSS)
• Icons: Lucide React
• Development: ESLint, TypeScript

설치 및 실행

필요 조건

• Node.js 16.0 이상
• npm 또는 yarn

설치

npm install

개발 서버 실행

npm run dev

애플리케이션이 http://localhost:3000에서 실행됩니다.

빌드

npm run build

프로젝트 구조

src/
├── components/          # React 컴포넌트
│   ├── DisasterSelection.tsx
│   ├── PersonalCharacteristicsForm.tsx
│   └── ResultsDisplay.tsx
├── data.ts             # 재난 유형 및 준비물 데이터
├── recommendationEngine.ts  # 맞춤형 추천 로직
├── types.ts            # TypeScript 타입 정의
├── App.tsx             # 메인 애플리케이션
├── main.tsx            # 애플리케이션 진입점
└── index.css           # 전역 스타일

사용 방법

1. 재난 유형 선택: 홈페이지에서 대비하고 싶은 재난 유형을 선택합니다.
2. 개인 특성 입력: 신체적 특성, 가족 상황, 의료 정보 등을 입력합니다.
3. 맞춤형 정보 확인: 개인에 맞는 비상가방 준비물과 대피 지침을 확인합니다.
4. 정보 저장/인쇄: 결과를 다운로드하거나 인쇄하여 보관할 수 있습니다.

주요 특징

개인화된 추천 시스템

• 사용자의 개인 특성에 따라 필요한 준비물과 지침을 동적으로 생성
• 우선순위별로 정리된 준비물 목록
• 특수 상황에 대한 맞춤형 안전 수칙

접근성 고려

• 고령자 친화적 UI/UX
• 큰 글씨와 버튼
• 명확한 시각적 피드백
• 직관적인 네비게이션

현실적인 준비물

• 72시간 생존에 필요한 실제적인 준비물
• 한국 상황에 맞는 재난 유형
• 의료용품, 반려동물용품 등 세분화된 카테고리

향후 개발 계획

• 다국어 지원 (영어, 중국어 등)
• 지역별 특화 정보 (지역 대피소, 특별한 위험 요소)
• 모바일 앱 개발
• 정기적인 재난 대비 알림 기능
• 가족 구성원별 개별 프로필 관리
• 재난 상황별 실시간 정보 연동

라이선스

이 프로젝트는 MIT 라이선스 하에 배포됩니다.

기여하기

버그 리포트, 기능 제안, 풀 리퀘스트를 환영합니다. 이슈를 생성하거나 기여하고 싶은 내용을 논의해 주세요.

---

안심(Ansim) - 모든 사람이 안전하게 재난에 대비할 수 있도록 돕는 플랫폼

이 프로토타입은 Cursor로 제작 되었습니다.