성능 최적화 입문
첫 화면이 뜨는 몇 초 동안 무슨 일이 일어나나
방문자는 속도를 초로 기억하지 않고 인상으로 기억합니다. 그 인상을 만드는 것은 대기 시간이 아니라 대기 중에 보이는 화면입니다.
Technote
글 268편
성능 최적화 입문
방문자는 속도를 초로 기억하지 않고 인상으로 기억합니다. 그 인상을 만드는 것은 대기 시간이 아니라 대기 중에 보이는 화면입니다.
테마 · 플러그인 실무
규칙을 분명히 썼는데 화면이 안 바뀝니다. 원인은 대개 특정도가 아니라 순서이고, 순서는 !important 없이 고칠 수 있습니다.
성능 최적화 실무
데이터베이스는 콘텐츠보다 훨씬 빨리 자랍니다. 자라는 것의 대부분은 우리가 만든 글이 아니라 자동으로 쌓인 부산물입니다.
개발 워크플로우 실무
사이트가 열렸다고 인수가 끝난 것은 아닙니다. 파일 · 계정 · 문서 세 묶음을 받아야 다음 사람이 이어받을 수 있습니다.
SEO 실무
가격을 감추면 "문의해야 아는 서비스" 가 되고, 포함만 적으면 결제 후에 범위 다툼이 남습니다. 두 문제를 한 화면에서 동시에 없애는 구조가 있습니다.
개발 워크플로우 실무
의욕이 있을 때 몰아쓰고 두 달을 쉬는 것보다, 느려도 멈추지 않는 쪽이 결과가 좋습니다. 리듬은 의지가 아니라 재고와 절차가 만듭니다.
보안 실무
백업이 있는데도 사이트를 잃는 경우가 있습니다. 대부분 백업 자체가 아니라 복구 조건을 확인해 본 적이 없어서 생기는 일이고, 한 시간이면 확인됩니다.
성능 최적화 실무
만드는 사람은 큰 화면으로 보고, 방문자는 작은 화면으로 봅니다. 이 차이에서 생기는 문제는 대부분 눈에 띄지 않고 조용히 이탈을 만듭니다.
테마 · 플러그인 실무
마우스를 손에서 놓고 Tab 키만으로 한 바퀴 돌면 5분 만에 문제가 드러납니다. 대부분은 CSS 가 화면 순서를 바꿔 놓은 자리입니다.
서버 · 인프라 실무
메일 서버를 직접 세우면 요금은 0원에 가깝습니다. 대신 도달률이라는 비용을 냅니다. 어느 쪽이 싼지는 문의 한 건의 가치로 계산됩니다.
테마 · 플러그인 실무
repeat(3, 1fr) 은 세 칸이 같은 폭이 된다고 약속하지 않습니다. 안에 든 코드 블록이나 긴 문자열 하나가 칸을 밀어내고, 그러면 판 전체가 화면 밖으로 나갑니다.
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로 — 디자이너·개발자 핸드오프 실전 가이드
피그마 디자인을 코드로 옮기는 과정에서 발생하는 오해와 손실을 최소화하는 방법. 토큰 추출, 컴포넌트 명명 규칙, 스페이싱 시스템 동기화까지 실무 워크플로우를 단계별로 정리합니다.