기술 스택: Next.js, TypeScript, Tailwind CSS, shadcn ui, React-Query, Recoil, Video.js, next-i18next...

구성원

• PM(1)
• FE 개발자(2)
• BE 개발자(2)

담당업무

• 피그마를 이용하여 사용자 UI/UX 기획 및 디자인 시안 제작.
• Next.js와 TypeScript를 사용하여 사용자 페이지 및 CMS를 구축.
• Tailwind CSS와 shadcn ui를 사용하여 반응형 스타일을 구현, 다양한 디바이스에서 일관된 사용자 경험 제공.
• JAVA 개발자가 구축한 백엔드 서버와의 통신을 통해 데이터 처리 효율성 향상.
• Video.js를 사용하여 비디오 플랫폼을 개발, 사용자에게 원활한 비디오 시청 경험 제공.
• 사용자 디바이스 인터페이스에 맞는 노트 제공 및 다운로드 기능 구현.
• 프론트엔드 개발자와 협업하여 프로젝트 완성도 향상 및 코드 리뷰를 통해 개발 효율 강화.
• next-i18next, i18next를 이용하여 다국어 모드 구현.

성과

• Next.js와 TypeScript를 활용하여 클라이언트 애플리케이션을 개발하여 빠르고 안정적인 사용자 경험 제공.
• Recoil을 이용하여 전역 상태 관리, 복잡한 상태 관리 문제 해결.
• SEO 최적화 작업을 통해 검색 엔진 노출을 증가.

경험

클라이언트가 요청한 주요 기능은 크리에이터가 영상 업로드 시 PDF를 함께 업로드할 수 있게 하여,
사용자들이 영상 시청 중에 노트 필기를 할 수 있도록 하는 기능 필요.
이 기능은 PC뿐만 아니라 모바일에서도 적용되어야 했기 때문에 이에 맞는 UX/UI 디자인이 설계해야 함. 이를 위해 디자인 작업 단계에서부터 화면 비율을 고려하여 시안을 제작하고, 프론트엔드 개발 시 다양한 디바이스 화면에 맞게 구현. 또한, 콘텐츠 영상 시청 시 광고를 반드시 시청하도록 하고, 광고가 종료되어도 ‘영상으로 돌아가기’ 버튼을 클릭하지 않으면 광고 화면에서 멈추도록 하는 요구사항을 구현하기 위해 다양한 플러그인이 있는 Video.js를 적용하여 이러한 기능들을 구현. 계정마다 권한별로 주요 기능들이 다르기 때문에 서버 사이드에서도 상태관리가 편한 Next-Auth로 세션을 관리.