AI가 만든 웹사이트 오류: 실제 기록 속 화면 문제 8건과 해결

이런 분께 / 준비물

이런 분께 맞습니다.

• AI 코딩 도구로 홈페이지나 업무 화면을 만들었는데, 공개 전에 무엇을 봐야 할지 모르는 분
• AI가 “완성했다”고 했는데 화면이 어딘가 이상한 분
• 코드를 보지 않고 증상만으로 AI에게 고치게 하고 싶은 분

준비물

• 만든 화면을 열 수 있는 PC 브라우저와 휴대폰
• 이 글의 사람 검수 체크리스트(텍스트 파일)

증상별 원인과 해결 한눈에 보기

아래 8건은 2026년 10월 24~25일 홈페이지 작업 기록에서 고른 사례입니다. 전체 오류 수가 아니라 이 글에서 다룬 사례의 수입니다.

Claude Code 대화 기록의 메시지 시각으로 계산(2026-10-24~25). '고쳤다고 보고'는 AI가 수정 완료를 알린 시각이며 사람이 확인을 마친 시각이 아니다. 원인은 기록에 남은 AI의 설명

증상	누가 찾았나	원인 (기록 속 AI 설명)	해결	지적 → 고쳤다고 보고
화면 일부가 크게 비어 보임	사람	움직이는 효과 2개가 겹쳐 카드가 투명한 채로 남음	겹친 효과 하나 제거	2분 29초
옵션을 바꿔도 사진이 그대로	사람	옵션별 사진을 하나의 원본으로만 만듦	옵션마다 사진을 따로 만들어 연결	18분 43초 (사진 새로 생성 포함)
새로고침 뒤 스크롤하면 맨 아래로 튐	사람	브라우저가 직전 스크롤 위치를 되살림 + 로딩 화면	위치 복원을 끄고 맨 위로 고정	2분 7초
SNS 게시물 영상이 PC 웹에서만 멈춤	사람	영상이 0초가 아닌 0.033초에서 시작	영상을 다시 만들어 새로 게시	3분 28초 (원인 보고까지)
옛 디자인을 기준으로 다른 언어판을 만듦	사람	다른 대화창이 원본을 바꾼 것을 모름	최신본 기준으로 다시 만듦	12분 21초
만들다 만 페이지가 잠깐 공개됨	다른 AI 대화창	공개 명령이 폴더를 전부 올리는 구조	미완성 표시 + 공개 방법 하나로 통일	바로 내림
첫 화면 문구가 사진에 가려 안 보임	AI (브라우저로 확인 중)	사진이 문구 위에 쌓임	쌓이는 순서 수정	28초
위젯 제목 글자가 배경에 묻힘	AI (브라우저로 확인 중)	글자색이 배경과 비슷함	글자를 밝게	1분 1초

표에서 볼 것은 “누가 찾았나” 열입니다.

• AI가 스스로 찾은 2건은 AI가 실제 브라우저로 화면을 열어 보던 중에 나왔습니다.
• 사람이 찾은 5건은 스크롤해 보기, 옵션 바꾸기, 새로고침, PC 웹에서 열기, 다른 대화창이 고친 뒤 보기에서 나왔습니다.
• 그중 3건은 AI가 그 조건으로는 확인하지 않았다고 기록에 남아 있습니다. 새로고침(매번 새 창으로 확인), PC 웹(서버와 파일만 확인), 다른 대화창의 수정(바뀐 줄 모름)입니다.
• 화면이 비어 보인 1건은 AI의 확인 캡처에도 빈칸이 찍혀 있었습니다. AI는 “아래쪽에 아직 안 나온 것”으로 보고 넘겼다고 나중에 밝혔습니다.

해결 순서: 내 기록에서 먼저 해 볼 것부터

증상마다 사례가 1~3건이라 어떤 원인이 가장 흔한지는 말할 수 없습니다. 아래는 비용이 적고, 제 기록에서 실제로 문제를 찾아낸 방법 순서입니다.

