200706 블로그 제작일지

접근성

모든 사용자는 어떤 환경에서 접속하건 같은 정보에 접근할 수 있어야 한다는 게 지금까지 열심히 지키려 노력하는 저만의 기준입니다. (에버그린 브라우저를 기준으로 하는 경우가 많음)
하지만 최근 모두가 화면을 볼 수 있는 게 아니란 중요한 사실을 깨달았습니다.
아무리 최신 브라우저를 사용하더라도 앞을 볼 수 없으면 많은 버튼 및 링크가 아이콘으로 표현된 제 블로그에선 접근할 수 없는 정보가 아주 많았습니다.

또, 작은 버튼이 과하게 가까이 붙어있어 누르기 힘들 수도 있는 버튼도 많았습니다.

위 모든 걸 해결하기 위해 아래와 같은 업데이트가 있었습니다.

모든 img 태그에 alt 속성을 추가했습니다. 이미 대부분의 img 태그에 alt 속성이 있었지만, 누락된 것들을 전부 추가했습니다. 오래전에 작성해 alt 태그를 추가하지 않은 포스트도 하나씩 추가해갈 예정입니다.
내부에 아무런 텍스트 없이 아이콘만 있는 모든 요소에 aria-label="설명" 이라는 속성을 추가했습니다.
단순히 꾸미기 용도로 들어간 이모티콘엔 role="img" 라는 속성과 상술한 aria-label 속성을 추가했습니다.
자바스크립트에서 클릭 이벤트를 추가한 요소에 role="button" 이라는 속성을 추가했습니다.
너비나 높이 중 하나라도 20px 이하인 버튼에 상하 좌우로 20px의 여백을 추가했습니다.

프론트엔드 보안 및 성능

터치, 스크롤, 휠 이벤트 중 event.preventDefault()를 사용하지 않는 이벤트엔 {passive: true}를 추가했습니다.

document.getElementById("element").addEventListener("scroll", myFunction, { passive: true})

passive: true 옵션은 위와 같이 사용할 수 있고, 해당 옵션이 있는 이벤트 리스너는 event.preventDefault()를 호출할 수 없습니다.
터치, 스크롤, 휠 모두 사용자의 스크롤에 관여하는 이벤트입니다. 만약 passive: true 옵션이 없다면 브라우저는 스크롤을 진행하기 전 이벤트 리스너가 모든 작업을 마치길 기다려야 하고, 이는 사용자가 스크롤이 버벅인다고 생각할 수 있게 만듭니다.

target="_blank" 속성을 갖는 a 태그에 rel="noopener"를 추가했습니다.
- target="_blank"로 열린 탭은 opener(그 탭을 연 탭 - 이하 '부모 탭'이라 서술함)에 대한 참조가 가능하고, 이는 보안과 성능의 문제를 야기할 수 있습니다.

보안 - 열린 새 탭에서 부모 탭을 피싱용 페이지로 리다이렉트시킬 수 있습니다.
성능 - 열린 새 탭에서 많은 리소스를 사용하면 참조를 위해 같은 스레드에서 동작 중인 부모 탭의 성능도 함께 저하됩니다.

위 두 업데이트를 진행하고 확인한 lighthouse 점수입니다.

댓글 링크 추가 스크립트 업데이트

티스토리 댓글에 링크 및 이미지 추가하기 포스트에서 언급했듯, 이제 innerHTML을 사용하지 않고 댓글의 링크를 변환합니다.
댓글과 비슷한 HTML 구조를 가진 테스트 페이지를 제작해 테스트를 진행한 결과, innerHTML을 사용하지 않는 스크립트가 최악으로 작동했을 때가 innerHTML을 사용한 스크립트가 최선으로 작동했을 때보다 처리가 빨랐습니다.

사용한 코드는 상술한 포스트에 있는 코드와 크게 다르지 않습니다.

서버 컴퓨터 OS 업데이트

18.04 LTS에서 20.04 LTS로 OS 버전을 올렸습니다.
랩탑엔 20.04 LTS가 나오자마자 올렸는데, 서버엔 혹시 물라 업데이트를 늦추다 2개월쯤 지났으면 충분하리라 판단해 이제야 올렸습니다.

이 업데이트를 진행하느라 6/28(토) 오전 8시 반가량부터 약 2시간 동안 접속할 수 없는 이슈가 있었습니다.
2022년 4월엔 반드시 새벽에 진행하겠습니다.

악성 봇 대규모 숙청

apache2에서 nginx로 엔진을 변경하며 악성 봇을 차단하던 conf 파일은 따로 다시 작성하지 않았습니다.
'그렇게 오랜 기간 차단당했으면 이젠 물러갔겠거니'한 안일한 생각이었습니다. 상대는 봇인데 중요한 걸 간과했네요.

apache2에서 차단하던 봇의 목록이 남아있기에, 그를 기반으로 다시 차단 목록을 만들었습니다.

# 메인 설정 파일
include /etc/nginx/ua_blacklist;
 
if ($ua_blacklist) {
        return 444;
}
 
# 블랙리스트 파일 예시
map $http_user_agent $ua_blacklist {
        default 0;
        ~*(360Spider|AhrefBot|BaiduSpider|bitlybot) 1;
}

위처럼 - /etc/nginx/sites-available/에 있는 - 메인 설정 파일에서 블랙리스트 파일을 include하고 블랙리스트가 참이면 444로 응답하는 코드를 작성하시고, 블랙리스트 파일을 제작하시면 특정 user-agent만 차단하실 수 있습니다.

봇 목록은 워낙 많아 다 적진 못했습니다.

슬라이더 디자인 변경

조금 동글동글하게 수정해봤습니다.

URL 복사 버튼 추가

블로그에 한글로 된 URI가 매우 많습니다. 주소창에서 그냥 링크를 복사하면 아주 못생긴 RFC 3986에 따라 16진수로 인코딩된 문자열이 복사됩니다.
심지어 티스토리에서 주소를 붙여 넣으면 인코딩된 문자열에 포함된 %를 다시 %25로 인코딩해 존재하지 않는 주소를 첨부해버리더라고요.
그래서 본문 하단에 주소를 복사하는 버튼도 추가해뒀습니다. 클릭하시면 디코딩된 주소가 복사됩니다.

인코딩 된 URI 예시 - https://marshallku.com/dev/200706-%eb%b8%94%eb%a1%9c%ea%b7%b8-%ec%a0%9c%ec%9e%91%ec%9d%bc%ec%a7%80
위 URI를 디코딩 - https://marshallku.com/dev/200706-블로그-제작일지