마주봄 1차 기획서

[yujinimda]

마주봄 — 서비스 기획서

장애인, 보호자를 위한 AI 직종 탐색 및 채용공고 적합도 판별 서비스

---

1. 서비스 개요

장애를 가진 사람, 장애인을 둔 보호자가 겪는 두 가지 문제를 해결한다.

1. 본인이 어떤 직종이 맞는지 모른다 → 특성 기반 AI 직종 매칭
2. 채용공고를 봐도 적합한 환경인지 판단할 수 없다 → 채용공고 적합도 자동 분석
   타겟 사용자는 장애인, 장애인 보호자. 기존 장애인 관련 서비스들이 본인 대상인 것과 차별화된다.

메인 색상: #4166E7

---

2. 페이지 구조

총 3개 라우트, 4개 화면 상태.

라우트	화면	조건
/	A. 검사 전 랜딩	비로그인 또는 검사 미완료
/	B. 검사 후 대시보드	로그인 + 검사 완료
/profile	C. 프로필 (뷰 전용)	로그인
/survey	D. 검사 작성 / 편집	로그인, 작성 모드: 최초 검사 시 · 편집 모드: 기존 데이터 수정 시

/survey는 하나의 페이지에서 작성 모드 ↔ 편집 모드를 버튼으로 전환한다.

---

3. 공통 요소

GNB

상태	좌측	우측
비로그인	"마주봄" 로고 → /	"로그인" 버튼
로그인	"마주봄" 로고 → /	프로필 아바타 → /profile, "다시 검사하기" → 검사 폼

푸터

• "마주봄" 로고, 문의하기
• 이용약관 → 클릭 시 모달로 약관 텍스트 표시
• 개인정보처리방침 → 클릭 시 모달로 방침 텍스트 표시
• "© 2026 마주봄. 공공데이터포털 활용 서비스"

---

4. 화면 A — 메인 (검사 전 랜딩)

진입 조건

비로그인, 또는 로그인했지만 child_profiles 레코드가 없는 경우.

목적

서비스 가치를 전달하고 검사 시작으로 전환시킨다.

구성

히어로 영역

• 메인 카피: "우리 아이에게 맞는 일, 같이 찾아볼까요?"
• 서브 카피: "자녀의 특성을 입력하면 AI가 적합한 직종과 채용공고를 찾아드려요"
• CTA: "무료로 검사 시작하기" → 검사 폼 진입
• 보조 문구: "약 3분 소요 · 회원가입 없이 체험 가능"

서비스 소개 (3항목)

항목	제목	설명
1	특성 검사	선호 활동, 신체 조건 등 간단한 항목을 편하게 선택해요
2	AI 직종 매칭	공공 데이터 기반으로 잘 맞는 직종을 3단계로 알려드려요
3	공고 적합도 판별	채용공고를 넣으면 우리 아이에게 맞는지 분석해드려요

신뢰 요소

• "한국고용정보원 · 한국장애인고용공단 공공데이터 기반" + 기관 로고
  하단 CTA 반복

• "지금 바로 우리 아이 직종 찾기" → 검사 폼 진입

---

5. 화면 D — 검사 작성 / 편집 (/survey)

진입 경로

진입	URL	모드
화면 A "검사 시작" CTA	/survey	작성 모드 (빈 폼)
GNB "다시 검사하기"	/survey?mode=edit	편집 모드 (기존 데이터 로드)
프로필 사이드 메뉴 "검사 내용 수정"	/survey?mode=edit	편집 모드 (기존 데이터 로드)

모드 전환

하나의 페이지에서 작성 모드 ↔ 편집 모드를 버튼으로 전환.

모드	폼 초기 상태	상단 표시	제출 버튼 텍스트
작성	모든 필드 비어있음	"자녀 특성 검사"	"검사 완료"
편집	child_profiles에서 기존 데이터 불러와서 채움	"검사 내용 수정"	"수정 완료"

• 편집 모드 진입 시 기존 값이 각 필드에 미리 채워진 상태
• 작성 모드에서는 편집 모드 버튼 없음 (아직 데이터가 없으므로)
• 편집 모드 상단에 "새로 작성하기" 버튼 → 작성 모드 전환 (확인 모달 후)

폼 구조

Step 1 — 기본 정보

