팝업과 알림 띄우기
버튼을 눌렀는데 화면이 아무 말도 안 하면, 손님은 안 됐다고 판단하고 또 눌러요. "저장됐어요", "정말 지울까요?" 같은 한마디를 띄우는 장치예요.
쉽게 말하면
계산대에서 카드를 긁으면 삑 소리와 함께 "승인"이라는 글자가 잠깐 떴다 사라져요. 그 한 번의 삑 소리 덕분에 손님도 사장님도 결제가 됐다는 걸 알죠. 반대로 폐기 버튼처럼 되돌릴 수 없는 일에는 계산대가 "정말 취소할까요?"를 띄우고 손을 멈춰 세워요. 화면 속 알림도 딱 이 두 가지예요. 하나는 끝났다고 알려 주는 삑 소리, 하나는 손을 붙잡는 확인 창이에요.
손님은 안 눌렸다고 생각하고 또 눌러요. 같은 예약이 두 건 들어오거나, 저장이 됐는데도 불안해서 창을 닫지 못해요.
손님은 끝난 걸 알고 다음 일로 넘어가요. 문의도 줄어요. "저 신청된 거 맞나요?" 전화가 사라지거든요.
이 문서는 화면이 손님에게 말을 거는 방법을 다뤄요. 손님 폰으로 문자나 알림톡을 보내는 일은 다른 이야기라 알림 보내기에 있어요.
장치는 세 가지뿐이에요
화면이 말을 거는 방식은 크게 셋이에요. 이름은 몰라도 되는데, 셋이 다르다는 것만 알면 AI에게 원하는 걸 정확히 시킬 수 있어요.
| 장치 | 생긴 모양 | 언제 쓰나 | 손님을 멈추나 |
|---|---|---|---|
| 잠깐 뜨는 알림 띠 | 화면 구석에 작은 띠가 떴다가 2~3초 뒤 스스로 사라져요 | 저장됐다, 복사됐다, 보냈다처럼 이미 끝난 일을 알릴 때 | 안 멈춰요. 손님은 그대로 하던 일을 계속해요 |
| 화면을 덮는 확인 창 | 화면 가운데에 창이 뜨고 뒤가 어둡게 깔려요. 버튼을 누르기 전엔 안 닫혀요 | 삭제, 결제, 발송처럼 되돌릴 수 없는 일 앞에서 한 번 물을 때 | 멈춰요. 그래서 아껴 써야 해요 |
| 그 자리에 붙는 안내 글 | 입력칸 바로 아래에 빨간 글씨로 붙어요. 안 사라져요 | "전화번호를 다시 확인해 주세요"처럼 고칠 곳을 짚어 줄 때 | 안 멈춰요. 대신 고쳐야 넘어가요 |
가장 흔한 실수가 이 셋을 뒤바꿔 쓰는 거예요. 저장됐다는 말을 확인 창으로 띄우면 손님은 잘한 일을 하고도 매번 확인 버튼을 눌러야 해요. 반대로 삭제 경고를 잠깐 뜨는 띠로 띄우면 손님이 읽기 전에 사라져요. 입력 오류를 다루는 자세한 요령은 입력값 확인에 있어요.
이런 증상으로 찾아오셨을 거예요
여기가 이 문서의 본론이에요. 왼쪽에서 사장님 화면 증상을 찾고, 오른쪽 문장을 그대로 복사해서 AI에게 말하면 돼요. 용어를 외울 필요 없어요.
| 화면에서 보이는 증상 | 이렇게 말하세요 |
|---|---|
| 저장 버튼을 눌렀는데 아무 일도 안 일어나요 | "저장 버튼을 누르면 저장됐다는 안내가 화면에 잠깐 떴다 사라지게 해주세요" |
| 손님이 실수로 삭제를 눌러서 자료가 날아갔어요 | "삭제를 누르면 정말 지울지 먼저 물어보는 확인 창을 띄워주세요. 되돌릴 수 없다는 말도 넣어주세요" |
| 확인 창이 떴는데 닫을 방법이 없어요 | "확인 창에 닫기 버튼을 넣고, 창 바깥을 눌러도 닫히게 해주세요" |
| 안내가 너무 빨리 사라져서 못 읽었어요 | "안내가 떠 있는 시간을 3초 정도로 늘려주세요" |
| 안내가 화면 위에 계속 쌓여요 | "안내가 여러 개 겹치지 않게, 가장 최근 것 하나만 보이게 해주세요" |
| 폰에서 확인 창이 화면 밖으로 넘어가요 | "확인 창이 폰 화면 안에 다 들어오게 고쳐주세요. 버튼도 잘리지 않게요" |
| 창이 떠 있는데 뒤쪽 화면이 계속 움직여요 | "창이 떠 있을 때는 뒤 화면이 스크롤되지 않게 해주세요" |
| 실패했는데 성공했다고 나와요 | "저장이 실패하면 성공 안내가 아니라 실패 안내가 뜨게 해주세요. 왜 실패했는지도 한 줄로 알려주세요" |
| 들어오자마자 팝업이 떠서 답답해요 | "들어오자마자 뜨는 팝업은 없애주세요. 손님이 버튼을 누른 뒤에만 안내가 뜨면 돼요" |
| 확인 창의 예, 아니오가 헷갈려요 | "확인 창 버튼 글자를 삭제할게요, 그냥 둘게요처럼 무슨 일이 벌어지는지 그대로 써주세요" |
| 안내가 무슨 말인지 모르겠어요 | "안내 문구를 손님이 알아듣게 바꿔주세요. 무슨 일이 있었는지와 다음에 뭘 하면 되는지 두 가지만 넣어주세요" |
| 확인 창이 떴을 때 배경 글씨가 다 보여서 어지러워요 | "확인 창이 뜨면 뒤 화면을 어둡게 깔아서 창에 눈이 가게 해주세요" |
증상 그대로 말하면 돼요
"모달에 백드롭 추가하고 스크롤 락 걸어주세요"라고 말할 필요가 없어요. "창이 떴는데 뒤 화면이 움직여요"로 충분해요. 고치는 쪽이 그 말을 알아듣게 만드는 게 원래 순서예요. 말 거는 요령 전반은 프롬프트에 정리돼 있어요.
왜 이게 매출과 붙어 있나
손님이 버튼을 누르는 순간은 사장님에게 가장 값진 순간이에요. 예약을 넣고, 결제를 하고, 문의를 보내는 중이니까요. 그 순간에 화면이 침묵하면 손님은 자기 행동이 먹혔는지 알 방법이 없어요.
그때 손님이 하는 행동은 정해져 있어요. 다시 누르거나, 새로고침하거나, 나가요. 셋 다 사장님에게 손해예요.
- 1다시 누른다. 같은 예약이 두 건, 같은 결제가 두 번 들어와요. 사장님은 환불과 사과로 하루를 씁니다.
- 2새로고침한다. 쓰던 내용이 날아가요. 손님은 처음부터 다시 쓸 마음이 없어요.
- 3나간다. 그리고 전화를 걸어요. "저 신청 된 거예요?" 이 전화 한 통이 사장님 시간이에요.
- 4아예 안 온다. 가장 나쁜 경우예요. 손님은 사이트가 고장 났다고 기억하고, 사장님은 그런 일이 있었는지도 모릅니다.
반대로 "보냈어요" 한 줄만 띄워도 이 넷이 전부 사라져요. 만드는 비용은 거의 안 드는데 효과가 큰, 몇 안 되는 작업이에요. 버튼을 누른 뒤 결과가 나오기까지 시간이 걸린다면 기다리는 중 표시도 같이 붙이세요. 둘은 한 쌍이에요.
확인 창은 아껴 쓰세요
확인 창은 강력해서 남용하기 쉬워요. 손님을 멈춰 세우는 장치니까, 자주 나오면 손님은 읽지 않고 누르는 습관이 생겨요. 그러면 정작 중요한 경고도 안 읽고 넘어가요.
손님은 세 번 다 안 읽고 누르는 사람이 돼요. 그 습관으로 진짜 삭제 경고도 넘겨 버려요.
확인 창이 하루에 한 번쯤만 나오니까, 나올 때 손님이 진짜로 읽어요.
판단 기준은 하나예요. 되돌릴 수 있으면 묻지 말고, 되돌릴 수 없으면 물어보세요. 삭제, 결제, 발송, 예약 취소, 계정 해지 정도가 물어볼 일이에요.
묻는 것보다 좋은 방법
손님이 자주 하는 일이라면, 묻는 대신 먼저 해 주고 되돌릴 길을 주는 것이 훨씬 편해요. "삭제했어요. 되돌리기" 같은 식이죠. 스무 번 중 한 번 실수하는 일이라면 스무 번 묻는 것보다 이게 낫습니다. 되돌리기에서 이어 읽으세요.
사장님이 실제로 겪는 장면
장면 1 · 손님이 리뷰에 남겼다
“예약이 됐는지 모르겠어서 세 번 눌렀어요. 나중에 전화 와서 예약이 세 건이라고 하시던데 좀 민망했습니다.”
손님 잘못이 아니에요. 화면이 아무 말을 안 한 게 원인이에요. 이럴 때 필요한 건 두 개예요. 누르는 동안 버튼을 잠가서 두 번 안 눌리게 하고, 끝나면 "예약됐어요"를 띄우는 거요. AI에게는 "예약 버튼을 누르면 처리하는 동안 버튼이 잠기고, 끝나면 예약됐다는 안내가 뜨게 해주세요"라고 말하면 돼요.
장면 2 · 폰으로 확인해 보니 창이 잘려 있다
“컴퓨터에서는 멀쩡했는데 폰으로 열었더니 확인 창 아래쪽 버튼이 화면 밖으로 나가서 누를 수가 없어요.”
확인 창에서 가장 흔한 사고예요. 창이 화면보다 커지면 손님은 결정도 못 하고 창도 못 닫는 상태에 갇혀요. 말은 이렇게 하세요. "확인 창이 폰에서 화면 밖으로 나가요. 화면 안에 다 들어오게 하고, 내용이 길면 창 안에서 스크롤되게 해주세요." 화면 크기 문제 전반은 반응형에 있어요.
장면 3 · 직원이 물었다
“사장님, 저장 눌렀는데 초록색 글자가 잠깐 떴다 사라져요. 저장이 된 건지 만 건지 모르겠어요.”
안내가 떴는데도 못 알아본 경우예요. 원인은 보통 너무 짧거나 눈에서 먼 자리에 뜨는 것이에요. "안내가 3초쯤 보이게 하고, 눌린 버튼 근처에 뜨게 해주세요"로 고쳐요. 색만으로 성공과 실패를 구분하지 않는 것도 중요해요. 글자로도 같이 알려야 해요.
안내 문구는 이렇게 써요
장치를 붙였는데도 손님이 헤매면, 대개 문구가 사장님 말이 아니라 프로그램 말이라서예요. 좋은 문구는 두 가지만 담아요. 무슨 일이 있었는지, 다음에 뭘 하면 되는지요.
| 프로그램 말투 | 손님이 알아듣는 말투 |
|---|---|
| 처리가 완료되었습니다 | 예약됐어요. 확인 문자를 보냈어요 |
| 오류가 발생했습니다 | 저장하지 못했어요. 잠시 뒤 다시 눌러 주세요 |
| 유효하지 않은 값입니다 | 전화번호를 숫자만 넣어 주세요 |
| 정말 삭제하시겠습니까? | 이 예약을 지울까요? 지우면 되돌릴 수 없어요 |
| 요청이 거부되었습니다 | 이미 마감된 시간이에요. 다른 시간을 골라 주세요 |
오른쪽 문구들이 다 짧다는 것도 봐 주세요. 잠깐 뜨는 안내는 한 줄에서 끝나야 읽혀요. 설명이 길어져야 한다면 그건 잠깐 뜨는 안내가 아니라 그 자리에 붙는 안내 글로 가야 할 내용이에요. 화면에 빨간 글씨가 떴을 때 그 뜻을 읽는 법은 에러 메시지 읽기를 보세요.
자주 묻는 것
- Q. 팝업이라고 하면 광고창 같은데, 손님이 싫어하지 않을까요?
- 싫어하는 건 부탁하지도 않았는데 뜨는 것이에요. 들어오자마자 뜨는 광고창, 나가려는데 붙잡는 창 같은 것요. 손님이 버튼을 눌러서 뜨는 안내는 오히려 안심시켜요. 판단 기준은 "손님이 요청했나" 하나입니다.
- Q. 브라우저 팝업 차단에 걸리나요?
- 안 걸려요. 팝업 차단은 새 창을 강제로 여는 것을 막는 기능이고, 여기서 말하는 안내와 확인 창은 같은 화면 안에 그려지는 부분이에요. 차단 대상이 아니에요.
- Q. 안내는 몇 초 정도 띄우면 되나요?
- "저장됐어요"처럼 읽지 않아도 되는 성공 안내는 2초에서 3초면 충분해요. 실패 안내나 손님이 읽어야 할 내용은 스스로 사라지지 않게 하고, 손님이 닫게 두세요. 읽어야 하는 것을 시간에 맡기면 안 됩니다.
- Q. 확인 창은 어디에 붙여야 하나요?
- 되돌릴 수 없는 일에만요. 삭제, 결제, 발송, 취소, 해지 정도예요. 저장이나 화면 이동처럼 다시 하면 되는 일에는 붙이지 마세요. 손님이 확인 창을 읽지 않는 습관을 갖게 되는 게 제일 위험해요.
- Q. 문자나 알림톡 보내는 것과 같은 건가요?
- 달라요. 여기 나오는 건 손님이 지금 보고 있는 화면 안에서만 보여요. 화면을 닫으면 사라져요. 손님 폰으로 남는 메시지를 보내는 일은 알림 보내기 쪽이고, 비용과 동의 문제도 따라붙어요.
- Q. 확인 창이 떴을 때 뒤 화면을 어둡게 깔아야 하나요?
- 그게 좋아요. 어둡게 깔면 손님 눈이 창으로 가고, 뒤쪽을 아직 못 누른다는 사실도 자연스럽게 전달돼요. 어둡게 안 깔면 손님은 뒤 버튼을 누르려다 안 눌려서 고장으로 오해해요.
- Q. 목록이 텅 비었을 때도 안내를 띄우면 되나요?
- 그건 다른 장치가 맡아요. 잠깐 뜨는 안내는 방금 일어난 일을 알리는 것이고, 텅 빈 목록에는 그 자리에 머무는 안내가 필요해요. 빈 화면을 보세요.
헷갈리기 쉬운 것
안내가 떴으니 저장된 것 아닌가요? 꼭 그렇지 않아요. 안내는 화면이 하는 말일 뿐이라서, 실제로 저장에 실패했는데도 성공 안내가 뜨게 잘못 만들어질 수 있어요. 그래서 실제로 저장이 됐는지 목록에서 눈으로 한 번 확인해 보는 게 좋아요. 만약 어긋난다면 "저장이 실제로 성공했을 때만 성공 안내가 뜨게 해주세요"라고 말하면 돼요.
확인 창이 뜨면 안전한 것 아닌가요? 확인 창은 손님 실수를 줄이는 장치일 뿐이에요. 권한이 없는 사람이 애초에 삭제 버튼을 볼 수 없게 막는 것과는 전혀 다른 일이에요. 그건 권한이 맡습니다. 확인 창은 자물쇠가 아니라 문 앞의 "조심" 안내판이에요.
안내를 많이 띄우면 친절한 것 아닌가요? 아니에요. 손님이 뭘 눌렀는지 아는 일에는 안내가 필요 없어요. 사진을 올렸는데 사진이 눈앞에 보이면, 굳이 "업로드 완료"를 띄울 필요가 없죠. 결과가 화면에 안 보일 때만 말로 알려 주는 거예요.
확인해 보세요
손님이 예약 시간을 고르고 저장을 눌렀어요. 여기에 어떤 장치가 맞을까요?
하나 더
"확인 창이 폰에서 잘려서 버튼을 못 눌러요." AI에게 어떻게 말하는 게 좋을까요?
직접 해보기
만든 화면에서 버튼을 하나 눌러 보세요
저장이든 신청이든 아무 버튼이나 눌러 보고, 누른 뒤 화면이 뭐라고 말하는지 보세요. 아무 말도 안 하면 위 표에서 증상을 찾아 그 문장을 그대로 말해 주면 돼요. 폰 크기로도 한 번 보시면 더 좋아요.
스튜디오에서 확인하기더 깊이 (안 읽어도 괜찮아요)
브라우저가 기본으로 주는 확인 창을 안 쓰는 이유 · 브라우저에는 원래 확인 창 기능이 들어 있어요. 공짜인데도 실제 서비스에서 거의 안 쓰는 이유가 셋이에요. 첫째, 생김새를 바꿀 수 없어서 사장님 가게 분위기와 안 맞아요. 둘째, 창 위에 사이트 주소가 그대로 붙어서 손님이 낯설게 느껴요. 셋째, 그 창이 떠 있는 동안 화면 전체가 아예 멈춰서 뒤에서 돌던 일도 같이 멈춰요. 그래서 대부분은 화면 안에 직접 그린 확인 창을 씁니다.
안내를 화면 어디에 두는지가 절반이에요 · 안내가 안 읽히는 이유는 짧아서가 아니라 눈이 없는 자리에 떠서인 경우가 많아요. 원칙은 손님이 방금 누른 버튼 근처예요. 화면 오른쪽 위 구석은 컴퓨터에서는 잘 보이지만 폰에서는 시선 밖이고, 화면 아래 가운데는 폰에서 잘 보이지만 손가락에 가려질 수 있어요. 그래서 안내가 안 읽힌다는 느낌이 들면 문구를 고치기 전에 자리부터 옮겨 보라고 말하는 게 빠릅니다.
눈으로만 알리면 놓치는 손님이 있어요 · 초록색이면 성공, 빨간색이면 실패로만 구분하면 색을 구분하기 어려운 손님은 아무 정보도 못 받아요. 화면을 소리로 읽어 주는 프로그램을 쓰는 손님은 잠깐 떴다 사라지는 안내를 아예 못 들을 수도 있어요. 그래서 색과 함께 글자로도 결과를 쓰고, 중요한 안내는 스스로 사라지지 않게 하는 게 안전해요. 이 관점 전체는 접근성에서 다뤄요.
이것만 기억하세요
- ·손님이 버튼을 눌렀으면 화면이 무슨 말이든 해야 해요. 침묵은 고장으로 읽혀요
- ·끝난 일은 잠깐 뜨는 안내로, 되돌릴 수 없는 일만 확인 창으로 물어요
- ·확인 창을 자주 띄우면 손님이 안 읽고 누르는 습관이 생겨요
- ·증상 그대로 말하면 돼요. 용어를 외울 필요는 없어요
- ·안내 문구에는 무슨 일이 있었는지와 다음에 할 일만 담아요