네이버 메일과 다음(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> |
[Daum 메일 쓰기 HTML 코드]
그리고 네이버의 메일 쓰기 페이지에서 사용한 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> |
[네이버 메일 쓰기 HTML 코드]
이 기능 구현을 위한 자바스크립트(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; }
} |
[Daum의 flexInput 자바스크립트 소스. 2006년 10월의 자바스크립트 소스]
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;
}
} |
[네이버의 flexInput 자바스크립트 소스]
Daum의 경우 이번 개편을 통해 파이어 폭스와 같은 브라우저에서도 동작하도록 자바스크립트를 변경한 상태입니다. 위에서 인용한 소스코드는 이번 개편 이전에 사용한 스크립트 코드임을 밝혀둡니다.
동일 개발회사도 아닌데 어떻게 HTML의 Form 이름과 자바스크립트의 함수 이름이 동일할 수 있을까요? 또한 함수 구현에 있어 변수명과 순서까지도 동일한 상황을 어떻게 설명할 수 있을까요? 이 정도 수준은 코드를 참고하여 구현한다면 비슷하게 나올 수 있는 결과물이라고 생각할 수 있습니다. 그렇다면 하단에 소개한 자바스크립트 구현 부분을 살펴보시기 바랍니다.
소스 코드의 양이 방대하기 때문에 첨부 파일로 링크를 합니다.
[Daum 한메일넷 suggest2.js 파일
다운로드]
[네이버 메일 HTML 코드 중 줄 번호 3565 ~ 4053 부분(getCaretEnd()에서 actb()까지
다운로드]
해당 소스 부분은 메일 주소의 자동 완성을 위한 부분입니다. 이 기능을 구현하기 위해 여러 함수들이 사용되고 있으며, 각 서비스에 맞도록 HTML 코드가 동적으로 생성되는 부분도 있습니다. 조금만 살펴보면, 코드가 거의 동일하게 구현되었다는 것을 발견할 수 있습니다.
네이버가 Daum의 소스코드를 복제한 근거
네이버 메일 서비스가 Daum 메일 서비스의 HTML 요소와 자바스크립트 코드를 복제하였다는 근거는 다음과 같습니다.
1) 자바스크립트 함수의 이름과 배치가 동일하다.
실제 구현 부분을 제외한 전체 스크립트의 함수이름을 순서대로 나열하면 다음과 같습니다. 이해를 돕기 위해 함수의 내용 부분은 제외하였습니다.
앞서 이야기한 자바스크립트 코드는 무려 400줄 정도로 구성되어 있습니다. 만일 이와 같은 상당한 분량의 코드를 직접 개발하였다면 위의 그림처럼 함수 이름과 순서가 동일하게 나올 수는 없을 것입니다. 바로 복제를 하였기에 가능한 일인 것입니다.
2) 동적 생성을 위한 HTML Form 요소가 동일하다.
DIV와 같은 레이어는 해당 서비스에 종속적인 요소로 보통의 경우 서비스에 독립적인 이름, 색상, 사이즈를 가집니다. 네이버는 Daum 이런 부분까지 복제하여 사용하고 있습니다.
recentAddrArea.style.border = 'solid 1px #ccc6bf';
recentAddrArea.style.backgroundColor = '#ffffff'; |
[Daum의 createRecentAddrArea() 함수]
recentAddrArea.style.border = 'solid 1px #ccc6bf';
recentAddrArea.style.backgroundColor = '#ffffff'; |
[네이버의 createRecentAddrArea 함수]
DIV 태그를 위한 style을 정의함에 있어 두 서비스는 동일한 색상과 양식을 사용하고 있습니다. 디자인 가이드라인을 기반으로 작업하는 것이 일반적인데, 이런 경우 HTML Form의 이름과 스타일이 동일한 값을 가질 확률은 거의 없습니다. 위에서 설명한 코드 이외에 해당 자바스크립트 전반에 걸쳐 많은 부분의 Form 요소가 동일한 속성값을 가지고 있는 상황입니다.
3) 자바스크립트의 변수명, 주석까지 동일하다.
개발에 있어 함수명과 변수명은 개발자의 습관을 나타내는 요소입니다. 많은 개발회사가 프로젝트 표준을 통해 변수 및 함수 선언을 위한 가이드라인은 제시하지만 이름 하나하나를 작성하는 일은 개발자의 몫입니다. 그렇기 때문에 변수명과 정의의 순서가 동일한 부분은 복제의 결정적인 증거라 볼 수 있습니다.
위의 코드에서 알 수 있듯이 네이버는 Daum의 코드에 있는 변수명과 순서를 동일하게 사용하고 있습니다. 또한 각각의 변수 값들도 거의 동일하다는 것을 알 수 있습니다. 이외에 개발자 개인 영역인 주석까지도 많은 부분들이 동일한 상황입니다.
그 외에도 해당 자바스크립트에는 작은 버그들이 있습니다. 이런 버그 부분들조차 동일합니다. 여기까지는 저희가 발견한 팩트이고, 하단 글에는 의견과 주장을 포함하고 있습니다.
네이버는 Daum의 코드를 그대로 복제하여 서비스를 운영하고 있는 상황이라고 강력히 추정됩니다.
이것은 소스코드 무단복제의 문제입니다
위의 내용에 대한 진위 여부의 파악을 위해 스마트플레이스가 컨택한 Daum 한메일 담당자의 말을 빌리자면 “메일 작성시 주소 필드의 자동 확장 기능은 Daum이 최초로 구현한 편의 기능”이라고 합니다. 그 만큼 사용자 편의를 위한 기획과 구현에 많은 노력이 들어간 결과물인 것입니다.
네이버와 Daum을 비롯한 국내 많은 업체들이 경쟁 업체의 서비스를 벤치마킹하고 아이디어를 차용해서 서비스를 선보이고 있습니다. 이런 경우 웹 상의 HTML과 자바스크립트 소스도 참조하여 개발하는 것이 현재 우리의 현실입니다. 이 과정 자체를 비판한다면 어느 누구라도 자유로울 수 없을 것입니다.
그렇기 때문에 스마트플레이스는 이번 포스트에서 "서비스 따라하기"에 대한 문제를 제기하는 것은 아닙니다. 그것 또한 분명히 논란이 있는 부분입니다만, 그것은 다른 종류의 이슈이며 별도의 주제로 논의될 사항입니다.
이것은 "소스코드 무단복제"의 문제입니다. 이번 사례처럼 경쟁업체의 소스 코드를 그대로 복제하여 UI 부분만 수정하여 사용하는 것은 해당 개발사와 개발자의 도덕성을 의심하게 만드는 심각한 저작권 침해의 사안입니다.
현실을 보면 HTML과 자바스크립트는 누구나 쉽게 확인할 수 있고 참조하여 사용할 수 있는 코드라는 인식으로 인해, 저작권을 고려하지 않는 경우가 많습니다. 그러나
프로그램심의조정위원회에 따르면 웹 스크립트코드도 저작권 보호 대상임을 밝히고 있습니다. 오픈소스를 사용하는 경우라도 원 저작자를 표기하는 것이 일반적인 관례입니다.
네이버는 저작자에 대한 어떠한 표기도 하지 않고 복제 코드를 이용하여 서비스를 하고 있습니다. 국내 인터넷 대표 기업이 복제 코드를 이용하여 개발을 한다는 것은 결코 좋은 모습이 아닙니다. 참조와 복제는 분명 다른 개념입니다.
여러분은 네이버의 소스코드 무단복제에 대해 어떻게 생각하십니까? 이번 스캔들을 통해, 매너없는 경쟁 그리고 공개된 소스에 대한 저작권에 대해서 다시 한번 생각해보는 시간이 되었으면 합니다.
덧글1: 이번 포스트의 초안은 네오비스가 작성하였으며, 게시 전 네오비스의 동의 하에 바비가 일부 글을 수정 및 추가 하였습니다.
덧글2: 포스트 게시 후 네이버와 Daum측에 이번 사건에 대한 코멘트를 요청할 것이며, 추가적인 사실이 밝혀질 경우 글을 업데이트하도록 하겠습니다.
|
 | 2007-02-01 11:40:57
