'저장'에 해당되는 글 2건

  1. 2010.02.05 ᄒᆞᆫ글에서 블로그로 올리기와 주석 표기 문제
  2. 2010.01.08 ᄒᆞᆫ글 씨! 링크를 왜 엉뚱하게 표시하나요? 3

ᄒᆞᆫ글에서 블로그로 올리기와 주석 표기 문제

한컴오피스2010 베타버전 버그 31 - ᄒᆞᆫ에서 다른 이름으로 저장하기와 주석 표기 문제

ᄒᆞᆫ글2010 베타버전에서 다른 이름으로 저장하기를 통해 HTML 문서를 만들거나 블로그로 올리기를 통해 블로그에 올린 게시물에 나타나는 주석과 관련한 HTML 태그 표기 때문에 약간의 오류가 생기고 있음을 발견했습니다.

  • 참고 : 본문에서는 블로그로 올리기 문제만 다루었으나, 다른 이름으로 저장 - 인터넷 문서도 같은 벌레가 나타나고 있습니다.

벌레의 유형

ᄒᆞᆫ글 씨! 이 버그는 반드시 고쳐 주셔야겠습니다. 이 버그가 고쳐지지 않으면 ᄒᆞᆫ글에서 작성한 주석은 HTML로 고쳤을 때 대부분 자리 표시에 불과하게 됩니다.

개발자의 답변

2010년 2월 5일 버그 리포팅을 한 상태입니다.

벌레의 발견

이 벌레는 우연히 블로그 - (X)HTML 태그 표기 문제 문서를 다시 살피다가 발견했습니다. 그 문서에서 주석의 링크를 클릭했음에도 이동하지 않아서 문제가 있음을 알게 되었습니다.

티스토리 및 텍스트큐브의 주석

티스토리와 텍스트큐브는 태터툴즈를 사용하는 블로그이므로 주석의 동작도 거의 비슷합니다.

일단 제 블로그의 7-Zip 소개 글을 살펴보겠습니다.

블로그에 나타난 주석 (빨간 동그라미 안쪽)

블로그에 나타난 주석 (빨간 동그라미 안쪽)

위 그림에서 빨간 동그라미 안쪽에 주석이 있습니다. 이 주석을 클릭하면 주석을 나타내는 부분으로 이동합니다.

주석 부분으로 이동한 뒤의 화면

주석 부분으로 이동한 뒤의 화면

주석 부분으로 이동하면 위와 같은 화면이 됩니다. 이때 [본문으로](파란 네모 부분)를 클릭하면 이 주석을 호출한 곳으로 이동합니다.

[본문으로]를 클릭했을 때의 화면

[본문으로]를 클릭했을 때의 화면

앞서 [본문으로]를 클릭하면 위와 같이 이동을 해 줍니다.

ᄒᆞᆫ글 2010 베타에서 출력한 주석의 동작

테스트 블로그의 예제 문서를 이용하여 테스트하겠습니다. 참고로 이 예제 문서는 IE6와 파이어폭스에서 서로 다른 결과를 보여줍니다. 여기에서는 파이어폭스 3.5 버전을 이용하겠습니다. 첨언하자면, 여기에 사용한 HTML 코드가 올바르지 않기 때문에 동작하지 않아야 정상입니다. 다시 말해 동작하는 IE6의 경우가 틀린 경우이지 파이어폭스가 틀린 것은 아닙니다.

ᄒᆞᆫ글에서 블로그로 올린 주석이 있는 문서

ᄒᆞᆫ글에서 블로그로 올린 주석이 있는 문서

위의 ᄒᆞᆫ글에서 블로그로 올린 주석이 있는 문서에서 주석을 클릭하면? 아래 그림처럼 됩니다.

이동은 않고 주소 표시줄만 바뀐 화면

이동은 않고 주소 표시줄만 바뀐 화면

위 그림처럼 이동은 하지 않았습니다. 그저 주소 표시줄만 바뀌었죠.

벌레 분석

코드 보기

앞서 발견한 두 경우의 HTML 코드를 분석해 보겠습니다.

티스토리 주석의 HTML 코드

티스토리 주석은 아래와 같습니다.

티스토리의 주석 표시 부분의 HTML 코드

티스토리의 주석 표시 부분의 HTML 코드


티스토리의 주석 내용 부분의 HTML 코드

티스토리의 주석 내용 부분의 HTML 코드

ᄒᆞᆫ글에서 블로그로 올린 문서의 HTML 코드

예제 문서의 HTML 코드는 다음과 같습니다.

블로그로 올린 문서의 주석 표시 부분의 HTML 코드