필드	입력 타입	선택지 / 조건	필수
이름	텍스트	—	✅
만 나이	숫자	—	✅
성별	단일 선택	남성 / 여성	✅
최종학력	단일 선택	특수학교 초등부 / 특수학교 중등부 / 특수학교 고등부 졸업 / 일반학교 졸업 / 전공과 수료 / 기타	✅
희망 지역 1순위	2단 연동 선택	시·도 → 구·군	✅
희망 지역 2순위	2단 연동 선택	시·도 → 구·군	❌
이동 경로 베리어 프리	true/false	—	✅

Step 2 — 신체 조건

필드	입력 타입	선택지	필수
장애 유형	단일 선택	지적장애 / 자폐성장애 / 기타 발달장애	✅
장애 등급	단일 선택	경도 / 중등도 / 중도 / 모르겠어요	✅
이동	단일 선택	자유로움 / 보조기구 사용 / 휠체어 사용	✅
손 사용	단일 선택	세밀한 작업 가능 / 큰 동작만 가능 / 어려움	✅
체력	단일 선택	4시간 이상 활동 가능 / 2~4시간 / 2시간 미만	✅
의사소통 — 말하기	단일 선택	일상 대화 가능 / 짧은 문장 가능 / 단어 수준 / 비언어적 소통	✅
의사소통 — 지시 이해	단일 선택	복잡한 지시 이해 / 2단계 지시 이해 / 단순 지시만 가능 / 시범 보여주면 가능	✅

Step 3 — 희망 활동 유형

필드	입력 타입	선택지	필수
희망 활동	복수 선택 (최소 1개)	같은 일 반복하기 / 손으로 만들기 / 물건 정리·분류 / 몸 움직이기 / 컴퓨터·기기 다루기 / 동식물 돌보기 / 청소·세탁 등 환경 관리 / 기타	✅
기타 내용	텍스트	"기타" 선택 시에만 노출	조건부

제출 동작

작성 모드

1. child_profiles 신규 생성
2. 입력값 벡터화 → pgvector 저장
3. AI 직종 매칭 결과 생성

편집 모드

1. 유효성 검증 (작성 모드와 동일한 필수값 규칙)
2. child_profiles 업데이트
3. 벡터 재생성 → pgvector 업데이트
4. AI 매칭 결과 재생성
5. /profile (화면 C)로 이동 + 성공 토스트

이탈 방지

• 폼에 입력값이 있는 상태에서 페이지 떠나기 시도 → "작성 중인 내용이 사라집니다. 나가시겠습니까?" 확인

---

6. 화면 B — 메인 (검사 후 대시보드)

진입 조건

로그인 + child_profiles 레코드 존재.

목적

검사 결과 요약을 보여주고, 맞춤 채용공고를 탐색하게 한다.

구성

검사 결과 요약

성향 요약

• 제목: "{자녀 이름}님의 직업 성향"
• 레이더 차트 (5축): 반복 작업 선호 / 대인관계 / 신체 활동 / 세밀한 손작업 / 환경 민감도
• AI가 생성한 한 줄 요약 (예: "반복적이고 조용한 환경에서 손작업에 집중할 때 가장 편안해요")
  매칭 직종 TOP 3

각 항목에 포함되는 정보:

• 적합도 라벨: "잘 맞아요" / "도전해볼 수 있어요" / "힘들 수 있어요"
• 직종명
• 매칭률 (%)
• 클릭 → 직종 상세 (MVP 이후 확장)

필터

필터	종류	선택지
적합도	단일 선택	전체 / 잘 맞아요 / 도전해볼 수 있어요
근무 형태	단일 선택	전체 / 온라인 / 오프라인
지역	단일 선택	전체 / (유저 희망 지역 1순위) / (유저 희망 지역 2순위)

기본값: 모두 "전체".

맞춤 채용공고 목록 (무한스크롤)

섹션 제목: "{자녀 이름}님에게 맞는 채용공고"

카드 1개에 표시되는 정보:

정보	데이터 소스
회사 로고	공고 데이터 (없으면 placeholder)
북마크 토글	유저 액션 → bookmarks 테이블
적합도 라벨	AI 매칭 결과
근무 형태	공고 데이터 ("온라인" / "오프라인" / "온·오프라인")
지역	공고 데이터
공고 제목	공고 데이터 (1줄 말줄임)
회사명	공고 데이터
급여	공고 데이터
마감일	공고 데이터
조회수	공고 데이터
매칭 포인트 요약	AI 분석 (예: "조용한 사무 환경 · 반복 업무 중심") — 1줄 말줄임

카드 클릭 → 공고 상세 (MVP 이후 확장, 또는 외부 링크)

