테마 · 플러그인 실무
모션 축소 설정 — 애니메이션이 꺼져도 콘텐츠는 남아야 합니다
모션을 줄여 달라는 설정은 취향이 아니라 증상에서 나옵니다. 그리고 그 설정을 켠 사람에게 화면이 텅 비는 사고는, 접근성을 신경 쓴 코드에서 더 자주 납니다.
Technote
글 217편
테마 · 플러그인 실무
모션을 줄여 달라는 설정은 취향이 아니라 증상에서 나옵니다. 그리고 그 설정을 켠 사람에게 화면이 텅 비는 사고는, 접근성을 신경 쓴 코드에서 더 자주 납니다.
테마 · 플러그인 실무
커서는 1픽셀이지만 손가락은 아닙니다. 보이는 크기를 키우지 않고도 누르는 크기를 키우는 방법과, 호버에만 있는 기능이 터치에서 사라지는 문제를 다룹니다.
성능 최적화 실무
웹폰트가 도착하기 전의 몇백 밀리초를 어떻게 쓸지 정하는 속성입니다. 선택지는 다섯 개지만 실제 판단은 "빈 화면"과 "바뀌는 화면" 중 무엇을 받아들이느냐 하나입니다.
테마 · 플러그인 실무
색 선택기를 열어 두면 6개월 뒤 브랜드색과 미묘하게 다른 색이 사이트에 쌓입니다. 편집자의 잘못이 아니라 시스템이 물어봤기 때문입니다.
개발 워크플로우 실무
업데이트를 미루는 것은 해결이 아닙니다. 무엇이 깨질 수 있는지 미리 알면, 업데이트는 무서운 일이 아니라 순서가 정해진 작업이 됩니다.
테마 · 플러그인 실무
플러그인 생태계는 워드프레스의 최대 강점입니다. 다만 하나를 켤 때마다 매달 확인할 대상이 하나 늘어나고, 그 예산은 유한합니다.
개발 워크플로우 실무
라이브에서 바로 고치는 방식은 사이트가 작을 때만 통합니다. 고치는 30초가 매출과 신뢰를 건드리기 시작하면 규칙이 달라집니다.
개발 워크플로우 실무
월 정액을 내는데 무엇을 받고 있는지 모르겠다면, 계약서에 범위와 응답 시간이 없기 때문입니다. 네 가지만 적으면 서로 편해집니다.
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로 — 디자이너·개발자 핸드오프 실전 가이드
피그마 디자인을 코드로 옮기는 과정에서 발생하는 오해와 손실을 최소화하는 방법. 토큰 추출, 컴포넌트 명명 규칙, 스페이싱 시스템 동기화까지 실무 워크플로우를 단계별로 정리합니다.