Skip to content

3j-dev/vivid_web

Repository files navigation

VIVID

VIVID 서비스는 영상 콘텐츠 통합 관리 & 학습 툴 웹 서비스입니다.
소프트웨어 마에스트로 13기 연수 과정에서 개발 진행한 프로젝트입니다.

💡 Background

  1. 현재의 교육 영상은 다양한 플랫폼을 통해 공유되고 있기 때문에, 영상을 관리하는 것이 매우 어렵습니다.
  2. 영상 스트리밍 플랫폼들은 단순 시청에 목적이 맞춰져 있기 때문에, 사용자가 학습에 활용하기 불편합니다.

📝 Features

  1. Webex 등의 영상 플랫폼의 영상 콘텐츠를 손 쉽게 공유하고, 통합 관리합니다.
  • 영상 공유 Space

    • 참여자(공유 대상자) 리스트
    • 영상 리스트
  • 영상 Upload

    • Drag & Drop file Upload
    • Webex 연동 Webex 내 영상 업로드
  1. 텍스트 필기/드로윙 필기/영상위 드로윙 필기 기능을 지원합니다.
  • froala, 자체 개발 플러그인을 활용한 실시간 서버 연동 텍스트 필기
  • tlDraw를 활용한 자유로운 드로잉 필기 지원

📚 Skill Stack

  • Front-end : TypeScript, React, Context API, Styled-component
  • Back-end : Java, Spring boot, JPA, QueryDSL, JUnit
  • DB : MySQL, DynamoDB, Redis
  • Infra : AWS Services(EC2, S3, RDS, DynamoDB, Lambda, Route53, CloudFront, MediaConvert), Docker

💻 개발 내용/프로젝트 중점 사항

  • React 18과 Styled-Component를 기반으로 클라이언트 단을 구성했습니다.
  • Recoil과 같은 전역 상태 관리 사용을 최소화하고자 노력했습니다. 최대한 최소화를 진행하자 전역적으로 관리할 상태가 줄어들어 Recoil을 Context API로 대체하였습니다.
  • Draft.js, Froala 등의 마크다운 에디터들을 활용하여 텍스트 필기를 구현하였습니다. 해당 과정에서 서비스에 필요한 추가 기능을 구현하여 적절히 적용했습니다.
  • tlDraw 등의 캔버스 드로잉 툴을 프로젝트에 추가하였고 툴 내의 상태 관리 및 트래킹을 진행하였습니다. 서비스에 맞게 적절히 변형을 진행했습니다.
  • 성능 최적화를 위해 CDN, lazy import, 번들 최적화 등 다양한 기법을 적용하였습니다.
  • 프론트엔드 단의 CI/CD를 구성하여 AWS CloudFront 배포 자동화를 구현했습니다.
  • Jira, Confluence를 기반으로 이슈 및 개발 현황을 공유 및 관리하였습니다.

🎯 트러블 슈팅 & 개발 일지

동작 화면


메인 화면

로그인 화면

강의 화면

  • 강의 선택 화면
  • 강의 시청 화면

업로드 화면

  • 업로드 강의 공간 선택

  • File Upload

  • Webex Upload

강의 스페이스 설정 화면

마이페이지 화면