“화질 깨지는 건 죽어도 싫어요!” 디자이너 포트폴리오 사이트나, 고해상도 작품을 보여줘야 하는 블로그라면 ‘손실 압축’이 꺼려질 수 있습니다. 픽셀 하나라도 뭉개지는 게 싫으니까요. 이럴 때 쓰는 것이 무손실 압축(Lossless Compression)입니다. ZIP 파일 압축했다가 풀면 파일이 그대로죠? 그것과 똑같습니다. 1. 30초 요약 (빈 공간 정리) 무손실 압축은 데이터를 버리는 게 아니라, ‘표현 방식’을 효율적으로 바꾸는 겁니다. … 더 읽기
“블로그에 DSLR 원본 사진 올리는 건 테러입니다.” 요즘 스마트폰 사진 한 장 용량이 5MB~10MB입니다. 이걸 그대로 블로그에 올리면? 방문자가 그 페이지를 여는 건, 뮤직비디오 한 편(데이터)을 다운로드하는 것과 맞먹는 데이터를 쓰는 꼴입니다. 당연히 로딩이 느려서 다 도망가죠. 이미지 압축은 선택이 아니라 매너입니다. 1. 30초 요약 (다이어트) 압축에는 두 가지 방식이 있습니다. 손실 압축(Lossy): 사람이 눈치채지 … 더 읽기
“왜 안 보이는 사진까지 미리 로딩하나요?” 사용자가 블로그에 들어오면, 브라우저는 보통 맨 아래에 있는 사진까지 한 번에 다 불러오려고(다운로드) 합니다. 그러느라 정작 중요한 맨 위 화면이 늦게 뜨죠. 답답한 사용자는 나가버립니다. 그래서 나온 기술이 지연 로딩(Lazy Loading)입니다. “지금 당장 화면에 필요한 거 먼저 보여주고, 아래(스크롤) 있는 건 나중에 천천히 불러오자.” 1. 30초 요약 (스크롤 할 … 더 읽기
“시각 장애인은 그림을 어떻게 볼까요?” 볼 수 없습니다. 대신 듣습니다. 스크린 리더(화면 낭독기)가 “이미지, 강아지가 공을 물고 있는 사진”이라고 읽어줍니다. 이때 읽어주는 설명글이 바로 대체 텍스트(Alt Text)입니다. 그런데 재밌는 건, 구글 검색 로봇도 눈이 없다는 사실입니다. 1. 30초 요약 (이미지의 이름표) <img src=”dog.jpg” alt=”공을 물고 있는 골든 리트리버”> 여기서 alt=”…” 부분이 대체 텍스트입니다. 이걸 비워두면(alt=””) … 더 읽기
“이미지 용량을 1/10로 줄여준다고?” 블로그 속도가 느린 원인의 90%는 ‘이미지’ 때문입니다. 고화질 사진(5MB) 하나가 글자 500만 자보다 무겁습니다. 구글이 이 문제를 해결하기 위해 직접 만든 차세대 이미지 포맷, WebP(웹피)를 소개합니다. 이제 PNG, JPG의 시대는 갔습니다. 1. 30초 요약 (구글의 선물) JPG: 압축률 좋지만 화질 저하 있음. 투명 배경 불가. PNG: 화질 좋고 투명 배경 가능하지만 … 더 읽기
“띄어쓰기 한 번에 1바이트 낭비?” 개발자가 코드를 짤 때는 보기 좋으라고 줄바꿈도 하고, 공백도 넣고, 주석(설명)도 답니다. 하지만 컴퓨터(브라우저) 입장에선 이 모든 게 ‘쓸모없는 용량’일 뿐입니다. 이 군살을 쫙 빼주는 작업이 Minify(미니파이)입니다. 1. 30초 요약 (공백 제거) 원본 코드: 사람이 읽기 좋음. (용량 100KB) css body { color: black; /* 글자색 검정 */ background: white; … 더 읽기
“HTML이 쌩얼이라면, CSS는 메이크업입니다.” 아무리 내용(HTML)이 좋아도, 디자인(CSS)이 구리면 사람들은 읽지 않습니다. 반대로 디자인만 화려하고 내용이 없으면? 그것도 문제입니다. 하지만 블로거라면 최소한 기본적인 CSS는 알아야 똥손을 탈출하고 가독성을 높일 수 있습니다. 1. 30초 요약 (옷 입히기) HTML: 구조 (뼈대). “여기에 제목이 있다. 여기에 이미지가 있다.” CSS: 표현 (피부). “제목은 파란색으로 해라. 이미지는 가운데 정렬해라.” CSS는 … 더 읽기
“폰트 이쁘게 하려고 이것저것 넣었는데요.” 블로그 글 꾸미기에 진심인 분들이 자주 하는 실수입니다. 글자 색 바꾸고, 배경색 넣고, 폰트 바꾸고… HTML 코드 안에 직접 스타일을 박아넣는 것, 바로 인라인 스타일(Inline Style)입니다. 눈에는 예쁘지만, 검색 엔진에겐 최악의 적입니다. 1. 30초 요약 (덕지덕지 코드) CSS (권장): 옷장(CSS 파일)에 옷을 넣어두고 “1번 옷 꺼내 입어”라고 지시함. 깔끔함. 인라인 … 더 읽기
“ 가 뭐고 이 뭐죠? 그냥 다 쓰면 안 돼요?” 화면상으로는 똑같이 보입니다. 하지만 구글 봇에게는 천지 차이입니다. 시맨틱(Semantic) 태그는 “이 부분이 제목이야”, “이건 본문이야”, “이건 메뉴야”라고 의미(Meaning)를 부여하는 이름표입니다. 이걸 안 쓰면 구글 봇은 여러분의 글을 “의미 없는 덩어리”로 취급합니다. 1. 30초 요약 (이름표 달기) Non-semantic: <div>, <span> (아무 의미 없음. 그냥 상자) Semantic: … 더 읽기
“블로그 글을 복사해 왔는데, 서식이 엉망이에요.” 워드나 한글, 노션에서 쓴 글을 티스토리나 워드프레스에 붙여넣기 하면, 눈에는 안 보이지만 뒤에는 쓰레기 코드(Span, Style 태그 등)가 덕지덕지 붙어옵니다. 이게 쌓이면 페이지 속도가 느려지고, 구글 봇이 싫어합니다(SEO 감점). 이럴 때 필요한 것이 바로 HTML Cleaner입니다. 1. 30초 요약 (코드 청소부) 여러분이 쓴 글의 ‘내용(텍스트)’은 살리고, 잡다한 ‘스타일(글꼴, 색상, … 더 읽기