yooon26.log
로그인
yooon26.log
로그인
[실시간 채팅 웹앱 만들기](1) - 기능 정의 & 화면 설계
yoon Y
·
2022년 10월 15일
팔로우
0
0
실시간 채팅 웹앱 만들기
목록 보기
2/3
페이지별 기능 정리
1. 로그인 페이지
닉네임을 입력하고 프로필 이미지를 선택한다.
시작하기 버튼을 누르면 로그인이 되고 서비스를 사용할 수 있다.
2. 채팅방 목록 페이지 (다수와의 채팅)
채팅은 불특정 다수와 함께 할 수 있다.
사용자가 채팅방을 만들 수 있다.
다른 사람이 만든 채팅에 참여할 수 있다.
방에 사람이 없을 경우 특정 시간 후에 없어진다.
기본적으로 전체 채팅들 목록이 보임.
필터링해서 내가 참여한 채팅들만 볼 수 있다.
참여된 채팅에서 쌓인 메세지는 숫자로 표시된다.
선택한 채팅 나가기를 할 수 있다.
3. 개인 디엠 목록 페이지 (1:1채팅)
나와의 1:1 채팅만 볼 수 있음.
특정 사용자에게 직접 메세지를 보내야한다.
제목은 보낸 사람 닉네임.
한명이라도 나가면 사라짐.
쌓인 메세지는 숫자로 표시된다.
선택한 채팅 나가기를 할 수 있다.
4. 채팅 페이지
참여자 목록을 볼 수 있다.
텍스트와 이미지를 전송할 수 있다.
사람들의 아이디를 클릭하면 1:1 디엠을 보낼 수 있다.
채팅에서 나갈 수 있다. (목록 페이지 이동과는 다름)
사용자가 대화에 참여했다는 표시를 해준다.
1분 이내의 연속적인 메세지는 가장 마지막 메세지에만 시간 표시를 한다.
날짜가 다르면 날짜 구분선을 표시한다.
보류 (우선 순위 낮은 기능)
개인 정보 변경
채팅/디엠 리스트에서 채팅방 이름/유저 이름 검색
yoon Y
#프론트엔드
팔로우
이전 포스트
[실시간 채팅 웹앱 만들기](0) - 필요지식 학습
다음 포스트
[실시간 채팅 웹앱 만들기](2) - 프로젝트 세팅 및 소켓 연결
0개의 댓글
댓글 작성