시나브로 (SINABRO) 👵👴

🎤 시나브로 소개 :

"복지관 시설을 내 집으로!"
온라인 노인여가복지 플랫폼을 제공합니다.

시나브로 : ‘조금씩 천천히’라는 뜻의 순우리말로 조금씩 천천히 성장한다,
가까워 진다는 듯을 담고 있습니다.

📃 Contents

1. 개발기간
   
2. 팀원 및 담당파트
   
3. 기획배경 & 타겟
   
4. 주요기능
   
5. 서비스 화면
   
6. 실행방법
   
7. 기술스택
   
8. 시스템 아키텍처
   
9. ERD
   
10. API 명세서
    
11. 스케줄
    
12. 협업툴
    

📆 개발기간:

2023.01.03 ~ 2023.02.16

💻 팀원 및 담당파트

• 윤선영(팀장/프런트엔드) :

  • React/Redux-toolkit/react-router-dom 활용하여 SPA 구현
  • Axios 사용하여 백서버와 통신, 강사/사용자별 메인페이지 및 강의 상세정보 페이지 구현
    • 대분류/소분류 선택, 검색 시 해당하는 강의 정보 받아와 카드 형태로 출력
    • 강의 신청 시 메인페이지 내 우측 마이페이지로 강의 이동 및 수강신청/취소 버튼 토글
    • 강의별 상세정보 페이지 이동, 상세페이지 내 수강신청/취소 가능
  • 로그아웃 기능 구현
  • Styled-component, media-query를 통한 반응형 css 스타일링
  • PPT 제작, 발표

• 김호균(팀원/백엔드):

  • Spring Security, JWT를 이용한 필터 제작
  • 백엔드 공지사항 페이지, 강의 수강자, OpenVidu 세션, 커넥션 생성 제작
  • 백엔드 API 기획 및 구현, DB 설계
  • 리액트를 이용해 확대 기능 구현

• 양동기(팀원/백엔드):

  • OpenVidu 서버 on-premise로 배포
  • Jenkins, Docker를 이용한 CI/CD 구현 - Docker로 Nginx+React container, Springboot container 생성하여 배포
  • Springboot를 사용해 백엔드 API 기획 및 구현, DB 설계
  • React와 Springboot 서버간 API 통신 연결
  • OpenVidu를 통한 WebRTC 기능 구현(화면공유, 무대형, 참여형 화면 전환 시 강사 조작에 따른 사용자 화면 변화 연결)
  • Nginx SSL 인증서 처리를 통한 https 리다이렉트 설정, 백엔드 및 프론트엔드 url 분기 처리 (/, /api)
  • Swagger 도입을 통한 API docs 구현

• 이아현(팀원/프런트엔드):

  • react와 redux-toolkit을 활용하여 SPA 구현
  • 로비, 회원가입, 로그인, 화상회의 페이지(모드별) 구현
  • styled-component를 통한 css 스타일링
  • UCC 제작

• 이진우(팀원/백엔드):

  • Spring Boot JPA를 사용한 백엔드 강의자(강의생성, 목록, 참여자 정보, 편집) API 구현
  • Spring Boot JPA를 사용한 백엔드 메인페이지(대분류/소분류 카테고리, 강의목록, 강의검색) API 구현
  • 백엔드 API 기획 및 DataBase 설계
  • Openvidu 화상회의 중 사용자 음소거 기능 구현
  • Readme.md 작성

✔️ 기획배경 & 타겟

• 기획배경:

  1. 노인 복지관 같은 어르신을 위한 복지시설이 수도권, 대도시에 주로 편중되어 있어서 노인 복지 지역격차가 발생하고 있다.
  2. 코로나19와 같은 특수 상황의 경우, 노인 활동이 가장 먼저 제약되고 이에 따라 노인층의 고립감과 외로움이 증폭된다. 이와 같은 상황을 해소하고자 기존에 제공되던 문화복지 강의들을 온라인으로 제공하고 있음.
  3. 웹엑스나 줌 같은 화상회의의 경우, 어르신들이 쓰기 불편한 UI/UX를 가지고 있음. 그래서 우리는 시나브로라는 어르신 맞춤형 온라인 강의 플랫폼 서비스를 기획하게 되었음.
  4. 고령화 시대에 발맞춰 향후 다음세대도 활용할 수 있는 온라인 복지 강의 플랫폼.

• 타겟층 :

  • 디지털 기기 활용이 가능한 60-70대 노인층
  • 시간적, 공간적, 신체적 제약으로 인해 다양한 강의 복지 서비스를 누리지 못하는 노인층.

🔍 주요기능

• 주요 기능 :
  • webRTC를 통한 실시간 화상 강의
  • 사용자(어르신) 친화적인 디자인을 고려한 UI/UX
  • 간소화된 회원가입 및 로그인, 강의신청, 화상강의 입장 프로세스
  • 3가지 화면 모드 : 참여자 모드, 화면 공유 모드, 무대 모드
  • 강사님이 참여자 마이크 원격 제어 가능함

👀 시나브로 서비스 화면

수강자 화면

회원가입 및 로그인

메인페이지

수강신청

나의배움터 확인

대분류/소분류 카테고리별 강의 검색

강의 검색 결과

강의 입장

마이크 및 비디오 켜기/끄기

돋보기 기능

강의자 화면

강의자 메인페이지

강의자 강의화면

화면공유시 화면

참여형 화면

전체음소거 기능

✨ 실행방법

• 포팅 매뉴얼 참조

📚 기술스택

• Front-End:
  • React
  • reduxjs/toolkit
  • styled-components
• Backend
  • Database: Mysql
  • Web: Springboot
  • Library: Spring JPA, Spring Security, OpenVidu
• CI/CD
  • Docker
  • Jenkins
• Web Service
  • AWS EC2
  • Nginx

🔨 시스템 아키텍처

🎨 ERD

💡 API 명세서

🗓️ 스케줄(간트차트)

💪 협업툴

• Notion
• Jira
• GitLab
• Figma
• MatterMost