YouthProject

다빈치 SW 메이커 페스티벌 <청춘어람> (by 멋쟁이청년처럼)

주제 : 공공데이터와 공간정보를 이용한 세상을 이롭게 하는 서비스

Environment

• frontend
  • react.js
  • sass
• backend
  • Node.js & express.js
• DB
  • MongoDB & mongoose

Member

정다은

• 팀장, 기획

박경철

• back-end & DB design

노우제

• front-end & UI/UX design

참가 개요

- 작품 소개

취업 준비생 청년 정책으로 대전시에는 월 30만원 지원해주는 ‘청년희망카드’라는 것이 있고 부산시에는 ‘청년디딤돌카드’라는 것이 있습니다. 또 이런 경제적인 지원 뿐만 아니라 각 시에서 제공하는 주택 지원이나 창업 또는 일자리 지원들이 많습니다. 정부 및 지차체에서 제공하는 질 좋은 강연이나 정책들이 많음에도 불구하고 잘 몰라서 혜택을 받지 못하는 청년들이 많습니다. 이에 ‘청년 취업 정책 API’와 ‘청년 창업 정책 API’ 등 공공데이터를 사용하여 청년정책모음 사이트를 구현하여 청년 간 정보 격차를 줄이고 정부의 청년 정책을 홍보하고자 합니다.

- 개발 배경

얼마 전, 한 학생의 정보공유를 통해 대전시에서 지원하는 ‘청년 희망 카드’라는 청년 지원 정책을 알게 되었습니다. 해당 정보를 접한 우리들은, 지원 정책의 자격 요건인 ‘주민등록상 대전시 시민’이라는 자격 요건에 해당되지 못했기 때문에 혜택을 받지 못했습니다. 후에 알아보니 다른 시에서도 이미 청년들을 위한 지원 정책을 많이 진행 중에 있음을 알았습니다. 정부나 시, 도에서 지원하는 좋은 청년 정책이 많습니다. 그러나 정보의 접근성이 떨어져 과거의 우리같이 지원 자격에 부합하나 혜택을 받지 못하는 청년들이 많습니다. 따라서 저희는 본 사이트를 통해 청년들이 정부 및 지자체가 제공하는 청년 정책 정보에 대한 접근성을 높이고 취˙창업에 대한 지원 정책을 홍보하고자 합니다.

- 기대효과

정부정책을 많은 청년들에게 알 수 있도록 홍보효과가 있을 것으로 기대합니다. 취업을 준비하는 청년들에게는 정책을 지원받아 경제적 부담 없이 구직활동에 전념할 수 있도록 만들어줄 것이며 창업을 준비하는 청년들에게는 다양한 지원책을 알게 해주어 아이디어 구현에 힘을 실어줄 것으로 기대하고 있습니다.

기능

저희 <청춘어람> 프로젝트의 핵심은 청년 정책 소개와 피드백입니다. 이 두 가지 기능을 중심으로 기능을 구성하였습니다.

1. 청년 정책

이번 다빈치 메이커 페스티벌의 주제는 공공데이터를 이용한 세상을 이롭게 만드는 서비스입니다. 공공데이터를 활용하기 위해 워크넷 Open API에 존재하는 청년 정책 데이터를 사용했습니다.

• 청년 정책 검색

  관심있는 정책에 대해 검색할 수 있는 기능

• 청년 정책 조회

  정책의 상세 정보를 조회할 수 있는 기능

아래 기능은 로그인이 필요한 기능입니다.

• 좋아요 기능

  관심있거나 좋다고 생각하는 정책에 표현하는 일종의 추천기능

• 저장하기 기능

  관심있는 정책을 장바구니처럼 저장하는 기능

2. 피드백

정책을 사용해 본 입장에서 해당 정책에 대한 피드백을 할 수 있는 기능

위 기능은 댓글 형식으로 구현했습니다.

위 기능은 로그인이 필요한 기능입니다.

Use-case Diagram

위 서술한 기능들을 바탕으로 다음과 같은 Use-case Diagram을 도출하였습니다.

DB 설계

위에 서술한 기능들을 바탕으로 4가지 테이블을 도출하였습니다.

1. User

스키마 이름에서도 드러나듯 회원 정보를 저장하는 스키마입니다.

id는 회원이 <청춘어람> 서비스에 인증할 때 사용하는 것이 아니라 인덱싱을 위해 각 User 정보마다 존재하는 Integer 형의 고유 번호입니다.

like는 회원이 좋아요한 정책들의 id를 저장합니다.

store는 회원이 임시 저장한 정책들의 id을 저장합니다. 이를 통해 회원이 저장한 정책을 빠르게 보여줄 수 있습니다.

2. Policy

정책 정보를 저장하는 스키마입니다.

워크넷 Open API에 존재하는 정책에 type을 구분하기 위해 type 속성을 부여하였습니다.

name은 해당 정책의 이름입니다.

online은 온라인으로 지원이 가능한지 여부를 저장하고 있습니다.

applyUrl은 지원 경로, relInfoUrl은 해당 정책에 대한 url을 저장합니다.

desc는 해당 정책의 상세 설명이 담겨있습니다.

desc를 subdocument 형태로 입력하여 각각의 type에 맞는 정책 정보를 전달하도록 할 예정입니다.

3. My_Policy

실제 정책에 지원한 경우 회원의 사용여부를 판단하기 위해 만들어진 스키마입니다.

User와 Policy의 id를 담고 있습니다.

4. Feedback

Policy에 대한 Feedback 정보를 담고 있는 스키마입니다.

피드백의 제목인 title과 피드백 내용을 담는 content로 구성되어있습니다.

시연 이미지

1. index 페이지

위 이미지는 저희 사이트에 최초 접속시 나타나는 화면입니다.

왼쪽에 네비바가 위치합니다.

네비바 맨 위에 저희 사이트의 로고인 청춘어람로고가 있습니다. 이 로고를 누르면 맨 처음 index 페이지로 이동합니다.

청년취업정책, 청년 인턴, 채용 행사, 정부 지원 일자리 카테고리 별로 해당 정보를 볼 수 있는 페이지로 이동할 수 있습니다.

맨 아래에 로그인을 할 수 있는 버튼이 존재합니다.

페이지 상단에는 검색 상자와 해쉬태그가 존재하여 원하는 정책 검색을 용이하도록 만들었습니다.

나머지 페이지에 정책 정보가 카드형식으로 드러납니다.

카드 안에는 정책 카테고리, 주관기관, 정책이름, 지원자격(연령, 학력), 좋아요 현황, 댓글 현황을 간략하게 볼 수 있습니다.

카드를 클릭하게 되면 해당 정책의 상세 정보를 볼 수 있습니다.

2. 정책 상세 정보

카드를 누르게 되면 나타나는 상세정보를 보여주는 팝업창입니다. 상단에 정책의 각 정보를 보여줍니다. 이래에는 피드백을 쓰는 란이 있으며 해당 정책에 피드백 목록이 나타난다.

3. 정책 카테고리별 페이지

카테고리에 해당하는 정책 카드만 나타납니다.

4. 반응형 페이지

모바일 환경에 맞게 반응형 페이지로 구현하였습니다.

Server http api docs