brunch

You can make anything
by writing

C.S.Lewis

by 마크 Aug 15. 2022

(판매) 글자수 세기 프로그램 만들기

나만의 글자수 세기 프로그램 만들면서 공부하기

예전에 티스토리 블로그 운영자들을 위해 글자수 세기 프로그램인 TISTORY TEXT COUNTER를 만들었다. 이전에는 내가 쓴 블로그 포스팅의 글자수를 체크하려면 쓰는 도중 글을 복사해서 네이버 글자수 세기 또는 인크루트 글자수 세기 사이트 등에 방문해서 붙여 넣기 해서 확인하는 식이었다. 이 얼마나 불편한가.


자바스크립트를 공부하면서 크롬 확장 플로 만들면 블로그 포스팅을 하는 도중 클릭 한 번에 내가 쓰고 있는 글의 글자수를 바로 확인할 수 있겠다는 생각이 들어서 만들어 보았다.


티스토리 텍스트 카운터 크롬 확장 플

▶ Tistory Text Counter 크롬 확장플 링크 : https://chrome.google.com/webstore/detail/tistory-text-counter/ngifhofemdmpebnnffnljccfdaiaoppd?hl=ko&authuser=0


다른 플랫폼에서는 쓸 수 없을까?

나 또한 이 확장플을 잘 쓰고 있는데 어느 날 문득 네이버 블로그나 워드프레스에서도 이런 식으로 쉽게 글자수를 체크하게 만들고 싶었다. 만드는 건 어렵지 않다. 그런데 이미 만든 확장플 이름이 '티스토리 텍스트 카운터'라 여기에 네이버 블로그, 워드프레스 블로그 용도를 끼워넣기가 옹색했다.


그렇게 한동안 손을 안 대고 있다가 그냥 웹으로 글자수 세기 프로그램을 만드는 건 어떻까 하는 생각이 들었다. 웹으로 만드는 것은 크롬 확장 프로그램으로 만드는 것보다 훨씬 수월하다.


타이핑을 치면서 글자수를 체크해주는 프로그램은 자바스크립트로 만든다. 이 기능을 구현하면서 HTML, CSS로 웹을 만들었다. 그리고 사람들은 나처럼 자신만의 웹프로그램을 갖고 싶지 않을까? 하는 생각이 들었다.


그래서 티스토리 외 네이버 블로그, 워드프레스, 기타 다른 CMS(Contents Management System)을 사용하는 사람들은 굳이 네이버 글자수 세기까지 들어가서 글자수 체크하지 않고 바탕화면에 웹프로그램 하나 깔아 두고 바로바로 쓰게 하면 어떻까 싶었다.


커스텀(Custom)이 가능하려면 직접 코드를 수정해야 하는데 그러면 다루기 쉬워야 한다. 코딩을 할 줄 모르는 사람도 간단한 설명만 듣고 쉽게 커스텀을 할 줄 알아야 한다는 것을 우선적으로 생각해서 코드를 짰다.


HTML 문서 안에는 CSS, JAVASCRIPT 코드를 함께 쓸 수 있다는 점을 이용했다.


나만의 글자수 세기 프로그램 만들기

이 코드를 저렴한 가격에 판매하기로 했다. 코드를 제공하고 코드를 이용해 웹문서를 만들고 자신만의 색깔로 커스텀할 수 있도록 도움을 주는 전자문서를 하나 만들어서 크몽에 상품으로 올렸다.


HTML, CSS, JAVASCRIPT를 공부하는 사람들에게는 내 코드가 공부하는데 도움이 될 수도 있을 것이다. 남들이 짠 코드를 보고 분석하는 것은 꽤나 도움이 된다. 나 또한 코딩 공부할 때 다른 사람들이 만든 코드를 그냥 복붙 해서 쓰기보다 왜 이렇게 코드를 짰는지 살펴보곤 했다.


최종적으로 아래와 같은 이미지의 웹문서를 만드는 것을 목적으로 하는 코드를 제공한다.


누군가는 이 코드를 이용해 더 멋지고 훌륭한 것들을 만들어낼 수 있으리라 믿어 의심치 않는다.


더 자세한 정보는 크몽 상세 페이지에서 확인해보길 바란다.

https://kmong.com/gig/402139



브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari