Technote
디자이너 를 위한 워드프레스 가이드
디자인과 사용자 경험을 책임지는 디자이너를 위한 가이드. 테마 선택 · 웹폰트 · 이미지 최적화가 속도와 전환에 미치는 영향을 다룹니다.
글 80편· 디자이너
성능 최적화 심화
폰트가 도착할 때 화면이 흔들리는 이유와 그 해결
웹폰트가 늦게 도착해 글자가 바뀌면 줄 수가 달라지고 그 아래 전부가 밀립니다. 폴백 가족의 메트릭을 웹폰트에 맞추면 이 흔들림이 사라집니다.
AI 활용 입문
AI 로 대체 텍스트 초안 만들기, 그리고 사람이 고치는 자리
생성된 대체 텍스트는 사진을 설명합니다. 올바른 대체 텍스트는 그 사진이 이 맥락에서 나르는 정보를 설명합니다. 둘은 자주 다릅니다.
개발 워크플로우 입문
핸드오프에서 넘길 것은 시안이 아니라 규칙입니다
시안을 스무 장 넘겨도 개발자는 스물한 번째 화면을 묻습니다. 그리지 않은 화면까지 스스로 만들 수 있게 하는 것은 규칙이고, 규칙은 시안과 다른 형태로 넘겨야 합니다.
개발 워크플로우 입문
리뉴얼의 첫 작업은 시안이 아니라 재고 조사입니다
목록에 없는 화면은 지킬 수 없습니다. 페이지 · 템플릿 · 유입 상위 세 목록을 먼저 만들면 일정과 범위가 저절로 정해집니다.
개발 워크플로우 심화
점검 루틴 — 자동 검사가 잡는 것과 사람이 봐야 하는 것
자동 검사는 기계적으로 판정할 수 있는 부분을 빠르고 정확하게 잡습니다. 나머지 — 대체 텍스트가 맞는 말인지, 순서가 말이 되는지 — 는 사람만 알 수 있습니다.
AI 활용 심화
코드로 그리는 삽화 — SVG 와 토큰으로 만드는 그림
삽화를 이미지 파일이 아니라 코드로 두면 리브랜딩에서 다시 내보낼 것이 없습니다. 색을 SVG 안에 넣지 않는 것 하나가 이 구조 전체를 지탱합니다.
개발 워크플로우 심화
미디어 라이브러리에서 안 쓰는 파일 찾아내기
지우는 것보다 어려운 일은 "안 쓰인다" 를 증명하는 것입니다. 참조가 숨어 있는 자리를 알면 안전한 순서가 생깁니다.
테마 · 플러그인 심화
sticky 가 조용히 죽는 이유 — 조상의 overflow 한 줄
position: sticky 는 실패해도 에러를 내지 않습니다. 임계값 · 부모의 여유 · 조상의 overflow 세 가지만 순서대로 확인하면 원인은 거의 항상 그 안에 있습니다.
개발 워크플로우 심화
디자인 시스템 문서 — 코드와 함께 사는 문서만 살아남습니다
따로 만든 디자인 문서는 두 달이면 코드와 어긋납니다. 문서가 살아남는 조건은 분량이 아니라 위치이고, 적어야 할 것은 값이 아니라 이유입니다.
테마 · 플러그인 심화
측정폭과 수직 리듬 — 끝까지 읽히는 본문 조판
한 줄에 몇 글자를 담을지와 요소 사이 간격을 어떻게 쌓을지가 장문 글의 완독률을 좌우합니다. 한글은 글자가 넓어 라틴 기준의 글자 수 관례를 그대로 쓸 수 없습니다.
AI 활용 실무
AI 에게 디자인 리뷰를 받는 프롬프트의 구조
"이 디자인 어때요" 라고 물으면 칭찬이 돌아옵니다. 쓸모 있는 답은 맥락 · 대상 · 기준 · 형식 네 칸을 채웠을 때 나옵니다.