변환기 개발기 - 스마트에디터 HTML은 왜 그렇게 생겼나

상세페이지 HTML 변환기를 만들려면 먼저 변환 대상인 스마트에디터 HTML의 구조를 이해해야 했습니다. 뜯어보니 나름의 논리가 있었고, 그 논리를 알고 나서야 안전한 변환 규칙을 세울 수 있었습니다.

블록 편집기의 흔적, se-component

네이버 스마트에디터로 만든 상세페이지의 소스를 열어보면 se-main-container라는 컨테이너 아래에 se-component라는 블록이 줄지어 있습니다. 문단은 se-text, 이미지는 se-image, 나란히 배치한 이미지 묶음은 se-imageStrip, 인용문은 se-quotation처럼 블록마다 종류를 나타내는 클래스가 붙습니다.

이 구조는 편집기 입장에서는 합리적입니다. 사용자가 블록을 드래그해서 순서를 바꾸고, 이미지 묶음의 배열을 바꾸고, 글자 크기를 버튼으로 조절하려면 각 블록을 프로그램이 식별할 수 있어야 하니까요. 문제는 이 클래스들이 네이버의 스타일시트가 있어야만 의미를 갖는다는 점입니다. HTML만 복사해서 다른 판매 채널에 붙여넣으면 스타일을 잃은 클래스만 남고, 레이아웃은 무너집니다.

변환 규칙을 세우는 기준

변환기의 핵심 규칙은 "편집기가 필요해서 붙인 것은 지우고, 내용을 표현하는 것은 남긴다"입니다. 구체적으로는 이렇게 정리했습니다.

• 문단(se-text)은 순수한 p 태그로 바꾸되, 글자색과 글자 크기처럼 내용의 일부인 스타일만 인라인으로 남깁니다.
• 이미지는 max-width와 width:100%를 지정해 어떤 화면 폭에서도 넘치지 않게 만듭니다.
• 이미지 묶음은 flex 한 줄 배치로 단순화하고, 두 장일 때의 폭은 사용자가 옵션으로 조절할 수 있게 했습니다.
• 동영상과 외부 임베드는 채널 대부분이 차단하므로 기본값으로 제거하되, 옵션으로 남길 수 있게 했습니다.

글자 크기는 재미있는 문제였습니다. 스마트에디터는 se-fs-fs15 같은 클래스로 크기를 표현하는데, 이 숫자를 그대로 픽셀로 옮기면 모바일에서 너무 작게 보입니다. 그래서 원본 크기별로 모바일에서 비슷한 인상을 주는 크기로 바꿔주는 대응표를 만들어 적용했습니다.

버리기로 한 것들

모든 것을 변환하려는 욕심은 초기에 버렸습니다. 표, 지도, 슬라이드, 맞춤 스크립트는 채널마다 지원 여부가 제각각이라 어설프게 변환하면 오히려 깨진 결과를 만듭니다. 이런 요소는 문단 수준으로 단순화되거나 제거될 수 있다고 가이드에 명시하는 쪽을 택했습니다. 도구가 못 하는 일을 숨기는 것보다 사용자가 미리 아는 것이 훨씬 낫다고 생각합니다.

다음 이야기

다음 개발기에서는 이 변환기를 서버 없이 브라우저 안에서만 동작하게 만든 이유와, 그 선택이 가져온 장단점을 다루겠습니다. 변환기의 실제 사용법이 궁금하다면 처음 사용하기 가이드부터 읽어보세요.