티스토리 블로그 확장프로그램 StoryHelper 개발 회고

스토리헬퍼 메인 이미지

이 프로그램은 원래 내가 쓰려고 만든 프로그램이었다. 다 만들고 나니 배포도 해보고 싶은 욕심이 생겨 5달러를 내고 웹스토에도 배포했다.

생각했던 것보다 많은 사람이 쓰게 되어 놀랐고, 최근에 신규 기능을 업데이트하고나서 기록으로 남겨두고 싶어 글을 작성하게 되었다.

주요 기능은 티스토리 블로그를 작성하면서 자동화하고 싶었던 기능들이 주를 이룬다.

SEO 검색엔진 최적화

티스토리 블로그를 떠나 다른 웹페이지에서 SEO(검색엔진 최적화)는 매우 중요하다. 최적화가 잘 된 글이 검색엔진에게 좋은 점수를 받고, 검색 상위 노출이 되는 구조이기 때문이다.

그렇기에 블로그를 쓰는 사람들에게 SEO는 중요하다. SEO를 위해서는 크게 2가지로 나눌 수 있다.

개발적인 부분의 의미는 코딩과 관련이 있다. 예를 들어 글에 대한 메타데이터가 있을 수 있다. 이 메타데이터는 티스토리나 벨로그에서는 글 작성자가 커스텀할 수 없는 부분이다. 물론 자동으로 해주기 때문에 글 작성자는 크게 신경쓰지 않아도 되는 부분이 된다.

내 확장프로그램은 이 비개발적인 부분의 최적화를 도와주는 프로그램이다.

비 개발적이라는 것은 구조화된 글과 대체 텍스트 작성 등이 있다. 두 요소 모두 글 작성자가 임의로 작성할 수 있다는 점이 차이점이라고 생각한다.

기능은 크게 5가지가 있다. 이미지 크기 전체 조절, alt 태그 전체 작성, 글자 수 카운터, 자주 쓰는 기능 단축키 추가, SEO 검증 기능이 있다.

기능 소개

첫 번째로는 모든 이미지 크기 조절이다. 왜 필요한지 의문이 들 수 있는데 이 기능을 만든 이유는 티스토리의 이미지 사이즈 조절 방식이다.

티스토리에서는 이미지를 업로드하면 original-width, original-height가 속성으로 들어간다. 하지만 실제 렌더링되는 것을 결정하는 width와 height 속성은 누락되어있다.

렌더링되면 auto 속성이 자동으로 들어가기 때문에 로딩 전에는 빈공간을 차지하다가 이미지 로딩이 끝나면 크기가 늘어나는 방식이다.

이 방식은 CLS 수치를 크게 낮출 수 있기 때문에 이 기능을 만들었다.

이것도 SEO 측면에서 대체 텍스트인 alt 속성이 없으면 안되기 때문에 만든 기능이다. 모든 이미지에 alt 태그를 일괄적으로 작성할 수 있다.

자주 쓰는 기능들을 단축키화 하는 기능이다. 예를 들어서 에디터 전환, 자주쓰는 서식, 이전 글 링크, 이미지 첨부, 글 발행 등 단축키로 할 수 있는 범위를 늘려주는 기능이고, 사실상 핵심이다.

이 기능이 좋은 점은 단축키를 커스텀 할 수 있도록 만든 점이다.

이 기능은 위에서 소개한 이미지 고정크기, 이미지 대체텍스트, 제목1 여부 등의 SEO를 지키기 위한 조건들이 잘 작성되어있는지 검사하는 기능이다.

티스토리 에디터의 구조를 파악해야 했던 시간이 있었다. 티스토리는 내부에 있는 에디터가 iframe으로 구현되어있다. document안에 document가 있는 구조라는 것을 개발하면서 알게 되었다.

그리고 최적화 도구 2개를 추가하는 과정에서도 기존 UI와 비슷한 경험을 유지하기 위해 같은 classname을 사용한다거나, 바로 옆에 dom 메서드로 추가할 필요가 있었다.

우수 확장프로그램 뱃지를 받았다! 이런게 있는 줄 몰랐는데 구글 크롬의 개발 정책을 준수했나보다.

우수 확장프로그램 설명

토이 프로젝트격이지만 실제로 사용하기 위한 프로그램을 개발했다는 점에서 재미있고 뜻 깊은 경험을 했다고 생각한다.

처음 만들고 6개월 동안은 30명 아래의 사용자만 있었는데 점점 늘어나더니 이제는 100명이 넘게 쓴다는게 너무 신기하다.