안녕하세요!

저번 [15번째 프로젝트: 객체 매핑으로 설계한 자바스크립트 단위 변환기 (Unit Converter)] 글에 이어서 오늘은 자바스크립트 텍스트 분석기를 제작하여 블로그를 작성해보려고 합니다. 우리는 일상 속에서 수많은 텍스트를 마주합니다. 블로그 포스팅을 작성할 때, 자기소개서를 준비할 때, 혹은 중요한 리포트를 제출할 때 우리는 항상 ‘글자 수’라는 물리적인 제약과 ‘단어 선택’이라는 질적인 고민을 동시에 하게 됩니다. 단순히 글자 수를 세어주는 도구는 시중에 널려 있지만, 내가 쓴 글에서 특정 키워드가 얼마나 반복되는지, 문맥상 핵심 단어가 적절한 비중을 차지하고 있는지 한눈에 보여주는 도구는 의외로 찾기 어렵습니다.

특히 한국어는 조사와 어미가 발달해 있어 단어를 추출하는 방식이 영어와는 사뭇 다릅니다. 시중의 해외 도구들은 한글 분석에 취약한 경우가 많죠. 그래서 이번 프로젝트는 외부 API에 의존하지 않고 브라우저 자체의 자바스크립트 엔진만을 활용해, 보안 걱정 없이 내 소중한 글을 즉석에서 분석해 주는 ‘순수 자바스크립트 텍스트 분석기’를 기획하게 되었습니다.

1. 프로젝트 핵심 설계와 중요 로직

이번 프로젝트에서 가장 공을 들인 부분은 텍스트 정제(Cleaning) 과정입니다. 사용자가 입력한 텍스트에는 줄바꿈, 탭, 각종 문장 부호들이 뒤섞여 있습니다. 이를 단순히 공백 단위로 쪼개면 “자바스크립트는”, “자바스크립트가”를 서로 다른 단어로 인식하거나, 마침표가 붙은 단어를 오인식하는 오류가 발생합니다. 이를 해결하기 위해 정규표현식(Regular Expression)을 적극적으로 활용했습니다.

[중요 코드: 텍스트 정제 및 빈도 계산]

가장 핵심이 되는 문자열 처리 로직입니다. 정규표현식을 통해 원하는 데이터만 골라내고 객체에 담는 과정입니다.

// 1. 공백 제외 순수 글자 수 계산
// \s는 모든 공백(스페이스, 탭, 엔터)을 의미하며, 이를 제거한 길이를 구합니다.
const charCountWithoutSpace = text.replace(/\s/g, "").length;

// 2. 단어 정밀 추출 (정규표현식 패턴 활용)
// 영문(a-z), 숫자(0-9), 그리고 한글(가-힣)을 제외한 모든 문자를 걸러냅니다.
// 이렇게 하면 '사과!', '포도?'에서 순수하게 '사과', '포도'만 추출됩니다.
const words = text.toLowerCase().match(/[a-z0-9가-힣]+/g) || [];

// 3. 단어 빈도 분석 로직
const wordFreq = {};
words.forEach(word => {
    // 이미 등록된 단어라면 횟수를 추가하고, 처음이라면 1로 시작합니다.
    wordFreq[word] = (wordFreq[word] || 0) + 1;
});

위 코드에서 사용된 match() 함수와 정규표현식은 자바스크립트의 꽃이라고 할 수 있습니다. /[a-z0-9가-힣]+/g라는 기호가 복잡해 보일 수 있지만, 그 의미를 뜯어보면 매우 명확합니다.

a-z: 모든 영문 소문자
0-9: 모든 숫자
가-힣: 모든 한글 음절
+: 한 글자 이상 연속된 경우를 하나의 덩어리로 인식
g: 텍스트 전체에서 해당 패턴을 모두 찾음 (Global)

이러한 정규표현식의 원리를 이해하면, 향후 이메일 주소 유효성 검사나 전화번호 필터링 시스템을 만들 때도 매우 유용하게 응용할 수 있습니다. 텍스트 분석기는 단순한 도구를 넘어 자바스크립트의 문자열 제어 능력을 극대화하는 훌륭한 교본이 됩니다.

2. 자바스크립트 텍스트 분석기

📝 텍스트 분석기

공백 포함 0

공백 제외 0