블로그로 올린 문서의 주석 표시 부분의 HTML 코드

앞서의 실험에서는 주석 내용 부분은 나타나지 않았지만, 여기에서는 주석 내용 부분도 HTML 코드를 나타내 보겠습니다.

블로그로 올린 문서의 주석 내용 부분의 HTML 코드

블로그로 올린 문서의 주석 내용 부분의 HTML 코드

코드 간략화 및 구조 분석

코드가 복잡하므로 간략하게 구조만 나타내 보겠습니다. 아울러 생략된 부분도 함께 나타내겠습니다.

먼저 티스토리 주석의 HTML 구조입니다.

[code html] <p>본문 내용 1<sup class="footnote"><a id="footnote_link_208_1" href="#footnote_208_1"><span style="display: none;">[각주:</span>1<span style="display: none;">]</span></a></sup>)</p> <p>본문 내용 2</p> <p>본문 내용 3</p> <div class="footnotes">     <ol class="footnotes">         <li id="footnote_208_1">주석 내용 1<a href="#footnote_link_208_1">[본문으로]</a></li>     </ol> </div> [/code]

다음은 블로그로 올린 문서의 HTML 구조입니다.

[code html] <p class="HStyle0">본문 내용 1<a href="#FOOTNOTE1"><sup>1)</sup></a></p> <p class="HStyle0">본문 내용 2</p> <p class="HStyle0">본문 내용 3</p> <hr align="left" width="300px"> <p class="HStyle11"><a name="#FOOTNOTE1">1)&nbsp;주석 내용 1</a></p> [/code]

위 두 코드에서 차이점은 (1) id와 name의 차이, (2) 링크를 이용한 왕복과 편도, (3) 링크 대상을 가리키는 이름의 차이(# 표시가 있느냐 없느냐)입니다. 일단 id와 name의 차이는 여러 문서를 함께 볼 경우에는 문제가 생기지만, 예제 문서는 오직 1개의 문서만을 화면에 표시하고 있으므로 이게 문제는 아닙니다. 그 다음으로 링크를 이용한 왕복이나 편도 이동이냐는 전혀 문젯거리가 아닙니다. 넘어가죠. 마지막으로 링크 대상을 가리킬 때 # 표시를 붙이느냐 마느냐는 상당히 차이가 큽니다.

일단 # 표시는 문서 내부의 이동 표시임을 나타내고 있습니다. 보통 # 표시 다음에는 id나 name로 표시하는 객체 이름(Object name)이 오게 됩니다. 그렇다면 # 자체가 객체 이름이냐? 그렇지는 않습니다. #은 문서와 문서 내부의 객체 이름과의 구분을 해 주는 표시일 뿐입니다. 다시 말해 #을 붙여서 id나 name을 표시하지는 않는다는 뜻입니다. 과거에는 #을 붙여서 표시하여도 호환성에 문제가 없었으나, 지금은 이 부분에 대해 엄격히 검사하고 있습니다. 현재 # 표시가 붙어 있어도 이동이 가능한 웹브라우저는 IE 계열뿐이며, 파이어폭스 등의 모질라/게코 계열이나 오페라 계열의 웹브라우저는 # 표시가 붙은 객체로의 이동을 지원하지 않습니다.

그러므로 위의 코드는 다음과 같이 고쳐야 합니다.

[code html] <p class="HStyle0">본문 내용 1<a href="#FOOTNOTE1"><sup>1)</sup></a></p> <p class="HStyle0">본문 내용 2</p> <p class="HStyle0">본문 내용 3</p> <hr align="left" width="300px"> <p class="HStyle11"><a name="FOOTNOTE1">1)&nbsp;주석 내용 1</a></p> [/code]

맨 마지막 줄에서 # 표시를 떼었습니다.

참고로 테스트 블로그에 이 부분에 대해 시험할 예제 문서(예제 - 주석과 위치 이동)를 올려 두었습니다. 직접 보시고 시험해 보시기 바랍니다. 참고로 주석 1은 정상적으로 이동이 가능하고, 주석 2는 IE 계열에서면 이동이 가능합니다.

결론

링크를 표시하면서 앵커(A 태그)에 name 속성에 # 문자가 들어간 이름을 넣었기 때문에 발생한 문제입니다. 그 문자를 떼면 정상적으로 이동이 가능합니다. 추가로 본문으로의 이동을 지원하도록 바꾸고, 아울러 앵커(A 태그) 때문에 밑줄이 생기는 현상도 제거하려면 다음과 같이 고치면 됩니다.

