와글와글 디자인 보러가기

와글와글 기술 명세서

커뮤니티(50 ~ 300명)를 위한 소그룹 메이킹을 돕는 키워드 데이터 시각화 서비스

작성자: 김관경

작성일: 2022년 11월 10일

최종수정일: 2022년 11월 10일

단계: Draft > Review required > Reviewed > Approved

리뷰어: 김대호, 문성현, 이승민

Approvals: 김대호, 문성현, 이승민, 김관경

Issue Tracker: Github

요약 (Summary)

커뮤니티 내에서 공통 관심사를 가진 사람들을 쉽게 이어주기 위해서 선택된 키워드로 그룹화해주는 시각화 서비스

배경 (Background)

부스트캠프에서 부스트살롱을 여는 것처럼, 커뮤니티내에서 소그룹을 만드는 것이 불편했다. 이걸 쉽게해줄 수 있는 방법이 없을까?

목표 (Goals)

• 커뮤니티에서 유저가 자신의 키워드를 정하고, 키워드가 공유되는 공통 관심사를 가지는 소그룹을 쉽게 만들 수 있다.
  • 데이터 시각화와 시각화 자료의 인터랙션 애니메이션을 구현한다.
  • 렌더링 속도를 수치화 할 수 있도록 테스트하고, 렌더링을 최적화한다.
• 로그인은 OAuth로 구현한다.
• 유저는 멀티프로필 설정이 가능하다.
• 소그룹에서는 스레드를 만들 수 있다.
• 테스트 코드 작성 및 성능을 개선한다.
• 백엔드 스트레스 테스트를 진행하고 성능을 개선한다.
  • 신학기, 연초 등 근거있는 트래픽 과부화 가정한다.
• 배포과정을 쉽게 하여 개발자 경험을 높이고, 배포 측정 시간을 줄인다.
  • 빌드 시간 측정 및 개선
  • CI / CD 적용
• 미디어 자원 서빙 속도를 개선한다. (폰트, 프로필 사진)

목표가 아닌 것 (Non-Goals)

• 제품 디자인은 특별히 고려하지 않는다.
• 기획의 실현 가능성에 대해서는 특별하게 고려하지 않는다. (ex. 공통 키워드 그룹에 실제로 사람들이 모일 것인가?)
• 소그룹 별 스레드는 핵심적으로 구현하지 않는다. 그룹화의 부가기능으로 사용할 수 있는 정도로 구현한다.
• 로그인 보안부분은 깊게 고민하지 않는다.

계획 (Plan)

• 핵심 기능

  랜딩 페이지(소개 UI)

  홈 페이지(커뮤니티 추가, 초대 코드 발급)

  데이터 시각화(데이터 시각화, 키워드 추가 삭제)

  관리자 페이지(유저 관리, 키워드 관리)

  스레드 페이지(스레드 CRUD, 댓글 CRUD)

  인증 모달(로그인, 회원가입) - 공통

• W1 - 기획

• W2 - 개발

  • FE - 개발 환경 세팅(Create Next App), 클라이언트 서버 CI / CD 배포, 프로토타입 제작
  • BE - 개발 환경 세팅, 개발용 Mock 서버 배포, DB 설계, 키워드 CRUD API 명세 작성, 키워드 CRUD API 구현

• W3 - 개발

  • FE - 데이터 시각화
  • BE - 로그인 API 명세 작성 및 구현, 스레드 API 명세 작성 및 구현

• W4 - 개발 - 데모 배포(4주차 끝나고)

  • FE - 스레드 페이지, 랜딩 페이지, 관리자 페이지
  • BE - 커뮤니티 CRUD API 명세 작성 및 구현, 커뮤니티에 유저 CRUD API 명세 작성 및 구현, CI / CD 서버 배포

• W5 - 개발

  • FE - 렌더링, 정적 자원 제공 테스트 및 최적화
  • BE - 부하테스트, 서버 개선

• W6 - 리팩토링 / 테스트 / QA

  • FE - 리팩토링 / 테스트 / QA
  • BE - 리팩토링 / 테스트 / QA

임팩트 측정 (Measuring Impact) - 하면서 정하기

• 성능
  • 라이트 하우스?
  • 렌더링 속도?
• 품질
  • 테스트 코드?
  • 테스트 커버리지?
  • 수정 확장이 용이한가? ⇒ 수치화가 가능할까? (정적 분석 도구가 이걸까? SonarLint)
• 동시접속량
  • 한 그룹 최대 인원?
  • 한 그룹 최대 키워드 시각화?
  • 초기 선택 모달에서 최대 키워드 갯수?
• 배포 성능
  • 배포 자동화 가능 유무
  • 오케스트레이션 지원 여부 (배포 환경의 유연성)
  • 배포 워크 플로우의 단계 수 (간소화 정도)
  • 배포 속도 (빌드 등)

기타 고려사항 (Other Considerations)

• 데이터 시각화는 워드 클라우드로 사용하며, 키워드 추가 삭제에 따른 인터랙션은 부가기능으로 생각한다.
• 화상채팅 기능을 추가할 가능성이 있음.
• 마이 페이지에서 그동안 축적한 키워드를 열람할 수 있다. - 유저 이탈 줄이기, 백엔드 과부하 처리, SSR + SSG
• 관리자 페이지의 중요도는 높지 않다.
  • 그룹 유저의 역할은 일단 유저, 소유자만 나눈다.
  • 관리자 페이지의 통계

마일스톤 (Milestones)

• 데이터 시각화 구현
• 참여자의 키워드 추가 삭제 구현
• 로그인 / 로그아웃 및 관리자 기능
• 커뮤니티 생성 및 커뮤니티 링크 공유
• 부스트캠프에 데모버젼 배포
• 그룹 별 스레드 생성 기능

배포 계획 (Deployment plan)

• 네이버 클라우드에 배포
  • Github Actions을 통해 CI / CD를 사용한다.
  • 패키지들은 Docker로 관리한다.
• Nginx를 통해서 리버스 프록시를 사용한다.
• 클라이언트에는 HTTPS 적용한다.
• Client, DB, API, 이미지 서버를 분리한다.
• pm2를 통해서 배포 후의 서버를 유지한다.
• sentry를 사용해서 에러를 관리한다.

관련 프로젝트 (Related projects)

• Slack - 벤치마킹
• Slido - 데이터 시각화
• 네이버 카페 - 소그룹