[실시간 채팅 웹앱 만들기](1) - 기능 정의 & 화면 설계

yoon Y·2022년 10월 15일
0

페이지별 기능 정리

1. 로그인 페이지

  • 닉네임을 입력하고 프로필 이미지를 선택한다.
  • 시작하기 버튼을 누르면 로그인이 되고 서비스를 사용할 수 있다.

2. 채팅방 목록 페이지 (다수와의 채팅)

  • 채팅은 불특정 다수와 함께 할 수 있다.
  • 사용자가 채팅방을 만들 수 있다.
  • 다른 사람이 만든 채팅에 참여할 수 있다.
  • 방에 사람이 없을 경우 특정 시간 후에 없어진다.
  • 기본적으로 전체 채팅들 목록이 보임.
  • 필터링해서 내가 참여한 채팅들만 볼 수 있다.
  • 참여된 채팅에서 쌓인 메세지는 숫자로 표시된다.
  • 선택한 채팅 나가기를 할 수 있다.

3. 개인 디엠 목록 페이지 (1:1채팅)

  • 나와의 1:1 채팅만 볼 수 있음.
  • 특정 사용자에게 직접 메세지를 보내야한다.
  • 제목은 보낸 사람 닉네임.
  • 한명이라도 나가면 사라짐.
  • 쌓인 메세지는 숫자로 표시된다.
  • 선택한 채팅 나가기를 할 수 있다.

4. 채팅 페이지

  • 참여자 목록을 볼 수 있다.
  • 텍스트와 이미지를 전송할 수 있다.
  • 사람들의 아이디를 클릭하면 1:1 디엠을 보낼 수 있다.
  • 채팅에서 나갈 수 있다. (목록 페이지 이동과는 다름)
  • 사용자가 대화에 참여했다는 표시를 해준다.
  • 1분 이내의 연속적인 메세지는 가장 마지막 메세지에만 시간 표시를 한다.
  • 날짜가 다르면 날짜 구분선을 표시한다.

보류 (우선 순위 낮은 기능)

  • 개인 정보 변경
  • 채팅/디엠 리스트에서 채팅방 이름/유저 이름 검색
profile
#프론트엔드

0개의 댓글