웹 접근성(a11y), 키보드와 스크린 리더로도 쓸 수 있는 화면
Lighthouse 접근성 항목이 지적하는 버튼 이름, 색 대비, 제목 순서는 모두 마우스나 화면 없이 웹을 쓰는 사람과 이어져 있다. 키보드 포커스와 스크린 리더, 색과 대비 기준을 기초부터 설명한다.
웹 인프라
웹 인프라에 관한 10개의 기록을 모았습니다.
누적 레이아웃 이동(CLS), 읽던 줄이 밀려나는 이유
글을 읽는 도중 문단이 툭 내려가는 정도를 재는 지표가 CLS다. 이미지와 광고, 웹 글꼴이 왜 본문을 밀어내는지, 들어올 자리를 어떻게 미리 잡아 두는지 기초부터 정리한다.
보안 헤더와 CSP, 브라우저에게 미리 걸어 두는 제약
보안 헤더 검사에서 낮은 등급을 받으면 낯선 헤더 이름이 줄줄이 나온다. 각 헤더가 브라우저에게 무엇을 지시하는지, CSP는 왜 보고만 하는 모드로 먼저 켜는지 기초부터 설명한다.
정적 검색 색인, 검색 서버 없이 글을 찾는 법
정적 사이트에는 검색어를 받아 줄 서버가 없다. 빌드 때 만든 역색인으로 브라우저가 직접 글을 찾는 원리와, 사이트 밖에서 글을 찾아오게 하는 사이트맵과 RSS를 함께 설명한다.
지속적 배포(CD), 검사를 통과해야 나가는 파이프라인
코드를 올리면 빌드와 테스트가 자동으로 돌고, 통과한 결과만 운영 서버로 나간다. CI와 CD가 각각 무엇을 가리키는지, 산출물을 왜 한 번만 만드는지, 검사에 걸리면 무엇이 멈추는지 정리한다.
콘텐츠 전송 네트워크(CDN), 무엇을 얼마나 오래 캐시할까
CDN은 방문자와 가까운 서버에 응답의 사본을 두어 거리에서 오는 지연을 줄인다. 사람마다 다른 응답이 남에게 보이는 사고와 고친 페이지가 늦게 반영되는 현상도 이 사본을 다루는 방식에서 나온다.
도메인 이름 시스템(DNS), 도메인이 서버 주소로 바뀌는 과정
A 레코드의 서버 주소를 바꿔도 한동안 옛 서버로 가는 요청이 남는다. DNS가 받은 답을 TTL 동안 기억하기 때문이다. 도메인 등록과 HTTPS 인증서가 각각 무엇을 맡는지도 함께 짚는다.
정적 사이트 생성(SSG), 요청 전에 만들어 두는 웹
프레임워크 문서에 나오는 SSG는 페이지의 HTML을 방문 전에 빌드로 만들어 두는 방식이다. 요청 때 조립하는 방식과 무엇이 다른지, 어떤 화면에 맞고 어디서 실패하는지 설명한다.
브라우저에서 사진 줄이기, 파일 크기보다 픽셀 수를 봐야 하는 이유
사진을 브라우저에서 줄여 올리면 전송량은 줄지만, 처리하는 동안에는 해상도만큼의 픽셀 배열이 메모리에 펼쳐진다. 디코딩이 무엇인지, 여러 장을 한꺼번에 줄이면 왜 화면이 멈추는지 설명한다.
하위 리소스 무결성(SRI), integrity 속성이 하는 일
CDN에서 복사해 온 script 태그의 integrity 값은 그 파일의 해시다. 브라우저가 받은 파일을 이 값과 대조해 다르면 실행하지 않는 원리와, 정상 업데이트까지 막히는 이유를 설명한다.