week2

  • 프론트엔드-백엔드 구상

아무래도 웹개발을 해봤기에 데모서비스 구현을 메인으로 잡고 개발을 진행하게 되었다. 내가 할 수 있는 것을 하는 것도 중요하다!!

프로젝트 기획단에서 정한 목표를 바탕으로 UI와 기술등을 설계할 수 있었다.

  • 악성채팅(욕설, 비방, 혐오발언 등)에 대한 대체 문구 처리

  • 악성채팅과 부정적인 반응 / FAQ 성 채팅글을 따로 확인할 수 있는 리스트 제공

  • 채팅글을 바탕으로한 실시간 시청자 반응 대시보드 구현

1. 서빙 UI 구상

1.1. 계획

  • 웹 기술적인요소를 담기보다 목표한 기술들이 나오는 수준으로 구현하기

    • 채팅X: 소켓등을 사용하지않고, 채팅처럼 보이도록 할 것

    • 프론트엔드: 부트스트랩과 차트 라이브러리로 구현

    • ajax 통신

    • 로그인과 보안적인 기술 전부 생략

  • 구현할 것

    • 채팅처럼 보이는 영역

    • 리스트로 욕설, FAQ 데이터 보이는 영역

    • 차트 영역(Pie차트, Area차트, 워드클라우드)

1.2. 부트스트랩 & 차트

1.3. 백엔드 fast-api

2. 최종 UI

  • 채팅영역

    • 질문 하이라이팅

    • offensive 단어 경고표시

    • 욕설 대체 문구로 마스킹

    • confidence 설정으로 욕설에 대한 차단정도 설정

  • 차트영역

    • 전체 긍부정 Pie 차트로 시청자 반응 확인

    • 시간대별 긍부정 Area 차트로 각 시점마다 시청자의 반응 확인

    • 워드 클라우드로 긍부정 문구에 포함된 주요 단어확인

  • 리스트영역

    • 유저별로 사용한 부정, 혐오발언을 출력

    • 악성채팅 사용 수에 따른 유저 차단기능

    • FAQ 모아 볼 수 있는 리스트 영역

Previousweek1Nextweek3

Last updated