SEO 실무
자기잠식 — 우리 글 둘이 서로의 순위를 깎을 때
경쟁사가 아니라 우리 글이 우리 순위를 눌러 앉히는 경우가 있습니다. 찾는 방법은 두 가지, 처방은 세 가지이고 어느 쪽을 고를지 기준이 있습니다.
Technote
워드프레스 실무 노하우 골라 읽는 기술 노트
글 217편
개발 워크플로우 실무
시안은 실제 콘텐츠로 만들어야 합니다
길이가 고른 자리표시자 문장은 레이아웃의 문제를 전부 감춥니다. 실제 문장은 길이가 제각각이고, 그 불규칙이 바로 화면이 무너지는 지점입니다.
SEO 실무
필터 주소가 만드는 조용한 중복과 canonical
같은 목록을 정렬만 바꿔 보여 주는 주소가 수백 개씩 생깁니다. 화면에는 아무 문제가 없고 검색 쪽에서만 조용히 문제가 되기 때문에 발견이 늦습니다.
테마 · 플러그인 입문
업데이트가 멈춘 플러그인을 판별하는 기준
마지막 업데이트 날짜 하나로는 방치를 판정할 수 없습니다. 판별 신호 다섯 개를 함께 보고, 대체 불가라면 격리 조건이라도 걸어야 합니다.
개발 워크플로우 실무
스크린샷이 아니라 실제 화면으로 리뷰받습니다
스크린샷은 가장 좋은 조건의 한 순간입니다. 상태와 예외와 실제 콘텐츠는 스테이징에서만 드러나며, 스테이징에는 지켜야 할 조건이 있습니다.
테마 · 플러그인 심화
JS 없이 만드는 상호작용과 그것을 안전하게 하는 규칙
details · :target · :focus-within · :has() · 스크롤 타임라인으로 상당수의 상호작용이 스타일시트 안에서 끝납니다. 안전하게 만드는 규칙은 하나입니다 — 기본값이 완성된 상태여야 합니다.
개발 워크플로우 실무
자체 엔드포인트 — 네임스페이스 · 권한 콜백 · 스키마
permission_callback 은 선택 인자가 아닙니다. 빠뜨리면 라우트가 공개되고 코어가 경고를 남깁니다. 그리고 args 스키마를 주면 검증 코드를 핸들러에 손으로 쓰지 않아도 됩니다.
성능 최적화 실무
N+1 쿼리 — 루프 안의 get_post_meta 와 캐시 프라이밍
WP_Query 는 자기 결과에 대해서만 캐시를 채웁니다. 손으로 만든 ID 목록에는 그 혜택이 따라오지 않고, 그 차이가 쿼리 수를 결정합니다.
AI 활용 실무
AI 콘텐츠 품질 게이트 — 발행 전에 기계가 막아야 할 것
AI 로 글을 만드는 것보다 어려운 것은 못 나갈 글을 막는 일입니다. 사람의 눈썰미에 기대지 말고, 발행 조건을 기계가 검사하게 만드는 구성을 소개합니다.
테마 · 플러그인 실무
조각 나누기 — 같은 마크업을 두 곳에 두지 않기
복사한 마크업은 반드시 어긋납니다. 한쪽을 고치면 다른 쪽은 그대로 남고, 두 화면이 서로 다른 말을 하기 전까지 아무도 모릅니다.
개발 워크플로우 실무
search-replace 안전 수칙 — 직렬화와 guid
SQL 한 줄로 도메인을 바꾸면 위젯과 테마 설정이 조용히 빈 값이 됩니다. 직렬화가 문자열 길이를 함께 저장하기 때문이고, 이 문제는 도구를 바꾸는 것으로 완전히 사라집니다.
테마 · 플러그인 실무
아이콘을 폰트로 넣을까, SVG 로 넣을까
세 방식은 화면에서 같은 그림을 그립니다. 갈리는 것은 색을 몇 개 쓸 수 있는가, 보조기기에 무엇으로 읽히는가, 그리고 실제로 몇 개가 방문자에게 내려가는가입니다.
Cited
함께 보면 좋은 기술 노트
워드프레스 밖의 주제는 같은 팀이 운영하는 동지커뮤니케이션 기술 인사이트에 정리돼 있습니다. 아래 요약은 원문 그대로 인용했으며, 제목을 누르면 원문으로 이동합니다.
-
AI 활용
CLAUDE.md 작성법 — AI 코딩 어시스턴트에게 프로젝트를 가르치는 기술
Claude Code, Cursor, Copilot 같은 AI 코딩 도구는 프로젝트 컨텍스트를 정확히 알수록 더 나은 결과를 냅니다. 효과적인 CLAUDE.md 구조와 작성 원칙을 공유합니다.
-
AI 활용
AI에게 UI 디자인을 요청하는 프롬프팅 전략 — Claude·GPT로 시안 만들기
AI에게 "예쁜 버튼 만들어줘"라고 요청하면 실망스러운 결과가 나옵니다. 제약 조건·레퍼런스·역할 정의를 담은 구조적 프롬프트로 원하는 디자인을 정확하게 요청하는 전략을 공유합니다.
-
테마 · 플러그인
SCSS 기초 완전 정복 — 변수부터 모듈 구조까지
CSS의 한계를 극복한 SCSS(Sass)의 핵심 문법을 정리합니다. 변수, 중첩, Mixin, @use, 모듈 구조까지 — 실무에서 바로 쓸 수 있는 패턴 중심으로 설명합니다.
-
테마 · 플러그인
디자인 토큰 & 테마 색상 시스템 — SCSS 변수로 브랜드 아이덴티티 구축하기
색상 팔레트를 단순한 HEX 코드 모음이 아닌, 의미 있는 설계 시스템으로 만드는 방법. 시맨틱 토큰 구조와 SCSS 변수 설계 패턴을 실제 프로젝트 예시로 설명합니다.
-
성능 최적화
반응형 타이포그래피 시스템 설계 — 웹 가독성의 과학
폰트 크기를 픽셀로 하드코딩하는 시대는 끝났습니다. Type Scale, clamp()로 유동적 폰트 크기, 한글 웹폰트 최적화, 줄간격 황금비율까지 — 어떤 화면에서도 읽기 좋은 타이포그래피 시스템을 설계하는 방법을 알아봅니다.
-
개발 워크플로우
피그마에서 SCSS로 — 디자이너·개발자 핸드오프 실전 가이드
피그마 디자인을 코드로 옮기는 과정에서 발생하는 오해와 손실을 최소화하는 방법. 토큰 추출, 컴포넌트 명명 규칙, 스페이싱 시스템 동기화까지 실무 워크플로우를 단계별로 정리합니다.