깊게 보기 · 01
“팝업 띄워주세요”가
가장 위험한 요청인 이유
같은 말을 듣고 네 사람이 서로 다른 걸 상상합니다. 그리고 그 차이는 개발 방식·공수·사용자 경험을 전부 바꿉니다. 직접 눌러보며 정리해봅시다.
같은 요청, 네 개의 결과
클라이언트가 "여기 팝업 하나 띄워주세요"라고 했습니다. 아래 넷 중 무엇을 말한 걸까요? 각각 눌러보세요.
완전히 새로운 창이 열렸습니다
진짜 "팝업"입니다. 브라우저가 새 창을 엽니다. 그런데 요즘 브라우저는 이걸 기본으로 차단합니다. 사용자가 허용해야만 보입니다.
🎉 이벤트 안내
지금 가입하면 첫 달 무료입니다.
대부분의 클라이언트가 실제로 원하는 건 이것입니다. 정확한 이름은 "모달 다이얼로그"입니다.
흐름을 막지 않고 계속 붙어 있는 알림입니다. 사용자가 닫기 전까지 남습니다.
잠깐 떴다 자동으로 사라집니다. 놓쳐도 괜찮은 내용에만 씁니다.
"팝업"은 층위 없이 뭉뚱그린 말입니다. 회의에서 이 단어가 나오면 그대로 받아 적지 말고 반드시 되물으세요 — "새 창인가요, 화면 위에 뜨는 건가요, 계속 붙어 있는 건가요?"
모달은 물건이 아니라 “성질”입니다
모달의 핵심은 예쁜 상자가 아니라 뒤를 막는다는 점입니다. 두 개를 나란히 열어보고 뒤쪽 버튼을 눌러보세요.
모달 뒤를 막음
모달
이게 열려 있는 동안 뒤쪽 버튼은 눌리지 않습니다.
논모달 뒤도 씀
왼쪽은 모달이 열린 동안 뒤쪽 버튼이 죽어 있고, 오른쪽은 패널이 열려 있어도 계속 눌립니다.
모달로 만들지 논모달로 만들지는 디자인 취향이 아니라 기획 결정입니다. 사용자의 흐름을 반드시 끊어야 하면 모달, 참고만 시키면 논모달입니다. 모달은 아껴 쓰세요.
다이얼로그는 “상자” 자체입니다
제목 · 내용 · 버튼으로 이루어진 컴포넌트가 다이얼로그입니다. 이 상자는 모달로도, 논모달로도 띄울 수 있습니다.
정말 삭제할까요?
내용삭제한 글은 되돌릴 수 없습니다.
버튼한 문장으로 외우세요 — "다이얼로그(물건)를 모달(방식)로 띄웠는데, 그중 알리기만 하는 게 얼럿(종류)이다." 들여쓰기가 곧 포함 관계입니다.
버튼이 하나냐 둘이냐
다이얼로그의 하위 종류입니다. 얼럿은 알리기만 하고, 컨펌은 되돌릴 수 없는 행동 직전에 한 번 더 묻습니다.
얼럿 버튼 1개
저장하지 못했습니다
네트워크를 확인해주세요.
컨펌 버튼 2개
이 글을 삭제할까요?
삭제한 글은 되돌릴 수 없습니다.
버튼이 확인 / 취소 — 무엇에 확인하는 건지 알 수 없습니다. 특히 "취소를 취소한다" 같은 상황이 생깁니다.
버튼에 행동을 그대로 적습니다 — 삭제하기 / 그대로 두기. 문장을 안 읽어도 버튼만 보고 판단할 수 있습니다.
위험한 행동은 빨간색 + 명확한 동사로. 그리고 컨펌 대신 "일단 실행하고 되돌리기(실행 취소)"를 주는 방식이 훨씬 부드러운 경우가 많습니다.
토스트 · 스낵바 · 배너
흐름을 막지 않는 알림들입니다. 얼마나 오래 남아 있는가로 갈립니다.
| 이름 | 버튼 | 사라짐 | 쓰는 곳 |
|---|---|---|---|
| 토스트 | 없음 | 자동 | 저장됨·복사됨 — 놓쳐도 되는 것 |
| 스낵바 | 있음 | 자동 | 삭제됨 + 실행 취소 |
| 배너 | 있을 수도 | 안 사라짐 | 점검 예정·결제 만료 — 조치가 필요한 것 |
오류 메시지를 토스트로 처리하면 안 됩니다. 사용자가 못 보고 지나가면 다시 볼 방법이 없습니다. 폼 오류는 문제가 있는 입력칸 바로 아래에(인라인) 붙이는 게 원칙입니다.
이제 이렇게 요청하세요
같은 요구를 오해 없이 전달하는 문장입니다. 그대로 복사해서 쓰세요.
가입 완료 후 안내를 보여주고 싶습니다. 흐름을 끊어야 하니 모달 다이얼로그로 띄워주세요. 딤(배경 어둡게)은 넣고, 딤 클릭 시 닫히도록 해주세요. Esc로도 닫히게 해주세요.
삭제 버튼을 누르면 컨펌 다이얼로그를 띄워주세요. 버튼 문구는 “삭제하기 / 그대로 두기”로 하고, 삭제 버튼은 위험(빨강) 스타일로 해주세요. 이 경우는 딤을 눌러도 닫히지 않게 해주세요.
저장이 끝나면 토스트로 “저장되었습니다”를 2초간 띄워주세요. 흐름을 막지 않아야 하니 모달은 쓰지 말아주세요.
입력값이 잘못됐을 때는 토스트 말고 해당 입력칸 아래에 인라인 오류로 보여주세요. 어느 칸이 문제인지 알 수 있어야 합니다.
모바일에서는 가운데 모달 대신 바텀시트로 올라오게 해주세요. 손이 닿기 쉬운 아래쪽이 낫습니다.
요청에 ①어떤 컴포넌트 ②모달인지 아닌지 ③닫히는 조건 세 가지가 들어 있으면 대부분 한 번에 원하는 결과가 나옵니다.
WHY THIS MATTERS
단어 하나를 정확히 부르면
재작업이 사라집니다.
“팝업”을 “모달 다이얼로그”로 바꿔 부르는 것만으로 개발자·디자이너·클라이언트가 같은 그림을 보게 됩니다. 용어는 지식이 아니라 소통 비용을 줄이는 도구입니다.