텔레그램 봇 UX 디자인: 버튼, 시나리오, 그리고 aiogram을 활용한 FSM
사용자 경험이 텔레그램 봇의 지속 사용을 결정합니다. 명확한 메시지와 버튼의 흐름이 없다면 기능은 무용지물입니다. 텔레그램에서 UX는 메시지 → 버튼 → 응답의 연쇄로 귀결됩니다. 사용자의 결정을 최소화하세요—망설임 없이 단계별로 안내하십시오.
/start의 첫 메시지는 매우 중요합니다: 3초 이내에 사용자는 남을지 말지 결정합니다. 긴 텍스트는 피하고, 핵심, 이점, 그리고 주요 버튼을 명시하세요.
시작 화면 구조:
- 봇의 목적을 담은 제목
- 1–2줄 설명
- 1개의 주요 액션 버튼
- 선택 사항: 도움말 버튼
버튼을 기본 인터페이스로
버튼은 화면과 메뉴를 대체합니다. 인라인 버튼이 선호됩니다: 메시지에 첨부되어 채팅을 어지럽히지 않습니다. 고정된 옵션 세트에는 답장 버튼을 사용하세요.
최적의 버튼 수:
- 1–2개 버튼: 즉각적인 선택
- 3–4개: 2–3초의 멈춤
- 5개 이상: 스트레스와 이탈
버튼 텍스트 규칙:
- 동사: "생성", "전송", "뒤로"
- "예/아니오" 대신 "확인/취소"
- 메시지 내 고유 텍스트
- 위험한 액션: 명확한 경고
Bot API 9.4의 색상 버튼
Bot API 9.4는 인라인 버튼에 스타일을 도입했습니다: 기본(파랑), 성공(초록), 위험(빨강). aiogram 3.20+가 필요합니다. 커스텀 이모지는 텔레그램 프리미엄을 통해 소유자 또는 Fragment의 추가 사용자 이름으로 사용 가능합니다.
aiogram의 키보드 예시:
from aiogram.types import InlineKeyboardMarkup, InlineKeyboardButton
def get_colored_keyboard() -> InlineKeyboardMarkup:
return InlineKeyboardMarkup(inline_keyboard=[
# 🔵 파랑 버튼
[InlineKeyboardButton(
text="채널 구독",
url="https://t.me/example",
icon_custom_emoji_id="6039422865189638057", # 📣 메가폰
style="primary",
)],
# 🟢 초록 버튼
[InlineKeyboardButton(
text="구독 확인",
callback_data="check_subscribe",
icon_custom_emoji_id="5870633910337015697", # ✅ 체크마크
style="success",
)],
# 🔴 빨강 버튼
[InlineKeyboardButton(
text="계정 삭제",
callback_data="delete_account",
icon_custom_emoji_id="5870657884844462243", # ❌ 엑스
style="danger",
)],
# 한 줄에 두 버튼
[
InlineKeyboardButton(
text="취소",
callback_data="cancel",
icon_custom_emoji_id="5870657884844462243",
style="danger",
),
InlineKeyboardButton(
text="완료",
callback_data="confirm",
icon_custom_emoji_id="5870633910337015697",
style="success",
),
],
# 스타일 없는 버튼
[InlineKeyboardButton(
text="설정",
callback_data="settings",
icon_custom_emoji_id="5870982283724328568", # ⚙️
)],
])호출: await message.answer("텍스트", reply_markup=get_colored_keyboard()). 이모지 ID는 @ShowJsonBot에서 얻으세요.
제한 사항:
- 스타일—Bot API 9.4+
- 커스텀 이모지—프리미엄
- 프리미엄 없음: 구독 없는 사용자에게 사각형 표시
현대적인 느낌을 위한 커스텀 이모지
프리미엄 이모지는 인식을 향상시킵니다: 버튼, 제목, 확인에 브랜드 아이콘 사용. 과부하 주지 마세요—메시지당 1–2개의 액센트.
적용 사례:
- 버튼에서 ✅ 대신 체크마크
- 봇 브랜드로 고유 이모지
- 성공 시 애니메이션
명령어 대신 시나리오
명령어(/생성, /편집)는 사용자가 논리를 기억하게 강요합니다. 시나리오는 손을 잡고 안내합니다: 봇이 단계를 지시하고, 사용자가 따릅니다.
게시물 생성 시나리오 예시:
| 단계 | 사용자 액션 | 봇 응답 |
|------|-------------|--------------|
| 1 | "게시물 생성" | "사진 또는 GIF를 보내주세요" |
| 2 | 사진 전송 | "이제 텍스트를 입력하세요" |
| 3 | 텍스트 전송 | "버튼을 추가하시겠습니까?" |
| 4 | "예" | "버튼 텍스트와 링크를 입력하세요" |
| 5 | 데이터 입력 | 미리보기 |
| 6 | "전송" | "✅ 게시 완료" |
시나리오 사용 시기:
- 다중 단계
- 데이터 입력
- 옵션 선택
명령어: /start, /help, /cancel.
상태 관리를 위한 FSM
유한 상태 기계 없이는 시나리오가 깨집니다: 사용자가 사진 대신 텍스트를 보내면, 봇은 혼란스러워합니다.
상태가 해결하는 문제:
- 각 user_id에 대한 단계 추적
- 오류 처리: "사진 대기 중, 텍스트 무시"
- "뒤로" 지원
상태 클래스 예시:
class States:
START = "start"
WAITING_PHOTO = "waiting_photo"
WAITING_TEXT = "waiting_text"
WAITING_BUTTON = "waiting_button"핸들러에서: FSMContext.state 확인, 전환 await state.set_state(States.WAITING_TEXT).
핵심 요약
- 첫 메시지: 핵심 + 1 버튼, 명령어 목록 없음.
- 버튼: 최대 2–4개, 동사, Bot API 9.4의 색상.
- 시나리오 > 명령어: 사용자를 단계별로 안내.
- FSM 필수: 1단계 이상의 시퀀스에.
- 이모지 신중히: 프리미엄 아이콘은 액센트로만.
— Editorial Team
아직 댓글이 없습니다.