마주봄 기획서 v2

[aahreum]

마주봄 — 서비스 기획서 v2

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

---

1. 서비스 개요

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

1. 본인이 어떤 직종이 맞는지 모른다 → 특성 기반 AI 직종 매칭
2. 채용공고를 봐도 적합한 환경인지 판단할 수 없다 → 채용공고 적합도 자동 분석

타겟 사용자는 장애인, 장애인 보호자. 기존 장애인 관련 서비스들이 본인 대상인 것과 차별화된다.

메인 색상: #4166E7

---

2. 페이지 구조

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

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

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

---

3. 공통 요소

GNB

상태	좌측	우측
비로그인	"마주봄" 로고 → /	"테스트 계정으로 로그인" (ghost) + "로그인" (카카오) 버튼
테스트 계정 로그인	"마주봄" 로고 → /	프로필 아이콘 → /profile + "테스트 계정 로그아웃" 버튼
실제 로그인	"마주봄" 로고 → /	프로필 아이콘 → /profile + "로그아웃" 버튼

푸터

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

---

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

진입 조건

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

목적

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

구성

히어로 영역

• 메인 카피: "나에게 맞는 일, 함께 찾아볼까요?"
• 서브 카피: "개인의 특성을 바탕으로 AI가 적합한 직종과 채용공고를 분석해드려요"
• CTA: "내게 맞는 일 찾아보기" → 검사 폼 진입
• 보조 문구: "3분이면 충분해요 · 바로 결과 확인 가능"

서비스 소개 (3항목)

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

---

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

진입 경로

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

모드 전환

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

폼 구조

Step 1 — 기본 정보

필드	입력 타입	선택지 / 조건	필수
이름	텍스트	—	✅
성별	단일 선택	남성 / 여성	✅
최종학력	단일 선택	특수학교 초등부 / 특수학교 중등부 / 특수학교 고등부 졸업 / 일반학교 졸업 / 전공과 수료 / 기타	✅
희망 지역	단일 선택	시·도 선택	✅

Step 2 — 신체 조건 + 희망 활동

필드	입력 타입	선택지	필수
장애 유형	복수 선택 (1개 이상)	시각장애 / 청각장애 / 지체장애 / 언어장애 / 안면장애 / 지적장애 / 자폐성장애 / 기타	✅
기타 장애 내용	텍스트	"기타" 선택 시만 노출	조건부
장애 등급	단일 선택	장애의 정도가 심함 / 장애의 정도가 심하지 않음 / 모르겠어요	✅
이동	단일 선택	자유로움 / 보조기구 사용 / 휠체어 사용	✅
손 사용	단일 선택	세밀한 작업 가능 / 큰 동작만 가능 / 어려움	✅
체력	단일 선택	4시간 이상 활동 가능 / 2~4시간 / 2시간 미만	✅
의사소통 — 말하기	단일 선택	일상 대화 가능 / 짧은 문장 가능 / 단어 수준 / 비언어적 소통	✅
의사소통 — 지시 이해	단일 선택	복잡한 지시 이해 / 2단계 지시 이해 / 단순 지시만 가능 / 시범 보여주면 가능	✅
희망 활동	복수 선택 (1개 이상)	같은 일 반복하기 / 손으로 만들기 / 물건 정리·분류 / 몸 움직이기 / 컴퓨터·기기 다루기 / 동식물 돌보기 / 청소·세탁 등 환경 관리 / 기타	✅
기타 활동 내용	텍스트	"기타" 선택 시만 노출	조건부

제출 동작

작성 모드

1. profiles 신규 생성
2. AI 직종 매칭 결과 생성 → match_results 저장
3. / 대시보드로 이동

편집 모드

1. profiles 업데이트
2. AI 매칭 결과 재생성 → match_results 업데이트
3. /profile로 이동 + 성공 토스트

이탈 방지

• 폼에 입력값이 있는 상태에서 페이지 떠나기 시도 → 확인 모달

---

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

진입 조건

로그인 + profiles 레코드 존재.

목적

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

구성

검사 결과 요약

성향 요약

• 레이더 차트 (5축): 반복 작업 선호 / 대인관계 / 신체 활동 / 세밀한 손작업 / 환경 민감도
• AI가 생성한 한 줄 요약

매칭 직종 TOP 3

각 항목에 포함되는 정보:

• 적합도 라벨: "잘 맞아요" / "도전해볼 수 있어요" / "힘들 수 있어요"
• 직종명
• 매칭률 (%)

필터

필터	선택지
적합도	전체 / 잘 맞아요 / 도전해볼 수 있어요 / 힘들 수 있어요
지역	전체 / 유저 희망 지역 기준 시군구 목록

기본값: 모두 "전체".

맞춤 채용공고 목록

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

정보	데이터 소스
적합도 라벨	AI 매칭 결과
고용 형태	공고 데이터
공고 제목	공고 데이터 (1줄 말줄임)
회사명	공고 데이터
지역	공고 데이터
경력	공고 데이터
급여	공고 데이터
마감일	공고 데이터
북마크 토글	유저 액션 → bookmarks 테이블

카드 클릭 → 공고 원문 외부 링크

---

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

레이아웃

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

사이드 메뉴

메뉴	동작
검사 결과 (기본 활성)	검사 결과 표시
스크랩	북마크한 공고 목록

---

탭: 검사 결과

기본 정보 (읽기 전용)

표시 항목: 이름, 성별, 학력, 희망 지역

신체 조건 (읽기 전용)

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

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

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

AI 성향 분석 결과

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

검사 내용 수정 버튼 → /survey?mode=edit

---

탭: 스크랩한 공고

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

---

8. 사용자 플로우 요약

[첫 방문]
  → 화면 A (랜딩)
  → "검사 시작" 클릭
  → 화면 D (/survey, 작성 모드)
  → 검사 폼 입력 → 제출
  → 화면 B (대시보드)

[재방문 — 로그인 상태]
  → 화면 B (대시보드)
  → 공고 카드 탐색 / 북마크

[검사 수정]
  → 화면 C (프로필) → "검사 내용 수정" 버튼
  → 화면 D (/survey?mode=edit, 편집 모드)
  → 수정 → 제출
  → 화면 C (프로필)

[스크랩 확인]
  → 화면 C → "스크랩" 탭 → 목록 확인

---

9. 외부 API (확정 아님)

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

---

10. 기술 스택

영역	기술
Frontend	Next.js 16 (App Router), TypeScript (strict), TailwindCSS v4
컴포넌트	shadcn/ui 패턴 (cva + cn)
상태 관리	TanStack Query v5 (서버), React Context (UI)
폼	react-hook-form + @hookform/resolvers + Zod v4
차트	Recharts
DB	Supabase (PostgreSQL + pgvector), 라이브러리 없이 raw fetch
배포	Vercel
패키지 매니저	pnpm