단어 빈도 분석 결과가 여기에 표시됩니다.

3. 문제와 해결 과정

가장 큰 고민은 ‘실시간성’과 ‘성능’ 사이의 균형이었습니다. 사용자가 글을 한 글자씩 칠 때마다 전체 텍스트를 다시 쪼개고 분석하는 작업은 텍스트가 방대해질수록 브라우저에 부담을 줄 수 있습니다. 하지만 현대 브라우저의 자바스크립트 엔진(V8 등)은 매우 강력하기 때문에 수천 자 정도의 데이터는 즉각 처리가 가능했습니다.

두 번째 난관은 대소문자 구분 문제였습니다. 영문 분석 시 ‘JavaScript’와 ‘javascript’가 별개로 집계되는 것은 통계로서 의미가 없었습니다. 이를 위해 toLowerCase() 메서드를 전처리 과정에 삽입하여 데이터의 일관성을 확보했습니다. 한글의 경우 조사를 완벽히 분리하는 것은 형태소 분석 엔진이 필요하지만, 이번에는 정규표현식만으로도 훌륭한 ‘단어 덩어리’ 분석이 가능하다는 것을 확인했습니다.

4. 활용 방안

자기소개서 작성 시: 정해진 글자 수를 넘지 않으면서도 ‘열정’, ‘성실’과 같은 핵심 키워드가 충분히 강조되었는지 빈도 분석을 통해 확인할 수 있습니다.
SEO 최적화 포스팅: 구글 검색 엔진이 좋아하는 키워드 밀도를 체크할 수 있습니다. 특정 단어가 너무 과하게 반복(Keyword Stuffing)되지 않도록 조절하여 스팸으로 분류되는 것을 방지합니다.
학습용 텍스트 요약: 긴 영문 기사나 논문을 붙여넣어 가장 많이 등장하는 단어를 확인하면, 해당 글의 핵심 주제가 무엇인지 읽기 전에 미리 파악할 수 있는 일종의 ‘키워드 미리보기’ 기능을 수행합니다.

5. 앞으로의 발전 방향

현재의 자바스크립트 텍스트 분석기는 텍스트 입력창에 직접 타이핑하거나 붙여넣는 방식입니다. 여기서 한 단계 더 발전시킨다면 다음과 같은 기능을 추가할 수 있습니다.

워드 클라우드 시각화: 빈도수가 높은 단어를 더 크게 보여주는 시각적 효과를 추가해 한눈에 글의 주제를 파악하게 할 수 있습니다.
금지어 설정 기능: 사전에 등록한 금지어가 포함될 경우 빨간색으로 하이라이트 해주는 기능을 넣어 커뮤니티 관리 도구로 활용할 수 있습니다.
파일 업로드 지원: .txt 파일이나 .md 파일을 직접 읽어 들여 분석하는 기능을 추가해 편의성을 개선할 계획입니다.

이번에 만들어 본 자바스크립트 텍스트 분석기는 화려한 UI보다는 ‘기능의 본질’에 집중했습니다. 1번부터 16번까지의 프로젝트를 진행하며 시각적인 요소(아날로그 시계, 그림판 등)를 많이 다뤘다면, 이번에는 자바스크립트의 가장 강력한 무기인 문자열 처리와 데이터 구조를 깊이 있게 다뤄본 뜻깊은 시간이었습니다. 정규표현식이라는 암호 같은 언어가 실제 서비스에서 얼마나 유용하게 쓰이는지 체감할 수 있었습니다.

단순한 글자 수 세기를 넘어, 공백을 제외한 글자 수와 가장 자주 등장하는 단어를 추출하는 기능을 추가했습니다. 이 과정에서 정규표현식을 활용해 불필요한 특수문자를 제거하는 로직을 짰는데, 데이터 정제(Data Cleaning)의 기초를 다질 수 있는 아주 유익한 경험이었습니다. 블로그 포스팅이나 보고서를 자주 쓰는 분들께 실제로 큰 도움이 될 만한 도구입니다.

문자열을 분석하고 처리하는 기술은 [자바스크립트 타이핑 측정기] 프로젝트에서 오타를 체크하는 로직으로도 활용되니 같이 학습해 보세요.

정규표현식 활용: 글자 수 세기 및 단어 빈도 자바스크립트 텍스트 분석기 제작 가이드