테마 · 플러그인 실무
clamp() 하나로 단계마다 값을 다시 쓰지 않기
제목 크기를 브레이크포인트마다 다시 선언하고 있다면 유지보수가 계속 늘어납니다. clamp() 는 최소 · 유동 · 최대를 한 줄에 담아 그 재선언을 없앱니다.
Technote
글 217편
테마 · 플러그인 실무
제목 크기를 브레이크포인트마다 다시 선언하고 있다면 유지보수가 계속 늘어납니다. clamp() 는 최소 · 유동 · 최대를 한 줄에 담아 그 재선언을 없앱니다.
성능 최적화 실무
이미지는 대체로 페이지에서 가장 무거운 부분이고, 그것을 줄이는 방법은 순서대로 하면 거의 돈이 들지 않습니다. CDN 은 마지막 칸입니다.
테마 · 플러그인 실무
한글 어절이 중간에서 잘리는 문제는 CSS 한 줄로 해결됩니다. 그런데 그 한 줄은 공백이 없는 일본어 · 중국어에서 "끊을 자리가 없다"는 뜻이 되어 가로 스크롤을 만듭니다.
서버 · 인프라 입문
사이트가 해결하는 문제는 정해져 있습니다. 아직 그 문제가 아닌 단계라면, 먼저 수요를 확인하는 편이 훨씬 빠르고 배우는 것도 많습니다.
테마 · 플러그인 입문
간격을 매번 눈으로 정하면 12 · 13 · 14 · 15 가 한 화면에 섞입니다. 척도를 정하면 선택이 빨라지고, 화면이 저절로 정돈됩니다.
성능 최적화 실무
한 번 업로드하면 파일이 여러 개 생깁니다. 그중 화면에 한 번도 쓰이지 않는 것이 있다면 디스크와 srcset 을 동시에 어지럽힙니다.
테마 · 플러그인 입문
같은 색 변경이라도 어디에 저장되느냐에 따라 다음 사람이 찾을 수 있느냐가 갈립니다. 기준은 취향이 아니라 발견 가능성입니다.
서버 · 인프라 입문
도메인은 싸지만 바꾸는 비용은 싸지 않습니다. 몇 년 뒤에 문제가 되는 선택들에는 공통점이 있고, 전부 사기 전에 확인할 수 있습니다.
성능 최적화 실무
기회는 예고 없이 옵니다. 소개 글 하나로 몰린 방문자를 흰 화면으로 맞이하지 않으려면, 평소에 해 둘 준비가 몇 가지 있습니다.
테마 · 플러그인 실무
WooCommerce 는 훌륭한 도구입니다. 다만 상품이 하나뿐인 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로 — 디자이너·개발자 핸드오프 실전 가이드
피그마 디자인을 코드로 옮기는 과정에서 발생하는 오해와 손실을 최소화하는 방법. 토큰 추출, 컴포넌트 명명 규칙, 스페이싱 시스템 동기화까지 실무 워크플로우를 단계별로 정리합니다.