개발 워크플로우 실무
취향 논쟁을 규칙 확인으로 바꾸는 디자인 리뷰
"좀 답답해 보인다" 는 반박할 수 없고 고칠 수도 없습니다. 간격 척도 밖의 값, 팔레트 밖의 색, 기준 미달 대비, 빠진 상태 — 네 항목만 규칙으로 바꿔도 리뷰의…
Technote
디자이너 를 위한 워드프레스 가이드
디자인과 사용자 경험을 책임지는 디자이너를 위한 가이드. 테마 선택 · 웹폰트 · 이미지 최적화가 속도와 전환에 미치는 영향을 다룹니다.
글 71편· 디자이너
테마 · 플러그인 실무
편집 가능한 영역을 디자인 전에 정합니다
CMS 가 표현할 수 없는 디자인은 배포된 뒤에도 계속 협상 대상으로 남습니다. 어디까지 편집자가 바꿀 수 있는지를 먼저 정하면 그 협상 자체가 사라집니다.
개발 워크플로우 실무
한 번에 다 바꾸지 않습니다 — 템플릿 단위 전환
전면 교체는 모든 문제를 같은 날 같은 시각에 불러옵니다. 원인을 귀속할 수 없다는 뜻이고, 그래서 템플릿 단위로 나눠 켭니다.
SEO 실무
카드 40장이 깔렸을 때 먼저 무너지는 규칙
카드 여섯 장으로 만든 시안은 대체로 잘 동작합니다. 40장에서 가장 먼저 깨지는 것은 종횡비이고, 그다음이 "같은 가족의 카드 세 장이 한 덩어리로 읽히는" 문제입니다.
SEO 실무
결과 0건 화면이 이탈을 만드는 자리입니다
빈 화면은 왜 비었는지와 지금 무엇을 할 수 있는지를 말해야 합니다. 그리고 0건이 나올 수 있는 필터라면 개수를 미리 보여 주어 그 막다른 길을 아예 누르지 않게 만듭니다.
개발 워크플로우 실무
시안은 실제 콘텐츠로 만들어야 합니다
길이가 고른 자리표시자 문장은 레이아웃의 문제를 전부 감춥니다. 실제 문장은 길이가 제각각이고, 그 불규칙이 바로 화면이 무너지는 지점입니다.
개발 워크플로우 실무
스크린샷이 아니라 실제 화면으로 리뷰받습니다
스크린샷은 가장 좋은 조건의 한 순간입니다. 상태와 예외와 실제 콘텐츠는 스테이징에서만 드러나며, 스테이징에는 지켜야 할 조건이 있습니다.
테마 · 플러그인 심화
JS 없이 만드는 상호작용과 그것을 안전하게 하는 규칙
details · :target · :focus-within · :has() · 스크롤 타임라인으로 상당수의 상호작용이 스타일시트 안에서 끝납니다. 안전하게 만드는 규칙은 하나입니다 — 기본값이 완성된 상태여야 합니다.
테마 · 플러그인 실무
아이콘을 폰트로 넣을까, SVG 로 넣을까
세 방식은 화면에서 같은 그림을 그립니다. 갈리는 것은 색을 몇 개 쓸 수 있는가, 보조기기에 무엇으로 읽히는가, 그리고 실제로 몇 개가 방문자에게 내려가는가입니다.
테마 · 플러그인 실무
다크 모드는 기본값이 아니라 결정이어야 합니다
다크 모드는 기능 하나가 아니라 유지·검증해야 할 표면이 두 배가 되는 일입니다. 넣을 이유가 분명한 사이트가 있고, 그렇지 않은 사이트가 있습니다.
개발 워크플로우 실무
상태와 예외를 그리지 않으면 구현이 갈라집니다
기본 상태만 그린 시안은 화면의 절반만 정의한 것입니다. 나머지 절반 — 빈 목록 · 오류 · 긴 제목 — 은 구현 중에 즉흥으로 채워지고, 그 즉흥은 대체로 의도와…
SEO 실무
주소를 지키는 것은 디자인 결정입니다
정보구조를 다시 그리면 주소가 바뀝니다. 바꿔야 한다면 301 리다이렉트 맵이 배포와 함께 나가야 하며, 그것은 잡무가 아니라 산출물입니다.