테마 · 플러그인 실무
그리드 칸이 내용 때문에 부푸는 문제 — minmax(0, 1fr)
repeat(3, 1fr) 은 세 칸이 같은 폭이 된다고 약속하지 않습니다. 안에 든 코드 블록이나 긴 문자열 하나가 칸을 밀어내고, 그러면 판 전체가 화면 밖으로 나갑니다.
Technote
디자이너 를 위한 워드프레스 가이드
디자인과 사용자 경험을 책임지는 디자이너를 위한 가이드. 테마 선택 · 웹폰트 · 이미지 최적화가 속도와 전환에 미치는 영향을 다룹니다.
글 71편· 디자이너
테마 · 플러그인 실무
CSS 커스텀 프로퍼티로 토큰 심기
토큰 목록을 :root 한 곳에 두고 컴포넌트가 그것만 참조하게 만들면, 사이트 전체의 색과 간격이 파일 하나에서 움직입니다.
테마 · 플러그인 실무
템플릿 오버라이드 — 복사한 파일은 그 순간 얼어붙습니다
자식 테마에 부모 파일을 복사하면 그 파일이 이깁니다. 동시에 그 파일에는 부모의 수정이 더 이상 오지 않습니다 — 유지보수를 함께 인수하는 것입니다.
성능 최적화 실무
휴대폰에 데스크톱 이미지를 보내지 않는 법
srcset 은 브라우저에게 후보를 주고, sizes 는 그중 무엇을 고를지 알려 줍니다. 둘 중 하나만 맞으면 나머지 하나가 결과를 망칩니다.
성능 최적화 실무
웹폰트 자체 호스팅 — CDN을 쓰지 않을 때 얻는 것
공용 폰트 CDN의 가장 큰 장점이었던 "다른 사이트에서 이미 받아 둔 캐시"는 브라우저 캐시 분리 이후 사라졌습니다. 남은 것은 왕복 비용과 통제권의 문제입니다.
테마 · 플러그인 실무
초점 표시를 지우지 않기 — outline: none 이 없애는 것
기본 초점 링이 디자인과 맞지 않는 것은 사실입니다. 다만 지우기만 하면 키보드 사용자의 커서가 통째로 사라집니다 — 지우는 대신 바꾸는 방법이 있습니다.
테마 · 플러그인 실무
clamp() 하나로 단계마다 값을 다시 쓰지 않기
제목 크기를 브레이크포인트마다 다시 선언하고 있다면 유지보수가 계속 늘어납니다. clamp() 는 최소 · 유동 · 최대를 한 줄에 담아 그 재선언을 없앱니다.
테마 · 플러그인 실무
keep-all 이 한글에 주는 것, 다른 언어에서 빼앗는 것
한글 어절이 중간에서 잘리는 문제는 CSS 한 줄로 해결됩니다. 그런데 그 한 줄은 공백이 없는 일본어 · 중국어에서 "끊을 자리가 없다"는 뜻이 되어 가로 스크롤을 만듭니다.
테마 · 플러그인 입문
간격 척도 — 4의 배수가 만드는 리듬과 예외의 비용
간격을 매번 눈으로 정하면 12 · 13 · 14 · 15 가 한 화면에 섞입니다. 척도를 정하면 선택이 빨라지고, 화면이 저절로 정돈됩니다.
성능 최적화 실무
워드프레스가 만드는 이미지 크기들
한 번 업로드하면 파일이 여러 개 생깁니다. 그중 화면에 한 번도 쓰이지 않는 것이 있다면 디스크와 srcset 을 동시에 어지럽힙니다.
테마 · 플러그인 입문
커스터마이저에 둘 것과 CSS 에 둘 것
같은 색 변경이라도 어디에 저장되느냐에 따라 다음 사람이 찾을 수 있느냐가 갈립니다. 기준은 취향이 아니라 발견 가능성입니다.
테마 · 플러그인 입문
브레이크포인트는 기기가 아니라 콘텐츠가 정합니다
기기 이름으로 정한 기준선은 매년 낡습니다. 대신 컴포넌트를 천천히 넓히면서 무너지는 지점을 기록하면, 그 값이 그대로 기준선이 됩니다.