필자는 지식IN에서 지식인 이용규정에 조금이라도 어긋나는 글을 보면 즉각 신고하는 편이다. 오늘도 지식IN을 서핑하다가 파일공유 사이트를 홍보하는 답변을 보고 신고를 하기 위해 '신고' 버튼을 눌렀다. 하지만 볼 수 있었던 것은 신고 창이 아닌, '페이지를 찾을 수 없습니다' 라는 에러 페이지였다. 순간 인터넷이 끊긴 것인가 하고 다른 사이트에 접속해 보았지만 접속은 원활히 잘 되었다. 네이버가 죽었나 싶어서 다른 네이버 페이지에도 접속해보았지만 별 문제를 찾을 수 없었다. 마지막으로 '신고' 버튼의 링크를 확인해 보았더니, 다음과 같은 링크로 연결되었다.

 javascript<x sharpei common_editor kin.naver.com http: target='_blank'>:go_report_answer('ING','1313','2985462','1');

네이버에서 처리하는 과정에 에러가 나서 주소 부분이 잘못 입력된 것이겠지 싶어 직접 자바스크립트를 실행하기로 했다. 주소창에 다음을 입력했다.

javascript:go_report_answer('ING', '1313', '2985462','1');

하지만, 신고 창의 '제목' 란과 '작성자 ID' 란은 공란이었다. 분명 제목과 작성자 ID가 떠야 할 터인데 말이었다. 이상하다 싶어 질문의 작성 날짜를 확인했다. 작성 날짜는 9월 18일로 되어 있었다. 바로 해당 디렉토리의 해결중 질문 DB를 뒤져보았다. 하지만 가장 오래 전에 작성된 질문이 9월 18일의 질문이었고, 더 이전의 글은 이미 '미해결'이나 '완료'로 넘어간 상태였다.

그 때 필자가 발견한 것은 광고 답변은 진짜 답변이 아닌 가짜 답변이었다는 것이다. 순간 섬뜩함을 느꼈다. 즉, 질문 페이지는 다음과 같았다.

사용자 삽입 이미지

'한글오류 긴급패치 다운로드' 부분이 파일공유 사이트로 연결되는 링크이다.


위쪽의 질문과 답변은 조작된 것이었고, 아래쪽에 하나 더 있는 질문부터가 진짜 질문과 답변이었다. 실제로 위쪽의 질문과 답변의 작성자 아이디에는 링크가 걸려 있지 않았으며, 답변 수도 실제 답변 수와 일치하지 않았다.

누가 어떻게 이런 짓을 했을까 하며 소스를 가만히 살펴 보았다. 신기한 것은 분명 광고 내용은 페이지의 가장 위쪽에 있는데, 소스 상에서는 광고 내용이 가장 밑에 있는 것이었다. 가장 밑에 있는 답변을 보았더니 아무 내용도 없었다. 수상한 일이었다.

사용자 삽입 이미지

확실히 어떻게 렌더링이 되는 것인가 하여 Firefox의 부가기능인 Firebug의 Element Inspector를 이용하여 구조를 살펴 보았다.

결과는 정말 이상했다. 소스상에서는 가장 아래쪽에 있는 셀의 내용(가짜 질문 및 답변)이 렌더링이 된 후에는 테이블의 바로 위에 와서 붙는 것이었다.

순간 브라우저의 렌더링 버그라는 생각이 들어 소스를 가만히 분석해 보았더니, 셀 안쪽이 다음과 같았다.

<td> <td> </tr> <div>가짜 질문 및 답변</div> </td>

중간에 <td> </tr>이라는, 구조에 어긋나는 태그가 들어 있었다. 이것이 버그를 유도하는 것일 것이라는 생각이 들어서 간단한 페이지를 작성해서 테스트를 해 보았다. 가로 세로 2개의 셀이 있는 테이블인데, 우측 하단의 셀 안에 <td></tr>의 태그를 넣은 것이었다. 결과는 놀라웠다.

사용자 삽입 이미지

보이는 결과와 같이, 우측 하단의 셀의 내용이 테이블 위쪽으로 나왔다.