[code html] <p class="HStyle0">본문 내용 1<a id="FOOTNOTE_HWP_ARTICLE_[문서번호]_1" href="#FOOTNOTE_HWP_1"><sup>1)</sup></a></p> <p class="HStyle0">본문 내용 2</p> <p class="HStyle0">본문 내용 3</p> <div class="HStyle11">     <hr align="left" width="300px">     <ol start="1">         <li id="FOOTNOTE_HWP_1">주석 내용 1<a href="#FOOTNOTE_HWP_ARTICLE_[문서번호]_1">[본문으로]</a></li>     </ol> </div> [/code]

위와 같이 바꾸면 좀 더 구조적이고 효율적인 코드가 됩니다. 참고로 [문서번호]에 해당하는 값으로 치환해야 합니다. 그밖에 <ol start="1">의 경우는 시작하는 주석 번호1이라는 뜻입니다. 주석 번호를 하나하나 지정할 필요가 없다는 뜻입니다. 아무튼 이것을 적용하는 문제는 ᄒᆞᆫ글 개발자가 해결할 일이겠지요.

관련 벌레

이 벌레와 관련이 있는 벌레는 다음과 같습니다.

관련 문서

내부 문서

외부 문서

이 글은 스프링노트에서 작성되었습니다.


Trackback 0 Comment 0

ᄒᆞᆫ글 씨! 링크를 왜 엉뚱하게 표시하나요? 3

한컴오피스 베타버전 버그 13 - ᄒᆞᆫ글 씨! 링크를 왜 엉뚱하게 표시하나요? 3

ᄒᆞᆫ글 씨! 링크를 왜 엉뚱하게 표시하나요? 문서에 이어 ᄒᆞᆫ글 씨! 링크를 왜 엉뚱하게 표시하나요? 2 문서를 작성하면서 예상보다 사태가 심각하다고 여기게 되었습니다.

1. 벌레의 유형

이번에는 인쇄(프린트) 기능과 관련하여 하이퍼링크 색상을 엉뚱하게 보여주고 있음을 확인했습니다. 물론 이전에 제가 예상했던 그 원인 때문이었습니다. 바로 열어 본 링크열어 보지 않은 링크에 대한 정보를 파일 포맷에서 따로 관리하지 않고, 문서 내용으로서 관리함으로써 문서 내용으로 인식된 그것이 오류를 일으키고 있습니다.

2. 개발자의 답변

2010년 1월 7일 버그 리포팅을 한 상태입니다.

3. 벌레의 발견

‘그저 PDF 파일이나 만들어 볼까?’라는 가벼운 마음으로 인쇄를 했다가 발견했습니다.

3.1. 열어 본 링크가 없는 문서를 PDF로 저장

그림 1 편집 화면

그림 2 인쇄 미리보기 화면

위에서 보면 편집 화면과 미리보기 화면에는 보라돌이 링크가 전혀 보이지 않습니다. 일부러 앞서 ᄒᆞᆫ글 씨! 링크를 왜 엉뚱하게 표시하나요? 2 문서에서 이 버그에 대해 확인하면서 새로 만든 하이퍼링크이기 때문입니다.

그림 3 인쇄 대화상자

위와 같은 인쇄 대화상자에서 Haansoft PDF를 선택한 다음 인쇄를 클릭한다.

그림 4 PDF 파일로 출력하게 되면….

그림 5 PDF 출력 정보

PDF 파일로 출력하게 되면 난데없이 다른 이름으로 저장 대화상자가 나타난다. 이 대화상자에 이름을 지정해 주면 PDF 파일로 저장해 줍니다. 이때 이름은 링크 테스트.pdf라고 주었습니다.

이때 PDF 파일로 출력하려면, 파일 메뉴에서 PDF로 저장하기를 선택해도 됩니다.

그림 6 출력한 PDF 파일 보기

3.2. 열어 본 링크가 하나 있는 문서를 PDF로 저장

이번에는 링크 하나를 골라서 클릭합니다. 그리고 그것을 인쇄 미리보기 하면 다음과 같습니다.

그림 7 열어 본 링크를 하나 만들었습니다.

그림 8 인쇄 미리보기에서도 나타난 열어 본 링크 하나

이것을 PDF로 저장한다면, 그래도 나타날까요? 지금까지의 과정을 살펴보면 나타나게 됩니다. 하지만 나타나지 않았으면 합니다.

그림 9 PDF 출력 정보 2

이번에는 링크 테스트 1.pdf 파일로 저장했습니다.

그림 10 출력한 PDF 파일 보기

불행히도 제 바람은 이루어지지 않았습니다.

3.3. 어떤 곳에서 발생하나?

이 벌레는 어떤 곳에 살고 있는지 점검해 보겠습니다.

