AI로 웹사이트 검수하기

ALT

'기회'라는 단어가 담긴 산의 이미지

📝 한줄 요약

화면 다섯 개가 다 돌아가는 걸 보고 “이제 됐다” 싶었는데, 스터디장 아루나님이 공유해주신 가이드를 보고 생각이 바뀌었다. 만든 사람의 눈이 아니라 처음 보는 사람의 눈으로 한 번 더 봐야 한다는 내용이었다. 그대로 AI에게 신규 사용자인 척 앱을 눌러보게 시켰더니, 내가 업무를 아는 사람으로서 검수했을 때는 못 봤던 것들이 쏟아져 나왔다.

Before: 업무 흐름 기준으로 5차 검수 완료, “이 정도면 시연해도 되겠다”고 판단
After: 처음 보는 사람 기준으로 8가지 헷갈림 추가 발견, 그중 하나는 제출 자체가 막히는 진짜 버그

👥 이런 분께 추천

• 만든 화면을 스스로도 잘 안다는 이유로 검수를 한 번만 하고 끝내려는 분

• “직접 써보고 검수하라”는 말은 들었는데 정확히 뭘 해야 할지 감이 안 오는 분

• AI에게 화면을 만들게 한 뒤, 그 화면을 AI에게 다시 검사시켜 볼 수 있다는 걸 몰랐던 분

🙋 내 스펙 & 환경

진행 방법

1. 왜 하게 되었나

전날까지 다섯 번 검수하면서 처리 대기함, Edit 버튼, 원그래프 같은 걸 다 잡았다. 그래서 “화면은 이제 완성”이라고 여기고 있었다.

그런데 스터디장 아루나님이 공유해주신 검수 가이드를 읽었다. 요지는 이거였다. 업무를 아는 사람의 검수와 처음 보는 사람의 검수는 서로 다른 문제를 찾는다는 것.

나는 이 앱이 뭘 하는 물건인지, 어떤 버튼을 누르면 뭐가 나오는지 이미 다 알고 있어서, 화면을 봐도 “이상하다”는 느낌 자체가 잘 안 든다. 반면 처음 보는 사람은 설명 없이 막히는 지점에서 바로 걸린다.

가이드대로 해보기로 했다. 방법은 간단했다. AI에게 “지금 이걸 처음 보는 사람이라고 치고 써봐. 어디서 헷갈리는지, 뭘 어떻게 해야 할지 모르겠는 지점을 알려줘”라고 요청했다.

ALT

한국어 텍스트가 있는 페이지의 스크린샷

2. 첫 번째 벽: AI가 진짜로 화면을 눌러봐야 했다

말로만 “이상한 점을 찾아줘”라고 하면 AI도 코드를 읽고 추측만 하게 된다. 그러면 결국 내가 이미 아는 걸 다시 말하는 것과 다르지 않다.

그래서 AI에게 브라우저 도구로 개발 서버를 직접 띄우고, 세 역할(매니저·회계·대표)로 번갈아 로그인하며 실제로 폼을 채우고 버튼을 눌러보게 했다. 빈 폼으로 Submit도 눌러보고, 종료시간을 시작시간보다 앞서게도 넣어보고, 메뉴에 있는 링크를 하나씩 다 클릭해보라고 시켰다.

3. 두 번째 벽: 예상 못 한 곳에서 문제가 쏟아졌다

결과가 생각보다 많았다.

• Records는 미팅 날짜로, Summary는 확인일로 세서, 같은 “이번 주”인데 숫자가 달라 보였다

• Settings에 Save 버튼이 없어서, 고친 게 저장됐는지 확신할 수 없었다

• Matter 번호를 입력해도 결과가 있는지 없는지 아무 표시가 없었다

• 제출 후 폼이 비워졌는데 주소 옆 ”✓ Verified” 배지만 남아 있었다

• 시연용 데이터에 “Keyboard-only address selection test” 같은 개발 흔적 노트가 그대로 있었다

4. 세 번째 벽: 진짜 버그 하나

