한컴오피스(한글), MS 워드에서 복사한 글이 블로그에 붙여넣기 잘 안되는 이유

.hwp .doc 문서에서 복사-붙여넣기 했는데 뭐가 잘 안 돼요…

주변 사람들, 클라이언트한테서 정말 많이 받는 질문입니다. 표를 복사-붙여넣기 했는데 표 모양이 이상하게 나온다든지, 중간에 문구가 끊겨서 저장이 되고 수정해도 적용이 안된다든지 하는 내용의 질문이요. 어떻게 보면 너무도 당연한 일인데 아래에서 설명할 위지윅(WYSISYG)만 익숙한 사람들에게는 참 미스터리한 일인가 봅니다.

위지윅(WYSIWYG)

위지윅은 What You See Is What You Get의 약자로 직역하면 "보이는 대로 얻는다"라는 뜻을 가지고 있습니다. 프로그램이나 브라우저에서 원하는 디자인의 문서를 만들어내려면 코드 형태의 문장으로 작성해야 합니다. 비전문가는 코드로 만들어진 문서의 내용을 읽고, 편집하는 것이 사실상 불가능하지요. 그래서 누구나 쉽게 문서를 작성할 수 있도록 GUI를 통해 편집하는 화면 그대로 출력물이 완성되는 위지윅이 개발되었습니다. 대표적인 위지윅에는 블로그에 글을 쓸 때 화면에서 볼 수 있는 에디터, MS 워드, 한컴오피스 등이 있습니다.

티스토리의 위지익 에디터

그 당시 위지윅이 얼마나 획기적인 기술이었는지 알려주는 광고 (출처: 위키백과)

모든 프로그램은 텍스트 기반으로 되어 있다

워드, 한글, 웹브라우저까지 모든 시스템은 텍스트 기반으로 이루어져 있습니다.
마우스 클릭을 통해 글자 크기를 크게 하고 볼드체를 처리할 수 있지만 실제로 웹사이트를 구동하게 하는 코드는 몇 줄의 코드인 것이지요.
아래의 예시입니다. 포스트의 제목을 표현하기 위해서는 아래와 같은 html 코드로 작성해야 합니다.

<h2 class=“title”>블로그의 제목입니다.</h2>

그리고 이 제목의 글꼴 크기나 두께를 원하는 대로 표현하려면 아래의 CSS 코드로 작성하게 됩니다.

.title { font-size:22px; font-weight:bold; }

브라우저에서 해석할 수 있는 코드는 위에 예시로 든 html, css 문법의 텍스트입니다. 그리고 설치형 한컴오피스나 MS오피스는 다른 문법의 텍스트로 이루어져 있습니다. 각기 다른 문법의 텍스트가 사용자의 화면에는 큰 글씨로 볼드체 처리되어 보일 뿐입니다. 서로 다른 코드로 이루어진 문서가 자동으로 100% 호환되기는 불가능한 일이겠죠. 지금의 문서편집도구는 PDF, Html 등 다양한 형태로 내보내기가 가능합니다. 그래서복사-붙여 넣기를 했을 때 어느 정도는 구현이 가능합니다.
하지만 자동으로 코드를 변환해 주는 데에는 한계가 있습니다. 누군가는 워드 문서를 작성할 때부터 “제목”으로 기능하는 버튼을 클릭해서 제목을 적지만, 누군가는 본문용으로 작성한 후 블록지정-글자 크기 키우기 기능을 사용합니다. 또 문장을 썼다 지웠다 하기도 하고 엔터를 눌렀다가 엔터를 두 번 눌러 두 줄을 띄웠다가 백스페이스로 줄을 지워버리기도 합니다. 줄 바꿈이 생기는 제목인지, 이미지 아래에 캡션이라 작게 쓴 것인지 심미적인 것을 위해 작게 쓴 것인지 프로그램에서는 알 턱이 없습니다.
그런 과정을 거쳐 불필요한 코드가 엄청나게 섞이게 됩니다. html 소스코드로 예를 들어보겠습니다.

