🧸 Daily UI 013
Prompt: 다이렉트 메시지
- 다이렉트 메시징 앱, 프로필, 또는 채팅 박스를 디자인하세요.
- 메시지를 주고받는 사용자들, 이미지 사용, 배치, 메시지가 오가는 상황(맥락)을 고려하세요.
- 이 메시지는 사회적(사적인 대화)을 위한 것인가요? 고객 지원을 위한 것인가요?
설명
이 프롬프트는 다이렉트 메시징 기능의 UI/UX를 설계하라는 과제예요.
하지만 단순히 ‘채팅창’만 그리는 것이 아니라,
누가 누구에게 어떤 목적과 상황에서 메시지를 주고받는가까지 고려한 설계가 필요합니다.
설계 시 고려해야 할 핵심 요소들
| 항목 | 설명 |
|---|---|
| 목적 구분 | 사적 대화 (ex. 인스타 DM), 고객지원 (ex. 챗봇), 업무 채팅 (ex. 슬랙) 등 |
| 참여자 관계 | 1:1 개인, 그룹, 관리자-사용자 구조인지 구분 |
| 이미지 / 미디어 | 이미지, 파일, 링크 미리보기, 이모지 등 첨부 기능 고려 |
| 인터페이스 구성 | 메시지 입력창, 전송 버튼, 타임스탬프, 읽음 확인 등 |
| 배치/위치 | 보낸 사람과 받은 사람의 메시지 배치 구분 (왼쪽/오른쪽), 스크롤 방식 |
| 반응성과 가독성 | 모바일/데스크톱 모두에서 텍스트와 버튼이 잘 보이도록 설계 |
| 보조 기능 | 신고/차단, 메시지 삭제, 알림 설정, 채팅 검색 등 |
| 메시지 맥락 | 친구 대화면 톤앤무드 캐주얼하게, 고객지원이면 정확하고 빠르게 |
예시 시나리오
-
✅ 사적 대화 (예: 인스타그램 DM)
목적: 친구끼리 사진 공유, 일상 대화
특징: 이모지 반응, 스티커, 사진 미리보기, 말풍선형 UI -
✅ 고객 지원 채팅 (예: 네이버 톡톡)
목적: 주문 관련 문의, 빠른 피드백
특징: FAQ 연결, 자동응답, 텍스트 강조, CS 히스토리 저장 -
✅ 업무용 메신저 (예: 슬랙, 팀즈)
목적: 협업, 업무 커뮤니케이션
특징: 스레드 구조, 파일 첨부, 멘션, 시간 기반 정렬
UX 측면에서 중요한 포인트
- 입력창은 항상 고정되어 있어야 함
- 최신 메시지 자동 스크롤 기능
- 읽음 여부 및 전송 성공 상태 시각화
- 답장을 유도하는 최소한의 인터랙션 요소 (예: 좋아요, 이모지, 퀵 리플라이 등)
요약
- 이 프롬프트는 단순한 채팅창 그리기보다,
메시지 기능을 사용하는 사람들 간의 목적과 관계, UX 흐름, 미디어 처리 방식까지 통합적으로 고민해야 하는 커뮤니케이션 디자인 과제입니다.
🧸 결과물
- 토스의 채팅 UI
