개발 워크플로우 입문
리뉴얼의 첫 작업은 시안이 아니라 재고 조사입니다
목록에 없는 화면은 지킬 수 없습니다. 페이지 · 템플릿 · 유입 상위 세 목록을 먼저 만들면 일정과 범위가 저절로 정해집니다.
Technote
워드프레스 실무 노하우 골라 읽는 기술 노트
글 217편
SEO 입문
검색에 나오기까지 — 크롤 · 렌더 · 색인의 세 단계
"검색에 안 나온다" 는 하나의 문제가 아닙니다. 단계마다 실패하는 방식이 다르고, 어느 단계에서 멈췄는지를 말할 수 있어야 고칠 수 있는 요청이 됩니다.
개발 워크플로우 심화
점검 루틴 — 자동 검사가 잡는 것과 사람이 봐야 하는 것
자동 검사는 기계적으로 판정할 수 있는 부분을 빠르고 정확하게 잡습니다. 나머지 — 대체 텍스트가 맞는 말인지, 순서가 말이 되는지 — 는 사람만 알 수 있습니다.
AI 활용 심화
코드로 그리는 삽화 — SVG 와 토큰으로 만드는 그림
삽화를 이미지 파일이 아니라 코드로 두면 리브랜딩에서 다시 내보낼 것이 없습니다. 색을 SVG 안에 넣지 않는 것 하나가 이 구조 전체를 지탱합니다.
개발 워크플로우 심화
미디어 라이브러리에서 안 쓰는 파일 찾아내기
지우는 것보다 어려운 일은 "안 쓰인다" 를 증명하는 것입니다. 참조가 숨어 있는 자리를 알면 안전한 순서가 생깁니다.
테마 · 플러그인 심화
sticky 가 조용히 죽는 이유 — 조상의 overflow 한 줄
position: sticky 는 실패해도 에러를 내지 않습니다. 임계값 · 부모의 여유 · 조상의 overflow 세 가지만 순서대로 확인하면 원인은 거의 항상 그 안에 있습니다.
개발 워크플로우 심화
디자인 시스템 문서 — 코드와 함께 사는 문서만 살아남습니다
따로 만든 디자인 문서는 두 달이면 코드와 어긋납니다. 문서가 살아남는 조건은 분량이 아니라 위치이고, 적어야 할 것은 값이 아니라 이유입니다.
테마 · 플러그인 심화
측정폭과 수직 리듬 — 끝까지 읽히는 본문 조판
한 줄에 몇 글자를 담을지와 요소 사이 간격을 어떻게 쌓을지가 장문 글의 완독률을 좌우합니다. 한글은 글자가 넓어 라틴 기준의 글자 수 관례를 그대로 쓸 수 없습니다.
AI 활용 실무
AI 에게 디자인 리뷰를 받는 프롬프트의 구조
"이 디자인 어때요" 라고 물으면 칭찬이 돌아옵니다. 쓸모 있는 답은 맥락 · 대상 · 기준 · 형식 네 칸을 채웠을 때 나옵니다.
성능 최적화 심화
테마 감사 — 로드하는 자산과 실제 쓰는 자산
테마는 쓰지 않는 기능의 자산도 함께 내려받는 경우가 많습니다. 무엇이 실려 오는지 목록으로 만들면, 걷어낼 수 있는 것과 아닌 것이 나뉩니다.
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로 — 디자이너·개발자 핸드오프 실전 가이드
피그마 디자인을 코드로 옮기는 과정에서 발생하는 오해와 손실을 최소화하는 방법. 토큰 추출, 컴포넌트 명명 규칙, 스페이싱 시스템 동기화까지 실무 워크플로우를 단계별로 정리합니다.