코드를 직접 작성하는 경우 아래와 같이 심플하게 작성할 수 있습니다.
<h2>모든 프로그램은 텍스트 기반으로 되어 있다</h2>
<p>자동으로 코드를 변환해 주는 데에는 한계가 있습니다.</p>

하지만 워드에서 작성한 텍스트를 블로그에 붙여 넣을 때는 아래와 같이 불필요한 코드가 섞이게 됩니다.
<h2><p><span></span>모든 프로그램은 <span>텍스트 기반으로</span><strong></strong><span> 되어 있다</h2>
<span><br><span></span><p>자동으로 코드를 변환해 주는 데에는 <span>한계가 있습니다.</span></p></span>

html 문서가 어떤 형식인지 모르는 사람도 코드가 훨씬 많이 붙었다는 것을 알 수 있을 것입니다. 그래도 지금의 예시는 여는 태그와 닫는 태그가 세트로 잘 붙어있어서 화면상 이상해 보이지는 않을 것입니다. 하지만 이렇게 항상 운이 좋지 않습니다. 여는 태그는 있지만 닫는 태그의 위치가 잘못된 경우, 그 사이에 의도치 않은 코드가 섞이는 경우 제대로 표현이 되지 않겠지요.

개발사들의 숙명

위지윅은 비전문가들이 누구나 쉽게 문서를 생성할 수 있도록 도움을 주었습니다. 누구나 쉽게 문서를 만들 수 있게 되다 보니, 실제 구동방식은 전혀 다른 모습을 하고 있다는 것을 인지하기가 어렵습니다. ‘당연히 되어야 하는 것 아니야?’라고 생각하기 쉽습니다.
워드, 한글과 같은 문서편집 도구를 개발하는 개발사라면 되도록이면 정갈하게 코드가 만들어지도록, 위지윅 에디터를 개발하는 개발사라면 되도록 가져온 코드를 정제해서 붙여지도록 노력을 하고 있을 것입니다. 그리고 그 도구들을 사용하고 클라이언트와 직접 소통하는 저 같은 사람은 이와 같은 상황을 되도록 쉽게 설명하도록 노력하고 있습니다.

---

같은 원리로 온라인 MS 워드와 PC 설치형 워드도 100% 호환이 되지 않는다.

지금은 스마트폰과 태블릿 PC가 활성화되면서 온라인에서 사용이 가능한 문서도구까지 만들어졌습니다. 그렇게 설치형 MS워드, 한컴오피스, 온라인 MS워드, 온라인 한컴오피스, 블로그 글쓰기까지 모두 다른 코드를 갖게 되었습니다.

왜 태블릿에서 작성한 워드 문서가 컴퓨터에서 보면 정렬이 안 맞지? 왜 글꼴이 다 바뀌었지? 왜 자기네 프로그램끼리 호환이 안되는 거야!!!!!!!!!

하며 화가 나지만 원리를 생각해 보면 당연한 일입니다. 최적화를 아무리 시켜도 넘을 수 없는 한계가 존재하는 것이지요.

드림위버, 나모웹에디터가 더 이상 사용되지 않는 이유

제가 처음 html코드를 접할 때만 해도 나모웹에디터라는 것이 성행했었습니다. 국내에서 만든 위지윅 스타일의 웹사이트 편집도구로 클릭 몇 번으로 표를 만들고, 글자 크기를 바꾸고, 프레임 셋이라는 것을 이용해 레이아웃을 짤 수 있었습니다. 처음 입사를 했을 때는 그와 비슷한 어도비의 드림위버를 사용했었습니다.
하지만 지금은 그 툴을 가르치는 곳은 어디에도 없는 것 같습니다. 지금은 처음부터 VSCode와 같은 프로그램을 이용해 순수 코드만 작성하는 것이 디폴트가 되었습니다. 불필요한 코드를 걷어내 최적화하는 것보다 처음부터 코드로만 짜는 것이 더 효율적이고 편리하기 때문일 것입니다.