결국, 가짜 질문과 답변은 소스만 있는, 그럴듯하게 보이는 것들일 뿐이고, 실제 광고의 작성자는 가장 아래의 답변을 작성한 사람이었던 것이다. 광고를 하는 사람은 가짜 답변의 작성자 ID를 조작하고 신고 링크를 무력화시킴으로써 좀 더 오랫동안 삭제당하지 않고, 진짜 자기 ID를 들키지 않을 수 있었을 것이다.

네이버 측도 이를 알고 있었던 것인지, 필자가 포스팅을 하려고 준비하는 순간 해당 답변을 삭제했다. 다행히도 원래 보고 있던 페이지를 닫지 않아 스크린샷을 찍을 수 있었다.




2008년 1월 19일 이후 작성된 모든 글에 대해서 퍼가는 것을 금지합니다.
퍼가고자 하시는 분은 링크를 달아 주시기 바랍니다.
Posted by Harry

일본어 공부를 하다 보면 인터넷 상의 일본어를 읽을 때 ()(がた)(읽는 방법)를 몰라서 어려움을 겪을 때가 많다. 본인의 블로그를 방문하는 사람들에게는 이런 불편함을 안겨주지 않도록 하자.

다음과 같은 태그를 사용하면 한자 위에 よみがた를 달아줄 수 있어 읽는 사람이 더 수월하게 읽을 수 있다.


<RUBY>
     <RB>漢字</RB>
     <RP>(</RP><RT style="font-size:70%;">かんじ</RT><RP>)</RP>
</RUBY>


즉, RB 태그 사이에는 よみがた를 달 한자를 써 주고, RT 태그 사이에는 よみがた를 달아주면 된다. RT 태그의 font-size 스타일을 이용하여 よみがた의 크기를 조절해 줄 수도 있다. 위의 태그를 적용시키면 아래와 같다.

漢字 (かんじ)

다만, 이 태그는 IE에서만 지원된다. 때문에 RP 태그 내부에 괄호를 넣어 주어서 IE에서는 괄호가 출력되지 않고 よみあが가 한자 위쪽에 달리도록 하고, 다른 브라우저에서는 괄호 안에 よみがた가 출력된다. 따라서 절대 RP 태그를 생략하면 안된다.


2008년 1월 19일 이후 작성된 모든 글에 대해서 퍼가는 것을 금지합니다.
퍼가고자 하시는 분은 링크를 달아 주시기 바랍니다.
Posted by Harry
AJAX는 Asynchronous JAvascript & XML의 약자로, 말 그대로 자바스크립트와 XML을 이용하여 서버와 비동기적으로 통신하는 것을 일컫는다. 이를 이용하면 좀 더 다이나믹한 웹 페이지를 꾸밀 수 있게 된다.

일반적으로, 서버와 통신하기 위해서는 한 번의 페이지 이동을 거쳐야 한다. 왜냐 하면 서버측 프로그램은 페이지가 바뀔 때 호출이 되고, 이 때 서버의 정보를 얻어올 수 있기 때문이다. 물론 HTML등의 단순한 문서는 서버측의 프로그램이 필요 없을 수도 있겠지만, DB에 Access하는 페이지의 경우 일반적으로는 한 번의 작업을 할 때마다 페이지를 이동하여 서버측 프로그램을 호출해야 한다.

하지만, AJAX를 이용하면 서버 작업 시 페이지 이동이 불필요하게 되어서 사용자로 하여금 훨씬 편하게 사이트를 이용할 수 있게 한다.

AJAX를 이용한 대표적인 사이트를 꼽으라면 구글 맵스 를 들 수 있을 것이다. 이는 프로그램으로 나와 있던 Google Earth를 웹 상으로 옮겨놓은 것이라고 생각하면 된다.
사용자 삽입 이미지

AJAX가 구현된 대표적인 사이트로 꼽히는 'Google Maps'의 페이지 모습이다.


