Skip to content

kusitms-com/31th_Meetup_Team3_DoDream_Front

Repository files navigation

일하고 싶은 중장년 여성을 위한, 실행 공유형 구직 서비스

꿈꾸고 싶은, 꿈꾸고 있는 50대 여성이 새로운 시작을 두드리는 곳 Do Dream!

‘두드림’은 50대 전업주부가 흩어진 의지를 모아, 새로운 직업과 목표를 찾아 도전할 수 있도록 돕는 서비스 입니다.

🔗 서비스 배포 주소 : https://www.dodream.site/


👯 팀소개

팀명: 두둠칫

분야 이름 포지션 내용
기획 박주현 🧠 PM, 서비스 기획 서비스 정책 확립, 유저 리서치, 와이어 프레임 작성, BM
기획 이은서 🧠 서비스 기획 유저 리서치, 와이어프레임 작성, UX writing
디자인 유은서 🎨 디자인 서비스 브랜딩, UX/UI 디자인, GUI 디자인
디자인 김보경 🎨 디자인 서비스 브랜딩, UX/UI 디자인, GUI 디자인
개발 최용원 💻 프론트엔드 리드 화면 UI 구현, API 연동
개발 박채수 💻 프론트엔드 화면 UI 구현, API 연동
개발 윤창현 🛠️ 백엔드 리드 API 구현, ERD 설계, 서버 배포
개발 조성은 🛠️ 백엔드 API 구현, ERD 설계, 서버 배포

🖥️ 두드림 개요

타겟 유저

  • 꿈꾸고 싶은, 꿈꾸고 있는 50대 중장년 여성
  • 자녀가 성인이 된 후 여유 시간에 일하고자 하는 50~60대 경력단절 주부

Pain Point

📌 painpoint 1: 정보는 많은데, 정리는 어렵고 지친다.

중년 여성들은 구인·교육 정보를 적극적으로 찾고 저장할 만큼 높은 의지를 가지고 있습니다. 그러나 정보가 지나치게 많고 흩어져 있어 탐색에 많은 에너지를 소모하며, 실제 행동으로 이어지지 못하는 경우가 많습니다. 실제로 응답자의 54.9%는 “정보가 흩어져 있어 찾는 것이 어렵다”고 답했습니다. 이는 흩어진 정보 속에서 방향을 잃고, 탐색 피로를 자주 경험하고 있음을 보여줍니다.
(50대 구직 경험 주부 34명 대상 리서치, 2025.04.01- 2025.04.06)

📌 painpoint 2: 실행으로 이어지지 않는다

정보를 모아두더라도 “무엇을 어떻게 시작할지”를 막연해하며 실행 계획 수립에 어려움을 겪습니다. 이는 “정보 탐색 후 어디서부터 시작할지 막막하다”(40.3%, 1위) 결과에서도 확인됩니다.
(50대 구직 경험 주부 34명 대상 리서치, 2025.04.01- 2025.04.06)

📌 painpoint 3: 혼자 준비하며, 심리적으로 고립된다.

중년 여성은 도전 과정을 혼자 감당하며, 어려움 발생 시 타인의 도움이 부재한 상황에 놓입니다. 이는 "혼자하려니 갈피를 잡기 어렵다(36.1% 2위)"에서 확인할 수 있습니다.
(50대 구직 경험 주부 72명 대상 리서치, 2025.04.07- 2025.04.12)


Solution: 혼자가 아닌, 함께하는 두드림

1. 초개인화된 정보 큐레이션 및 통합 제공

50대 주부에게 인기 있는 직종 20개를 데스크 리서치 기반으로 선별하고, 사람인 API와 고용24 API를 활용하여 해당 직종에 대한 구인글 및 직업훈련 정보를 통합 제공합니다. 특히, 국민내일배움카드로 직업훈련을 받은 경험이 있는 주부들이 10명 중 7명에 달한다는 점을 반영하여, 직업 훈련과 구인 정보를 한곳에서 제공하여 정보 탐색 비용을 획기적으로 줄입니다. 고용24의 복잡했던 필터 과정을 직종, 거주지, 실습/이론 수업 여부 등으로 대폭 축소하여 꼭 필요한 정보만 빠르게 볼 수 있게 합니다.

2. 실행 계획 자동화 및 가이드

막연한 정보가 구체적인 실행으로 연결되도록, 정보 탐색 직후 '할 일' 작성을 유도하고, 할 일 작성에 대한 명확한 가이드를 제시하여 고민 없이 행동할 수 있도록 돕습니다.

3. '함께하는 실행' 기반 동기 부여

고립감을 해소하고 지속적인 동기를 부여하기 위해, 비슷한 목표를 가진 사용자들의 할 일을 열람함으로써 비공식 정보 습득 맥락을 유지하고, 서로 길잡이가 되어주는 기능을 핵심으로 합니다.


서비스 차별성