일단 인쇄와 관련된 기능에는 모두 이 벌레가 나타난다고 여겨집니다. 그림 3 인쇄 대화상자에 나타난 PDF-Pro Free, Microsoft XPS Document Writer, Haansoft PDF 및 그 그림에는 나타나지 않은 PDF 저장, 그림으로 저장하기 기능에서는 이 벌레를 발견했습니다. Send To OneNote 2010 또는 팩스로 보내기에서도 역시 이 벌레가 나타나리라 생각합니다. 이것은 인쇄 기능의 문제가 아니라 파일 구조와 내용에 대한 문제이기 때문입니다.

그림 11 출력한 XPS 파일 내용

저장 기능에서도 나타나고 있습니다. 저장하기다른 이름으로 저장하기에서도 역시 나타나는 내용입니다.

또한 웹 게시 기능에서도 나타났습니다. 이 기능은 다른 이름으로 저장하기의 대상을 단순히 또는 블로그로 바꾸었을 뿐이기 때문에 당연히 나타나게 된다고 생각합니다. 블로그로 올리기, 초안으로 올리기, 웹 브라우저로 보내기, 웹 서버로 올리기 등에서도 발견했습니다.

4. 벌레의 원인

앞서 밝혔듯이 링크에 대한 정보, 열어 본 링크 또는 열어 보지 않은 링크 여부파일 내용으로 직접 저장하고 있기 때문에 발생한 문제로 여겨집니다.

또한 앞서 주장했듯이, 이 문제는 비단 파일 저장(다른 이름으로 저장 포함)이나, 블로그로 올리기에만 한정된 벌레가 아닙니다. 파일의 내용을 입력하거나 편집하고, 또는 외부로 출력하는 모든 기능에서 이 벌레가 나타날 가능성이 있고, 이번에 인쇄 미리보기, 인쇄 PDF 등의 인쇄 기능에서 확인했습니다. 직접 종이에 인쇄하기는 할 수 없지만, PDF 출력과 비교하여 그리 다르지 않으리라 예상하고 있습니다.

5. 비슷한 벌레

[벌레와 팁/버그] - ᄒᆞᆫ글 씨! 링크를 왜 엉뚱하게 표시하나요?

[벌레와 팁/버그] - ᄒᆞᆫ글 씨! 링크를 왜 엉뚱하게 표시하나요? 2

6. 관련 문서

시험 결과를 알고 싶은 분들을 위해 압축파일을 열어 보시면 PDF 파일 2개(PDF 저장), PNG 파일(그림으로 저장하기), XPS 파일 등이 들어 있습니다.

6.1. 내부 문서

[벌레와 팁/버그] - ᄒᆞᆫ글 씨! 기본은 지켜야죠!

[벌레와 팁/버그] - ᄒᆞᆫ글 씨! 링크를 왜 엉뚱하게 표시하나요? 2

[벌레와 팁/버그] - ᄒᆞᆫ글 씨! 맞춤법 도우미로 엉뚱한 곳을 표시하면 어떡해요?

[벌레와 팁/버그] - ᄒᆞᆫ글 씨! 링크를 왜 엉뚱하게 표시하나요?

[벌레와 팁/제안] - 한컴오피스 베타버전의 공백과 이동 기능

[벌레와 팁/버그] - ᄒᆞᆫ글 씨! 블로그에는 글을 하나만 올리란 말입니다.

[벌레와 팁/버그] - ᄒᆞᆫ글 씨! ‘ᄒᆞᆫ글’을 제대로 나타내면 안 되겠니? 2

[벌레와 팁/버그] - ᄒᆞᆫ글 씨! ‘ᄒᆞᆫ글’을 제대로 나타내면 안 되겠니?

[벌레와 팁/버그] - ᄒᆞᆫ글 씨! 블로그 카테고리는 어디에?

[벌레와 팁/버그] - ᄒᆞᆫ글 씨! 블로그에는 게시판이 없거든요.

[벌레와 팁/버그] - HTML 태그 해석 오류 문제

[벌레와 팁/버그] - 도대체 무슨 짓을 하는 거냐, ᄒᆞᆫ글?

[프로그램/스크린샷] - 한컴오피스2010 베타버전 실행화면

[벌레와 팁/버그] - 한컴오피스2010 베타 설치 작업과 버그 몇 개

[프로그램/설치] - 한컴오피스2010 베타버전 설치기

6.2. 외부 문서 - 테스트 블로그

이 글은 ᄒᆞᆫ글 2010 베타버전에서 작성하였습니다.

Trackback 0 Comment 0
prev 1 next


티스토리 툴바