성능 최적화 실무
첫 화면 이미지는 특별 취급해야 합니다
첫 화면의 가장 큰 요소가 그려지는 시점이 곧 체감 속도입니다. 히어로 이미지에 지연 로딩을 걸면 그 시점이 스스로 늦어집니다.
Technote
디자이너 를 위한 워드프레스 가이드
디자인과 사용자 경험을 책임지는 디자이너를 위한 가이드. 테마 선택 · 웹폰트 · 이미지 최적화가 속도와 전환에 미치는 영향을 다룹니다.
글 71편· 디자이너
성능 최적화 실무
움직여도 되는 속성과 프레임을 갉아먹는 속성
한 프레임에 허락된 시간은 아주 짧습니다. transform 과 opacity 만이 레이아웃 계산 없이 움직이고, 나머지는 매 프레임 값을 치릅니다.
개발 워크플로우 입문
디자인과 코드가 같은 이름을 쓰게 만들기
이름이 다르면 대화마다 번역이 한 단계씩 붙습니다. 그 번역은 시간이 지날수록 사람 머릿속에만 남고, 새로 합류한 사람에게는 전달되지 않습니다.
성능 최적화 심화
폰트가 도착할 때 화면이 흔들리는 이유와 그 해결
웹폰트가 늦게 도착해 글자가 바뀌면 줄 수가 달라지고 그 아래 전부가 밀립니다. 폴백 가족의 메트릭을 웹폰트에 맞추면 이 흔들림이 사라집니다.
AI 활용 입문
AI 로 대체 텍스트 초안 만들기, 그리고 사람이 고치는 자리
생성된 대체 텍스트는 사진을 설명합니다. 올바른 대체 텍스트는 그 사진이 이 맥락에서 나르는 정보를 설명합니다. 둘은 자주 다릅니다.
개발 워크플로우 입문
핸드오프에서 넘길 것은 시안이 아니라 규칙입니다
시안을 스무 장 넘겨도 개발자는 스물한 번째 화면을 묻습니다. 그리지 않은 화면까지 스스로 만들 수 있게 하는 것은 규칙이고, 규칙은 시안과 다른 형태로 넘겨야 합니다.
개발 워크플로우 입문
리뉴얼의 첫 작업은 시안이 아니라 재고 조사입니다
목록에 없는 화면은 지킬 수 없습니다. 페이지 · 템플릿 · 유입 상위 세 목록을 먼저 만들면 일정과 범위가 저절로 정해집니다.
개발 워크플로우 심화
점검 루틴 — 자동 검사가 잡는 것과 사람이 봐야 하는 것
자동 검사는 기계적으로 판정할 수 있는 부분을 빠르고 정확하게 잡습니다. 나머지 — 대체 텍스트가 맞는 말인지, 순서가 말이 되는지 — 는 사람만 알 수 있습니다.
AI 활용 심화
코드로 그리는 삽화 — SVG 와 토큰으로 만드는 그림
삽화를 이미지 파일이 아니라 코드로 두면 리브랜딩에서 다시 내보낼 것이 없습니다. 색을 SVG 안에 넣지 않는 것 하나가 이 구조 전체를 지탱합니다.
개발 워크플로우 심화
미디어 라이브러리에서 안 쓰는 파일 찾아내기
지우는 것보다 어려운 일은 "안 쓰인다" 를 증명하는 것입니다. 참조가 숨어 있는 자리를 알면 안전한 순서가 생깁니다.
테마 · 플러그인 심화
sticky 가 조용히 죽는 이유 — 조상의 overflow 한 줄
position: sticky 는 실패해도 에러를 내지 않습니다. 임계값 · 부모의 여유 · 조상의 overflow 세 가지만 순서대로 확인하면 원인은 거의 항상 그 안에 있습니다.