선생님들의 경험과 이웃의 필요를 연결하는 AI 기반 돌봄 매칭 플랫폼
QR 코드를 스캔하여 모바일에서 바로 체험해보세요!
SeeNear는 시니어 세대의 경험과 이웃의 필요를 연결하는 AI 기반 돌봄 매칭 플랫폼입니다.
- 🧡 따뜻한 연결: 가까운 이웃 간의 신뢰 기반 매칭
- 🎯 AI 매칭: 위치, 경력, 선호도 기반 최적 매칭
- 💼 일자리 창출: 시니어를 위한 의미 있는 일자리 제공
- 📱 간편한 사용: 음성 인식 기반 직관적인 UI/UX
홈 화면 따뜻한 디자인의 홈 화면에서 역할을 선택합니다 |
AI 매칭 콜 화면 실시간 AI 매칭 후 전화 연결 화면 |
- ✅ 체크리스트 기반 질문 생성
- 🎤 실시간 음성 인식(STT): Whisper API를 이용한 경력 소개 녹음 및 텍스트 변환
- 🤖 AI 경력 분석: GPT-4o-mini를 활용한 맞춤형 프로필 요약 및 추천 사유 생성
- 📍 위치 기반 서비스 지역 설정
- 📝 퀵 선택 템플릿 (가정 지원, 환경 관리, 사업 보조)
- 🗺️ 지도 기반 후보자 검색
- 👥 후보자 프로필 확인 (배지, 경력, 거리)
- 📞 실시간 매칭 및 전화 연결
- 🔍 카테고리별 일자리 필터링 (전체, 가정 지원, 환경 관리, 사업 보조)
- 🤖 AI Work-Mate: 수요자의 영문 메시지를 실시간 분석·번역하여 시니어에게 큰 글씨로 안내
- 📞 Auto-TTS: 번역 결과가 나오자마지 자동으로 음성 가이드 재생 (UX 최적화)
- ⏳ 실시간 분석 애니메이션: 메시지 도착 → AI 분석 중 → 번역 완료 단계별 시각화
- 📋 AI 리포트 매니저: 업무 완료 후 실제 음성 녹음을 통해 업무 리포트 자동 생성 (Whisper/GPT 연동)
- 🔄 생성된 업무 리포트 TTS 음성 출력 및 다시 듣기 기능
- 🔄 실시간 매칭 프로세스 시각화
- 📊 위치, 경력, 선호도 기반 분석
- ✅ 최적 후보자 자동 선정
- 🎉 매칭 성공 알림
- Framework: Next.js 16.1.6 (App Router)
- Language: TypeScript 5
- Styling: Tailwind CSS 4.0
- UI Components: Lucide React Icons
- State Management: Zustand
- Map Library: Leaflet + React Leaflet
- Geocoding: OpenStreetMap Nominatim API
- Voice Recording: MediaRecorder API +
useVoiceRecorderHook - Speech-to-Text: OpenAI Whisper-1 (실시간 오디오 파일 변환)
- Large Language Model: OpenAI GPT-4o-mini (분석, 요약, 번역)
- Text-to-Speech: Web Speech API (브라우저 내장 TTS)
- Hosting: Vercel
- CI/CD: GitHub Actions (auto-deploy on push to main)
- Node.js 18.x 이상
- npm 또는 yarn
# 저장소 클론
git clone https://github.com/howl-papa/SeeNear-MVP-Deploy.git
cd seenear
# 의존성 설치
npm install
# 개발 서버 실행
npm run dev프로젝트 루트 디렉토리에 .env.local 파일을 생성하고 아래 내용을 추가하세요:
OPENAI_API_KEY=your_openai_api_key_here브라우저에서 http://localhost:3000 접속
# 프로덕션 빌드
npm run build
# 프로덕션 서버 실행
npm startseenear/
├── src/
│ ├── app/ # Next.js App Router 페이지
│ │ ├── page.tsx # 홈 페이지
│ │ ├── senior/ # 선생님 온보딩
│ │ ├── demander/ # 요청자 매칭
│ │ ├── jobs/ # 일자리 찾기
│ │ ├── matching/ # AI 매칭 프로세스
│ │ ├── layout.tsx # 전역 레이아웃 (SEO, 메타데이터)
│ │ └── globals.css # 전역 스타일
│ ├── components/ # 재사용 가능한 컴포넌트
│ │ └── voice-recorder.tsx # 음성 녹음 컴포넌트
│ ├── hooks/ # Custom React Hooks
│ │ └── use-voice-recorder.ts
│ └── lib/ # 유틸리티 및 상태 관리
│ ├── store.ts # Zustand 스토어
│ └── utils.ts # 헬퍼 함수
├── public/ # 정적 파일
│ └── icon.svg # 브랜드 아이콘
├── DEMO_GUIDE.md # 데모 가이드
└── README.md # 이 파일
- 브랜드 소개 및 역할 선택 (선생님 / 요청자)
- 반응형 디자인 (모바일 최적화)
- 체크리스트 작성 (시력, 체력, 경험 등)
- 음성으로 경력 소개 녹음
- AI 자동 요약 생성
- 프로필 저장 및 일자리 탐색
- 퀵 선택으로 요청서 작성
- 지도에서 후보자 위치 확인
- 후보자 카드 클릭하여 프로필 확인
- 매칭 요청 및 전화 연결
- 카테고리 필터 (전체, 가정 지원, 환경 관리, 사업 보조)
- 일자리 카드 (위치, 시간, 시급 표시)
- 지원하기 → 요청자 전화 수신 화면 (TTS 음성 안내)
- 전화 수락 → 일자리 확정 → 업무 시작
- AI Work-Mate 자동 시퀀스:
- 수요자 영문 메시지 도착 (1.5초)
- SeeNear AI 분석 중 애니메이션 (3.5초)
- 한국어 번역 카드 표시 + TTS 자동 음성 출력 (5.5초)
- 업무 완료 버튼 등장 (8.5초)
- 업무 완료 → AI 업무 매니저 전화: 특이사항 음성 수집
- AI 자동 업무 리포트 생성 + TTS 음성 출력
- 실시간 매칭 로그 표시
- 위치 기반 후보자 분석
- 최적 후보 선정 애니메이션
- 전화 연결 시뮬레이션
- Production URL: https://see-near-mvp-deploy.vercel.app
- 자동 배포:
main브랜치에 push 시 자동 배포 - 빌드 시간: 약 8초
- OPENAI_API_KEY: OpenAI 서비스 호출을 위해 필수적으로 설정해야 합니다. (Vercel 프로젝트 설정에서 추가)
- Primary Color: Orange (#f97316) - 따뜻함과 활력
- Typography: Geist Sans (Next.js 기본 폰트)
- Icons: Lucide React (일관된 아이콘 스타일)
- 모바일 우선: 시니어 사용자를 위한 큰 버튼과 명확한 레이아웃
- 음성 중심: 텍스트 입력 최소화, 음성 녹음 활용
- 시각적 피드백: 애니메이션과 상태 표시로 명확한 피드백
- 자연스러운 언어: 사람이 작성한 것 같은 따뜻한 문구
- ESLint: Next.js 권장 설정
- TypeScript: Strict mode
- Formatting: Prettier (자동 포맷팅)
{
"next": "16.1.6",
"react": "^19.0.0",
"typescript": "^5",
"tailwindcss": "^4.0.0",
"zustand": "^5.0.2",
"leaflet": "^1.9.4",
"lucide-react": "^0.468.0"
}Yongrak Park
- GitHub: @howl-papa
- Email: yongrak.pro@gmail.com
이 프로젝트는 EY한영-JA Growth to Professional 2026 경연대회 최우수상 수상작 입니다.
SeeNear MVP를 방문해 주셔서 감사합니다. 이웃과 함께하는 따뜻한 일자리 서비스를 만들어가겠습니다.
Made with 🧡 by GTP 2조