성능 최적화 실무
휴대폰에 데스크톱 이미지를 보내지 않는 법
srcset 은 브라우저에게 후보를 주고, sizes 는 그중 무엇을 고를지 알려 줍니다. 둘 중 하나만 맞으면 나머지 하나가 결과를 망칩니다.
Technote
디자이너 를 위한 워드프레스 가이드
디자인과 사용자 경험을 책임지는 디자이너를 위한 가이드. 테마 선택 · 웹폰트 · 이미지 최적화가 속도와 전환에 미치는 영향을 다룹니다.
글 80편· 디자이너
성능 최적화 실무
웹폰트 자체 호스팅 — CDN을 쓰지 않을 때 얻는 것
공용 폰트 CDN의 가장 큰 장점이었던 "다른 사이트에서 이미 받아 둔 캐시"는 브라우저 캐시 분리 이후 사라졌습니다. 남은 것은 왕복 비용과 통제권의 문제입니다.
테마 · 플러그인 실무
초점 표시를 지우지 않기 — outline: none 이 없애는 것
기본 초점 링이 디자인과 맞지 않는 것은 사실입니다. 다만 지우기만 하면 키보드 사용자의 커서가 통째로 사라집니다 — 지우는 대신 바꾸는 방법이 있습니다.
테마 · 플러그인 실무
clamp() 하나로 단계마다 값을 다시 쓰지 않기
제목 크기를 브레이크포인트마다 다시 선언하고 있다면 유지보수가 계속 늘어납니다. clamp() 는 최소 · 유동 · 최대를 한 줄에 담아 그 재선언을 없앱니다.
테마 · 플러그인 실무
keep-all 이 한글에 주는 것, 다른 언어에서 빼앗는 것
한글 어절이 중간에서 잘리는 문제는 CSS 한 줄로 해결됩니다. 그런데 그 한 줄은 공백이 없는 일본어 · 중국어에서 "끊을 자리가 없다"는 뜻이 되어 가로 스크롤을 만듭니다.
테마 · 플러그인 입문
간격 척도 — 4의 배수가 만드는 리듬과 예외의 비용
간격을 매번 눈으로 정하면 12 · 13 · 14 · 15 가 한 화면에 섞입니다. 척도를 정하면 선택이 빨라지고, 화면이 저절로 정돈됩니다.
성능 최적화 실무
워드프레스가 만드는 이미지 크기들
한 번 업로드하면 파일이 여러 개 생깁니다. 그중 화면에 한 번도 쓰이지 않는 것이 있다면 디스크와 srcset 을 동시에 어지럽힙니다.
테마 · 플러그인 입문
커스터마이저에 둘 것과 CSS 에 둘 것
같은 색 변경이라도 어디에 저장되느냐에 따라 다음 사람이 찾을 수 있느냐가 갈립니다. 기준은 취향이 아니라 발견 가능성입니다.
테마 · 플러그인 입문
브레이크포인트는 기기가 아니라 콘텐츠가 정합니다
기기 이름으로 정한 기준선은 매년 낡습니다. 대신 컴포넌트를 천천히 넓히면서 무너지는 지점을 기록하면, 그 값이 그대로 기준선이 됩니다.
SEO 입문
대체 텍스트 — 장식 이미지와 정보 이미지는 반대로 씁니다
모든 이미지에 설명을 붙이는 것이 정답이 아닙니다. 장식 이미지는 비워야 하고, 정보 이미지는 그림이 아니라 정보를 적어야 합니다.
테마 · 플러그인 입문
본문 16px이 기준선인 이유, 그리고 예외
16px은 누가 정한 유행이 아니라 브라우저와 사용자가 합의한 기본값입니다. 그 값을 기준으로 삼되, 한글 장문에서는 한 단계 올릴 이유가 분명히 있습니다.
성능 최적화 입문
업로드 전에 정해 두는 최대 크기
카메라 원본을 그대로 올려도 화면은 멀쩡해 보입니다. 그래서 문제가 늦게 발견됩니다 — 워드프레스가 그 뒤에서 무엇을 하는지 알면 기준이 잡힙니다.