문제를 하나씩 고치던 중, 주소를 검색 대신 직접 타이핑으로 입력하면(수동 입력 모드) Type 칸이 “Enter the address first”에 계속 머물러 있고, Submit이 영영 눌리지 않는다는 걸 발견했다.

수동 입력은 좌표가 없어서 자동으로 거리를 계산할 방법이 없는데, 그 경우를 대비한 직접 선택 드롭다운이 빠져 있었던 것이다.

이건 업무를 아는 내 검수에서도, 처음 보는 사람 검수에서도 곧바로는 안 잡혔다. 흔치 않은 경로(주소 검색이 실패해서 수동으로 전환하는 경우)를 일부러 밟아봐야 나오는 문제였다.

5. 최종 흐름

아루나님 가이드 확인
  → AI에게 "처음 보는 사람인 척 써봐" 요청
  → 브라우저로 실제 클릭·입력 재현
  → 발견한 8가지를 우선순위로 정리해 보고받음
  → 고칠 것 선택
  → 당일 안에 수정·검증·배포

6. 검증: 제대로 고쳐졌는지 확인

고친 뒤에는 다시 브라우저로 재현했다. 미래 날짜를 넣으면 안내 문구가 뜨는지, Settings에서 값을 고치면 “저장되지 않음” 표시가 뜨는지, 수동 주소로도 제출이 되는지 하나씩 다시 눌러봤다.

예상 결과: 미래 날짜 제출 차단, Type 에러 정리, 수동 주소로도 제출 가능
실제 결과: 전부 확인됨
일치 여부: ✓

🛠 사용한 도구

배운 점

💡 핵심 1: 검수는 한 종류가 아니다

전날 검수는 “업무 흐름에 빠진 게 있나”를 봤고, 이번 검수는 “설명 없이 못 넘어가는 지점이 있나”를 봤다. 둘 다 필요했다. 하나만 하고 끝냈으면 죽은 알림 버튼도, 화면마다 다른 필터 모양도 시연 때 그대로 남았을 것이다.

💡 핵심 2: 말로 시키는 것과 실제로 눌러보게 하는 것은 다르다

“이상한 점 찾아줘”라고만 했으면 코드를 읽고 짐작한 답이 나왔을 것이다. 브라우저로 실제 클릭·입력을 재현시키니, 코드만 봐서는 안 보이던 것(빈 주소칸에 남은 배지, 알림 종의 무반응)이 나왔다.

💡 핵심 3: 진짜 버그는 어느 검수에도 안 걸릴 수 있다

수동 주소 제출 버그는 두 번의 검수 모두에서 안 잡혔다. 흔치 않은 경로를 일부러 걸어봐야 나오는 문제였다. 검수를 몇 번 했다고 안심할 게 아니라, 안 밟아본 길이 남아 있다는 걸 늘 염두에 둬야 한다는 걸 배웠다.

적용할 점

🎯 결과

📋 복붙 가능한 프롬프트

남에게 보여주기 전에, 지금 이 화면을 처음 보는 사람이라고 치고 써봐.
빈 폼으로 제출도 해보고, 값을 일부러 이상하게도 넣어보고,
버튼은 다 눌러봐.

어디서 헷갈리는지, 뭘 어떻게 해야 할지 모르겠는 지점을
발견한 순서대로, 심한 것부터 알려줘.

🔜 다음 계획

1. 오늘 우선순위 낮게 남긴 것(History·Delete 버튼 위치)은 개발자와 논의 예정

2. Records 기간 필터의 알약형 탭 모양도 추후 다시 다듬을 예정

3. 다음 검수는 실제 사용자(고객)에게 부탁해볼 것

솔직한 소감

처음엔 “다섯 번이나 검수했는데 또 뭘 보라는 거지” 싶었다. 그런데 결과를 받아보고 뜨끔했다. 내가 이미 아는 화면이라 이상해 보이지 않았을 뿐, 처음 보는 사람에게는 안 보이는 게 아니라 헷갈리는 게 맞았다.

아루나님의 가이드가 없었으면 아마 이 화면 그대로 시연에 들어갔을 것 같다. 만든 사람의 눈과 처음 보는 사람의 눈이 이렇게 다르다는 걸 몸으로 확인한 하루였다.