기존 웹사이트 개선하기
현재 화면의 문제를 먼저 재현하고, 기능을 보존한 채 모바일과 정보 구조를 개선합니다.
HTML · CSS · 브라우저 개발자 도구
실제 실행 기록 · 확인한 범위만 공개
실제 메뉴의 6편·9편 불일치와 수정 근거를 연결했습니다
직접 제작하고 로컬에서 실행한 별도 학습용 샘플입니다. 2026-10-17 실제 운영 검사에서 발견한 영상 메뉴의 고정 문구와 공개 목록 불일치를 사례로 골랐습니다. 당시 수정 전·후 공개 소스와 검증 기록을 보관하고 이번에는 작은 발췌 화면에서 다시 대조했습니다. 이번 작업으로 운영 사이트를 수정하지 않았습니다.
무엇을 입력했나요?
- 수정 전 공개 소스: 01e5d51의 Header.astro — 제품 필름 6편
- 수정 후 공개 소스: 45df2c9의 Header.astro — productFilms.length
- 이전 세션의 운영 브라우저 메뉴 목록과 수정 후 도메인 확인 기록
실제로 얻은 결과
발췌 화면의 버튼 실행 결과는 수정 전 6/9 불일치, 수정 후 9/9 일치였습니다. 실제 당시 운영 메뉴에도 6편 표기가 있었고 수정 후 운영 스모크 기록에는 9편 표기가 있습니다. 이전 33개 경로·4폭 검사는 과거 기록이며 이번 재실행으로 표시하지 않습니다.
발견: 공개 목록 9편 / 메뉴 고정값 6편 원인: 헤더 설명의 하드코딩 숫자 수정: productFilms.length로 목록과 연결 이번 실행: 공개 소스 발췌 자료 대조 / 새 배포 없음
원문과 실행 결과를 대조한 항목
| 확인 조건 | 실제 관측 |
|---|---|
| 실제 과거 기록과 공개 소스 | 당시 메뉴 목록·수정 후 운영 기록, 수정 전후 Git 소스를 함께 제공 |
| 이번 발췌 재실행 | 버튼 실행 beforeMatches=false, afterMatches=true, actual=9 |
| 별도 샘플의 문서 폭 | 이번 발췌 화면 360/390/768/1440px. 전체 운영 메뉴 재검사가 아님 |
실패·수정과 경계 조건
과거 운영에서 실제 발견
관측: 메뉴 설명은 6편인데 실제 공개 필름은 9편이었습니다.
수정·대응: 직전 승인 작업에서 고정 숫자 대신 공개 목록 길이를 사용하도록 고쳤습니다.
다시 확인: 직전 운영 기록의 9편 표기와 이번 발췌 실행의 9/9 일치를 대조했습니다.
직접 다시 확인하는 순서
- 소스 ZIP을 새 폴더에 풀고 README의 로컬 HTTP 명령으로 실행합니다.
- input.json의 가상 입력과 같은 값을 선택하고 해당 버튼을 실제로 조작합니다.
- verification.json의 관측값과 아래 적용 범위를 함께 대조합니다.
입력·소스·결과 파일
입력, 생성 응답 또는 직접 작성한 소스, 검증 자료의 성격을 각 사례에서 구분합니다. 공개 테스트 자료이며 실제 고객 성과 자료가 아닙니다.
- 로컬 재현 안내README.md · 2,087 bytes
- 과거 운영 관측 요약historical-observation.json · 639 bytes
- 실행 입력input.json · 140 bytes
- 샘플 제작 요구사항prompt.txt · 693 bytes
- 독립 샘플 소스 ZIPsample-source.zip · 21,122 bytes
- 실행 결과·적용 범위verification.json · 4,246 bytes
실행 환경·적용 범위
- 운영 메뉴 수정 사례의 발췌 화면을 전후 대조한 예제입니다. 전체 사이트 복제나 새 운영 배포와 구분합니다.
- 과거 33개 경로 검사와 발췌 화면의 검사는 각각의 기록에 해당합니다. 전후 모두 가로 넘침이 없었으므로 검색 순위·방문자 증가 효과를 평가하는 자료가 아닙니다.
- 직접 작성한 별도 로컬 샘플의 동작 기록입니다. 원작 재현이나 지정 AI 모델 간 성능 비교와 구분합니다.
- 화면 폭 검사는 데스크톱 Chromium 뷰포트 에뮬레이션 기준입니다. 실제 단말·Safari·Firefox·장기 운영은 별도 환경 시험 대상입니다.
01준비할 자료
- 수정 권한이 있는 프로젝트
- 문제가 보이는 화면과 화면 폭
- 유지해야 할 기능·주소·브랜드 규칙
아래 도구는 이 예시의 구현 방향입니다. 선택한 AI 도구에서 코드·파일을 다룰 수 있는지 먼저 확인하고, 설치 버전과 실행 방법을 기록하세요.
02시작 프롬프트
현재 프로젝트의 [페이지]를 개선해줘. 문제: [화면·브라우저·폭·재현 순서] 반드시 유지할 것: [기존 기능·주소·브랜드 요소] 먼저 코드를 읽고 문제를 실제로 재현한 뒤 원인 후보를 구분해줘. 변경 전 화면과 DOM 크기를 기록하고 최소한의 수정 계획을 제안해. 승인하지 않은 구조 변경·외부 의존성 추가·배포는 하지 마. 가로 넘침은 body에 overflow:hidden을 씌워 숨기지 말고 원인 요소를 찾아줘. Grid와 Flex의 최소 너비, 긴 URL, 표, 이미지의 크기를 점검해. 수정 후 320·390·768·1440px와 키보드 조작을 확인해. 기존 링크·검색·뉴스 등의 동작도 회귀 확인해. 변경 파일과 실제 테스트 결과, 아직 확인하지 못한 부분을 구분해서 보고해줘.
03만들고 다듬는 순서
문제를 같은 조건으로 재현하기
모바일 화면이 옆으로 밀린다면 어느 폭에서 무엇이 잘리는지부터 적어 보세요. 긴 제목·표·코드가 있는 페이지도 열어 문서 폭을 늘리는 요소를 찾습니다. 수정 요청에는 문제 위치와 함께 수정 권한, 유지해야 할 동작을 적습니다. 같은 조건을 다시 만들 수 있어야 고친 뒤에도 비교할 수 있습니다.
최소 수정부터 적용하기
카드와 푸터가 붙는 문제라면 카드 내부 padding인지 외부 간격인지 구분합니다. Grid에서는 minmax(0,1fr)와 자식의 min-width:0 여부를 확인합니다. 전체 body를 잘라서 가로 스크롤만 감추는 방식은 필요한 내용까지 숨길 수 있어 원인 해결로 보지 않습니다.
다른 화면으로 회귀 확인하기
같은 템플릿을 쓰는 짧은 글·긴 글·뉴스 목록을 비교합니다. 메뉴가 늘어났다면 데스크톱 표시가 시작되는 경계 폭도 확인합니다. 수정 전후 캡처와 실제 측정 결과를 남기고, 배포는 별도의 승인 단계로 둡니다.
04완성 전 체크
직접 확인한 항목만 체크하세요. 체크 상태는 저장되거나 서버로 전송되지 않습니다.
05막힐 때 확인할 것
한 화면을 고치니 다른 페이지가 깨집니다
전역 선택자 대신 컴포넌트 범위를 확인합니다. 공용 스타일을 바꿔야 한다면 사용하는 모든 페이지 유형을 검사합니다.
가로 스크롤만 없어지고 내용이 잘립니다
overflow:hidden으로 가린 부분이 있는지 봅니다. 너비를 늘리는 실제 자식 요소의 최소 폭과 줄바꿈 조건을 수정합니다.
06출처와 참고 자료
아래 공개 사례는 주제의 참고 자료입니다. 이 글의 도구 선택·절차·프롬프트는 AI Tools Lab의 독립적인 편집 예시이며, 원 제작자의 실제 입력이나 실행 재현 기록이 아닙니다.
- 기존 웹사이트 개선 ↗X · @Wësche · 원본 번호 5
- MDN: 반응형 웹 디자인 ↗
이 사이트에서 중요하게 관리하는 모바일 가로 넘침과 외부 여백의 구분을 점검 항목으로 담았습니다. 모든 사이트에서 동일 원인이 발생한다고 단정하지 않습니다.