성능 최적화 심화
폴백 폰트 메트릭 보정으로 흔들림 없애기
웹폰트가 도착할 때 화면이 흔들리는 이유는 폰트가 늦어서가 아니라 폴백 폰트와 글자 폭·높이가 다르기 때문입니다. 그 둘을 맞춰 두면 교체가 일어나도 레이아웃이 그대로입니다.
Technote
글 217편
성능 최적화 심화
웹폰트가 도착할 때 화면이 흔들리는 이유는 폰트가 늦어서가 아니라 폴백 폰트와 글자 폭·높이가 다르기 때문입니다. 그 둘을 맞춰 두면 교체가 일어나도 레이아웃이 그대로입니다.
테마 · 플러그인 실무
빌더는 한 가지를 아주 잘합니다. 대신 레이아웃이 데이터베이스로 들어갑니다. 경계선을 어디에 긋느냐가 이 교환을 감당 가능하게 만듭니다.
개발 워크플로우 실무
어느 쪽이 낫다는 답은 없습니다. 다만 두 방식은 서로 다른 위험을 갖고 있고, 그 위험을 계약으로 메우는 방법도 다릅니다.
SEO 실무
회사 소개는 형식적인 페이지처럼 보이지만, 결제나 문의 직전에 다시 열리는 페이지입니다. 방문자가 거기서 확인하려는 것은 연혁이 아닙니다.
성능 최적화 실무
"1초 느리면 매출이 얼마 준다" 는 남의 사이트 숫자입니다. 우리 사이트의 이탈 지점은 우리가 재야 하고, 재는 방법은 어렵지 않습니다.
SEO 실무
검색 2페이지에 걸려 있는 글은 이미 절반을 해 둔 상태입니다. 새로 쓰는 것보다 그 글을 고치는 편이 훨씬 적은 시간으로 앞자리에 닿습니다.
보안 실무
시도 제한과 로그인 주소 변경은 자주 함께 권장되지만 하는 일이 다릅니다. 각각 무엇을 해 주고 무엇은 해 주지 않는지 솔직하게 정리합니다.
테마 · 플러그인 실무
폼이 잘못된 경우는 드뭅니다. 대부분은 메일이 발송 단계에서 막히거나 스팸으로 분류된 것이고, 이 문제는 구조를 알면 확실하게 해결됩니다.
테마 · 플러그인 입문
유료 테마에서 실제로 사는 것은 디자인이 아니라 1년치 업데이트와 지원입니다. 그래서 이 결정은 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로 — 디자이너·개발자 핸드오프 실전 가이드
피그마 디자인을 코드로 옮기는 과정에서 발생하는 오해와 손실을 최소화하는 방법. 토큰 추출, 컴포넌트 명명 규칙, 스페이싱 시스템 동기화까지 실무 워크플로우를 단계별로 정리합니다.