SEO 실무
카드 40장이 깔렸을 때 먼저 무너지는 규칙
카드 여섯 장으로 만든 시안은 대체로 잘 동작합니다. 40장에서 가장 먼저 깨지는 것은 종횡비이고, 그다음이 "같은 가족의 카드 세 장이 한 덩어리로 읽히는" 문제입니다.
Technote
워드프레스 실무 노하우 골라 읽는 기술 노트
글 268편
개발 워크플로우 실무
SCSS 빌드 붙이기 — 산출물을 커밋할 것인가
워드프레스 테마는 빌드 스텝 없이 배포되는 것이 표준입니다. 그래서 일반적인 애플리케이션 코드와는 반대되는 결론이 나오고, 그 대가도 함께 옵니다.
보안 실무
인증 고르기 — 쿠키 · 애플리케이션 비밀번호 · 토큰
세 가지 방식은 편의의 차이가 아니라 위협 모델의 차이입니다. 브라우저에서 부르는가, 서버가 부르는가, 제3자가 발급하는가에 따라 답이 정해집니다.
보안 실무
업로드 디렉터리의 PHP 실행 차단 — 마지막 관문
업로드 취약점은 파일을 올리는 데서 끝나지 않습니다. 올라간 파일이 실행될 때 원격 코드 실행이 됩니다. uploads 에서 PHP 를 못 돌게 하면 그 승격이 끊깁니다.
개발 워크플로우 실무
eval-file 로 스크립트 돌리기 — 인자 전달의 함정
완전히 로드된 워드프레스 안에서 내 PHP 파일을 실행하는 방법입니다. 다만 --로 시작하는 플래그는 스크립트에 도착하지 않습니다 — WP-CLI 가 먼저 먹기 때문입니다.
성능 최적화 실무
오브젝트 캐시 — Redis 를 붙이면 실제로 줄어드는 것
반복되는 동일 조회는 사라집니다. 느린 쿼리 한 건은 그대로입니다. 이 구분을 모르면 캐시를 붙여 놓고 왜 안 빨라지는지 묻게 됩니다.
개발 워크플로우 실무
pre_get_posts — 가드 두 줄을 빠뜨리면 관리자까지 바뀝니다
이 훅은 모든 WP_Query 에 대해 돕니다. 메뉴 · 위젯 · 관리자 목록까지 전부 포함되므로, 판정 없이 조건을 넣으면 의도하지 않은 화면이 조용히 바뀝니다.
SEO 실무
결과 0건 화면이 이탈을 만드는 자리입니다
빈 화면은 왜 비었는지와 지금 무엇을 할 수 있는지를 말해야 합니다. 그리고 0건이 나올 수 있는 필터라면 개수를 미리 보여 주어 그 막다른 길을 아예 누르지 않게 만듭니다.
SEO 입문
SEO 플러그인은 하나만 — 둘을 켜면 무엇이 깨지는가
SEO 플러그인 두 개는 두 배의 최적화가 아니라 서로를 무효화하는 중복 선언입니다. canonical · 사이트맵 · 구조화 데이터가 두 벌씩 나가는 순간 검색엔진은 어느 쪽도 믿지 않습니다.
개발 워크플로우 실무
DB 동기화 — SQL 치환이 직렬화 데이터를 깨뜨리는 이유
워드프레스는 옵션과 메타에 직렬화된 PHP 배열을 넣고, 그 안에는 문자열의 길이가 함께 적혀 있습니다. SQL REPLACE 는 값만 바꾸고 길이는 그대로 둡니다.
SEO 실무
퍼널을 나누면 어디서 잃는지가 보입니다
전환율 하나만 보면 "낮다" 는 사실만 알게 됩니다. 경로를 단계로 나누면 어느 구간에서 사람이 빠지는지, 따라서 무엇을 고쳐야 하는지가 드러납니다.
개발 워크플로우 실무
자동 회신의 문장 — 첫인상은 여기서 정해집니다
자동 회신은 대부분 기본 문구 그대로 나갑니다. 그런데 그것이 고객이 우리에게서 받는 첫 번째 메일입니다 — 영수증이 아니라 브랜드 카피로 다뤄야 합니다.
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로 — 디자이너·개발자 핸드오프 실전 가이드
피그마 디자인을 코드로 옮기는 과정에서 발생하는 오해와 손실을 최소화하는 방법. 토큰 추출, 컴포넌트 명명 규칙, 스페이싱 시스템 동기화까지 실무 워크플로우를 단계별로 정리합니다.