기존 웹사이트 개선하기
현재 화면의 문제를 먼저 재현하고, 기능을 보존한 채 모바일과 정보 구조를 개선합니다.
HTML · CSS · 브라우저 개발자 도구
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: 반응형 웹 디자인 ↗
이 사이트에서 중요하게 관리하는 모바일 가로 넘침과 외부 여백의 구분을 점검 항목으로 담았습니다. 모든 사이트에서 동일 원인이 발생한다고 단정하지 않습니다.