VIVID
VIVID 서비스는 영상 콘텐츠 통합 관리 & 학습 툴 웹 서비스입니다.
소프트웨어 마에스트로 13기 연수 과정에서 개발 진행한 프로젝트입니다.
💡 Background
- 현재의 교육 영상은 다양한 플랫폼을 통해 공유되고 있기 때문에, 영상을 관리하는 것이 매우 어렵습니다.
- 영상 스트리밍 플랫폼들은 단순 시청에 목적이 맞춰져 있기 때문에, 사용자가 학습에 활용하기 불편합니다.
📝 Features
- Webex 등의 영상 플랫폼의 영상 콘텐츠를 손 쉽게 공유하고, 통합 관리합니다.
-
영상 공유 Space
- 참여자(공유 대상자) 리스트
- 영상 리스트
-
영상 Upload
- Drag & Drop file Upload
- Webex 연동 Webex 내 영상 업로드
- 텍스트 필기/드로윙 필기/영상위 드로윙 필기 기능을 지원합니다.
- 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
강의 스페이스 설정 화면
마이페이지 화면
