접근성5 워드클라우드 자동화 (키워드 추출, 레이아웃, 접근성) 블로그 글이 100개를 넘어가던 날, 엑셀 시트를 열었다가 조용히 닫았습니다. 셀마다 키워드를 손으로 옮겨 적던 방식이 더는 통하지 않는다는 걸 그날 실감했습니다. AI API로 키워드를 뽑고, CSS로 워드클라우드를 자동 생성하기까지 — 삽질도 꽤 많았지만, 지금은 매달 글이 올라올 때마다 클라우드가 혼자 갱신됩니다. 그 과정에서 배운 것들을 풀어봅니다.키워드 추출과 레이아웃: AI와 d3-cloud가 해결한 것들처음엔 TF-IDF 방식으로 키워드를 뽑으려 했습니다. TF-IDF란 특정 단어가 문서 안에서 얼마나 자주 나오는지(TF)와, 전체 문서 중 그 단어가 등장하는 문서 비율의 역수(IDF)를 곱해 단어의 상대적 중요도를 수치화하는 방법입니다. 이론적으로는 깔끔하지만, 한국어 블로그 글에 바로 적.. 2026. 7. 2. CSS 타임라인 (position 활용, 구조 설계, 접근성) 타임라인 UI를 만들 때 가장 어렵다고 생각하는 게 뭔지 물어보면, 대부분 "애니메이션"이나 "디자인"을 꼽습니다. 그런데 제가 직접 써봤는데, 진짜 발목을 잡는 건 따로 있었습니다. 수직선 하나 제대로 그리는 것, 그리고 그 선과 카드를 맞물리게 하는 position 속성의 이해였습니다. 블로그에 "개발자가 된 과정"을 연대기로 정리하면서 처음 타임라인을 도입했는데, 줄글로 쓸 때는 독자가 연도별 흐름을 거의 파악 못 한다는 걸 그때 처음 실감했습니다.수직선 하나에 이렇게 많은 게 걸려 있을 줄 몰랐습니다CSS 타임라인 구현에서 핵심이 되는 건 position 속성입니다. 여기서 position이란 HTML 요소가 문서 흐름 안에서 어디에 자리를 잡을지, 그리고 그 기준점을 무엇으로 삼을지를 제어하는 .. 2026. 7. 1. CSS Grid 비교표 (반응형, 접근성, 추천강조) 제품 리뷰 포스팅에 비교표를 처음 넣었을 때, HTML table 태그로 만들었다가 모바일에서 완전히 무너지는 걸 보고 멍했습니다. 열이 세 개를 넘자마자 가로 스크롤이 생겼고, 독자 대부분은 그냥 표를 무시하고 지나쳤습니다. 그때부터 CSS Grid 기반 비교표로 전환했는데, 생각보다 챙겨야 할 게 많았습니다. 반응형만 해결되면 끝인 줄 알았는데, 접근성과 SEO까지 얽혀 있었습니다.HTML table이 모바일에서 무너지는 이유일반적으로 표 형태의 데이터는 HTML table 태그로 만드는 게 정석이라고 알려져 있습니다. 저도 처음엔 그렇게 생각했습니다. 그런데 제가 직접 써봤는데, 열이 세 개를 넘어가는 순간 모바일 화면에서 테이블이 뷰포트(viewport) 바깥으로 밀려나기 시작했습니다. 뷰포트란 .. 2026. 6. 29. SVG 아이콘 최적화 (아이콘 폰트, AI 생성, 접근성) 아이콘 몇 개 넣겠다고 Font Awesome 전체를 불러온 적 있으신가요? 저도 한동안 그렇게 했습니다. 어느 날 PageSpeed Insights 점수를 보고서야 뭔가 잘못됐다는 걸 실감했고, 그때부터 아이콘 하나를 어떻게 쓰는지가 생각보다 중요한 문제라는 걸 알게 됐습니다. 아이콘 폰트에서 SVG로, 그리고 AI 생성까지 직접 겪으며 느낀 것들을 풀어봅니다.아이콘 폰트, 편하긴 한데 계속 마음에 걸렸습니다Font Awesome이나 Material Icons 같은 아이콘 폰트는 처음엔 정말 편했습니다. 클래스 하나만 붙이면 아이콘이 나오니까요. 그런데 쓰는 아이콘은 다섯 개인데 수백 KB짜리 폰트 파일 전체를 CDN에서 받아오는 구조가 계속 마음에 걸렸습니다.아이콘 폰트 방식의 핵심 문제는 렌더링 방.. 2026. 6. 17. CSS 눈 피로 줄이기 (색상 설정, 줄 길이, 다크모드) - 모니터도 안경도 아닌, 설정 색상 설정, 줄 길이, 다크모드. 직접 써보고 달라진 것들.한참 모니터를 들여다보다가 퇴근하면 눈이 뻑뻑하고 화면이 잔상처럼 남는 느낌, 한 번쯤 겪어봤을 겁니다. 저는 그게 당연한 줄 알았습니다. 컴퓨터를 많이 써서 그런 거라고. 그런데 어느 날 CSS를 조금 손봤더니 같은 시간을 봐도 눈이 덜 피로한 걸 느꼈습니다. 모니터가 바뀐 것도, 안경을 새로 맞춘 것도 아니었는데.그 뒤로 화면이 눈에 주는 피로감이 설정에 따라 달라진다는 걸 체감했습니다. 이 글은 제가 직접 써보고 "이건 확실히 다르다"고 느낀 CSS 설정 다섯 가지와, 그걸 다크모드까지 연결하는 방법을 정리한 기록입니다.배경색, 글자색, 줄 길이 — 숫자로 보는 색상 설정배경색을 순수 흰색 대신 아주 약간 따뜻한 색으로 바꾸는 것은 단순한 .. 2026. 4. 10. 이전 1 다음