1. AI에게 실제 브라우저로 끝까지 보게 하기. “실제 브라우저로 열어 맨 아래까지 스크롤하고, 누를 수 있는 건 다 눌러 봐 줘”라고 요청합니다. AI가 스스로 찾은 2건이 이 방식에서 나왔습니다. Claude Code 공식 모범 사례도 Claude가 결과를 확인할 방법을 함께 주라고 안내합니다.
2. 사람이 다른 조건으로 직접 보기. 새로고침, 뒤로 가기, 옵션 바꾸기, 휴대폰 폭, 다른 기기로 열어 봅니다. 사람이 찾은 5건 중 3건(옵션 바꾸기, 새로고침, PC 웹)이 여기서 나왔습니다.
3. 증상을 좁혀서 말하기. 어디서, 어떤 기기로, 언제, 어떻게 보이는지를 한 번에 알려 줍니다.
4. 여러 대화창을 같이 쓴다면 기준을 정하기. 지금 보고 있는 버전을 주소로 짚어 주고, 덜 만든 페이지에는 미완성 표시를 합니다.

증상 1. 화면 일부가 비어 보이거나 글자가 안 보일 때

기록에 3건 있었고, 원인은 효과 겹침, 쌓이는 순서, 글자색이었습니다. AI에게 “움직이는 효과를 켠 채 끝까지 스크롤한 뒤, 투명하거나 가려진 채 남은 요소를 찾아 줘”라고 요청하세요.

• 상품 소개 시안의 빈칸(사람이 찾음): 효과 2개가 겹쳐 카드가 투명한 채로 끝났습니다. AI는 자기 캡처의 빈칸을 “아직 안 나온 것”으로 잘못 넘겼다고 밝히고, 위 요청과 같은 검사를 스스로 추가했습니다.
• 첫 화면 문구가 가려짐(AI가 찾음): 사진이 문구 위에 쌓였습니다. 발견 28초 뒤 고쳤다고 보고했습니다.
• 위젯 글자가 묻힘(AI가 찾음): 어두운 배경에 비슷한 색 글자를 썼습니다.

증상 2. 옵션을 바꿔도 사진이 그대로일 때

옵션마다 사진 파일이 따로 없어서 하나를 같이 쓴 경우였습니다. 옵션·탭·크기를 하나씩 눌러 보며 사진, 가격, 글이 함께 바뀌는지 확인하세요.

• 기록에서는 가격은 옵션에 맞게 바뀌었는데 사진만 그대로였습니다. 사람이 보기 전에는 드러나지 않는 종류입니다.
• 고쳤다는 보고까지 18분 43초가 걸렸습니다. 옵션별 사진을 새로 만드는 시간이 포함됐습니다.
• 사람은 보고 약 7분 뒤 그 문제가 고쳐졌는지 다시 물었고, AI는 고쳐진 상태를 다시 확인해 보여 줬습니다. 보고를 받았다면 직접 한 번 눌러 보세요.

증상 3. 새로고침하면 맨 아래로 튈 때

브라우저는 새로고침하면 직전 스크롤 위치를 되살릴 수 있습니다(MDN의 scrollRestoration 설명). 로딩 화면이 있는 페이지는 첫 화면처럼 보이다가, 휠을 굴리는 순간 실제 위치로 튈 수 있습니다.

• 기록에서 AI는 “처음 확인 때는 매번 새 창으로 열어서 이 상황을 놓쳤다”고 밝혔습니다. 새 창으로 열면 직전 위치가 없으니 문제가 보이지 않습니다.
• 수정은 위치 복원을 끄고, 로딩이 끝날 때 맨 위로 고정하는 방식이었습니다. 지적 2분 7초 뒤 고쳤다고 보고했습니다.
• 확인법: 아래로 내린 상태에서 새로고침하고 휠을 굴려 봅니다.

증상 4. 특정 기기에서만 영상이 안 나올 때

