Technote

디자이너 를 위한 워드프레스 가이드

디자인과 사용자 경험을 책임지는 디자이너를 위한 가이드. 테마 선택 · 웹폰트 · 이미지 최적화가 속도와 전환에 미치는 영향을 다룹니다.

글 71편· 디자이너

성능 최적화 실무

SVG 를 쓸 자리와 쓰지 않을 자리

아이콘과 도표는 이미지 파일이 아니어도 됩니다. 벡터로 두면 크기별 사본이 필요 없고, 색을 CSS 로 바꿀 수 있습니다.

디자이너 3분 읽기

성능 최적화 실무

font-display — 안 보이는 글자와 바뀌는 글자 사이

웹폰트가 도착하기 전의 몇백 밀리초를 어떻게 쓸지 정하는 속성입니다. 선택지는 다섯 개지만 실제 판단은 "빈 화면"과 "바뀌는 화면" 중 무엇을 받아들이느냐 하나입니다.

디자이너 4분 읽기

테마 · 플러그인 실무

편집자에게 임의 색을 주지 않는 설정

색 선택기를 열어 두면 6개월 뒤 브랜드색과 미묘하게 다른 색이 사이트에 쌓입니다. 편집자의 잘못이 아니라 시스템이 물어봤기 때문입니다.

디자이너 3분 읽기

개발 워크플로우 실무

테마 업데이트 전에 확인할 것

업데이트를 미루는 것은 해결이 아닙니다. 무엇이 깨질 수 있는지 미리 알면, 업데이트는 무서운 일이 아니라 순서가 정해진 작업이 됩니다.

디자이너 3분 읽기

성능 최적화 실무

지연 로딩의 예외 — 첫 화면 이미지

지연 로딩은 대부분의 이미지에 옳습니다. 그런데 첫 화면의 큰 이미지에 걸면, 성능 지표가 측정하는 바로 그 대상을 늦추게 됩니다.

디자이너 3분 읽기

성능 최적화 실무

한글 서브셋 분할 — 11,172자를 다 내려받지 않는 법

한글 폰트가 무거운 이유는 분명합니다. 현대 한글 음절 조합만 11,172개이기 때문입니다. unicode-range로 나누면 브라우저가 그 페이지에 실제로 쓰인 조각만 가져갑니다.

디자이너 5분 읽기

테마 · 플러그인 실무

!important 없이 테마 스타일 이기기

규칙을 분명히 썼는데 화면이 안 바뀝니다. 원인은 대개 특정도가 아니라 순서이고, 순서는 !important 없이 고칠 수 있습니다.

디자이너 3분 읽기

₩270,000 · 신청하기