카카오식 alert | UI 디자인 사전

설명

카카오톡과 카카오뱅크가 정착시킨 한국 모바일 confirm 다이얼로그 형식이에요. 화면 가운데 정렬 카드, 14~16px 둥근 모서리, 본문 위 짧은 제목 1줄, 본문 1~2줄, 하단에 같은 폭 두 버튼(좌측은 회색 취소, 우측은 카카오 옐로우 확인)으로 구성됩니다. iOS의 stacked 액션 시트나 Material의 좌우 텍스트 버튼과는 시각적 위계가 달라요.

🖼️ 미니어처

취소

확인

💬 AI에게 이렇게 말하세요

카카오식 alert 다이얼로그를 만들어 주세요. 화면 가운데 흰 카드 + 16px 둥근 모서리 + 제목·본문·하단 같은 폭 두 버튼(좌 회색 '취소' / 우 노란 '확인').
다이얼로그 폭은 화면 80~85%, 좌우 padding은 24px, 버튼 높이는 48px로 만들어 주세요.
다이얼로그가 dim된 배경 위에 떠 있고, 배경 클릭으로는 닫히지 않도록 처리합니다 (실수 방지).

iOS·Android·Web 다이얼로그와의 차이

iOS UIAlertController는 버튼이 가로 또는 세로로 stack되고, 색은 시스템 파랑이에요.
Material AlertDialog는 우측 정렬 텍스트 버튼을 쓰고 카드 음영이 강합니다.
한국형(카카오·토스)은 같은 폭 두 버튼을 가로로 분할하고 우측에 강조색을 둬요.

⚡ 사용 예 (한 줄)

<AlertDialog><AlertDialogContent className="max-w-[320px] rounded-2xl">…<AlertDialogFooter className="grid grid-cols-2 gap-2">…</AlertDialogFooter></AlertDialogContent></AlertDialog>

🧩 컴포넌트 매핑

shadcn/ui AlertDialog(확정성 dialog)에 커스텀 색상을 입혀 쓰거나 Radix Dialog를 직접 씁니다. iOS Native UIAlertController와는 시각적으로 달라요. window.confirm()은 절대 사용하지 마세요.

🚫

이렇게 하지 마세요

확인과 취소를 가로로 같은 색, 같은 위계로 두면 사용자가 '되돌릴 수 없는 동작'에 무의식적으로 탭하기 쉬워요. primary 액션 하나만 색으로 강조하면 됩니다.

🇰🇷

국내 UI 특징

한국 사용자는 확인 버튼이 우측에 있다는 데 익숙합니다. macOS와 iOS는 우측, Windows는 좌측이라는 차이가 있는데, 한국 모바일에서는 거의 모든 앱이 우측을 써요. 위치를 뒤집으면 사용자가 실수하기 쉽습니다. 카카오는 확인 색을 노랑(브랜드)으로 쓰고 토스나 뱅크샐러드는 파랑을 쓰지만, 강조 색이 우측에 들어간다는 위치 룰이 가장 중요해요.