웹사이트 개발 규칙
성능
- 이미지는 느린 사이트의 가장 큰 원인입니다. WebP/AVIF를 사용하고, 접힌 부분 아래 이미지는 지연 로딩하며, 레이아웃 변경을 방지하기 위해 명시적인 너비/높이를 설정하세요.
- 렌더링 차단 CSS는 첫 번째 페인트를 지연시킵니다. 중요한 CSS는
<head>에 인라인으로 포함하고, 나머지는 지연하세요. - 타사 스크립트(분석, 채팅 위젯)는 종종 500ms 이상의 지연을 추가합니다.
async또는defer로 로드하고 정기적으로 감사하세요. - 폰트는 보이지 않는 텍스트 깜빡임(FOIT)을 유발합니다.
font-display: swap을 사용하고 중요한 폰트는 미리 로드하세요. - 시크릿 모드로 Lighthouse를 측정하세요. 확장 프로그램이 결과를 왜곡합니다.
모바일 우선
- CSS를 모바일 스타일로 시작하고
min-width미디어 쿼리로 복잡성을 추가하세요. 축소하는 것보다 확장하는 것이 더 쉽습니다. - 터치 대상은 최소 44x44px가 필요합니다. 손가락은 부정확하며, 작은 버튼은 사용자를 불편하게 합니다.
- 브라우저 DevTools만이 아닌 실제 기기에서 테스트하세요. 조절된 시뮬레이션은 실제 환경의 끊김 현상을 놓칠 수 있습니다.
- 가로 스크롤은 치명적인 버그입니다. 모든 페이지를 최소 320px 너비에서 테스트하세요.
viewport메타 태그는 필수입니다:<meta name="viewport" content="width=device-width, initial-scale=1">
접근성
- 모든
<img>에는alt텍스트가 필요합니다. 장식용 이미지는 빈alt=""를, 의미 있는 이미지는 설명 텍스트를 사용하세요. - 본문 텍스트의 색상 대비 비율은 최소 4.5:1입니다. WebAIM 대비 검사기를 사용하세요.
- 폼 입력에는 연결된
<label>요소가 있어야 합니다. 플레이스홀더만으로는 접근할 수 없습니다. - 키보드 탐색이 작동해야 합니다. Tab 키로 모든 대화형 요소를 테스트하세요.
- 화면 읽기 프로그램은 제목 계층 구조를 알립니다. H1-H6을 논리적 순서로 사용하고, 단계를 건너뛰지 마세요.
HTML 구조
- 페이지당 하나의
<h1>만 사용하세요. 페이지 제목이지 스타일링 도구가 아닙니다. - 시맨틱 요소를 사용하세요:
<nav>,<main>,<article>,<aside>,<footer>— 이들은 브라우저와 보조 기술에 구조를 전달합니다. - 액션에는
<button>, 탐색에는<a>를 사용하세요. 클릭 핸들러가 있는 div를 사용하지 마세요. - 외부 링크에는
rel="noopener"를 사용하세요.target="_blank"의 보안 취약점을 방지합니다. - HTML을 검증하세요. 깨진 마크업은 브라우저 간 예측할 수 없는 렌더링을 유발합니다.
CSS 패턴
!important를 피하세요. 캐스케이드를 깨고 디버깅을 어렵게 만듭니다. 대신 특이성을 수정하세요.- 텍스트에는 고정
px대신 상대 단위(rem,em,%)를 사용하세요. 사용자 글꼴 크기 기본 설정을 존중합니다. - CSS 사용자 정의 속성(변수)은 반복을 줄입니다. 색상과 간격을 한 번 정의하고 모든 곳에서 사용하세요.
- 1D 레이아웃에는 Flexbox를, 2D에는 Grid를 사용하세요. 하나가 다른 하나의 역할을 하도록 강요하지 마세요.
- CSS 로딩 없이 테스트하세요. 콘텐츠는 일반 HTML에서도 읽을 수 있어야 합니다.
일반적인 실수
- 파비콘이 없으면 서버 로그에 404 스팸이 발생합니다. 간단한 PNG라도 항상 포함하세요.
<html lang="en">을 설정하지 않으면 화면 읽기 프로그램 발음이 깨집니다.- 하드코딩된
http://링크는 HTTPS 사이트에서 깨집니다. 프로토콜 상대//또는 항상https://를 사용하세요. - JavaScript가 사용 가능하다고 가정하지 마세요. 핵심 콘텐츠는 JS 없이도 작동해야 합니다(점진적 향상).
- 인쇄 스타일을 잊지 마세요. 사용자가 인쇄할 수 있는 페이지(영수증, 기사)에는
@media print를 추가하세요.
SEO / 색인화
- 표준 URL은 서버가 제공하는 실제 URL과 일치해야 합니다. 불일치(예: 후행 슬래시 유무)는 Google을 혼란스럽게 하고 색인화를 방지할 수 있습니다.
- 모든 콘텐츠 페이지에는 해당 페이지를 가리키는 내부 링크가 최소 하나 이상 있어야 합니다. 사이트맵에만 있고 참조 페이지가 없는 페이지는 Google 크롤러에 의해 우선순위가 낮아집니다.
- 템플릿의 콘텐츠 필터는 페이지를 내비게이션에서 조용히 제외할 수 있습니다. 사이트맵 확인만이 아닌 홈페이지에서 링크를 따라가 모든 페이지에 도달할 수 있는지 확인하세요.
- Search Console에서 "발견됨 - 현재 색인되지 않음"은 일반적으로 기술적 차단이 아닌 내부 링크 부족을 의미합니다. 색인화를 요청하기 전에 먼저 링크를 수정하세요.
출시 전
- 모든 양식이 실제로 제출되는지 테스트하세요. 깨진 문의 양식은 조용히 잠재 고객을 잃게 합니다.
- 404 페이지가 존재하고 도움이 되는지 확인하세요. 기본 서버 404는 비전문적으로 보입니다.
- Open Graph 태그로 소셜 공유 미리보기를 확인하세요. Facebook/Twitter 디버거에서 테스트하세요.
- 사이트맵을 Google Search Console에 제출하세요. 색인화 속도를 높입니다.
- 가동 시간 모니터링을 설정하세요. 사용자가 알리기 전에 사이트가 다운되는 시점을 알아야 합니다.