Skip to content

20201120(금)_회고록

Kimn edited this page Nov 20, 2020 · 1 revision

발표

주요 요구사항

  • 파파고 API를 사용해서 번역된 메시지를 이용한 실시간 채팅이 가능
  • 지원 언어는 한국어 & 영어
  • 대화방을 생성하거나 대화방에 코드 등을 공유하여 초대 가능
  • 닉네임 설정 가능
  • 메시지 작성은 텍스트 & 음성 두 가지로 가능해야함
  • 대화 멤버 목록이 보여야 함

팀 컨셉

파파고 로고를 보며 칼라 스키마를 선정

팀 이름을 고민하다가 빵 이모지를 다들 홀린듯이 보고 있어서 빵을 좋아하는 팀, 푸드파파고 → 푸파고가 되었다^^

기술 스택

웹에서 요구 및 추천되었던 기술 스택은 타입스크립트, 리액트, 익스프레스 정도. 상태 관리는 리덕스, DB는 간단한 로그 축적은 Mongo, 그 외 추가 삭제가 일어나는 데이터는 MySQL. 새로운 기술적인 시도보다는 기존에 많이 사용되고 있는 옵션으로 선택.

앱은 RX swift를 이용한 MVVM 패턴을 적용해볼 계획.

컨벤션

코드 리뷰를 위해 멘토님들이 중요하게 생각하시는 부분을 생각하면서 작성

커밋은 가장 작은 단위 (함수, 리팩토링, 버그 등)

커밋 메시지 작성 시 이슈 번호를 반드시 포함

이슈 하나당 PR 하나로 가급적 유지. 즉, 이슈 하나가 브랜치 하나.

이를 위해 웹, 앱이 각자의 dev 브랜치에서 작업을 하고 목요일에 프리징 직전에 통합 dev 브랜치로 merge.

기획 & 와이어프레임

기본적인 요구사항 기반으로 푸파고 팀만의 특징을 기획 단계에서 논의하고 정리함.

기획 포인트

  • 계정 생성이 불필요한 익명성 기반의 서비스
  • 대화 내용은 휘발성. 채팅방을 벗어나는 순간 없어짐
  • 채팅 통신은 소켓을 활용

백로그

https://docs.google.com/spreadsheets/d/1lVKSwk9m4wCNht9N-iGdewZxiT_gUVLpq_f8r7UoG3Q/edit#gid=0

시나리오

  1. 닉네임과 언어 설정

    1-1) 언어를 설정하면 언어별 UI 제공

  2. 방 생성 혹은 방 참가하기 버튼

    2-1) 방 생성 버튼 클릭 시

    1. 방 제목을 입력한다.

    2. 생성 버튼을 누른다.

    2-2) 방 참가하기 버튼 클릭 시

    1. 코드로 참여하기 버튼과 방 리스트가 출력된다.

    2. 코드로 참여하기 버튼 or 방 리스트 중 하나를 클릭하면 코드 입력 화면으로 넘어간다.

    3. 코드를 올바르게 입력하면 채팅방으로 입장한다.

  3. 채팅방에 입장하면 상단에 채팅방 제목과 코드가 보인다.

    3-1) 방 제목을 수정할 수 있다.

    3-2) 방 제목 왼쪽에 있는 나가기 버튼을 클릭하면 방을 나갈 수 있다.

  4. 화면 오른쪽에는 방에 입장한 유저 목록과 현재 활성화되어 있는 방 리스트를 볼 수 있다.

    4-1) 방 리스트에 있는 방 중에 하나를 클릭하면 코드 입력하는 화면이 나타난다.

    4-2) 코드를 올바르게 입력하면 새로운 채팅방으로 입장하고 기존의 채팅방에서는 나가진다.

  5. 화면 하단에는 채팅을 작성할 수 있는 칸과 번역된 텍스트를 보여줄 칸이 나란히 존재한다.

    5-1) 채팅을 작성하면 실시간으로 번역을 해서 옆 칸에 보여준다.

    5-2) 음성인식 버튼을 누르면 모달 창이 뜨면서 음성인식 중인 것을 표시한다.

    5-3) 작성한 채팅을 전송하면 원문과 번역문이 나란히 채팅란에 보여진다.

  6. 채팅란에는 내가 보낸 채팅은 오른쪽, 상대가 보낸 채팅은 모두 왼쪽에 표시하고 색도 구분한다.

    6-1) 내가 설정한 언어로 된 채팅이 항상 왼쪽에 위치한다.

🦜 실시간 번역 메신저

💫 서비스

📌 기획서

🤙 규칙

📃 컨벤션

📝 Documents

⚙️ 기술 스택

Clone this wiki locally