바글바글

sli.do에서 아이디어를 영감 받은 실시간 질의응답 및 투표 공유 웹 서비스

배포 링크

• www.vaagle.com

데모 영상

• 데모영상

주요 기능

• 2가지 사용자 모드 제공 (Host: 이벤트를 주관하는 사용자, Guest: 이벤트에 참가하여 질문하는 사용자)
• 실시간 질의응답(Guest 모드)
  • 실시간 질문할 수 있음
  • 질문에 좋아요를 누를 수 있음 (좋아요가 많으면 인기질문 Tab 상단쪽에 노출됨)
  • 질문에 이모지를 추가할 수 있음
  • 질문에 댓글을 달 수 있음
• 실시간 질의응답 (Host 모드)
  • 실시간 질문을 검열하여 특정 질문은 삭제할 수 있음
  • 특정 질문을 상단에 고정시킬 수 있음
  • 답변한 질문은 실시간질문 Tab에서 질문저장소로 이동시킬 수 있음
• 실시간 투표
  • 투표 종류: N지선다(복수선택 지원), 별점주기
  • Host는 투표를 생성하여 Guest들에게 실시간 투표 참여를 요청할 수 있음
  • Guest들은 투표를 할 수 있고, 투표 상황은 실시간 공유됨

위키 링크

wiki

팀원

• 권혁(hkwon)
• 김근영(nuguya)
• 김유준(demetoir)
• 홍태의(teihong93)

기술 스택

• Front-end: React, Apollo
• Back-end: nodejs, MySQL2, Sequelize, GraphQL(Yoga), socket.io, Oauth, Docker
• Env & etc: Eslint, babel, webpack, prettier, yarn, github, slack

DataFlow

기술적 특징

• Express, socket.io, grpahQL, MySQL 총 4가지 서버가 Docker 위에서 상호작용하며 동작
• 각각의 서버는 서로 의존적으로 연결되어있지 않고 독립적인 성격을 띄기 때문에 유지보수 및 에러 상황 대처에 유연
• 각 서버는 각각의 인증 로직을 가지고 있기 때문에 외부로부터의 개별접근을 차단
• 호스트 앱과 게스트 앱이 나뉘어있지만 서로가 실시간으로 연동
• 실시간 처리를 보장하며 채팅뿐 아니라 채팅검열 및 상단 고정 등이 즉각적으로 여러 클라이언트에 반영
• 실시간 투표를 통해 여러 클라이언트에 투표 결과를 실시간으로 반영
• 모바일 환경을 고려한 모바일 First
• React 컴포넌트 최적화를 통한 클라이언트 반응성 최적화
• Google OAuth 로그인

사용자 집단

• 컨퍼런스/세미나/수업 참가자 및 운영자

기획 배경 및 필요성

• 수업, 강연, 토론 중 실시간 질의응답 및 투표를 통한 청중의 능동적 참여를 유도함
• 완벽한 한글화 지원 ⇒ 이용자 연령층 확대 (중장년/아동)
• Front-end, back-end가 적절하게 배분, 4명이 도전적으로 개발할 만한 분량

도전적 기능

• 질문에 댓글 기능을 추가함
• Realtime & Robust: 실시간 질문 공유, 실시간 투표 및 안정적 서버/클라이언트 동작
• Localization: 한국인에게 친숙한 UI 개발 (카톡의 투표 UI, 다양한 한글폰트 추가 등)
• Mobile first: Guest 모드는 스마트폰에 최적화된 UI 개발, 최적화 작업 진행
• Emoji 적용