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