Technote
워드프레스 실무 노하우 골라 읽는 기술 노트
글 268편
개발 워크플로우 입문
REST API 기본 — 코어가 이미 열어 둔 것들
헤드리스를 하지 않아도 이미 쓰고 있습니다. 블록 에디터가 글을 저장하는 경로가 바로 이것이고, 응답의 형태를 알면 클라이언트 코드가 절반으로 줄어듭니다.
성능 최적화 심화
폰트가 도착할 때 화면이 흔들리는 이유와 그 해결
웹폰트가 늦게 도착해 글자가 바뀌면 줄 수가 달라지고 그 아래 전부가 밀립니다. 폴백 가족의 메트릭을 웹폰트에 맞추면 이 흔들림이 사라집니다.
개발 워크플로우 입문
WP-CLI 설치와 첫 명령 — 서버와 로컬은 다릅니다
클릭으로 하던 일을 명령으로 옮기면 그 작업이 기록이 됩니다. 설치는 10분이면 끝나지만, 어떤 PHP 로 어떤 사용자로 도는지를 처음에 정해 두어야 나중에 헤매지 않습니다.
성능 최적화 입문
고치기 전에 잽니다 — 최적화의 첫 30분
직관으로 최적화하면 대개 무언가는 좋아집니다. 문제는 그것이 병목이 아니었다는 점입니다. 구간을 나누고 숫자를 얻는 절차부터 정합니다.
개발 워크플로우 입문
액션과 필터의 차이 — 반환값 하나가 전부입니다
add_action 과 add_filter 는 사실 같은 등록부에 쌓입니다. 갈라지는 지점은 하나뿐입니다 — 필터는 값을 돌려줘야 하고, 돌려주지 않으면 그 값이 조용히 null 이 됩니다.
테마 · 플러그인 입문
템플릿 계층 — 이 화면을 그리는 파일 찾기
자식 테마 작업의 첫 질문은 언제나 같습니다. 이 화면은 지금 어느 파일이 그리고 있는가. 추측하지 않고 확인하는 방법이 있습니다.
개발 워크플로우 입문
로컬 개발 환경 고르기 — Docker · Herd · 내장 서버
세 방식은 편의성이 아니라 "프로덕션과 무엇이 같은가" 로 갈립니다. 지금 프로젝트에서 어떤 차이가 중요한지 알면 선택은 금방 끝납니다.
SEO 입문
무엇을 주고 연락처를 받을 것인가
문의 폼만 두고 기다리면 이미 결정을 끝낸 소수만 옵니다. 아직 고민 중인 다수와 연결되려면, 그 자리에서 값이 있는 무언가를 먼저 건네야 합니다.
AI 활용 입문
AI 로 대체 텍스트 초안 만들기, 그리고 사람이 고치는 자리
생성된 대체 텍스트는 사진을 설명합니다. 올바른 대체 텍스트는 그 사진이 이 맥락에서 나르는 정보를 설명합니다. 둘은 자주 다릅니다.
SEO 입문
무엇을 잴지 먼저 정합니다 — 지표를 고르는 기준
대시보드는 커지는데 바뀐 결정이 없다면, 그 대시보드는 자산이 아니라 비용입니다. 지표는 개수가 아니라 "이 숫자가 달라지면 무엇을 다르게 할 것인가" 로 고릅니다.
성능 최적화 입문
속도가 매출에 닿는 세 갈래 길
"1초 늦으면 전환이 몇 퍼센트 준다" 는 남의 사이트에서 나온 숫자입니다. 속도가 돈에 닿는 경로 세 개를 알고 나면, 우리 사이트에서 직접 잴 수 있습니다.
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로 — 디자이너·개발자 핸드오프 실전 가이드
피그마 디자인을 코드로 옮기는 과정에서 발생하는 오해와 손실을 최소화하는 방법. 토큰 추출, 컴포넌트 명명 규칙, 스페이싱 시스템 동기화까지 실무 워크플로우를 단계별로 정리합니다.