블로그 글이 100개를 넘어가던 날, 엑셀 시트를 열었다가 조용히 닫았습니다. 셀마다 키워드를 손으로 옮겨 적던 방식이 더는 통하지 않는다는 걸 그날 실감했습니다. AI API로 키워드를 뽑고, CSS로 워드클라우드를 자동 생성하기까지 — 삽질도 꽤 많았지만, 지금은 매달 글이 올라올 때마다 클라우드가 혼자 갱신됩니다. 그 과정에서 배운 것들을 풀어봅니다.
키워드 추출과 레이아웃: AI와 d3-cloud가 해결한 것들
처음엔 TF-IDF 방식으로 키워드를 뽑으려 했습니다. TF-IDF란 특정 단어가 문서 안에서 얼마나 자주 나오는지(TF)와, 전체 문서 중 그 단어가 등장하는 문서 비율의 역수(IDF)를 곱해 단어의 상대적 중요도를 수치화하는 방법입니다. 이론적으로는 깔끔하지만, 한국어 블로그 글에 바로 적용하면 조사·어미가 섞여서 결과가 꽤 지저분하게 나옵니다.
그래서 KoNLPy를 함께 썼습니다. KoNLPy란 파이썬에서 한국어 형태소 분석을 처리하는 라이브러리로, 문장을 명사·동사·형용사 단위로 쪼개줍니다(출처: KoNLPy 공식 문서). 형태소 분석기를 거친 뒤 명사만 걸러내고 빈도를 집계하니 노이즈가 눈에 띄게 줄었습니다. 그래도 여기서 멈추지 않고, Claude API를 붙여서 각 글의 본문을 넘기면 핵심 키워드와 상대적 가중치를 JSON으로 돌려받는 스크립트를 따로 만들었습니다. AI가 맥락을 보고 판단하니까, 단순 빈도 집계로는 잡기 어려운 주제 키워드까지 올라오더군요.
문제는 그다음이었습니다. JSON 데이터를 받아서 워드클라우드를 그릴 때, 처음엔 순수 CSS와 랜덤 배치 로직만으로 구현하려 했습니다. font-size를 가중치에 비례해서 키우고, position: absolute로 좌표를 뿌리는 방식이었는데 — 글자들이 계속 겹쳤습니다. 두 시간쯤 씨름하다 결국 d3-cloud를 참고했습니다. d3-cloud란 Jason Davies가 만든 워드클라우드 레이아웃 알고리즘 라이브러리로, 단어마다 픽셀 단위 충돌을 감지해서 겹치지 않는 위치를 찾아주는 것이 핵심입니다(출처: d3-cloud GitHub). 충돌 회피 알고리즘 구조를 참고해 제 CSS 배치 로직에 비슷한 경계 검사를 추가했더니, 겹침 문제가 거의 사라졌습니다.
렌더링 방식을 고를 때는 wordcloud2.js도 검토했습니다. wordcloud2.js는 HTML5 캔버스를 기반으로 워드클라우드를 그리는 경량 라이브러리인데, 쉽게 말해 단어를 이미지처럼 캔버스에 픽셀로 찍어내는 방식입니다. 빠르고 결과물이 예쁘지만, 캔버스 출력은 DOM 요소가 아니라서 각 단어에 클릭 이벤트를 붙이기가 까다롭습니다. 저는 키워드를 클릭하면 관련 글로 필터링되는 기능이 필요했기 때문에, 결국 CSS Flexbox 기반으로 직접 구현하는 쪽을 택했습니다.
파이프라인 구성: 자동화까지의 단계
지금 운영 중인 구조를 간단히 정리하면 이렇습니다.
- 글 발행 시 본문 텍스트를 AI API로 전송 → 키워드 + 가중치 JSON 반환
- KoNLPy 형태소 분석 결과와 AI 추출 키워드를 병합해 최종 빈도 테이블 생성
- 가중치를 CSS font-size 변수(--weight)에 매핑, Flexbox로 태그 클라우드 렌더링
- 각 태그에 onclick 이벤트를 붙여 해당 키워드 관련 글 목록으로 필터링
- 사이드바에 삽입, 글 발행마다 자동 갱신
전체 흐름을 한 번 잡아두고 나니, 새 글이 올라올 때마다 제가 손댈 게 없어졌습니다. 이게 자동화의 진짜 값어치라고 생각합니다.
레이아웃과 접근성: 예쁜 게 전부가 아니었습니다
솔직히 이건 예상 밖이었습니다. 워드클라우드를 사이드바에 올린 뒤 방문자 행동 데이터를 보니, 클릭률이 생각보다 낮았습니다. 시각적으로는 분명히 눈길을 끄는데, 실제 클릭으로 이어지는 비율은 카테고리 메뉴보다도 낮더군요. 이유를 곱씹어 보니, 워드클라우드는 정보 밀도가 높은 반면 어떤 키워드가 왜 중요한지 맥락을 전달하지 못합니다. 방문자 입장에서는 "이 단어들이 뭔가 많이 나오는구나" 정도만 읽힐 뿐, 클릭할 이유를 느끼기 어렵습니다.
더 큰 문제는 AI가 뽑아준 가중치를 그대로 믿었을 때 생겼습니다. 제가 직접 결과물을 살펴보니, 실제 블로그 주제와는 거리가 있는 단어가 유독 크게 표시된 경우가 몇 번 있었습니다. AI가 텍스트 표면의 빈도에 과하게 반응한 것으로 보입니다. 그래서 지금은 자동 생성 후 제가 직접 한 번 검수해서 노이즈 키워드를 제거하는 단계를 끼워넣었습니다. 자동화라고 해서 사람 손을 완전히 빼는 건 아직 무리라는 결론입니다.
CSS Grid와 Flexbox를 활용한 반응형 레이아웃 설계도 예상보다 품이 많이 들었습니다. CSS Grid란 2차원 격자 구조로 요소를 배치하는 레이아웃 시스템이고(출처: MDN Web Docs - CSS Grid Layout), Flexbox는 1차원 방향으로 요소를 유연하게 정렬하는 방식입니다. 워드클라우드처럼 크기가 제각각인 요소들을 모바일에서도 자연스럽게 흘려보내려면, Flexbox의 flex-wrap 속성을 이용해 태그가 자동으로 줄을 바꾸도록 설정하는 게 핵심이었습니다.
접근성 문제도 빼놓을 수 없습니다. 스크린리더 사용자에게 워드클라우드는 그냥 단어들의 무의미한 나열로 읽힐 수 있습니다. 제가 직접 스크린리더로 테스트해봤을 때, aria-label을 달지 않은 상태에서는 "마케팅, 글쓰기, Python, 자동화..." 이런 식으로 툭툭 읽혀서 맥락이 전혀 전달되지 않았습니다. 지금은 워드클라우드 전체 컨테이너에 "블로그 주요 키워드 목록, 클릭 시 관련 글 보기"라는 aria-label을 붙이고, 각 태그 요소에도 "키워드명 관련 글 보기"를 role="link"와 함께 명시해두었습니다. 작은 설정이지만, UX를 해치지 않으려면 이 부분을 빠뜨리면 안 된다고 생각합니다.
자주 묻는 질문
Q. 워드클라우드 라이브러리 없이 CSS만으로 만들 수 있나요?
A. 가능은 하지만 단어 겹침 문제를 직접 해결해야 합니다. 저도 처음엔 순수 CSS와 랜덤 좌표 배치로 시도했다가 레이아웃이 계속 깨지는 걸 경험했습니다. d3-cloud의 충돌 회피 알고리즘 구조를 참고해 경계 검사 로직을 추가하면 라이브러리 없이도 안정적인 배치가 가능합니다. 다만 초기 구현 시간이 꽤 들기 때문에, 빠르게 결과물이 필요하다면 라이브러리 활용이 현실적입니다.
Q. AI API로 키워드 추출할 때 어떤 프롬프트를 써야 하나요?
A. 본문 텍스트를 넣고 "핵심 키워드 10개와 각 키워드의 상대적 중요도를 0~1 사이 소수로 JSON 형태로 반환해줘"처럼 출력 형식을 명시하는 게 핵심입니다. 형식을 지정하지 않으면 매번 결과 구조가 달라져서 파싱이 번거로워집니다. 반환된 가중치를 그대로 믿지 말고 실제 글 주제와 맞는지 한 번은 검수하는 과정을 꼭 거치세요.
Q. wordcloud2.js와 CSS 직접 구현 중 뭐가 더 나은가요?
A. 목적에 따라 다릅니다. 시각적 완성도만 따지면 wordcloud2.js가 빠르고 예쁩니다. 하지만 각 키워드에 클릭 이벤트를 붙이거나 필터링 기능을 연동하려면 DOM 요소로 만들어야 하므로 CSS 직접 구현 쪽이 유리합니다. 저는 클릭 필터링이 필수 요건이었기 때문에 Flexbox 기반 직접 구현을 선택했고, 지금도 그 선택이 맞았다고 생각합니다.
Q. 스크린리더 사용자를 위한 접근성 처리를 어떻게 해야 하나요?
A. 워드클라우드 컨테이너 전체에 aria-label로 "블로그 주요 키워드 목록" 같은 설명을 달고, 각 태그 요소에 role="link"와 함께 "키워드명 관련 글 보기"를 aria-label로 명시하는 것이 기본입니다. 설정 후 실제 스크린리더로 직접 테스트해보는 걸 권장합니다. 직접 해보면 어색하게 읽히는 부분이 예상보다 많이 나옵니다.
결론
워드클라우드 자동화는 분명히 편리합니다. 글이 쌓일수록 수동 관리가 불가능해지는 시점이 오는데, 그 전에 AI API + 형태소 분석기 + CSS 레이아웃을 연결하는 파이프라인을 한 번만 잡아두면 이후에는 거의 손이 가지 않습니다. 제가 직접 써봤을 때 가장 큰 수확은, 어떤 주제를 얼마나 자주 다루고 있는지를 시각적으로 한눈에 파악하게 됐다는 점이었습니다.
다만 워드클라우드를 블로그에 올리는 것이 목표라면, 시각적 완성도에만 집중하지 않기를 권합니다. AI가 뽑아준 키워드를 검수하고, aria-label로 접근성을 챙기고, 실제 클릭 데이터를 보면서 배치를 조정하는 과정이 함께 있어야 장식 이상의 기능을 합니다. 워드클라우드를 처음 만들어보려 한다면, 먼저 소규모 글 목록으로 파이프라인을 테스트하고, 결과가 마음에 들면 전체 글에 적용하는 순서로 진행해보세요.
참고: d3-cloud GitHub | wordcloud2.js GitHub | MDN Web Docs - CSS Grid Layout | KoNLPy 공식 문서