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