두드림_서비스 차별성

  • 직업, 지역별로 정리된구인, 교육 정보
  • 즉시 실행으로 이어지는 할 일 작성 기능
  • 나와 비슷한 사람의 준비 과정 열람
  • 실행을 시각화하고 작은 성취를 축적하는 구조

기대효과

두드림_기대효과

기존 구직 여정은 정보가 흩어져 있고 복잡합니다. 이에 두드림은 한 서비스 내에서 탐색-참고-실행을 간소화되어 사용할 수 있어, 사용자 편의성과 효율성 그리고 몰입도를 높입니다.


두드림의 기능을 소개합니다

두드림 기능

두드림 기능

두드림 기능

두드림 기능

두드림 기능

두드림 기능

📁 ERD

두드림_ERD

🗺️ 시스템 아키텍처

두드림_시스템아키텍쳐

🖼️ 프론트엔드

✨ 성능 개선

  • 이미지 포맷을 .png에서 .webp로 최적화하여 페이지 로딩 속도와 전체 성능을 개선했습니다. .webp 포맷은 더 높은 압축률을 제공하면서도 이미지 품질을 고화질로 유지할 수 있어, 빠른 사용자 경험에 기여합니다.

🛠️ 기술 스택

기술 설명
정적 타입을 통해 런타임 오류를 사전에 방지
+ Vite는 CRA 대비 훨씬 빠른 번들링 속도를 지원
유틸리티 클래스 기반으로 빠르고 일관성 있는 스타일링이 가능하며 뛰어난 생산성
Zustand 가볍고 설치가 간단한 상태관리
서버 상태 관리에 특화되어 있고 데이터 캐싱, 자동 리패칭, 로딩/에러 상태 관리 등을 자동화 할 수 있음
빠른 패키지 설치 속도와 워크스페이스 관리, 일관된 종속성(lockfile) 관리 측면에서 효율적
+ API mocking으로 프론트 개발 병렬화 지원
+ - 테스트 환경 구축이 간단하고, 사용자 관점에서 컴포넌트 테스트를 작성 가능
- develop 브랜치 pr 시 깃허브 액션으로 자동화를 함

🙏 협업 툴


🪃 Branch Naming Rule

기능 개발 또는 중요한 작업: 이슈를 먼저 생성하고 브랜치를 생성합니다. 이슈 번호와 작업의 도메인을 조합하여 브랜치 이름을 정합니다. 예: feature/ui-1


Pull Request Naming Rule

  • Pull Request Naming Rule: [<Prefix>] <Description> 의 양식을 준수하되, 이슈의 title과 pr의 제목이 같게 일관성을 유지합니다.

예시:

  1. 새로운 UI 컴포넌트 추가
    • Pull Request Title: [feat] 새로운 기능 추가
  2. 버그 수정
    • Pull Request Title: [bug] QA 수정

Issue 템플릿

✨ feature 이슈 템플릿

  • 📌 Description: 어떤 이슈인지 설명
  • ✅ TODO : 이슈에 할당된 TODO
  • 📸 Screenshots (스크린샷): 작업에 대한 스크린샷 (선택)
  • 📁 ETC : 기타

✨ Pull Request 템플릿

  • ✈️ 관련 이슈 : 이슈번호 연결
  • 📋 작업 내용: 수정한 내용이나 추가한 기능에 대한 설명
  • 📸 스크린샷 (선택 사항) : 수정된 화면 또는 기능을 시연할 수 있는 스크린샷 첨부
  • 📄 기타: 전달사항

Commit Message Convention

