네이버 메일과 다음(Daum) 한메일이 얼마 전 시차를 두고 개편을 진행했습니다. 메일이라는 특수성 때문에 작은 개편일지라도 사용자들에게 주는 의미는 크다고 생각합니다. 그래서 어떤 기능들에 대한 개편이 진행되었고, 어떤 코드들이 새롭게 만들어졌는지 확인을 해보았습니다.
네이버와 Daum의 개편된 기능을 중심으로 HTML과 자바스크립트를 비교하던 중 소스 수준의 복제가 의심되는 부분을 발견하게 되었습니다. Daum에서 먼저 제공하던 서비스를 네이버는 이번 개편을 통해 제공하고 있습니다. 하지만 서비스의 외형적인 모습뿐만 아니라 웹 스크립트 소스 코드까지 그대로 복제하여 사용한 흔적을 곳곳에서 찾을 수 있었습니다.
어떤 서비스 개편이 이루어졌을까요?
Daum 한메일넷 서비스는 2006년 9월 28일자 공지사항을 통해 서비스 개편을 알렸습니다. 개편된 서비스 중에는 “메일 수신자가 여러 명인 경우 입력 폼이 동적으로 늘어나는 기능”이 포함되어 있습니다.
[Daum 한메일넷 공지사항]
네이버 메일 서비스는 2007년 1월 24일자 공지사항을 통해 메일쓰기 기능 업그레이드를 공지하였고, Daum에서 먼저 구현하였던 기능을 하단과 같이 소개하고 있습니다.
[네이버 메일 공지사항]
이들 공지사항에서 알 수 있듯이, Daum이 네이버보다 약 4개월 가량 앞서 메일 주소 입력에 대한 편의 서비스를 시작했습니다. 물론 네이버의 공지사항에 있는 주소록 주소의 자동완성 기능도 이미 Daum에서 구현되어 있던 기능입니다.
복제가 의심되는 소스코드의 비교
Daum의 메일 쓰기 페이지에서 사용한 HTML 소스는 하단과 같습니다. 메일 주소에 대한 동적 변화를 위해 하단과 같은 HTML 코드를 사용하고 있습니다. 현재 이 기능은 인터넷 익스플로러와 파이어 폭스에서 동작합니다.
[참고] 본 포스트에서 소개한 자바 스크립트 소스코드는 해당 서비스 페이지의 "HTML 소스보기"를 통해 직접 확인한 것입니다. 불법 해킹 등에 의한 것이 아니라 웹브라우저의 소스보기 기능을 이용한 것임을 명백히 밝힙니다. 특히 네이버측의 소스코드는 1월 31일 오전 2시 기준으로 확인한 것이며, 이 글 게시 후 수정이 될 수 있으므로 원본을 보관하고 있습니다.
<div id="S_TO_Buffer" style="color:Red;position:absolute;width:0px;top:-100000px;left:-10000px;border:solid 1px black;word-break:break-all;overflow:hidden;line-height:17px;"COLOR: blue;">굴림;font-size:12px;padding:0;"></div> <textarea name="TO" id="S_TO" TABINDEX="1" onfocus="actb(this);" onkeydown="FFlexInput(this,'S_TO_Buffer');" onpropertychange="flexInput(this,'S_TO_Buffer');" onkeypress="promoteAreaClose();" autocomplete="off" style="border:1px #CCC6BF solid;height:19px;line-height:17px;width:100%;"COLOR: blue;">굴림;font-size:12px;overflow:hidden;word-break:break-all;"></textarea> |
그리고 네이버의 메일 쓰기 페이지에서 사용한 HTML 소스는 하단과 같습니다. 참고로 네이버의 경우 현재 인터넷 익스플로러에서만 이 기능이 동작하며, 소스보기를 통해 직접 확인할 수 있습니다.
<div id="s_to_Buffer" style="position:absolute;width:0px;top:-100000px;left:-100000px;border:solid 1px black;word-break:break-all;overflow:hidden;line-height:17px;"COLOR: blue;">굴림;font-size:12px;"></div> <textarea name="to" id="s_to" TABINDEX="1" onClick="selectForm(this);" onFocus="actb(this);" onpropertychange="flexInput(this,'s_to_Buffer');" autocomplete="off" style="border:1px #CCC6BF solid;height:19px;line-height:17px;width:392px;"COLOR: blue;">굴림;font-size:12px;overflow:hidden;word-break:break-all;" ></textarea> |
이 기능 구현을 위한 자바스크립트(Javascript) 소스 부분은 다음과 같습니다.
function flexInput(obj, bufId){ if(IsIE()){ var valu = obj.value; var curWidth = obj.offsetWidth; var curHeight = obj.offsetHeight; var buffer = document.getElementById(bufId); buffer.style.width = curWidth + "px"; buffer.innerText = valu; obj.style.height = buffer.offsetHeight; }else { return; } } |
function flexInput(obj, bufId){ if(IsIE()){ var valu = obj.value; var curWidth = obj.offsetWidth; var curHeight = obj.offsetHeight; var buffer = document.getElementById(bufId); if ( curWidth > 2 ) { buffer.style.width = (curWidth - 2 ) + "px"; } else { buffer.style.width = curWidth + "px"; } buffer.innerText = valu; obj.style.height = buffer.offsetHeight; } } |
Daum의 경우 이번 개편을 통해 파이어 폭스와 같은 브라우저에서도 동작하도록 자바스크립트를 변경한 상태입니다. 위에서 인용한 소스코드는 이번 개편 이전에 사용한 스크립트 코드임을 밝혀둡니다.
동일 개발회사도 아닌데 어떻게 HTML의 Form 이름과 자바스크립트의 함수 이름이 동일할 수 있을까요? 또한 함수 구현에 있어 변수명과 순서까지도 동일한 상황을 어떻게 설명할 수 있을까요? 이 정도 수준은 코드를 참고하여 구현한다면 비슷하게 나올 수 있는 결과물이라고 생각할 수 있습니다. 그렇다면 하단에 소개한 자바스크립트 구현 부분을 살펴보시기 바랍니다.
소스 코드의 양이 방대하기 때문에 첨부 파일로 링크를 합니다.
[Daum 한메일넷 suggest2.js 파일 다운로드]
[네이버 메일 HTML 코드 중 줄 번호 3565 ~ 4053 부분(getCaretEnd()에서 actb()까지 다운로드]
해당 소스 부분은 메일 주소의 자동 완성을 위한 부분입니다. 이 기능을 구현하기 위해 여러 함수들이 사용되고 있으며, 각 서비스에 맞도록 HTML 코드가 동적으로 생성되는 부분도 있습니다. 조금만 살펴보면, 코드가 거의 동일하게 구현되었다는 것을 발견할 수 있습니다.
네이버가 Daum의 소스코드를 복제한 근거
네이버 메일 서비스가 Daum 메일 서비스의 HTML 요소와 자바스크립트 코드를 복제하였다는 근거는 다음과 같습니다.
1) 자바스크립트 함수의 이름과 배치가 동일하다.
실제 구현 부분을 제외한 전체 스크립트의 함수이름을 순서대로 나열하면 다음과 같습니다. 이해를 돕기 위해 함수의 내용 부분은 제외하였습니다.
Loading...
앞서 이야기한 자바스크립트 코드는 무려 400줄 정도로 구성되어 있습니다. 만일 이와 같은 상당한 분량의 코드를 직접 개발하였다면 위의 그림처럼 함수 이름과 순서가 동일하게 나올 수는 없을 것입니다. 바로 복제를 하였기에 가능한 일인 것입니다.
2) 동적 생성을 위한 HTML Form 요소가 동일하다.
DIV와 같은 레이어는 해당 서비스에 종속적인 요소로 보통의 경우 서비스에 독립적인 이름, 색상, 사이즈를 가집니다. 네이버는 Daum 이런 부분까지 복제하여 사용하고 있습니다.
recentAddrArea.style.border = 'solid 1px #ccc6bf'; recentAddrArea.style.backgroundColor = '#ffffff'; |
recentAddrArea.style.border = 'solid 1px #ccc6bf'; recentAddrArea.style.backgroundColor = '#ffffff'; |
DIV 태그를 위한 style을 정의함에 있어 두 서비스는 동일한 색상과 양식을 사용하고 있습니다. 디자인 가이드라인을 기반으로 작업하는 것이 일반적인데, 이런 경우 HTML Form의 이름과 스타일이 동일한 값을 가질 확률은 거의 없습니다. 위에서 설명한 코드 이외에 해당 자바스크립트 전반에 걸쳐 많은 부분의 Form 요소가 동일한 속성값을 가지고 있는 상황입니다.
3) 자바스크립트의 변수명, 주석까지 동일하다.
개발에 있어 함수명과 변수명은 개발자의 습관을 나타내는 요소입니다. 많은 개발회사가 프로젝트 표준을 통해 변수 및 함수 선언을 위한 가이드라인은 제시하지만 이름 하나하나를 작성하는 일은 개발자의 몫입니다. 그렇기 때문에 변수명과 정의의 순서가 동일한 부분은 복제의 결정적인 증거라 볼 수 있습니다.
Loading...
위의 코드에서 알 수 있듯이 네이버는 Daum의 코드에 있는 변수명과 순서를 동일하게 사용하고 있습니다. 또한 각각의 변수 값들도 거의 동일하다는 것을 알 수 있습니다. 이외에 개발자 개인 영역인 주석까지도 많은 부분들이 동일한 상황입니다.
그 외에도 해당 자바스크립트에는 작은 버그들이 있습니다. 이런 버그 부분들조차 동일합니다. 여기까지는 저희가 발견한 팩트이고, 하단 글에는 의견과 주장을 포함하고 있습니다.
네이버는 Daum의 코드를 그대로 복제하여 서비스를 운영하고 있는 상황이라고 강력히 추정됩니다.
이것은 소스코드 무단복제의 문제입니다
위의 내용에 대한 진위 여부의 파악을 위해 스마트플레이스가 컨택한 Daum 한메일 담당자의 말을 빌리자면 “메일 작성시 주소 필드의 자동 확장 기능은 Daum이 최초로 구현한 편의 기능”이라고 합니다. 그 만큼 사용자 편의를 위한 기획과 구현에 많은 노력이 들어간 결과물인 것입니다.
네이버와 Daum을 비롯한 국내 많은 업체들이 경쟁 업체의 서비스를 벤치마킹하고 아이디어를 차용해서 서비스를 선보이고 있습니다. 이런 경우 웹 상의 HTML과 자바스크립트 소스도 참조하여 개발하는 것이 현재 우리의 현실입니다. 이 과정 자체를 비판한다면 어느 누구라도 자유로울 수 없을 것입니다.
그렇기 때문에 스마트플레이스는 이번 포스트에서 "서비스 따라하기"에 대한 문제를 제기하는 것은 아닙니다. 그것 또한 분명히 논란이 있는 부분입니다만, 그것은 다른 종류의 이슈이며 별도의 주제로 논의될 사항입니다.
이것은 "소스코드 무단복제"의 문제입니다. 이번 사례처럼 경쟁업체의 소스 코드를 그대로 복제하여 UI 부분만 수정하여 사용하는 것은 해당 개발사와 개발자의 도덕성을 의심하게 만드는 심각한 저작권 침해의 사안입니다.
현실을 보면 HTML과 자바스크립트는 누구나 쉽게 확인할 수 있고 참조하여 사용할 수 있는 코드라는 인식으로 인해, 저작권을 고려하지 않는 경우가 많습니다. 그러나 프로그램심의조정위원회에 따르면 웹 스크립트코드도 저작권 보호 대상임을 밝히고 있습니다. 오픈소스를 사용하는 경우라도 원 저작자를 표기하는 것이 일반적인 관례입니다.
네이버는 저작자에 대한 어떠한 표기도 하지 않고 복제 코드를 이용하여 서비스를 하고 있습니다. 국내 인터넷 대표 기업이 복제 코드를 이용하여 개발을 한다는 것은 결코 좋은 모습이 아닙니다. 참조와 복제는 분명 다른 개념입니다.
여러분은 네이버의 소스코드 무단복제에 대해 어떻게 생각하십니까? 이번 스캔들을 통해, 매너없는 경쟁 그리고 공개된 소스에 대한 저작권에 대해서 다시 한번 생각해보는 시간이 되었으면 합니다.
덧글1: 이번 포스트의 초안은 네오비스가 작성하였으며, 게시 전 네오비스의 동의 하에 바비가 일부 글을 수정 및 추가 하였습니다.
덧글2: 포스트 게시 후 네이버와 Daum측에 이번 사건에 대한 코멘트를 요청할 것이며, 추가적인 사실이 밝혀질 경우 글을 업데이트하도록 하겠습니다.
| 2007-02-01 11:40:57 | |||||||||
Daum 개발담당자가 직접 올린 덧글입니다.
|
| 2007-02-01 12:40:46 | |||||||||
Daum 개발담당자가 추가로 올린 덧글입니다. "3) 자바스크립트의 변수명, 주석까지 동일하다"에 해당하는 내용이니 참고하시기 바랍니다. 현재 시간까지 네이버측의 공식 답변은 없음을 밝힙니다.
|
| 2007-02-02 11:01:19 |
2월 2일 오전 11시 현재까지 저희가 알고있는 사실을 근거로 하는 설명입니다. |
| 2007-02-02 18:10:42 |
2월 2일 오후 6시 현재까지 확인된 사항을 정리합니다. |
'Interesting' 카테고리의 다른 글
대기업 간부들의 비밀스러운 `인맥관리 기술` (0) | 2007.05.03 |
---|---|
클럽박스 (0) | 2007.05.03 |
Naver Blog Season 2 (0) | 2007.05.03 |
색상표 (1) | 2007.04.27 |
웹 검색엔진에 내 티스토리 블로그 등록하기 (0) | 2007.04.27 |