스크롤 로딩: 하단 도달 시 스켈레톤 카드 표시 후 다음 페이지 로드.

---

7. 화면 C — 프로필 (뷰 모드)

레이아웃

좌측 사이드 메뉴 + 우측 콘텐츠 영역.
모바일: 사이드 메뉴 → 상단 탭 전환.

사이드 메뉴

메뉴	동작
내 검사 결과 (기본 활성)	검사 결과 표시
스크랩한 공고	북마크한 공고 목록
검사 내용 수정	/survey?mode=edit로 이동
회원 탈퇴	탈퇴 확인 모달 → 탈퇴 처리 → 화면 A로 이동

이용약관, 개인정보처리방침은 푸터 링크 → 모달로 이동.
휴면계정정책, 회원 탈퇴는 2차 유지보수 기간에 구현.

---

탭: 내 검사 결과

프로필 헤더

• "{자녀 이름}님의 자녀 프로필"
• 마지막 검사일
  기본 정보 (읽기 전용)

표시 항목: 이름, 나이, 성별, 학력, 희망 지역 1순위, 희망 지역 2순위

신체 조건 (읽기 전용)

표시 항목: 장애 유형, 장애 등급, 이동, 손 사용, 체력, 말하기, 지시 이해

희망 활동 유형 (읽기 전용)

선택된 항목을 태그로 나열.

AI 성향 분석 결과

• 레이더 차트 (화면 B와 동일)
• AI 요약 텍스트
• 매칭 직종 TOP 3

---

탭: 스크랩한 공고

• 제목 + 총 개수
• 화면 B의 공고 카드와 동일한 형태
• 북마크 클릭 → 즉시 해제 + undo 토스트
• 빈 상태: "아직 스크랩한 공고가 없어요" + "맞춤 공고 보러가기" → / 이동

---

푸터 모달: 이용약관 / 개인정보처리방침

• 푸터 링크 클릭 시 모달로 표시
• 정책 제목 + 시행일
• 조항별 소제목으로 구분된 본문 텍스트
• 모달 내 스크롤 가능

---

8. 사용자 플로우 요약

[첫 방문]
  → 화면 A (랜딩)
  → "검사 시작" 클릭
  → 화면 D (/survey, 작성 모드)
  → 검사 폼 입력 → 제출
  → 화면 B (대시보드)
 
[재방문 — 로그인 상태]
  → 화면 B (대시보드)
  → 공고 카드 탐색 / 북마크
 
[검사 수정]
  → 화면 C (프로필) → 사이드 메뉴 "검사 내용 수정"
  → 화면 D (/survey?mode=edit, 편집 모드)
  → 수정 → 제출
  → 화면 C (프로필)
 
[스크랩 확인]
  → 화면 C → "스크랩한 공고" 탭 → 목록 확인
 
[회원 탈퇴]
  → 화면 C → "회원 탈퇴" → 확인 모달 → 탈퇴 → 화면 A

---

외부 API (확정아님)

API	용도	호출 시점
워크넷 직업정보 API	직업별 수행 환경 데이터	주기적 배치 → DB 적재
직무데이터사전 API	직종별 필요 지식·기술·태도	주기적 배치 → DB 적재
장애인고용공단 직업훈련 정보	발달장애인 직종별 취업률	주기적 배치 → DB 적재
AI API	성향 분석, 공고 환경 추출, 매칭 설명 생성	검사 완료 시, 공고 분석 시

---

10. 기술 스택

영역	기술
Frontend	Next.js (App Router), TypeScript, TailwindCSS , zod, recharts
API 호출	TanStack Query
AI	AI API
DB	Supabase (PostgreSQL + pgvector) 라이브러리 없이
배포	Vercel

리액트 훅 폼 사용 X,

[aahreum]

/survey 에도 로그인 조건 필요할 것 같아요!

[yujinimda]

수정완료

[yujinimda]

| Frontend | Next.js (App Router), TypeScript, TailwindCSS, react hook form, zod|

[chldntjr1321]

5. 화면D -> 다시 검사하기를 동일하게 edit 경로로 두는건가요??

[chldntjr1321]

-> 검사 초기화 버튼 두기

[aahreum]

혹시 여기서 왜 4번 동작이 일어나야 하나요???

[yujinimda]

수정완료

[chldntjr1321]

8. 사용자 흐름

• 검사 시작 전 로그인 안되어있으면 로그인 화면 리다이렉트?? (검사하려면 로그인해야하므로)