성능 최적화 심화
테마 감사 — 로드하는 자산과 실제 쓰는 자산
테마는 쓰지 않는 기능의 자산도 함께 내려받는 경우가 많습니다. 무엇이 실려 오는지 목록으로 만들면, 걷어낼 수 있는 것과 아닌 것이 나뉩니다.
Technote
디자이너 를 위한 워드프레스 가이드
디자인과 사용자 경험을 책임지는 디자이너를 위한 가이드. 테마 선택 · 웹폰트 · 이미지 최적화가 속도와 전환에 미치는 영향을 다룹니다.
글 80편· 디자이너
AI 활용 실무
AI 생성 이미지를 웹에 올리기 전에 확인할 것
생성 자체는 몇 초면 끝납니다. 문제는 그다음입니다 — 여러 장의 톤을 맞추는 일, 파일 크기를 감당하는 일, 그리고 이 그림을 무엇이라고 말할 것인가.
SEO 실무
제목 계층 — h1 이 둘이면 화면과 색인이 함께 흐려집니다
제목은 글자 크기가 아니라 문서의 뼈대입니다. 크기로 고른 제목과 구조로 고른 제목이 어긋나기 시작하면, 목차가 사라진 문서가 됩니다.
테마 · 플러그인 실무
모바일 내비게이션 — 햄버거 말고도 선택지가 있습니다
햄버거는 목적지가 많을 때의 답입니다. 실제로 트래픽을 만드는 목적지가 서넛뿐이라면, 감추는 대신 보이게 두는 편이 언제나 낫습니다.
성능 최적화 실무
동영상 임베드의 숨은 비용
재생 버튼을 누르지 않아도 플레이어는 이미 로드됩니다. 포스터 이미지를 먼저 보여 주는 방식으로 그 비용을 클릭한 사람에게만 물릴 수 있습니다.
테마 · 플러그인 심화
테마가 가진 토큰과 우리 토큰의 경계 — 브릿지 한 파일
요즘 테마는 자기 토큰을 수백 개 갖고 옵니다. 그것을 직접 고치면 업데이트마다 사라지고, 무시하면 화면이 두 시스템으로 갈립니다. 답은 브릿지 한 파일입니다.
성능 최적화 심화
폴백 폰트 메트릭 보정으로 흔들림 없애기
웹폰트가 도착할 때 화면이 흔들리는 이유는 폰트가 늦어서가 아니라 폴백 폰트와 글자 폭·높이가 다르기 때문입니다. 그 둘을 맞춰 두면 교체가 일어나도 레이아웃이 그대로입니다.
테마 · 플러그인 실무
페이지 빌더의 대가 — 편집 편의와 이관 가능성
빌더는 한 가지를 아주 잘합니다. 대신 레이아웃이 데이터베이스로 들어갑니다. 경계선을 어디에 긋느냐가 이 교환을 감당 가능하게 만듭니다.
테마 · 플러그인 실무
모션 축소 설정 — 애니메이션이 꺼져도 콘텐츠는 남아야 합니다
모션을 줄여 달라는 설정은 취향이 아니라 증상에서 나옵니다. 그리고 그 설정을 켠 사람에게 화면이 텅 비는 사고는, 접근성을 신경 쓴 코드에서 더 자주 납니다.
테마 · 플러그인 실무
누를 수 있는 크기 — 손가락 기준의 최소 치수와 간격
커서는 1픽셀이지만 손가락은 아닙니다. 보이는 크기를 키우지 않고도 누르는 크기를 키우는 방법과, 호버에만 있는 기능이 터치에서 사라지는 문제를 다룹니다.
성능 최적화 실무
font-display — 안 보이는 글자와 바뀌는 글자 사이
웹폰트가 도착하기 전의 몇백 밀리초를 어떻게 쓸지 정하는 속성입니다. 선택지는 다섯 개지만 실제 판단은 "빈 화면"과 "바뀌는 화면" 중 무엇을 받아들이느냐 하나입니다.