개요: 라벨/태그는 영문이 SEO에 좋아요 Q: 왜요? A: 한글 url은 인코딩 때문에 깨지고 길어져요. 우리는 한국인이라 라벨에 한글을 사용하는게 편하죠. 블로그 방문자도 대부분 한국인이라 외국어 쓰면 뇌내 딜레이가 생겨요. 하지만 검색엔진을 비롯한 웹 생태계는 라틴 문자 중심이고, 특히 url은 ascii 문자만 쓸 수 있어서 문제가 생겨요. 한글을 쓰면 주소가 깨져요 = '%ED%95%9C%EA%B8%80%EC%9D%84%20%EC%93%B0%EB%A9%B4%20%EC%A3%BC%EC%86%8C%EA%B0%…

파일 업로드용 무료 서버 블로그 개설 당시에 파일 업로드가 불가능한 블로그스팟을 위해 Cloudflare R2 저장소를 외부 미디어 서버 로 만들었어요. 한동안 편하게 잘 쓰고 있었는데요, 에지 서버가 로스앤젤레스(LAX)로 연결되는 경우가 많았어요. 크게 느리진 않지만 그렇다고 빠르다기엔 미묘한... 그런 갑갑함이 있었죠. 그래서 뭐 좋은 거 없나 하고 살펴보던 중, 같은 회사의 Pages라는 서비스가 눈에 들어왔어요. 정적 사이트를 만드는 서비스인데요, CSS나 JS 파일을 올려서 정적 에셋 서버로 사용할 수도 있…

notepad++ 매크로의 편리함과 불편함 notepad++을 사용할 때 매크로 기능이 굉장히 유용한데요, 짧은 내용을 쓸 때는 편하지만 내용이 길어지면 매크로 기록 자체가 너무 힘들어요. 그렇다고 매크로 설정 파일을(shortcuts.xml) 직접 수정하는 것도 별 소용 없는게, 문자열을 통짜로 넣는 방식이 아니라 한 글자씩 쪼개서 넣는 방식이라 긴 내용은 쉽게 수정하기 어려워요. 단순하게 'href'를 적으려고 해도 아래의 형태로 길게 늘어지거든요. <Action type="1"…

의문: 블로그 공유버튼 사용률 얼마인지? 수년 전, 구글 애널리틱스의 기록을 살피던 중 의문이 생겼어요. 과연 블로그에서 SNS공유 버튼이 사용되고 있을까요? 사실 갑자기 든 의문은 아니고 그 전에도 머릿속에 있었지만 애써 외면 중이었던 생각이었어요. 그리고 이 의문에 대해 스스로 내린 결론은 그렇지 않다는 거죠. 제 블로그에서 SNS공유 버튼은 사용되지 않아요. 공유 버튼이 사용되지 않는다는 근거는? 근거가 된 블로그는 현재 비공개 상태고요, 운영중일 때도 트래픽의 절대치가 매우 적은 곳이었기 때문에 섣부른 판단일 수도…

개요: 클라우드플레어 수동 보안 정잭 필요 클라우드플레어 프록시를 사이트 앞에 내세워서 보안을 챙기고 있어도 기본 설정으로는 부족함이 있어요. 무료 플랜에서도 Cloudflare 관리 규칙 집합 및 DDoS 공격 방어를 자동으로 방어해 주고 있지만, XSS 혹은 코드 인젝션, Broken Access Control 같은 치명적인 것들만 들어있어요. 그래서 자잘한 봇 방어같은 건 수동으로 WAF 사용자 지정 규칙 을 만들어야 해요. 무료 플랜은 사용자 규칙 자체도 제한이 있다보니 완벽한 방어는 안 되지만, 그래도 양산…

목적: 구글 샌드박스 기간의 기록 블로그 개설 후 ~ 샌드박스 탈출 기간의 기록을 남겨 나중에 확인하기 쉽게 하려는 목적으로 기록해요. 그래서 자세히 적기보다는 리스트 형태로 주르륵 나열하는 방식을 쓸 거예요. 조건은 다음과 같아요. 플랫폼: 블로그스팟 도메인: Yes (신생) 프록시: Yes (CF) 인증서: Let's Encrypt (CF) TLS: 1.3 (최소 1.2) 암호화: Full (Strict) 콘텐츠: 예전 글 최신화 + 새 글 html 캐시: 사용 (기…

