VIVID

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

💡 Background

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

📝 Features

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

• 영상 공유 Space

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

• 영상 Upload

  • Drag & Drop file Upload
  • Webex 연동 Webex 내 영상 업로드

2. 텍스트 필기/드로윙 필기/영상위 드로윙 필기 기능을 지원합니다.

• 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를 기반으로 이슈 및 개발 현황을 공유 및 관리하였습니다.

🎯 트러블 슈팅 & 개발 일지

• 위지윅 에디터 한글과 관련된 문제
• Froala의 다양한 문제점에 관하여
• 에러코드를 어떻게 처리할 것인가(UX)
• Recoil to Context API(feat.login)
• 프라이빗 라우트와 아웃렛
• axios 활용법 발전기, api call을 클린 코드로
• 간단한 react-toastify 후기
• file Upload 트러블 슈팅(octet-stream이 뭔가요)
• 웹 어플리케이션에서 성능 향상하기(클라이언트 편)
• 클린 코드를 위한 여정, 리팩토링 탐험기

동작 화면

---

메인 화면

로그인 화면

강의 화면

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

업로드 화면

• 업로드 강의 공간 선택

• File Upload

• Webex Upload

강의 스페이스 설정 화면

마이페이지 화면