설명
카카오톡이 자리 잡게 만든 채팅 버블 형태입니다. 한국에서 만들어진 채팅 UI는 거의 모두 이 모양을 따라요. 좌측 정렬 버블은 흰색이고 우측은 카카오 옐로우입니다. 상대 메시지 위에는 닉네임이 한 줄 들어가고, 시간은 같은 사람의 마지막 버블에만 표시돼요. '안 읽음 N'은 작은 노란 숫자로 버블 옆에 붙습니다. iMessage(파란/회색 버블)와는 시각적으로 다른 모양으로 자리 잡았고, 한국 사용자는 노란 버블을 보면 자연스럽게 '내가 보낸 거'라고 받아들여요.
🖼️ 미니어처
💬 AI에게 이렇게 말하세요
- 카카오톡식 채팅 버블을 만들어 주세요. 좌측 흰 버블(상대), 우측 노란 버블(본인), 시간은 같은 사람의 마지막 버블에만 표시.
- 상대 메시지는 위에 닉네임 + 좌측에 프로필 원형 아바타 32px. 우측 메시지엔 아바타 없음.
- 안 읽음 표시는 우측 메시지의 좌측에 작은 노란 숫자 텍스트로 ("1" 또는 "2"). 메시지가 읽히면 사라짐.
한국형 채팅의 5가지 시그니처
- 본인은 노랑, 상대는 흰색이에요(옐로우 룰).
- 시간은 같은 사람의 연속 메시지 마지막에만 한 번 표시합니다.
- 안 읽음 N은 작은 노란 숫자로 보여줘요.
- 프로필 원형 아바타는 상대 메시지에만 붙입니다.
- Long-press로 답장, 복사, 삭제 컨텍스트 메뉴가 떠야 해요.
⚡ 사용 예 (한 줄)
<div className="flex justify-end items-end gap-1"><span className="text-yellow-600 text-xs">1</span><div className="bg-yellow-300 rounded-2xl px-3 py-2">…</div></div>🧩 컴포넌트 매핑
자체 ChatBubble 컴포넌트로 만드는 것이 좋아요. 기존 라이브러리(react-chat-elements 등)는 PC와 웹용이라 한국형 톤과 잘 맞지 않습니다. Tailwind 'bg-yellow-300' 변형으로 직접 구현하면 됩니다.
iMessage처럼 본인 버블을 파랑, 상대 버블을 회색으로 만들면 한국 사용자는 시선이 헷갈려요. '노랑 = 내 메시지'로 학습돼 있기 때문입니다.
AI 챗 UI를 만들 때 사용자 버블에 카카오 노랑을 쓰면 한국 사용자에게 친숙해요. 다만 AI 응답 버블은 흰색이나 연회색이 정석입니다. 노랑은 본인 메시지를 뜻하는 색이기 때문이에요. 시간은 '오후 3:24' 같은 한국식 표기가 자연스럽고, 24시간제는 거의 쓰지 않습니다.
메시지 영역에는 role="log"와 aria-live="polite"를 둡니다. 새 메시지가 도착하면 스크린리더가 자동으로 announce해요. 안 읽음 숫자는 시각만 아니라 aria-label로 "안 읽음 N개"라고 명시해야 합니다.