워드프레스에서 글을 쓰는 사람이라면 누구나 한 번쯤 겪어봤을 법한 불편함이 있다. 바로 맞춤법 검사다.
그런데 본문 내용을 복사해 외부 맞춤법 검사기 사이트에 붙여 넣고, 교정된 결과를 다시 워드프레스로 가져오는 과정에서 정성껏 입힌 서식들이 무너지는 현상이다. 글자 색상, 굵기, 하이퍼링크 등이 사라지거나 블록 구조가 꼬여버리는 문제는 글쓰기의 맥을 끊는 주범이었다.
개인적으로 (나도 완벽하지는 않지만) 맞춤법이 중요하다고 생각하고, 남이 틀리는 걸 보는 것도 잘 참지 못하는 편인데 이렇게 발행하는 걸 틀리는 건 더 두려운 중에,
이러한 단순하면서도 치명적인 불편함을 해결하고자, 구텐베르크 에디터 전용 맞춤법 교정 보조 도구인 ‘WP Korean Speller(Korean Speller)’를 개발하게 되었다.
1. 개발의 시작: “서식은 지키고, 오탈자만 바꿀 수는 없을까?”
기존의 방식대로 교정된 텍스트 전체를 에디터에 덮어씌우면 HTML 태그 정보가 유실되는 경우가 많았다. 이를 해결하기 위해 단순한 텍스트 치환이 아닌, 워드프레스 공식 Block API를 활용하는 방식을 택했다.
워드프레스의 구텐베르크는 모든 콘텐츠를 블록(Block) 단위로 관리한다. 각 블록에는 고유한 속성(Attributes)이 있는데, 이 속성값 중에서 텍스트 데이터만 정밀하게 추출하여 교정된 내용으로 업데이트하고, 나머지 스타일 속성은 그대로 유지하는 로직을 설계했다. 이를 통해 updateBlockAttributes 함수를 기반으로 한 안전한 반영 시스템을 구축할 수 있었다.
2. 주요 기능과 설계 철학
플러그인을 기획하며 가장 중점을 둔 것은 ‘흐름을 방해하지 않는 간결함’이었다.
- 외부 검사기와의 유연한 연동: 직접적인 API 연동은 비용이나 서버 안정성 문제가 발생할 수 있다. 대신 네이버 검사기(단문용)와 바른한글 검사기(대용량용)를 선택하여 열 수 있도록 인터페이스를 구성했다.
- 원클릭 자동 복사: 검사기 버튼을 누르는 순간 현재 작성 중인 본문 전체가 클립보드에 복사된다. 사용자는 검사기 사이트에서 바로
Ctrl+V만 누르면 된다. - 복잡한 구조의 추적과 보존: 문단뿐만 아니라 중첩된 리스트나 제목 등 복잡하게 얽힌 블록 구조를 재귀적으로 탐색하여 교정 내용을 반영하도록 만들었다. 반영 후 발생할 수 있는 ‘블록 오류’를 최소화하는 데 심혈을 기울였다.
- 통합된 UI: 에디터 우측 상단에 ‘ABC 체크’ 아이콘을 배치하여, 워드프레스 기본 디자인과 이질감 없이 조화를 이루도록 했다.
3. 사용 방법
사용법은 매우 직관적이다.
- 글 편집 화면 우측 상단의 아이콘을 클릭해 사이드바를 연다.
- 글 길이에 맞춰 검사기를 선택한다. 이때 본문은 자동으로 복사된다.
- 열린 외부 사이트에서 교정을 진행하고 결과물을 복사한다.
- 사이드바 입력창에 결과물을 붙여넣고 [본문에 반영하기] 버튼을 누른다.
이 과정을 거치면 에디터 상의 오탈자만 쏙쏙 바뀌고, 링크나 서식은 그대로 보존되는 것을 확인할 수 있다.
4. 마치며
현재 이 플러그인은 워드프레스 공식 플러그인 디렉토리에 등록되기 위해 심사 과정을 거치고 있다. 정식 등록이 완료되면 https://wordpress.org/plugins/korean-speller 주소를 통해 누구나 무료로 설치하여 사용할 수 있을 예정이다. (현재 심사중)
개발 과정에서 겪은 수많은 시행착오가 누군가의 블로깅 시간을 단 5분이라도 단축해 줄 수 있다면, 개발자로서 그보다 더 큰 보람은 없을 것이다. 완벽한 글보다 ‘안전하게 고쳐진 글’이 주는 편안함을 더 많은 워드프레스 유저들이 경험하기를 기대한다.
처음 기획 단계에서의 목표는 꽤 야심 찼다. 사용자가 버튼 하나만 누르면, 백엔드에서 외부 서버의 검사 결과를 몰래 가져와 본문을 즉시 바꿔주는 ‘완전 자동화’를 꿈꿨다. 이를 위해 소위 ‘삽질’이라 불리는 API 탐색 여행을 시작했다.
- 네이버/다음 검사기 패킷 분석: 브라우저 개발자 도구의 네트워크 탭을 통해 특정 주소로 텍스트를 보내면 JSON으로 답을 준다는 사실을 알아냈을 땐 유레카를 외쳤다. 하지만 기쁨은 오래가지 않았다. 이 API들은 서비스 내부에서만 작동하도록 보안 키와 세션 토큰으로 단단히 무장하고 있었다.
- CORS라는 거대한 벽: 어떻게든 주소를 알아내 자바스크립트로 요청을 날려봤지만, 돌아오는 것은 빨간색 에러 메시지뿐이었다. 남의 집(네이버) 대문 앞에서 “택배 왔어요!”라고 외쳐봐야 문을 열어줄 리 없는 CORS(Cross-Origin Resource Sharing) 정책 때문이었다.
- 서버 사이드 프록시(Proxy) 시도: 직접 안 되면 내 서버를 거쳐 가자는 생각으로 PHP 우회로를 뚫어봤다. 잠시 작동하는 듯했으나 난관은 계속되었다. 외부 검사기의 응답 형식이 수시로 바뀌었고, 대량의 요청이 몰릴 경우 서버 IP가 차단될 위험이 컸다. 무엇보다 사용자의 소중한 글 데이터를 제3의 서버를 거쳐 보내는 것이 보안상 찜찜했다.
결국 며칠간의 사투 끝에 깨달았다. “가장 단순한 것이 가장 강력하다”는 것을 말이다. 억지로 API를 따와서 불안정한 자동화를 하느니, 차라리 검증된 공식 웹사이트를 활용하는 것이 낫다는 결론에 도달했다. 전략을 수정했다. “가져오는 과정은 공식 사이트의 힘을 빌리되, 가져온 결과를 내 글에 입히는 과정만큼은 그 누구보다 완벽하게 처리하자.” 이것이 현재 이 플러그인의 핵심 철학이 되었다.
기존 방식대로 교정된 텍스트 전체를 에디터에 덮어씌우면 HTML 태그 정보가 유실되는 경우가 많았다. 이를 해결하기 위해 단순한 텍스트 치환이 아닌, 워드프레스 공식 Block API를 활용하는 세 가지 핵심 기술을 적용했다.
- 재귀적 블록 처리 (Recursive Block Handling): 워드프레스 포스트는 단순 문단뿐만 아니라 리스트, 제목, 인용 블록 등이 복잡하게 중첩된 구조를 가진다. 이를 빠짐없이 처리하기 위해 모든 블록을 순회하며 텍스트 노드만을 찾아내는 재귀 알고리즘을 구현했다. 덕분에 어떠한 복잡한 구조에서도 오탈자만 정확히 찾아낼 수 있게 되었다.
- 인라인 스타일 보존 (Preserving Inline Styles): 글자 색상이나 볼드 처리는
<span>이나<strong>태그로 감싸져 있다. 맞춤법 교정 결과에서 이러한 태그들을 무시하고 순수 텍스트만 매칭하여 교체하는 로직을 설계했다. 이 과정을 통해updateBlockAttributes함수를 기반으로 디자인 유실 없는 안전한 반영 시스템을 구축했다. - 공식 저장소 가이드라인 준수: 워드프레스 공식 저장소 등록을 목표로 했기에 보안(Escaping), 국제화(I18n), 코딩 표준을 철저히 지켰다. 특히 플러그인 명칭 규정 등 까다로운 가이드라인을 준수하기 위해 수차례의 리팩토링 과정을 거치며 완성도를 높였다.
다음번엔 ssl 적용기를 적어보겠다.
답글 남기기