<Prefix> : [#<Issue_Number>] <Description> 의 양식을 준수합니다.

  • feat: 새로운 기능
    • 예시: feat: [#1] 홈 api 연결
  • fix: 버그 수정
    • 예시: fix: [#2] 홈 api 기능 수정
  • docs: 문서 수정
    • 예시: docs: [#3] ReadMe Update
  • style: UI에 관한 것
    • 예시: style: [#4] 홈 ui 구현
  • refactor: 코드 리팩토링 (기능 변화 없음)
    • 예시: refactor: [#5] 컴포넌트 분리
  • chore: 기타 자잘한 수정
    • 예시: chore: [#6] 이름 수정
  • test: 테스트 코드 추가 또는 수정
    • 예시: test: [#7] 테스트코드 작성

🛠️ 백엔드

🛠️ 기술 스택

기술 설명
- 최신 Java 및 Spring 생태계와의 호환성을 기반으로, 설정이 간소화된 프로그래밍 모델을 제공
- 의존성 관리와 자동 구성(Auto Configuration)을 통해 개발 생산성을 극대화
- Actuator, DevTools, 다양한 Starter 모듈을 통해 운영 및 개발 환경 모두에서 유용함
- 기존보다 명확하고 선언적인 방식의 보안 설정이 가능하여 코드 가독성과 유지보수성이 향상됨
- SecurityFilterChain 기반으로 Filter 구성이 단순화되었으며, 모듈화된 접근 제어 구현이 용이함
- OAuth2 및 JWT 기반 인증/인가 구현에도 최적화되어 있어 유연한 보안 정책 구성이 가능
- 고성능 리버스 프록시 서버로, 정적 파일 서빙과 함께 SSL 종료(SSL Termination), Gzip 압축, 로드 밸런싱 기능 등을 제공
- API 서버(Spring Boot)와 프론트엔드(React 등) 간 요청 분기 처리 및 보안 강화를 위한 게이트웨이 역할 수행
- Docker 환경에서도 가볍게 연동 가능하여 DevOps 환경에서 유용하게 사용
- 인메모리 데이터 저장소로, 빠른 속도의 키-값 캐시, 세션 저장소, Pub/Sub 메시지 큐, 분산 락 관리 등 다양한 용도로 사용
- TTL(Time to Live)을 활용한 임시 데이터 관리 및 속도 최적화에 탁월함
- 장기 지원(LTS) 버전으로, 최신 JVM 최적화 및 **새로운 언어 기능(예: Record, Virtual Threads, Pattern Matching for switch 등)**을 통해 코드 간결성과 성능을 동시에 추구할 수 있음
- Spring Boot 3와의 자연스러운 호환성 제공
- GitHub 리포지토리에 통합된 CI/CD 자동화 도구로, 별도의 외부 서비스 없이도 테스트 및 빌드, 배포 워크플로우 구축 가능
- PR 트리거, 브랜치별 배포, Slack 알림 등 다양한 연동이 가능하며, 오픈소스 커뮤니티의 수많은 액션들을 손쉽게 활용 가능
- 다중 컨테이너 애플리케이션을 정의하고 실행할 수 있는 도구로, MySQL, Redis, Spring Boot 등 다양한 구성 요소를 하나의 파일로 관리 가능
- 개발 환경에서 실제 운영 환경과 유사한 구성을 유지할 수 있어 배포 및 테스트 일관성 확보
- 오픈소스 RDBMS로, 트랜잭션 처리, 인덱스, 외래 키 등 관계형 데이터베이스의 핵심 기능을 안정적으로 제공
- Spring Data JPA와의 궁합이 뛰어나며, 쿼리 최적화, 정규화된 데이터 모델링에 강점
NCP Computing Service - Naver Cloud의 가상 서버 인프라로, 서버, 스토리지, 로드밸런서, 보안 설정을 유연하게 구성 가능
- 한국 사용자 대상 프로젝트에서 네트워크 속도와 비용 측면에서 경쟁력이 높으며, 서비스에 필요한 AI, 이미지 처리, 인증 등 다양한 API 연동이 수월함
Naver ClovaX(Clova Studio) - 자연어 처리 기반의 국내 AI 플랫폼으로, 대화형 AI, 텍스트 생성, 요약, 감정 분석 등 다양한 활용이 가능
- 사용자의 온보딩 질문을 통해 성향 분석 후 적합한 직업 추천과 그에 따른 맞춤형 Todo List 생성에 사용 예정
- RESTful API 호출 방식으로 손쉽게 백엔드(Spring Boot)와 연동 가능하며, 한국어 응답 품질이 우수함

🙏 협업 툴


🪃 Branch Naming Rule

기능 개발 또는 중요한 작업: 이슈를 먼저 생성하고 브랜치를 생성합니다. 이슈 번호와 작업의 도메인을 조합하여 브랜치 이름을 정합니다.

  • 예: bugfix/#212-이미지-문제-해결

Pull Request Naming Rule

Pull Request Naming Rule: [<Prefix>](#<Issue_Number>) <Description> 의 양식을 준수하되, 이슈의 title과 pr의 제목이 같게 일관성을 유지합니다.

  • 예 : Bugfix(#1) : 이미지가공개되도록 설정한다

Issue 템플릿

✨ feature 이슈 템플릿

  • 📌 Description: 어떤 이슈인지 설명
  • ✅ TODO : 이슈에 할당된 TODO
  • 📸 Screenshots (스크린샷): 작업에 대한 스크린샷 (선택)
  • 📁 ETC : 기타

✨ Pull Request 템플릿

  • 📝 작업 내용: 작업한 내용을 간략히 설명해주세요(이미지 첨부 가능)
  • ✏️ 관련 이슈 : 이슈번호 연결
    • ex) Fixes : #00 (수정중인 이슈) / Resolves : #100 (무슨 이슈를 해결했는지) / Ref : #00 #01 (참고할 이슈) / Related to : #00 #01 (해당 커밋과 관련)
  • 🎸 기타 사항 or 추가 코멘트

Commit Message Convention

<Prefix> : <Description> 의 양식을 준수합니다.

  • feat: 새로운 기능
    • 예시: feat : 직업별 투두 개수 조회,수정,변경 로직 추가
  • fix: 버그 수정
    • 예시: fix: 오류 수정
  • refactor: 기능에 영향이 가지 않는, 코드 스타일 변경
    • 예시: refactor : 에러 메세지 수정
  • chore: 기타 자잘한 수정
    • 예시: chore: 서브모듈 커밋 반영

두드림_비전

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 2

  •  
  •