개발 워크플로우 실무
상태와 예외를 그리지 않으면 구현이 갈라집니다
기본 상태만 그린 시안은 화면의 절반만 정의한 것입니다. 나머지 절반 — 빈 목록 · 오류 · 긴 제목 — 은 구현 중에 즉흥으로 채워지고, 그 즉흥은 대체로 의도와…
Technote
글 217편
개발 워크플로우 실무
기본 상태만 그린 시안은 화면의 절반만 정의한 것입니다. 나머지 절반 — 빈 목록 · 오류 · 긴 제목 — 은 구현 중에 즉흥으로 채워지고, 그 즉흥은 대체로 의도와…
SEO 실무
정보구조를 다시 그리면 주소가 바뀝니다. 바꿔야 한다면 301 리다이렉트 맵이 배포와 함께 나가야 하며, 그것은 잡무가 아니라 산출물입니다.
성능 최적화 입문
같은 화면에 나란히 나오지만 완전히 다른 문제입니다. 한쪽은 쿼리를 고쳐야 하고, 다른 한쪽은 캐시로 사라집니다. 구분이 먼저입니다.
개발 워크플로우 입문
포스트 타입은 한 줄로 열립니다. 메타는 다릅니다 — 타입을 등록해야 하고, auth_callback 이 쓰기를 가르며, 읽기는 그것과 무관하게 열려 버립니다.
SEO 실무
사이트맵은 자동 생성이라 방치하면 은퇴한 주소 · 리다이렉트 · 404 를 계속 싣습니다. 전 URL 을 실제로 요청해 상태 코드를 확인하는 점검 루프를 소개합니다.
성능 최적화 실무
첫 화면의 가장 큰 요소가 그려지는 시점이 곧 체감 속도입니다. 히어로 이미지에 지연 로딩을 걸면 그 시점이 스스로 늦어집니다.
테마 · 플러그인 입문
"CSS 가 안 먹는다" 의 대부분은 자식 스타일이 부모보다 먼저 로드된 것입니다. 의존성을 선언하면 순서가 보장되고, 강제 선언이 필요 없어집니다.
개발 워크플로우 입문
일괄 수정 사고는 대부분 대상을 잘못 고른 데서 납니다. 선택과 실행을 두 명령으로 나누면, 무엇이 바뀔지 눈으로 먼저 확인할 수 있습니다.
SEO 입문
폼의 위치는 디자인 문제가 아니라 타이밍 문제입니다. 방문자가 아직 준비되지 않은 순간에 들이밀면, 폼은 초대가 아니라 방해가 됩니다.
서버 · 인프라 심화
페이지 캐시 도입에서 어려운 것은 켜는 것이 아니라 비켜 가야 할 요청을 빠짐없이 비켜 가는 것입니다. 우회 목록에서 하나가 빠지면 결제 웹훅이 캐시되는 사고가 납니다.
개발 워크플로우 입문
같은 코드를 같은 훅에 걸어도 시점이 다르면 결과가 다릅니다. 택소노미 · 포스트 타입 · 번역은 init 이전에 손대면 미완성된 세상을 보게 됩니다.
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로 — 디자이너·개발자 핸드오프 실전 가이드
피그마 디자인을 코드로 옮기는 과정에서 발생하는 오해와 손실을 최소화하는 방법. 토큰 추출, 컴포넌트 명명 규칙, 스페이싱 시스템 동기화까지 실무 워크플로우를 단계별로 정리합니다.