채팅 화면 UI 만들기 - 학습어플

제로베이스 새로운 과제

이번주는 채팅 어플 UI 개선 혹은 새롭게 디자인 해보기 과제이다.

나는 개인 프로젝트로 영어 학습 어플을 기획해봤기 때문에 해당 어플에 들어갈 채팅 화면을 구성해보았다.

우선 영어 학습 어플에서 튜터(선생님)가 있다는 가정 하에,

튜터 1 + 학생 n 명으로 그룹 채팅을 만들 수 있다는 가정 하에 만들었다.

1. 그룹 채팅명 + 참여 인원수 + 검색 기능 + 부가 기능 메뉴 아이콘

그룹 채팅방은 채팅 명을 정할 수 있다. 개인이 정할 수도 있고, 선생님이 하나로 정해서 통일 시켜놓을 수도 있다.

참여 인원수는 10명까지 가능해서 인원 수를 표기하는 것이 한 눈에 더 정리가 된 느낌인 것 같아서 추가하였다. 왜냐하면 그룹 채팅도 여러 개 참여할 수 있기 때문이다. 여러 개가 있어서 각 방마다 몇 명이 들어가있는지 간단히 확인하는 용도이다. 선생님 입장에서는 더 편하게 인원수나 채팅 방을 관리할 수 있다.

부가 기능 아이콘은 다른 SNS나 일반 채팅과는 달리 이 학습 어플에서는 학습 기능이 들어가야 해서 추가해놓았다. (자세한 것은 5번)

2. 공지 사항 기능

카카오톡을 참고하여 그룹의 공지 사항을 추가하였다.

왜냐하면 학습 어플이고 레슨이 있고 선생님이 있기 때문에 그룹의 그라운드 룰, 학습 룰, 선생님의 공지 과제 공지 등이 들어가야 하기 때문이다.

접었다 폈다 하는 기능이 있다.

3. 채팅화면

채팅화면은 카카오톡과 당근 마켓을 참고하였다.

프로필 사진이 보이고 대화 창을 구성하였다.

n명이 읽음 보다는 채팅을 친 시간을 넣어서 학습의 플로우를 쉽게 볼 수 있도록 하였다. 어차피 모두 참여해야 하기 때문에 n명 읽음은 불필요하다.

프사 아래에 이름 혹은 닉네임을 넣었다.

4. 채팅 타이핑 창

단순하게 옆에 플러스는 사진이나 파일 등을 전송할 수 있는 기능이며,

가운데는 타이핑 바, 그리고 전송 버튼을 구성하였다.

5. 그룹 채팅 방 내의 학습 기능

매일 학습을 할 때마다 매일 레슨을 기록할 수 있다. 북마크하거나 기록이 가능.

채팅방 내에서는 최대 10개까지 기록이 가능하며, 모든 기록은 마이프로필로 따로 빠져서 모두 볼 수 있다.

그리고 채팅할 때 문장 씩 타이핑을 하니까 그 중에서 마음에 들거나, 선생님이 알려주시는 그 날의 표현을 꾹 눌러서 저장할 수 있다. 그리고 간편하게 이 채팅방 안에서 그것을 모아서 볼 수 있고 복습할 수 있다. 모든 기록은 마찬가지로 프로필에서 따로 또 볼 수 있다.

아직 UI를 많이 고도화해야 하는 단계이지만, 일단 학습 어플 내의 채팅방으로서 기능을 구상해보았다.