성능 최적화 심화
프론트엔드 예산 — 상한을 정하고 지키는 법
페이지는 한 번에 무거워지지 않습니다. 각각 합리적인 작은 추가가 쌓여 무거워집니다. 상한을 정하고 재는 절차가 그 누적을 끊습니다.
Technote
워드프레스 실무 노하우 골라 읽는 기술 노트
글 12편· 성능 최적화 · 개발자
성능 최적화 심화
API 응답 캐시 — 어느 계층에 두고 어떻게 무효화하나
캐시를 넣는 것은 쉽습니다. 어려운 것은 언제 버릴지 아는 일이고, 그 판단을 잘못하면 결제 상태가 갱신되지 않는 사고까지 이어집니다.
성능 최적화 심화
autoload 옵션 — 모든 요청에 실리는 데이터 찾기
autoload 로 표시된 옵션은 요청마다 한 번에 읽혀 역직렬화됩니다. 큰 값 하나가 사이트 전체에 조용히 세금을 매기는 구조입니다.
성능 최적화 심화
부모 테마 자산 걷어내기 — 절차와 뒤따르는 책임
쓰지 않는 스크립트를 내리는 것은 가능합니다. 다만 그 자산에 기대던 기능의 책임이 함께 넘어오므로, 무엇이 실제로 깨지는지 확인하는 절차가 필요합니다.
성능 최적화 실무
트랜지언트 — 캐시를 만들면 무효화가 내 책임이 됩니다
저장은 세 줄이면 됩니다. 어려운 것은 언제 지울 것인가이고, 지워야 할 사건은 최소 두 가지입니다. 하나만 놓쳐도 증상이 갈립니다.
성능 최적화 실무
워드프레스 Redis 오브젝트 캐시 — 적용 전에 알아야 할 것과 실측 결과
워드프레스가 느린 원인의 상당수는 페이지를 만들 때마다 같은 데이터베이스 쿼리를 반복하는 데 있습니다. Redis 오브젝트 캐시는 이 반복 쿼리를 메모리에서 꺼내 쓰게 만들어, 특히 관리자…
성능 최적화 심화
Redis 오브젝트 캐시 적중률을 읽는 법 — 90%가 항상 좋은 것은 아니다
적중률 숫자 하나만 보고 캐시가 잘 돌고 있다고 판단하면, 정작 느린 화면은 그대로 남습니다. 어떤 키가 몇 번 조회되는지까지 내려가 봐야 병목이 보입니다.
성능 최적화 실무
오브젝트 캐시 — Redis 를 붙이면 실제로 줄어드는 것
반복되는 동일 조회는 사라집니다. 느린 쿼리 한 건은 그대로입니다. 이 구분을 모르면 캐시를 붙여 놓고 왜 안 빨라지는지 묻게 됩니다.
성능 최적화 실무
N+1 쿼리 — 루프 안의 get_post_meta 와 캐시 프라이밍
WP_Query 는 자기 결과에 대해서만 캐시를 채웁니다. 손으로 만든 ID 목록에는 그 혜택이 따라오지 않고, 그 차이가 쿼리 수를 결정합니다.
성능 최적화 실무
LCP 를 줄이는 프리로드 체크리스트 — 실측으로 고른 자원만
preload 는 우선순위를 사는 게 아니라 빌리는 것입니다. 남발하면 정작 급한 자원이 밀립니다. LCP 요소를 실측으로 특정하고 그 경로의 자원만 올리는 순서를 정리합니다.
성능 최적화 입문
쿼리 프로파일 읽는 법 — 느린 쿼리와 중복 쿼리
같은 화면에 나란히 나오지만 완전히 다른 문제입니다. 한쪽은 쿼리를 고쳐야 하고, 다른 한쪽은 캐시로 사라집니다. 구분이 먼저입니다.
성능 최적화 입문
고치기 전에 잽니다 — 최적화의 첫 30분
직관으로 최적화하면 대개 무언가는 좋아집니다. 문제는 그것이 병목이 아니었다는 점입니다. 구간을 나누고 숫자를 얻는 절차부터 정합니다.
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로 — 디자이너·개발자 핸드오프 실전 가이드
피그마 디자인을 코드로 옮기는 과정에서 발생하는 오해와 손실을 최소화하는 방법. 토큰 추출, 컴포넌트 명명 규칙, 스페이싱 시스템 동기화까지 실무 워크플로우를 단계별로 정리합니다.