프로젝트 소개
2021.11.15 - 2021.12.9 총 4주 동안 진행된 기업협업 프로젝트로 나 자신을 포함해서 프론트엔드 2명 / 백엔드 2명으로 한 팀이 구성되어 기업에 나가 기업에서 제시해준 프로젝트를 진행하였다. 우리 팀은 vling 사이트를 운영하고 있는 버즈앤비 회사에 가서 vling 유튜브채널 요약분석리포트 사이트를 구현하였다.
사용된 기술
프로젝트 구조
- 메인 검색 사이트 ( react.js) - 프론트앤드
- 사내 GraphQL API 를 활용 vling사이트의 검색 기능구현
- 검색 결과 클릭시 dynamic 한 효과의 svg 이미지 효과를 가진 요약분석리포트가 담긴 상세페이지로 이동
- 개별 요약분석리포트의 Embed Code를 클립보드에 복사하는 기능구현
- 무한 pagination 구현
- 이미지 서버 (node.js) - 백앤드
- 캐시 기능 구현
- 동적이미지 생성 시스템, 이미지 layout 구성서버를 연계하여 이미지 생성후 응답
- 이미지 layout 구성 서버 (react.js, node.js) - 프론트앤드 + 백앤드
- 요약분석리포트 크기별 layout을 구성
- 필요 데이터 획득을 위한 사내 GraphQL API call
- 요청주소와 파라미터별로 layout 등 구성변경
- 동적 이미지 생성 시스템 - 프론트앤드 + 백앤드
- 동적 이미지 생성 모듈
- 이미지 layout 구성서버에서 요약분석리포트에서 이미지를 동적생성
- 이미지를 AWS s3에 저장
사이트 시연
내가 맡은 부분
-
svg 를 활용한 다이나믹한 애니메이션 효과를 가진 요약분석리포트 구현
-
상세 페이지를 PC, Tablet, Mobile 크기에 맞춰서 반응형으로 구현
-
Embed Code 버튼 클릭시 요약분석리포트가 클립보드에 복사되고 블로그 등에서 해당 이미지 클릭시 vling 사이트의 해당 채널 상세 페이지로 이동 구현
협업의 경험
4주라는 시간 동안 실제 회사에서 어떤 분위기로 개발을 하는지 간접적으로 체험해볼 수 있어서 의미있는 시간이었다. 무엇보다도 좋은 동료들과 좋은 환경에서 좋은 프로젝트를 개발해 볼 수 있는 기회를 마련해주신 버즈앤비와 위코드에게 너무나 감사함을 느꼈다. 4명의 팀워크가 매우 잘 맞았고, 개발 경험이 풍부한 버즈앤비 CTO님과 PM님께서 소통과 리드를 잘 해주셔서 4주 안에 의미있는 결과물을 만들 수 있었다. 저로서는 더 이상 바랄 게 없을 정도로 재미있게 개발에 몰두했던 것 같다.
개인적으로는 svg 라는 새로운 스택을 활용해서 분석 리포트를 구현하는 것에 많은 시간과 노력을 쏟았기에 가장 애착이 가고, 시행착오를 많이 겪은 후에 원하는 방향으로 구현이 되었을 때에는 많은 성취감도 느낄 수 있었다.
태규님이랑 버잰비팀 너무 고생많으셨습니다 🌞👍🏻