개요: 의외로 무거운 작업들 CSS 및 자바스크립트에서 CPU를 혹사시키는 명령이 몇 개 있어요. offsetWidth, getBoundingClientRect같은 명령이 대표적인데, 전체 레이아웃을 재 계산하는 리플로우를 유발하죠. left, right, top, bottom을 쓰는(write) 행동 역시 리플로우 유발 명령이에요. background-position 변경은 리페인트인데, 그리 큰 차이 없을 거예요. 대체적으로 어떤 요소가 레이아웃의 어느 위치에, 어떤 모습으로, 어떤 크기로 존재하는지 묻는 명령은(…

개요: uglifycss가 단위를 삭제해요 서브라임 텍스트에서 css minify 툴로 uglifycss를 쓰고있어요. clean-css는 --skip-rebase 문제도 있고, 해당 옵션 제거해서 실행하면 또 자기 마음대로 코드를 삭제하거나 꼬아버리는 문제가 있더라고요. 옵션을 조절해도 소용 없어서 그냥 쓰던 거 쓰고 있죠. 빌드 기능을 이용해서 esbuild도 써 봤는데 익숙치 않다보니 뭔가 불편한 느낌 때문에 uglifycss를 자주 쓰게 되더라고요. 그런데 uglifycss도 문제가 있어요. 값이 0이면 해당 단위…

개요: 301 리디렉션 의 필요성 흔한 일은 아니지만 글을 쓰다보면 기존의 글을 삭제하고 새 글을 쓰는 경우가 있죠? 대표적으로 여러 개로 나뉘어 있던 글을 하나로 합치는 경우인데, 그냥 삭제하거나 비공개로 놔두긴 아까우니 기존 글이 이동했다고 검색엔진과 방문자 모두에게 알려야 해요. 이럴 때 301 리디렉션을 기본적으로 선택하고, 그게 안 될 경우 차선책으로 meta 리프레쉬나 자바스크립트로 기존 주소로 접속한 사람을 새 주소로 이동시키게 되죠. 다행스럽게도 블로그스팟은 301 리디렉션을 지원하고 있어요. 물론 외부…

블로그스팟 고질병 ?m=1 구글 블로그인 blogspot은 모바일 기기로 접속하면 주소가 달라져요. 정확히는 기본적인 주소가 뒤에 ?m=1 이라는 문자가 붙은 주소로 바뀌죠. 그 자체로는 블로그에 해롭지 않지만, 짧은 순간이지만 리디렉션이 발생하고 보기에 거슬린다는 문제가 있어요. 가능하다면 제거하는 게 좋겠는데 일반적인 리디렉션으로는 해결할 수 없다는 문제가 있어요. 해 봤자 모바일 기기에서는 다시 ?m=1이 붙은 주소로 돌아오는 무한반복에 빠져 페이지 접속이 안 될 뿐이고요. 그래서 일반적인 리디렉션이 아니라 …

개요: 방문자의 첫 반응 블로그 방문자는 게시물 볼 때 언제 스크롤 시작하지? 그리고 페이지 접속 초기에 얼마나 빠르게, 얼마나 깊이 스크롤 하지? 이런 의문에 대한 답을 구하기 위해 2022년에 약 한 달간 실험을 진행했어요. 실험 결과부터 이야기하면 방문자의 절반이 1.3초 이내에 첫 스크롤 시작하고, 방문 3초 시점에서 370px 이내의 스크롤을 했어요. 즉 시작 부분의 중요한 내용은 1.3초 이내에 로딩 되거나 혹은 370px 이후에 표시하는 게 좋다고 볼 수 있죠. 테스트 장소는 따로 운영 중인 티스토리 블로…

의문: 블로그의 사진 크기는 얼마가 적당? 블로그 운영에 관심이 있다면 고품질 이미지 를 사용하여 전문성이 돋보이게 하라는 이야기를 자주 듣는데, SEO 관련 글에서 약속처럼 나오는 표현이에요. 하지만 대부분의 경우 바로 그 고품질 이미지라는 것이 구체적으로 무엇인지는 잘 안 나오는 편이죠. 그래서 얼마가 필요한지 직접 계산해 봤어요. 결론부터 말하면 대략 1200px 근처더라고요. * 이 글은 고품질 이미지의 요소 중 하나인 화질, 즉 ' 고화질 '의 기준이 무엇인가에 대해 생각해 보는 내용이으로,…

문제: 외부 서버에 CSS 파일을 올렸는데 스타일이 깨져요 CORS 정책 확인 하셨나요? 지난 글에서 Cloudflare R2 저장소 를 파일 업로드 서버로 만들었죠? 사진은 잘 나오지만 CSS, JS 같은 파일 로딩이 안 되거나 폰트 파일이 적용 안 되는 경우가 있을 거예요. 특히 preload 걸어놓을 때요. 직접 블로그 방문해서 보았을 때는 멀쩡한데, 블로그스팟 미리보기 에서 스타일이 깨지는 경우 10중 8, 9는 CORS 문제일 거예요. 이럴 때, 제일 먼저 CORS 정책 문제인지 확인…