성능 최적화 입문
캐시란 무엇인가 — 계층이 다르면 하는 일도 다릅니다
캐시는 하나의 스위치가 아닙니다. 하는 일이 다른 계층 여럿이고, 그 차이를 모른 채 겹쳐 켜면 "나에게만 안 바뀌는 화면" 이 만들어집니다.
Technote
글 217편
성능 최적화 입문
캐시는 하나의 스위치가 아닙니다. 하는 일이 다른 계층 여럿이고, 그 차이를 모른 채 겹쳐 켜면 "나에게만 안 바뀌는 화면" 이 만들어집니다.
개발 워크플로우 입문
견적서에서 가장 중요한 부분은 금액이 아니라 범위와 제외입니다. 이 둘이 문장으로 적혀 있지 않으면, 나중에 생기는 논쟁이 전부 기억력 싸움이 됩니다.
SEO 입문
열 편을 아무 순서로나 쓰면 열 편이 따로 놉니다. 넓은 글과 좁은 글의 비율과 순서를 정해 두면 같은 노력으로 훨씬 단단한 덩어리가 됩니다.
AI 활용 입문
도구를 먼저 고르면 쓸 일을 찾게 됩니다. 반복하는 작업을 먼저 적어 두면 필요한 도구가 한두 개로 줄어듭니다.
보안 입문
로그인 화면은 사이트에서 가장 많이 두드려지는 문입니다. 아이디 · 비밀번호 · 2단계 인증 세 가지를 제대로 두면 그 두드림 대부분이 무의미해집니다.
SEO 입문
디자인을 먼저 잡으면 그 틀에 맞춰 할 말을 자르게 됩니다. 문서 하나에 문구를 순서대로 적는 것만으로 화면이 절반은 정해집니다.
테마 · 플러그인 입문
연한 회색 본문은 시안에서 가장 세련되어 보이고, 실제 화면에서 가장 먼저 읽히지 않습니다. 기준값 세 개만 알면 색을 고르는 그 자리에서 판단할 수 있습니다.
서버 · 인프라 입문
더 좋아서 옮기는 것이 아니라 막혀서 옮기는 것입니다. 옮길 신호는 정해져 있고, 옮기면 요금 대신 책임이 늘어납니다.
테마 · 플러그인 입문
좁은 화면에서 시작하면 결정할 것이 줄어듭니다. 넓은 화면에서 시작하면 매번 무엇을 버릴지 정해야 하고, 그 결정은 끝나지 않습니다.
서버 · 인프라 입문
설치는 5분이면 끝나지만, 그다음 10분이 이후 1년을 결정합니다. 특히 검색 노출 설정 하나는 빠뜨리면 아무리 글을 써도 검색에 나오지 않습니다.
테마 · 플러그인 입문
웹의 기본 행간은 라틴 알파벳을 기준으로 정해진 값입니다. 한글은 같은 크기에서 글자 안의 획이 더 촘촘하고 받침 때문에 실제 글자 높이도 커서, 같은 1.5가 훨씬 답답하게 읽힙니다.
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로 — 디자이너·개발자 핸드오프 실전 가이드
피그마 디자인을 코드로 옮기는 과정에서 발생하는 오해와 손실을 최소화하는 방법. 토큰 추출, 컴포넌트 명명 규칙, 스페이싱 시스템 동기화까지 실무 워크플로우를 단계별로 정리합니다.