|
|
Daum 개발담당자가 직접 올린 덧글입니다.
|
|
|
| |
여러가지 논란이 많은데 담당개발자로서 답변드리겠습니다.
메일주소 입력창 자동확장기능(flexInput)은 Daum의 자체기술로 순수하게 창작하여 만든 코드이며 flexInput이라는 이름도 직접 지었습니다. 서제스트는 처음에 codeproject를 참조하여 저희 서비스에 맞게 커스터마이징한 것입니다. |
|
| |
|
|
|
|
| 2007-02-01 12:40:46
|
|
Daum 개발담당자가 추가로 올린 덧글입니다. "3) 자바스크립트의 변수명, 주석까지 동일하다"에 해당하는 내용이니 참고하시기 바랍니다. 현재 시간까지 네이버측의 공식 답변은 없음을 밝힙니다.
|
|
|
| |
'키 카운트'라는 주석은 주소서제스트 리스트에서 탭키로 커서이동기능을 넣기 위해 변수를 선언하면서 넣은 것입니다. 작년5월로 기억합니다.
그리고 아래부분에 recentAddrFrame 이라는 변수는 작년 10월 개편시 넣은것으로, 한메일에서는 파일업로더 컴포넌트를 상단에 위치시킬 수 있도록 했는데 이때 주소서제스트 리스트가 가려지는 문제를 해결하려고 선언한 변수입니다. |
|
| |
|
|
|
|
| 2007-02-02 11:01:19
|
|
2월 2일 오전 11시 현재까지 저희가 알고있는 사실을 근거로 하는 설명입니다.
그리고 현재까지는 저희가 제시한 의견/주장을 뒤집을만한 다른 사실은 발견되지 않았습니다.
1. suggest 부분
다음과 네이버 모두 구현하였으나 지금의 상황은 다음과 같습니다.
다음에서 codeproject를 기반으로 한글 구현을 위한 부분과 서비스 부분 연동을 위한 커스터마이징을 하였다고 밝혔습니다. 이 부분은 저희가 소스까지 비교해본 결과 확인된 사항입니다.
일부 기능 변경을 위해 다음에서 2006년 5월과 10월 개편에서 독립된 변수선언을 하였습니다. codeproject에도 없는 내용이며, 서비스 종속적인 기능을 위한 부분입니다. 그러나 현재 양사가 동일하며, 한글 주석까지 동일한 상황입니다.
suggest 오픈시점에 대한 이야기가 있습니다만 다음이 네이버의 코드를 복제하였다면 다음 내부에서 만들어 놓은 변수와 한글 주석이 네이버에 그대로 씌여질 이유는 없을 것입니다.
또한 codeproject의 코드를 직접 보시면 아시겠지만 양사에서 사용하는 코드의 30~40%의 분량입니다. 오픈소스를 참고하여 구현한 범위를 벗어날 정도로 커졌기 때문에 어느 한쪽의 복제가 아니고서는 동일할 수 없는 부분입니다. 즉, codeproject만을 참고하여 각자 개발하였다면 결코 지금처럼 같은 모습으로 구현될 수 없습니다.
2. 입력칸 확장 기능
다음 내부에서 직접 개발한 사항이고, 다음이 먼저 오픈한것이 사실로 밝혀졌습니다.
서비스 오픈의 시차, 저희가 제시한 증거, Daum 담당자의 의견, 현재까지의 사실을 종합한 설명이었습니다.
|
|
| 2007-02-02 18:10:42
|
|
2월 2일 오후 6시 현재까지 확인된 사항을 정리합니다.
일단, 저희가 제시한 근거들은 여전히 유효합니다. 저희의 오류로 밝혀진 부분은 없습니다 . 현재 덧글에서 주로 논란이 있는 두 가지 이슈를 위주로 설명하겠습니다.
1) 네이버와 Daum의 CC 라이센스 위반 문제
저희가 주장한 네이버의 Daum 소스코드 무단복제 여부와는 별개로, 네이버와 Daum 양사 모두 CodeProject의 CC 라이센스 위반은 명백한 사실입니다. Daum측이 유선으로 직접 피드백한 바에 따르면, 이 부분의 잘못을 인정하고 있습니다 . (네이버는 무응답임)
2) 자동완성 서비스 오픈 시기과 해당 부분의 무단복제 문제
단지 자동완성 기능에 국한하여 볼 때, 네이버가 자동완성 기능을 먼저 시작한 것은 맞습니다. 그런데 이상한 사실은 , 작년 5월과 10월에 Daum에서 자사 서비스를 위해 변경한 코드와 한글주석(Daum측에서 확인해준 사항)이 현재 네이버의 소스코드에 그대로 나타나고 있습니다 .
정리하면, 자동완성 기능은 네이버가 먼저 시작했고 Daum이 나중에 시작했습니다 . 그러나 최근 메일 서비스 개편 시, Daum의 메일주소 입력창 자동확장기능 관련 소스를 네이버가 복제하면서 자동완성 관련 부분도 복제된 것으로 추정됩니다.
더불어 Daum측에서는 자동완성 기능 구현에 있어 네이버의 소스코드를 복제하지 않았다는 입장을 밝혔습니다. ( 네이버는 무응답임)
지금까지 논란이 된 부분을 정리해 보았습니다. 저희가 제기한 문제와 상관없이 양사 모두 CC 라이센스를 위반한 것은 사실이며 , 이에 대해서는 추가로 논의 되어야 할 부분이라고 생각합니다.
그리고 저희가 근거로 제시한 소스들은 (CodeProject의 공개된 코드를 참고하였다고 하더라도) 한글화 구현이라든지 다른 서비스를 위해 개발자가 추가 개발한 것입니다 .
새로운 사실을 알게 되면 다시 알려드리겠습니다.
언제나 고맙습니다.
|