어느 기기에서 안 되는지를 알려 주면 AI가 원인을 좁힙니다. 이 사례는 웹사이트가 아니라 SNS에 올린 게시물 영상이었습니다.

• 처음 “동영상 재생이 안 된다”고만 했을 때 AI의 답은 짐작이었습니다. AI도 “확인은 못 했다”고 밝히고 휴대폰 앱인지 PC 웹인지 되물었습니다.
• “pc 웹”이라고 답하자, AI는 PC 웹에서 직접 열어 보고 원인을 보고했습니다. AI가 찾은 원인은 영상이 0초가 아닌 0.033초에서 시작한다는 것이었습니다. 휴대폰 앱은 이 틈을 넘어가고, PC 웹은 맨 앞에서 멈췄습니다.
• 이미 올린 게시물의 영상은 바꿀 수 없어서 사람이 지우고 다시 올렸습니다.

증상 5. 옛 버전이 나오거나 만들다 만 페이지가 보일 때

여러 대화창이 같은 폴더를 동시에 만질 때 생겼습니다. 기준이 될 최신 버전을 주소로 짚어 주고, 덜 만든 페이지는 공개에서 빠지게 표시하세요.

• 옛 버전 기준(사람이 찾음): 다른 대화창이 원본 목록 페이지를 바꾼 것을 모르고 그 전 버전으로 다른 언어판을 만들었습니다. 사람이 로컬 주소로 기준 버전을 짚자 12분 21초 뒤 다시 만들었다고 보고했습니다.
• 만들다 만 페이지 공개(다른 AI 대화창이 찾음): 한 대화창의 공개 명령이 작업 중이던 폴더까지 올렸습니다. 이후 미완성 표시를 한 폴더는 빼고, 공개 방법을 명령 하나로 통일했습니다.
• 미완성 표시와 “공개는 내 승인 뒤” 같은 규칙은 시작할 때 정해 두면 좋습니다. 착수 문서 한 장으로 시작하는 법에서 4칸(순서와 멈춤 지점)에 해당합니다.

사람 검수 체크리스트

AI가 완성을 보고하면, 공개 전에 PC와 휴대폰에서 각각 열어 체크리스트를 위에서부터 해 봅니다. 같은 페이지라도 폭에 따라 보이는 요소가 달라집니다.

체크리스트는 다섯 묶음입니다. 전체 문장은 내려받기 파일에 있습니다.

묶음	대표 항목
AI에게 먼저 시킬 것	실제 브라우저로 끝까지 스크롤, 누를 수 있는 것 전부 눌러 보기
여러 대화창일 때	기준 버전 짚기, 미완성 표시, 공개 방법 하나로
화면	빈칸, 묻힌 글자, 휴대폰에서 넘침·겹침
AI가 안 봤을 조건	새로고침, 뒤로 가기, 옵션 바꾸기, 다른 기기, 영상 재생
내용	가짜 예시 값, 출처 없는 문장, 공개하면 안 되는 정보

주의할 점과 한계

• 사례 수가 적습니다. 한 프로젝트의 이틀 기록에서 고른 8건입니다. 어떤 문제가 더 흔한지는 이 기록으로 말할 수 없습니다.
• 원인은 AI의 설명입니다. 원인 열은 기록에 남은 AI의 진단을 옮긴 것입니다. 저는 고친 뒤 화면이 정상인지만 확인했습니다.
• 시간은 “고쳤다고 보고한” 시각입니다. 사람이 다시 확인한 시간은 들어 있지 않습니다. 실제로 한 건은 보고 뒤 사람이 다시 물었습니다.
• 고객에게 보낼 시안 사례는 일반화했습니다. 업체를 알 수 있는 정보와 화면은 넣지 않았습니다.
• 이 기록에 없는 오류는 다루지 않았습니다. 로그인, 결제, 배포 환경 설정처럼 이번 작업에 없던 문제는 이 체크리스트로 충분하지 않을 수 있습니다.