테마 · 플러그인 실무
편집자에게 임의 색을 주지 않는 설정
색 선택기를 열어 두면 6개월 뒤 브랜드색과 미묘하게 다른 색이 사이트에 쌓입니다. 편집자의 잘못이 아니라 시스템이 물어봤기 때문입니다.
Technote
디자이너 를 위한 워드프레스 가이드
디자인과 사용자 경험을 책임지는 디자이너를 위한 가이드. 테마 선택 · 웹폰트 · 이미지 최적화가 속도와 전환에 미치는 영향을 다룹니다.
글 80편· 디자이너
개발 워크플로우 실무
테마 업데이트 전에 확인할 것
업데이트를 미루는 것은 해결이 아닙니다. 무엇이 깨질 수 있는지 미리 알면, 업데이트는 무서운 일이 아니라 순서가 정해진 작업이 됩니다.
테마 · 플러그인 실무
폼 라벨과 오류 메시지 — 플레이스홀더는 라벨이 아닙니다
입력하기 시작하면 사라지는 글자는 라벨이 될 수 없습니다. 라벨을 지운 폼과 색으로만 오류를 알리는 폼이 사람을 잃는 방식은 서로 닮았습니다.
성능 최적화 실무
지연 로딩의 예외 — 첫 화면 이미지
지연 로딩은 대부분의 이미지에 옳습니다. 그런데 첫 화면의 큰 이미지에 걸면, 성능 지표가 측정하는 바로 그 대상을 늦추게 됩니다.
테마 · 플러그인 실무
가로 스크롤 범인 찾기 — 숫자만 봐서는 못 찾습니다
scrollWidth 가 화면 폭과 같은데도 화면은 잘려 있습니다. 조상의 overflow 가 넘침을 흡수했기 때문이고, 이때는 요소의 사각형을 직접 재야 합니다.
성능 최적화 실무
한글 서브셋 분할 — 11,172자를 다 내려받지 않는 법
한글 폰트가 무거운 이유는 분명합니다. 현대 한글 음절 조합만 11,172개이기 때문입니다. unicode-range로 나누면 브라우저가 그 페이지에 실제로 쓰인 조각만 가져갑니다.
테마 · 플러그인 실무
theme.json 이 하는 일 — 블록 에디터로 팔레트를 넘기는 통로
theme.json 은 스타일 파일이 아니라 통로입니다. 우리 팔레트를 편집 화면에 넘겨서, 편집자가 자유 색상환 대신 우리 시스템에서 고르게 만듭니다.
테마 · 플러그인 실무
!important 없이 테마 스타일 이기기
규칙을 분명히 썼는데 화면이 안 바뀝니다. 원인은 대개 특정도가 아니라 순서이고, 순서는 !important 없이 고칠 수 있습니다.
테마 · 플러그인 실무
키보드만으로 통과하기 — 순서가 화면과 어긋나는 자리
마우스를 손에서 놓고 Tab 키만으로 한 바퀴 돌면 5분 만에 문제가 드러납니다. 대부분은 CSS 가 화면 순서를 바꿔 놓은 자리입니다.
테마 · 플러그인 실무
그리드 칸이 내용 때문에 부푸는 문제 — minmax(0, 1fr)
repeat(3, 1fr) 은 세 칸이 같은 폭이 된다고 약속하지 않습니다. 안에 든 코드 블록이나 긴 문자열 하나가 칸을 밀어내고, 그러면 판 전체가 화면 밖으로 나갑니다.
테마 · 플러그인 실무
CSS 커스텀 프로퍼티로 토큰 심기
토큰 목록을 :root 한 곳에 두고 컴포넌트가 그것만 참조하게 만들면, 사이트 전체의 색과 간격이 파일 하나에서 움직입니다.
테마 · 플러그인 실무
템플릿 오버라이드 — 복사한 파일은 그 순간 얼어붙습니다
자식 테마에 부모 파일을 복사하면 그 파일이 이깁니다. 동시에 그 파일에는 부모의 수정이 더 이상 오지 않습니다 — 유지보수를 함께 인수하는 것입니다.