전체 글118 aria-label로 접근성과 SEO 동시에 잡기(ARIA, aria-label, 네비게이션) 스크린 리더를 켜기 전까지는 몰랐다처음 aria-label이라는 속성을 알았을 때 반응이 "이게 뭐 대수냐"였다. 그냥 텍스트 하나 더 붙이는 거잖아. 그런데 현장에서 스크린 리더 테스트를 직접 해보고 나서 생각이 완전히 뒤집혔다. 화면을 보지 않고 소리만으로 웹페이지를 탐색하는 경험은 충격적이었다. "버튼, 버튼, 버튼" 이렇게만 읽히는 화면에서 사용자가 느끼는 답답함은 마치 불 꺼진 지하 주차장에서 내 차를 찾는 것과 다르지 않았다.부끄러운 고백이지만, 나도 한동안 aria-label을 선택이 아닌 장식 정도로 여겼다. 스크린 리더를 실제로 켜본 적이 없었기 때문이다. 직접 켜서 내가 만든 페이지를 탐색해보기 전까지는 무엇이 문제인지 피부로 느낄 수 없었다. 이 경험이 없는 개발자가 접근성을 진지하게.. 2026. 5. 6. 웹 접근성(WCAG)색상 대비율·포커스 표시로 SEO 점수까지 올리는 방법 웹 접근성이라는 단어를 처음 들었을 때 솔직히 코웃음을 쳤다. 화면 잘 보이고 클릭 잘 되면 끝 아니냐는 생각이었다. 지금 생각하면 부끄럽지만, 그게 당시 현장에서 일하는 개발자 상당수의 실제 인식이었을 것이다. 아무도 반박하지 않았으니까.접근성을 진지하게 보게 된 건 데이터 때문이었다. 접근성을 개선하고 나서 SEO 점수와 체류 시간이 올라가는 수치를 직접 봤을 때 비로소 이해가 됐다. 의무감으로 이해한 게 아니라 결과로 이해한 것이다. 그 순서가 나 같은 사람한테는 훨씬 잘 통했다. 물론 "결과가 좋아야 움직인다"는 이 태도 자체는 비판받아 마땅하다. 하지만 현실이 그렇다면, 그 현실에서 출발하는 편이 낫다고 생각한다.10년 넘게 현장에서 일하면서 느낀 건 하나다. 접근성은 장애인을 위한 시혜가 아니.. 2026. 5. 5. 티스토리, 카카오 로그인 버튼 CSS - 기본 디자인을 내 브랜드에 맞게 바꾸는 방법 티스토리 블로그에 댓글 기능을 붙여두고 한동안 그냥 방치했다. 노란 카카오 버튼이 거기 있다는 걸 알면서도 딱히 건드릴 생각을 못 했다. 그러다 어느 날 블로그 디자인을 전체적으로 어두운 톤으로 다듬고 나서야 그 버튼이 눈에 확 들어왔다. 모노톤으로 정성껏 맞춘 공간에 형광 노란 의자 하나가 덩그러니 놓인 느낌이었다. 처음에는 저게 바꿀 수 있는 건지조차 몰랐다. 개발자 도구로 요소를 클릭해보다가 클래스명을 발견했고, 그때부터 CSS 덮어쓰기를 시도하기 시작했다.솔직히 처음 시도에서는 제대로 동작하지 않았다. 클래스명은 찾았는데 스타일이 반만 먹히고 나머지는 카카오 기본 스타일이 남아 있었다. 왜 이런지 이해하는 데도 시간이 걸렸다. 결국 CSS 우선순위 문제였다. 이 경험이 나중에 다른 스킨 수정 작업.. 2026. 5. 4. 워드프레스 CSS, functions.php 없이도 테마 바꾸는 현실 방법 6가지 워드프레스 테마를 처음 바꾸려고 할 때 검색하면 제일 먼저 나오는 게 functions.php 수정이다. 그 파일을 열었다가 PHP 코드가 가득한 걸 보고 바로 닫았다. 잘못 건드렸다가 흰 화면이 떴다는 경험담을 너무 많이 읽어서 손이 안 갔다. 시계를 처음 뜯어보는 사람한테 태엽부터 분해하라고 하는 것 같은 느낌이었다.그런데 돌아보면 functions.php를 맨 처음 알려주는 글들이 좀 무책임하다는 생각도 든다. 진입장벽이 낮은 방법이 분명히 존재하는데, 왜 가장 위험한 방법을 먼저 알려주는 걸까. 워드프레스 안에는 코드의 깊은 곳까지 들어가지 않아도 원하는 결과를 낼 수 있는 방법이 생각보다 많이 준비되어 있다. 내가 실제로 써본 방법들을 현실적인 순서로 정리했다.추가 CSS 입력창, 제일 먼저 써.. 2026. 5. 3. 구글 서치콘솔 인증, 자물쇠에 열쇠를 꽂는 일 - 인증 코드 삽입하는 방법 5가지 구글 서치콘솔을 처음 연동하려고 시도했을 때 생각보다 오래 걸렸다. HTML 메타 태그를 붙여넣으라고 하는데 어디에 붙여야 하는지 정확히 몰랐고, 붙이고 나서 인증 버튼을 눌렀더니 "확인할 수 없습니다"가 떴다. 마치 자물쇠에 열쇠를 꽂았는데 돌아가질 않는 느낌이었다. 원인은 두 가지였다. 위치가 잘못됐거나, 스킨이 렌더링하면서 태그를 변형시키거나.솔직히 처음엔 이게 왜 이렇게 복잡한지 이해가 안 됐다. 코드 한 줄 붙이는 작업인데 왜 삽질이 생기나 싶었다. 그런데 직접 겪고 나서 보니 이게 단순히 코드의 문제가 아니라 내 블로그가 구글에 "나 여기 있어요"라고 처음 손을 내미는 행위라는 게 느껴졌다. 위치와 형식이 정확해야만 그 손이 잡힌다. 그리고 그 정확함이 어디서 오는지 알려주는 자료가 생각보다 .. 2026. 5. 2. 카카오·네이버·X 공유 버튼을 직접 만들면서 배운 것 - 배경, SDK 분석, 실전 적용 버튼 하나 없어서 지인이 URL을 손으로 복사해 카카오톡에 붙여넣었다는 얘기를 전해 들었다. 그 순간 마찰이라는 게 눈에 보이는 것이 아니라 행동으로 드러난다는 걸 실감했다. 공유하고 싶었는데 버튼이 없어서 그 의지가 행동으로 연결되지 못한 것이다. 나는 이게 내 문제라는 생각이 들었다. 독자의 의지가 있었는데 내가 길을 막은 셈이었으니까.플러그인을 먼저 찾아봤다. 설치는 간단했지만 블로그 디자인과 이질감이 생겼고, Lighthouse 성능 점수가 적용 전보다 눈에 띄게 떨어졌다. 외부 플러그인은 대부분 자체 JavaScript 번들을 포함하는데, 이 번들이 페이지 초기 렌더링을 지연시키는 렌더 블로킹 현상을 일으킨다. 렌더 블로킹이란 브라우저가 HTML을 파싱하다가 외부 스크립트를 만나면 해당 스크립트.. 2026. 5. 1. 이전 1 ··· 9 10 11 12 13 14 15 ··· 20 다음
