더 이상 글자수세기 사이트에 들락날락하며 일일이 복사/붙여넣기할 필요가 없습니다!
구글 애드센스 승인(일명 애드고시) 승인을 위해서는 최소 2000자 이상 글을 써야 한다는 이야기, 귀에 못이 박히도록 들어보셨을 겁니다. 애드고시를 이미 통과한 분들도 저품질 블로그로 낙인찍히지 않으려면 매번 일정 분량 이상의 양질의 포스팅을 올려야 한다는 사실을 잘 알고 계실 겁니다.
그런데 막상 에디터에 글을 쓰다 보면 내가 지금 몇 글자나 썼는지 감이 안 잡힙니다. 그럴 때마다 열심히 쓴 글을 전체 드래그해서 복사하고 새 탭을 열어서 외부 글자수세기 사이트에 붙여넣기 하느라 진이 빠져보신 경험, 다들 한 번씩 해보셨을 겁니다. 열심히 포스팅을 작성하고 있는데 창을 왔다갔다하느라 정신이 없고 흐름이 뚝 끊겨버려서 짜증이 나지 않으셨나요?
그래서! 이 답답함을 해소하기 위해 제가 직접 만들었습니다.
티스토리 에디터 화면에 둥둥 떠서, 내가 타자를 칠 때마다 실시간으로 글자 수를 세어주는 글자수세기 위젯입니다.
저 혼자 쓰기에는 조금 아까워서, 저처럼 글자 수 압박에 시달리는 블로거분들의 시간을 아껴드리고자 무료로 배포합니다.
1. 티스토리 글자수세기의 핵심 기능 & 사용 방법
1-1. 실시간 글자 수 카운팅 & 프로그레스 바
가장 핵심적인 기능입니다. 키보드를 칠 때마다 '공백 포함'과 '공백 제외' 글자 수가 실시간으로 측정됩니다. 애니메이션이 적용되어 있어서 대량의 텍스트를 붙여넣기하면 숫자가 자동차 계기판처럼 부드럽게 올라갑니다.
또한, 여러분이 원하는 목표 글자 수를 자유롭게 설정할 수 있습니다. 위젯 하단에 있는 `목표` 옆의 입력 칸에 여러분이 목표로 하는 분량을 입력하고 글을 쓰기 시작하면 하단의 진행률 바(Progress Bar)가 차오르기 시작하는 것을 볼 수 있으실 겁니다.
- 50% 미만: 빨간색 진행률 바
- 50% 이상 - 100% 미만: 노란색 진행률 바
- 100% 이상: 초록색 진행률 바
글자 수가 늘어날 때마다 진행률 바가 차오르면서 색상이 변하는 것을 보면, 내가 얼마나 썼는지 한눈에 알기도 쉽고 지루했던 글쓰기가 조금이나마 재밌어집니다.
1-2. 드래그 앤 드롭으로 자유롭게 위치 이동
드래그 앤 드롭을 통해 글자수세기 위젯을 원하는 위치로 자유롭게 옮길 수 있습니다.
사람마다 에디터에서 편하게 느끼는 시선 위치가 다릅니다. 사용 중인 화면 비율도 다를 수 있고요. 글자수세기 위젯이 글을 가려버리면 곤란하겠죠.
제가 써본 다른 확장 프로그램들은 글자수세기 위젯의 위치를 마음대로 옮길 수 없어서 불편했습니다. 그래서 제가 만든 글자수세기 위젯은 사용자가 임의로 위치를 옮길 수 있도록 만들었습니다.
오버레이 기술을 적용해서 드래그 시 마우스를 빠르게 움직여도 마우스 포인터가 위젯을 놓치지 않게끔 했습니다. 그리고 위젯이 화면 밖으로 빠져나가지 않도록 설정해서 위젯이 영영 돌아오지 못하게 되는 상황도 막았습니다. 이제 위젯을 원하는 곳으로 마음껏 움직여보세요.
1-3. 위치와 목표를 기억하는 스마트 메모리
오늘 쓸 글을 다 쓰고 내일 새 글을 쓰러 에디터에 들어왔을 때, 위젯 위치나 목표 글자 수가 초기화되어 있으면 다시 설정하기 은근히 귀찮습니다.
그래서 이 위젯은 여러분의 브라우저에 마지막 위치와 목표 글자 수를 자동으로 기억하도록 제작했습니다. 껐다 켜도, 내일 다시 접속해도, 에디터 화면을 켜기만 하면 내가 세팅해 둔 그대로 여러분을 반겨줄 겁니다.
1-4. 글래스모피즘 디자인
요즘 IT/디자인 업계의 트렌드인 글래스모피즘(Glassmorphism)을 나름(?) 적용해보려고 노력했습니다.
글래스모피즘을 간단히 설명하자면, 반투명한 유리 질감, 배경 블러 효과, 얇은 테두리를 활용해서 유리처럼 연출하는 UI 디자인 스타일입니다. 아마 아이폰을 사용하시는 분들은 들어보셨을 수도 있는 단어입니다.
위젯의 배경을 은은한 반투명으로 처리하고, 위젯 뒤에 있는 텍스트를 약간 블러 처리해서 위젯 뒤의 텍스트가 부드럽게 비치도록 만들었습니다. 위젯을 화면 어디에 두어도 여러분의 에디터 및 여러분이 작성한 텍스트와 아주 자연스럽게 어우러질 것입니다.
2. 확장 프로그램 다운로드 및 설치 가이드
코딩이나 크롬 확장 프로그램에 대해 전혀 몰라도 괜찮습니다. 아래 순서대로 차근차근 따라하시면 금방 설치가 끝납니다. 그럼 천천히 따라와주세요.
2-1. 파일 다운로드 및 압축 풀기
먼저 아래에 첨부되어 있는 `.zip`파일을 다운로드해 주세요.
이 `.zip`파일을 다운로드 폴더나 바탕화면 같은 여러분이 찾기 쉬운 아무 장소에다가 반드시 압축 풀기를 해 주세요.
압축을 푼 폴더 전체가 필요합니다. 반드시 압축을 풀어주셔야 크롬에서 인식합니다!
2-2. 크롬 확장 프로그램 관리 창 열기
이제 이 위젯을 크롬 브라우저에 등록해줍시다.
- 크롬 브라우저 오른쪽 위를 보시면, 주소창 옆에 퍼즐 모양 아이콘(🧩)이 있습니다. 이것을 클릭해주세요.
- 맨 아래에 있는 [⚙️ 확장 프로그램 관리] 를 클릭합니다. (혹은 주소창에 `chrome://extensions/`를 직접 입력하셔도 됩니다.)
- 확장 프로그램 창에 들어오셨으면, 오른쪽 위의 개발자 모드 스위치를 클릭해서 켜줍시다.
- 그러면 화면 왼쪽 위에 새로운 버튼 3개가 나타납니다.
- 그 중 가장 첫 번째에 있는 [압축해제된 확장 프로그램 로드]를 클릭합니다.
여기까지 잘 따라하셨으면 파일 탐색기 창이 열려있을 것입니다. 여기서 2-1에서 압축을 푼 폴더를 클릭하고, 우측 하단의 [폴더 선택]을 눌러주세요.
※ (주의) 폴더 안으로 들어가서 내용물(파일)을 선택하는 게 아닙니다! 폴더 자체를 클릭하고 선택하셔야 합니다. ※
2-3. 티스토리 에디터에서 확인하기
수고하셨습니다. 이제 크롬 확장 프로그램 목록에 '티스토리 글자 수 세기' 위젯이 등록된 것을 보실 수 있을 겁니다.
이제 티스토리를 켜고 에디터 화면으로 들어가보세요. 그리고 `F5` 버튼을 한 번 눌러주시면 글자수 위젯이 나타납니다. 글을 작성하면서 글자수가 올라가고 진행률 바가 차는 것을 직접 눈으로 확인해보세요.
3. 글을 마무리하며
여러분은 더 이상 네이버 같은 외부 글자수세기 창을 띄워두고 불편하게 왔다갔다 하며 복사/붙여넣기할 필요가 없게 되었습니다. 이제 편리하게 에디터 화면에서 실시간으로 글자수를 확인하고, 목표 설정도 할 수 있으실 겁니다. 제가 만든 프로그램이 여러분의 블로그 운영에 많은 도움이 되었으면 좋겠습니다.
설치 과정에서 문제가 발생하거나, 사용 중에 오류가 있으면 편하게 댓글로 남겨주세요.
혹시 크롬 확장 프로그램 개발에 관심이 있으신가요? 이 프로그램의 전체 소스 코드 및 코드 해설이 궁금하시다면, 아래 링크를 클릭해보세요.
[자바스크립트] 티스토리 글자수 세기 확장 프로그램 - 전체 코드 리뷰 (iframe, requestAnimationFrame, Ov
티스토리 에디터에서 실시간으로 글자수를 카운팅해주는 크롬 확장 프로그램을 제작했습니다. 이번 포스팅은 이 글자수세기 크롬 확장 프로그램에 대한 테크 리뷰입니다. 제가 직접 개발하면
swan-lake.tistory.com
'IT & 프로그래밍' 카테고리의 다른 글
| [인공지능 선형대수] 벡터 정사영(Vector Projection) - 개념, 공식 유도 과정, NumPy 구현 (0) | 2026.04.01 |
|---|---|
| [자바스크립트] 티스토리 글자수 세기 확장 프로그램 - 전체 코드 리뷰 (iframe, requestAnimationFrame, Overlay, LocalStorage) (1) | 2026.03.31 |
| [인공지능 선형대수] 코사인 유사도(Cosine Similarity): 추천 시스템의 비밀 (1) | 2026.03.27 |
| [인공지능 선형대수] 벡터의 연산 (덧셈, 뺄셈, 상수배, 아다마르 곱, 내적, 외적) (1) | 2026.03.26 |
| [인공지능 선형대수] 벡터의 정의와 벡터의 크기 (맨해튼 거리, 유클리드 거리) (0) | 2026.03.25 |