처음 보는 사람이라면 '이거 뭐 다른데서 서비스하는 지도랑 똑같잖아?'라고 생각할 수도 있다. 하지만 분명히 큰 차이점이 있다. 다른 곳은 이용할 때 ActiveX 플러그인을 설치할 것을 요구한다. 하지만 구글 맵스는 어떠한 설치도 필요없다. 이것이 구글 맵스의 가장 큰 장점인 것이며, AJAX의 장점을 여실히 보여주는 예이다.

ActiveX가 없는 순수한 웹페이지인데도 페이지 전환이 없이 깔끔하게 지도를 표시하고 있다.

AJAX를 이용하면 어떤 것이 가능한 것인지 충분히 볼 수 있었다고 생각된다.

AJAX의 핵심요소는 XMLHttpRequest와 DOM이다.
XMLHttpRequest : 페이지 전환 없이 서버로 Http를 이용하여 정보를 전달하고 받아오는 자바스크립트 객체이다. 본래 IE가 처음 지원하였으나 현재는 대부분의 브라우저가 지원하고 있다.
DOM : XML 데이터를 관리하는 객체이다. XML 자료가 주어지면 몇 가지 함수를 통해 파싱, 추가, 삭제, 수정 등을 자유롭게 할 수 있도록 도와준다.
기본적인 원리를 간단히 설명하자면, XMLHttpRequest라는 객체에 여러 가지 정보를 담고 서버로 이를 전송한다. 그러면 서버가 이를 받아 처리를 한 후 그 결과값을 다시 클라이언트로 전송한다. 클라이언트는 서버에서 받아온 결과값을 이용하여 실시간으로 페이지를 갱신하게 된다.

태터툴즈의 자동 저장기능에 감사드립니다. 한 번 잘못 눌렀는데 다행히 다 저장되어있네요.. 저도 아직 AJAX를 공부하고 있는 입장이지만, 공부해 나가면서 계속 포스팅하겠습니다.



2008년 1월 19일 이후 작성된 모든 글에 대해서 퍼가는 것을 금지합니다.
퍼가고자 하시는 분은 링크를 달아 주시기 바랍니다.
Posted by Harry
평소 웹 서핑을 하다 보면 버튼을 눌렀을 때 글 내용이 펼쳐지며 보이는 것을 본 적이 있을 것이다.
일단 다음 예제를 보자.

글 내용 펼치기

위와 같은 효과를 주기 위해서는 Span태그의 스타일인 Display를 조절하면 된다. 위 예제의 소스코드는 다음과 같다.

(Language : html4strict)
  1. <SPAN id=test1_1><A   href="javascript:Open();">글 내용 펼치기</A></SPAN>
  2. <SPAN id=test1_2 style="DISPLAY: none"><A href="javascript:Close();">글 내용 접기</A><br />글 내용을 펼쳐야 이 부분이 보이게 됩니다. </SPAN>
  3. <script name=javascript>
  4.     function Open()
  5.     {
  6.         document.getElementById('test1_1').style.display='none';
  7.         document.getElementById('test1_2').style.display='';
  8.     }
  9.     function Close()
  10.     {
  11.         document.getElementById('test1_2').style.display='none';
  12.         document.getElementById('test1_1').style.display='';
  13.     }
  14. </script>


원리는 간단하다. '글 내용 펼치기' 링크와 실제 보여줄 내용을 각각 다른 span 안에 넣어둔 후 두 레이어가 서로 번갈아가며 보이면 되는 것이다. 이를 자바스크립트를 이용하여 구현하기 위해서는 getElementById라는 함수를 쓰게 되는데, 이는 span 태그에서 설정한 id를 이용하여 해당 객체를 얻어내는 기능을 한다. 객체를 얻어 낸 후에는 스타일의 디스플레이 속성을 조절하게 된다. 디스플레이 속성에 아무 값도 주지 않았을 경우에는 레이어가 보이며, none 속성을 주면 레이어가 보이지 않게 된다.


2008년 1월 19일 이후 작성된 모든 글에 대해서 퍼가는 것을 금지합니다.
퍼가고자 하시는 분은 링크를 달아 주시기 바랍니다.
Posted by Harry