보안 실무
캡차 없이 스팸 줄이기 — 전환을 깎지 않는 방법
캡차는 스팸을 줄이지만 진짜 문의도 함께 줄입니다. 사람에게는 보이지 않고 스크립트만 걸리는 장치들을 먼저 써 보는 편이 낫습니다.
Technote
워드프레스 실무 노하우 골라 읽는 기술 노트
글 268편
개발 워크플로우 실무
UTM 표기가 흔들리면 캠페인이 쪼개집니다
대문자 하나, 밑줄 하나 차이로 같은 캠페인이 리포트에서 세 줄이 됩니다. 셋을 더해 보기 전까지 그 캠페인은 실제보다 작아 보입니다.
SEO 실무
포털 블로그와 자사 사이트, 자산은 어디에 쌓이나
포털 블로그는 도달에 유리하고, 실제로 할 만한 가치가 있습니다. 다만 거기 쌓이는 것이 누구의 자산인지는 분명히 알고 시작해야 합니다.
성능 최적화 실무
태그 하나가 더하는 밀리초는 누가 냅니까
추적 스크립트는 내려받고 끝나지 않습니다. 파싱과 실행이 메인 스레드를 점유하는 동안 페이지는 손가락에 반응하지 않습니다. 그 비용은 직접 잴 수 있습니다.
SEO 실무
내부 링크 — 앵커 텍스트와 링크 방향이 하는 일
내부 링크는 독자를 안내하는 동시에 페이지 사이의 관계를 선언합니다. 어떤 말로 걸고 어느 방향으로 거는지가 그 선언의 내용입니다.
개발 워크플로우 실무
워드프레스를 GitHub 에 올릴 때의 .gitignore
워드프레스 저장소에서 커밋해야 할 것과 절대 커밋하면 안 되는 것의 경계는 명확합니다. wp-config.php 한 파일이 저장소에 들어가는 순간 DB 비밀번호와 인증 솔트가 통째로 유출됩니다.
개발 워크플로우 실무
취향 논쟁을 규칙 확인으로 바꾸는 디자인 리뷰
"좀 답답해 보인다" 는 반박할 수 없고 고칠 수도 없습니다. 간격 척도 밖의 값, 팔레트 밖의 색, 기준 미달 대비, 빠진 상태 — 네 항목만 규칙으로 바꿔도 리뷰의…
SEO 실무
구조화 데이터 — 우리가 실제로 무엇인지 고르는 일
서비스를 파는 회사가 상품(Product) 표기를 붙이면 리치 결과 대신 경고가 돌아옵니다. 타입을 고르는 것이 이 작업의 거의 전부입니다.
테마 · 플러그인 실무
편집 가능한 영역을 디자인 전에 정합니다
CMS 가 표현할 수 없는 디자인은 배포된 뒤에도 계속 협상 대상으로 남습니다. 어디까지 편집자가 바꿀 수 있는지를 먼저 정하면 그 협상 자체가 사라집니다.
성능 최적화 실무
워드프레스 Redis 오브젝트 캐시 — 적용 전에 알아야 할 것과 실측 결과
워드프레스가 느린 원인의 상당수는 페이지를 만들 때마다 같은 데이터베이스 쿼리를 반복하는 데 있습니다. Redis 오브젝트 캐시는 이 반복 쿼리를 메모리에서 꺼내 쓰게 만들어, 특히 관리자…
성능 최적화 심화
Redis 오브젝트 캐시 적중률을 읽는 법 — 90%가 항상 좋은 것은 아니다
적중률 숫자 하나만 보고 캐시가 잘 돌고 있다고 판단하면, 정작 느린 화면은 그대로 남습니다. 어떤 키가 몇 번 조회되는지까지 내려가 봐야 병목이 보입니다.
개발 워크플로우 실무
한 번에 다 바꾸지 않습니다 — 템플릿 단위 전환
전면 교체는 모든 문제를 같은 날 같은 시각에 불러옵니다. 원인을 귀속할 수 없다는 뜻이고, 그래서 템플릿 단위로 나눠 켭니다.
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로 — 디자이너·개발자 핸드오프 실전 가이드
피그마 디자인을 코드로 옮기는 과정에서 발생하는 오해와 손실을 최소화하는 방법. 토큰 추출, 컴포넌트 명명 규칙, 스페이싱 시스템 동기화까지 실무 워크플로우를 단계별로 정리합니다.