기다리는 동안 보여줄 것
누르고 아무 반응이 없으면 손님은 고장 났다고 판단해요. 기다림은 없앨 수 없으니 보이게 만들어야 해요. "지금 처리하고 있어요" 한 줄이 같은 3초를 기다릴 만한 3초로 바꿔요.
쉽게 말하면
계산대에서 카드를 긁었는데 화면도 소리도 없이 몇 초가 흐르면, 손님은 손을 뻗어 카드를 한 번 더 긁어요. 안 됐다고 생각하니까요. 그래서 어느 계산대든 "승인 중"이라는 글자를 띄우거나 삑 소리를 내요. 화면 속 버튼도 똑같아요. 누른 뒤 아무 변화가 없으면 손님은 또 눌러요. 기다리는 동안 무언가를 보여 주는 건 그 침묵을 메우는 장치예요.
여기서 오해를 하나 풀어야 해요. 이건 속도를 빠르게 만드는 이야기가 아니에요. 걸리는 시간은 그대로예요. 바뀌는 건 손님이 느끼는 시간이고, 그것만으로도 이탈과 중복 신청이 줄어요.
손님은 두 번, 세 번 눌러요. 신청이 세 건 들어오거나 그냥 창을 닫고 나가요.
기다리는 시간은 똑같은데 손님은 기다려 줘요. 두 번 눌릴 일도 없어요.
손님 머릿속에서 벌어지는 일
진짜 문제는 화면이 느린 것이 아니라 느린 것을 숨긴 것이에요. 3초 걸리는 일을 3초 걸린다고 보여 주면 손님은 참아요. 아무 말 없이 3초를 흘려 보내면 손님은 그걸 고장으로 읽어요.
사람은 반응이 없으면 기계를 의심하기 전에 자기 손을 의심해요. 가게 문을 밀었는데 안 열리면 고장이라고 결론 내리기 전에 한 번 더 밀어 보죠. 버튼도 그래요.
- 10.5초까지: 손님이 버튼을 누르고 화면을 봐요. 여기까지는 아무 표시가 없어도 괜찮아요.
- 21초에서 2초: "안 눌렸나?" 마우스나 손가락이 다시 버튼으로 가요. 표시가 없으면 이때 두 번째 클릭이 나가요.
- 33초에서 5초: "이 가게 사이트 이상하네." 신뢰가 깎이는 구간이에요. 새로고침을 누르는 손님도 나와요.
- 45초 이상: 창을 닫아요. 그리고 다시 안 와요. 실제로는 정상 작동 중이었는데도요.
이 증상이면 이 이야기예요
손님은 "로딩 표시가 없어요"라고 말하지 않아요. 다르게 말해요. 아래 왼쪽 말이 들어오면 오른쪽을 떠올리면 돼요.
| 손님이나 내가 하는 말 | 실제로 일어난 일 |
|---|---|
| "버튼이 안 먹는 것 같아요" | 버튼은 잘 작동했어요. 작동한다는 사실을 화면이 말해 주지 않은 거예요 |
| "여러 번 눌렀는데 문자가 세 통 왔어요" | 버튼을 잠그지 않아서 같은 요청이 세 번 나갔어요 |
| "결제가 두 번 됐어요" | 같은 사고인데 돈이 걸린 판이에요. 가장 급하게 손봐야 하는 자리예요 |
| "화면이 계속 빙글빙글 돌기만 해요" | 표시를 켜는 처리만 있고 끄는 처리가 없어요. 실패했는데 화면이 굳었어요 |
| "열었는데 한참 하얀 화면이에요" | 명단을 가져오는 동안 아무것도 안 그려요. 회색 뼈대라도 깔아야 하는 자리예요 |
| "제 폰에서는 빠른데 손님은 느리다고 해요" | 사장님은 가게 와이파이로 이미 열어 본 화면을 다시 여는 중이라 빨라요 |
마지막 줄이 함정이에요. 이 문제는 만든 사람 눈에는 거의 안 보여요. 그래서 손님 문의로 처음 알게 되는 일이 잦아요. 사진이 무거워서 느린 거라면 사진 용량 줄이기도 같이 봐야 하고, 실제 속도 자체를 줄이는 건 속도 쪽 이야기예요.
AI에게 그대로 말하면 되는 문장
사장님이 직접 고칠 일은 없어요. 증상을 그대로 말하면 돼요. 다만 "로딩 넣어 줘"라고만 하면 빙글빙글 도는 동그라미 하나가 나오고 끝나요. 어느 버튼인지, 무엇으로 바뀌는지, 끝나면 어떻게 되는지까지 말해야 제대로 붙어요. 아래 문장은 그대로 옮겨 쓰면 되는 것들이에요.
| 내가 겪은 증상 | 이렇게 말하세요 |
|---|---|
| 눌렀는데 아무 일도 안 일어나요 | "이 버튼을 누르면 버튼이 잠기고 글자가 '보내는 중'으로 바뀌게 해 주세요. 끝나면 원래대로 돌려 주세요." |
| 같은 신청이 여러 건 들어와요 | "처리가 끝날 때까지 이 버튼을 다시 못 누르게 잠가 주세요. 같은 요청이 두 번 나가지 않게 해 주세요." |
| 화면이 계속 돌기만 하고 안 끝나요 | "실패했을 때도 표시를 끄고, 왜 안 됐는지 한 줄로 알려 주고 버튼을 다시 누를 수 있게 풀어 주세요." |
| 목록이 열릴 때 하얀 화면이 오래 보여요 | "명단을 가져오는 동안 글자 자리와 사진 자리를 회색 칸으로 먼저 보여 주세요." |
| AI가 만드는 동안 손님이 나가요 | "만드는 동안 진행 표시와 함께 '보통 20초쯤 걸려요'라는 안내를 보여 주세요." |
| 사진을 올렸는데 끝났는지 모르겠어요 | "사진 올리는 동안 퍼센트가 올라가는 막대를 보여 주고, 다 올라가면 '올렸어요'를 띄워 주세요." |
| 표시가 깜빡거려서 어지러워요 | "0.3초 안에 끝나는 일에는 표시를 아예 띄우지 말고, 한번 띄웠으면 최소 0.5초는 유지해 주세요." |
| 답이 영원히 안 와요 | "10초가 지나도 답이 없으면 기다리기를 멈추고 '응답이 없어요, 다시 시도해 주세요'를 보여 주세요." |
- 1어느 버튼인지 짚어요. "아래쪽 파란 신청 버튼"처럼 화면에서 찾을 수 있게 말해요.
- 2무엇으로 바뀔지 정해요. 버튼이 잠기고 글자가 무엇으로 바뀌는지까지요.
- 3성공하면 무엇이 보일지 말해요. "신청이 접수됐어요"처럼 손님에게 할 말을 그대로 주면 돼요.
- 4실패하면 어떻게 될지 말해요. 이유 한 줄을 보여 주고 버튼을 다시 누를 수 있게 풀어 달라고요.
한 문장을 빼먹으면 다 무너져요
"끝나면 원래대로 돌려 주세요"와 "실패했을 때도 풀어 주세요"가 그 문장이에요. 켜는 것만 부탁하면 실패한 순간 화면이 영원히 기다리는 중으로 굳어요. 손님 눈에는 이게 고장보다 더 답답해요. 표시는 켜기와 끄기를 늘 한 쌍으로 부탁하세요. 화면에 뜬 실패 문구를 어떻게 다뤄야 하는지는 에러 메시지 읽기에 있어요.
보여 줄 것에도 네 종류가 있어요
종류를 알면 주문이 정확해져요. 상황이 다르면 정답도 달라요.
| 종류 | 어떻게 보이나 | 언제 쓰나 |
|---|---|---|
| 버튼 안 표시 | 누른 버튼이 잠기고 글자가 "저장 중"으로 바뀌어요 | 누른 자리에서 답이 나오는 일. 가장 정직하고 가장 많이 써요 |
| 도는 동그라미 | 작은 원이 계속 돌아요 | 얼마나 걸릴지 모를 때. 시간을 모른다는 뜻을 정직하게 전해요 |
| 회색 뼈대 화면 | 글과 사진이 들어갈 칸을 회색 덩어리로 먼저 그려요 | 목록이나 상세 화면이 통째로 열릴 때. 이미 만들어지는 중이라는 느낌을 줘요 |
| 진행 막대 | 0%에서 100%까지 채워져요 | 사진 올리기처럼 전체 크기를 아는 일에만 |
진행률로 거짓말하지 마세요
얼마나 걸릴지 모르는 일에 가짜 진행 막대를 붙이면 90%에서 한참 멈춘 화면이 나와요. 손님은 그 순간부터 화면을 못 믿어요. 모르면 도는 동그라미가 정직해요. 아는 것만 숫자로 보여 주세요.
그리고 아직 아무것도 없어서 비어 있는 화면은 이 이야기가 아니에요. 그건 텅 빈 화면 쪽이고, 문구도 달라야 해요. 기다리는 중은 "곧 나와요"고, 비어 있음은 "아직 없어요"예요.
지금은 신경 쓰지 않아도 되는 때
정직하게 말할게요. 하루 손님이 열 명인 가게에서 이걸 화면 전체에 완벽하게 깔겠다고 이틀을 쓰면 그 이틀은 버리는 거예요. 손님이 실제로 손해를 보는 자리만 손보면 돼요. 아래는 지금 넘겨도 되는 것들이에요.
| 이런 자리 | 지금 안 해도 되는 이유 |
|---|---|
| 메뉴 열기, 탭 바꾸기, 계산기처럼 화면 안에서 끝나는 일 | 0.1초면 끝나요. 표시를 붙이면 깜빡여서 오히려 나빠져요 |
| 나만 쓰는 관리자 화면 | 사장님은 기다릴 줄 알아요. 손님이 보는 화면이 먼저예요 |
| 이미 1초 안에 끝나는 화면을 더 다듬는 일 | 손님은 차이를 못 느껴요. 시간을 다른 데 쓰세요 |
| 표시의 색과 모양 고르기 | 있으면 됐어요. 예쁘게 만드는 건 손님이 늘고 나서 해도 늦지 않아요 |
| 아직 아무도 안 들어오는 연습용 화면 | 고칠 대상이 없어요. 게시하고 손님이 오면 그때 봐요 |
겁을 줘서 뭔가 하게 만드는 게 목표가 아니에요. 손님이 하루 열 명이면 그 열 명이 실제로 누르는 버튼 두세 개만 챙기는 게 맞아요. 나머지는 손님이 늘어서 문의가 들어오는 순간이 신호예요. 그때 손보면 늦지 않고, 오히려 어디를 손볼지 손님이 알려 주는 셈이에요.
단, 이 두 자리는 손님이 한 명이어도
돈이 나가는 버튼과 신청이 접수되는 버튼은 예외예요. 손님이 하루 한 명이어도 이중 결제 한 건은 환불·사과·정산 정리까지 딸려 와요. 여기만은 첫날에 잠금을 걸어 두세요. 게시 직전 점검이 필요하면 게시 전 점검표에 한 줄 넣어 두면 돼요.
실제로 겪는 장면
장면 1 · 외주 개발자가 말했다
“여기 로딩 스피너 넣고 버튼 디스에이블 처리해 둘게요.”
풀면 이래요. 도는 표시를 띄우고, 처리가 끝날 때까지 그 버튼을 눌리지 않게 잠그겠다는 뜻이에요. 뒤쪽이 더 중요해요. 표시만 띄우고 버튼을 잠그지 않으면 두 번 눌리는 사고는 그대로 남아요. "실패했을 때 푸는 것도 같이 해 주세요"까지 확인해 두세요.
장면 2 · 손님에게서 온 문의
“신청 버튼이 안 먹는 것 같아서 여러 번 눌렀는데, 문자가 세 통 왔어요.”
기능을 고칠 일이 아니에요. 버튼은 처음부터 잘 작동했어요. 고칠 것은 작동한다는 사실을 화면이 말해 주지 않은 것이에요. 이 문의가 오면 위 표의 두 번째 문장을 그대로 말하면 돼요.
장면 3 · 결제를 붙인 다음 날
“같은 손님 결제가 두 건이라고 정산 내역에 찍혀 있어요.”
표시가 없어서 손님이 다시 누른 거예요. 이건 화면 문제로 시작해서 돈 문제로 끝나요. 그래서 결제 버튼은 잠금을 기본으로 깔고, 이미 접수된 요청인지 서버 쪽에서도 한 번 걸러 달라고 함께 부탁하는 게 안전해요.
자주 묻는 것
- Q. 표시를 넣으면 화면이 더 빨라지나요?
- 아니요. 걸리는 시간은 그대로예요. 바뀌는 건 손님이 느끼는 시간이에요. 같은 3초가 표시 없이는 고장으로, 표시가 있으면 처리 중으로 읽혀요. 실제 속도를 줄이는 건 속도 쪽 일이고, 둘은 따로 해요.
- Q. 몇 초부터 붙이면 되나요?
- 1초를 넘길 가능성이 있으면 붙여요. 애매하면 붙이는 쪽이 안전해요. 다만 0.3초 안에 끝나는 일에 붙이면 화면이 깜빡여서 오히려 손해예요.
- Q. 버튼을 잠그면 손님이 답답해하지 않을까요?
- 잠그면서 이유를 보여 주면 답답해하지 않아요. 답답한 건 잠긴 이유가 안 보일 때예요. 그래서 잠금과 글자 변경은 항상 같이 해요.
- Q. 결과가 안 오면 계속 기다리게 두면 되나요?
- 안 돼요. 인터넷이 끊기면 답이 영원히 안 올 수도 있어요. 기다리기를 끊는 시간과 다시 시도하는 방법까지 정해 두는 이야기는 응답이 없을 때에 있어요.
- Q. AI가 글이나 그림을 만드는 동안은요?
- 십 초를 넘길 수 있으니 도는 표시만으로는 부족해요. "보통 20초쯤 걸려요" 같은 예상 시간을 함께 적어 주세요. 예상을 알면 사람은 훨씬 잘 기다려요.
- Q. 게시하기 전에 이걸 어떻게 확인해요?
- 폰을 와이파이에서 빼고 이동통신으로 접속해서 버튼마다 눌러 보세요. 누른 순간부터 결과까지 속으로 숫자를 세면 돼요. 둘을 넘기는 버튼이 손볼 자리예요.
- Q. 화면 전체를 덮는 표시는 언제 써요?
- 결제처럼 중간에 다른 걸 누르면 안 되는 일에만요. 그 외에는 누른 버튼 자리만 바꾸는 게 나아요. 화면을 통째로 덮으면 손님이 갇힌 느낌을 받아요.
- Q. 이미 다 만든 화면인데 지금이라도 넣을 수 있나요?
- 네, 나중에 붙이기 쉬운 편이에요. 기능을 새로 만드는 게 아니라 이미 있는 버튼에 잠금과 글자 변경을 얹는 일이라서요. 버튼 하나씩 따로 부탁해도 되니 급한 자리부터 하나만 시켜 보세요.
확인해 보세요
손님이 결제 버튼을 눌렀어요. 카드사 승인까지 3초가 걸려요. 가장 좋은 처리는?
하나 더
손님이 하루 열 명인 가게예요. 지금 손볼 자리를 하나만 고르면?
직접 해보기
내 화면에서 3초를 직접 겪어 보세요
만들던 화면을 열고 버튼을 하나 눌러 보세요. 누른 순간부터 결과가 보일 때까지 속으로 숫자를 세 보세요. 둘을 넘으면 그 버튼에는 표시가 필요해요. 그 자리에서 위 표의 문장을 그대로 말하면 돼요.
스튜디오 열기더 깊이 (안 읽어도 괜찮아요)
회색 뼈대가 왜 기분이 좋을까 · 도는 동그라미는 "기다려"라고만 말하고, 회색 뼈대는 "여기에 이런 게 들어올 거야"라고 말해요. 뒤쪽이 정보가 더 많아요. 그래서 목록이나 상세 화면처럼 모양이 미리 정해진 자리에서는 뼈대가 더 빠르게 느껴져요. 반대로 결과 모양을 모르는 일에 뼈대를 깔면 엉뚱한 약속을 하는 셈이라 안 맞아요. 뼈대 칸 크기가 실제 내용과 다르면 내용이 들어오는 순간 화면이 덜컥 움직이는데, 그건 표시가 없는 것보다 더 산만해요. 그래서 뼈대를 부탁할 때는 "실제와 같은 크기로"를 붙이는 게 좋아요.
빨라도 문제가 되는 경우 · 표시가 0.1초만 떴다 사라지면 화면이 튀는 것처럼 보여요. 그래서 표시를 아주 조금 늦게 띄우거나, 한번 띄웠으면 최소 몇 백 밀리초는 유지하는 방식을 써요. 개발자가 "딜레이를 조금 줬다"고 하면 일부러 느리게 만든 게 아니라 이 깜빡임을 잡은 거예요. 사장님이 그걸 보고 "왜 느리게 했어요"라고 물으면 서로 헛수고를 하게 되니, 이 대목은 알아 두면 좋아요.
눈이 아니라 소리로 듣는 손님 · 화면을 못 보고 소리로 읽는 손님도 있어요. 이때 도는 동그라미는 아무 정보도 아니에요. 그래서 "보내는 중", "완료됐어요"처럼 글자로 상태를 말해 주는 것이 화면 장식보다 중요해요. 여기까지는 만드는 사람의 배려 이야기지만, 공공성이 있거나 일정 규모가 되는 서비스에는 접근성 관련 의무가 걸릴 수 있어요. 내 서비스가 그 대상인지 여부는 단정할 수 없으니 접근성 문서와 소관 기관의 안내로 확인하세요.
이것만 기억하세요
- ·누른 뒤 1초를 넘길 수 있으면 무언가를 보여 줘요
- ·표시보다 중요한 게 버튼 잠금이에요. 두 번 눌리면 결제가 두 번 돼요
- ·켜기와 끄기는 한 쌍이에요. 실패했을 때 푸는 처리까지 말로 부탁해요
- ·걸리는 시간을 모르면 도는 표시, 아는 일에만 진행 막대를 써요
- ·손님이 적으면 돈과 접수가 걸린 버튼만 챙기고 나머지는 나중에 해요