스마트에디터 HTML은 왜 이렇게 복잡할까? 변환기 개발기

변환기를 만들려면 먼저 상대를 알아야 했어요. 스마트에디터로 만든 상세페이지 소스를 처음 열어 봤을 때 솔직히 좀 당황했어요. 문장 하나 쓰는 데 상자가 대여섯 겹이라니요. 그런데 뜯어보니 나름의 이유가 있더라고요.

블록마다 이름표가 붙어 있어요

스마트에디터 상세페이지는 se-main-container라는 큰 상자 안에 se-component라는 블록이 줄줄이 들어 있는 구조예요. 그리고 블록마다 종류를 알려 주는 이름표가 붙어요. 문단은 se-text, 사진은 se-image, 여러 장을 나란히 놓은 사진은 se-imageStrip, 인용은 se-quotation 이런 식이에요.

편집기 입장에선 꼭 필요한 구조예요. 블록을 끌어서 순서를 바꾸고, 글자 크기를 버튼 하나로 바꾸려면 프로그램이 블록을 하나하나 알아봐야 하니까요.

문제는 이 이름표들이 네이버의 스타일 파일이 있어야만 의미가 있다는 거예요. HTML만 들고 다른 채널로 가면 이름표만 덩그러니 남고, 모양을 잡아 주던 스타일은 사라져요. 레이아웃이 무너지는 이유가 이거예요.

규칙은 하나: 편집기용은 지우고, 내용은 남기기

변환 규칙을 한 줄로 줄이면 이거예요. 편집기가 필요해서 붙인 건 지우고, 내용을 표현하는 건 남긴다.

• 문단은 평범한 p 태그로 바꾸고, 글자색이나 글자 크기처럼 내용에 속하는 스타일만 남겨요.
• 사진에는 max-width와 width:100%를 붙여서 어떤 화면에서도 넘치지 않게 해요.
• 나란히 놓인 사진은 한 줄로 단순하게 배치하고, 두 장일 때 폭은 옵션으로 조절할 수 있어요.
• 동영상과 외부 임베드는 기본으로 빼되, 필요하면 남길 수 있게 옵션을 뒀어요.

글자 크기가 은근히 골치였어요

만들면서 제일 재밌었던 건 글자 크기였어요. 스마트에디터는 se-fs-fs15 같은 이름표로 크기를 표시하는데, 이 숫자를 그대로 픽셀로 옮기면 휴대폰에서 너무 작아 보여요.

그래서 원래 크기마다 휴대폰에서 비슷한 느낌이 나는 크기를 짝지어 둔 대응표를 만들었어요. 15는 17로, 24는 28로 조금씩 키우는 식이에요.

욕심은 일찍 버렸어요

처음엔 모든 걸 다 변환하고 싶었어요. 그런데 표, 지도, 슬라이드, 직접 넣은 스크립트는 채널마다 허용하는 게 제각각이라, 어설프게 바꾸면 오히려 더 깨지더라고요.

그래서 이런 요소는 문단 정도로 단순해지거나 빠질 수 있다고 가이드에 솔직하게 적어 두는 쪽을 택했어요. 도구가 못 하는 걸 숨기는 것보다 미리 아는 게 훨씬 낫다고 생각해요.

이 변환기를 왜 서버 없이 브라우저 안에서만 돌아가게 만들었는지는 서버 없는 도구를 고집하는 이유에 이어서 적었어요. 바로 써 보고 싶다면 처음 사용하기 가이드부터 보시면 돼요.