티스토리 에디터와 엔터키

티스토리의 에디터의 비주얼 모드에서는 리턴키(또는 엔터키)를 치면 개행 태그(<br />)가 삽입된다.
여기서 비주얼 모드는 HTML 체크박스를 선택하지 않았을 때의 입력 모드를 가리키는 말이다. 그런데 이 개행 태그라는 것이 브라우저 마다 다르게 작동하도록 자바스크립트가 짜여져 있다는 것을 오늘에야 처음으로 알게 되었다.

주로 사용하는 브라우저가 오페라 브라우저이다 보니 비주얼 모드에서 엔터키가 <P> 태그를 삽입하는 것으로 거동한다는 것을 알고 있었다. 그리고 이러한 동작은 Wordpress 기반의 블로그 툴에서는 당연한 거동이었기 때문에 티스토리에서도 유사한 거동을 하는 것으로 이해하고 있었다. 그런데 우연히 내글에 달린 댓글을 보니 파이어폭스와 크롬은 엔터키를 치면 단순히 개행 태그 <br />가 들어간다는 것을 알수 있었다.
참고: [과학기술 이야기] - 워드프레스 블로그에서 개행 br코드의 대책

이런 유형의 거동은 브라우저가 가진 기능이 아니다. <textarea>의 입력을 일일이 확인하여 개행 코드를 바꾸어 <br />로 바꾸거나 <P>로 바꾸는 일은 브라우저에서 돌아가는 스크립트의 일이다. 그래서 티스토리 에디터 화면에서 사용되는 자바스크립트를 살펴보니 ".../blog/script/powerEditor/js/editor.js"라는 스크립트에서 각종 브라우저(보통 agent 라고 한다)를 판별하는 처리가 있었는데 유독 오페라 브라우저에 대한 판단이 빠져 있었다. 그러니까 파이어폭스, 사파리, 크롬, IE 등은 판별하고 있지만 오페라는 처리 부분이 없다. 그리고 대충 개행 코드가 있으면 <P> 태그로 바꾸는 처리도 있었다.

결론적으로 보면 오페라는 IE와 유사한 거동을 할 것으로 보이는데 개행 코드(즉 CRLF 또는 LF)를 일부러 <P>로 변환하는 것이다. 이런 변환은 오피스 프로그램의 하나인 워드프로세서에서 흔히 경험하는 일중의 하나인데 글을 입력하다가 엔터를 치는 일은 줄을 바꾸는 것이라기 보다는 단락을 바꾸는 경우에 해당한다. 어차피 줄바꿈은 워드프로세서가 자동으로 해주기 때문에 굳이 줄바꿈을 하려고 엔터를 치는 일은 없다. 그럼에도 불구하고 엔터를 입력했다는 것이므로 단락이 바뀌는 것으로 처리하고 있는 것이다.

매킨토시를 사용하므로 윈도의 인터넷 탐색기(IE)까지 돌려 보면서 확인을 하지는 않겠지만, 티스토리의 에디터는 오페라 브라우저의 사용자에게는 고급 에디터에 가깝다고 보아도 좋겠다.

다만, 오페라 브라우저가 소수의 사용자층에서 사용하다 보니 오페라 브라우저가 이상하게 보이는 오해를 사기도 하는 것은 어쩔수가 없는 과정일지도 모른다.

관련글:
[과학기술 이야기] - 오페라 브라우저의 활용 팁(VIII) 마우스 오른클릭이 항상 풀려있다
[과학기술 이야기] - 오페라 브라우저의 활용 팁(I) 소스보기로 편집까지
[여러가지 이야기] - 내가 오페라(Opera) 인터넷 브라우저를 쓰는 이유