길벗 출판사의 고경희 저

"HTML+CSS+자바스크립트 무작정 따라하기" 책 (초판 6쇄 2006년 3월 16일 발행)은 문제 있다.

HTML, CSS, 자바 스크립트 입문서인 이 책은 간결하고 쉬운 설명은 호감이 간다. 그러나 너무나 많은 곳에 틀린 내용과 오자투성이라서 초보인 독자를 곤혹스럽게 한다.

틀린 내용과 오탈자 부분을 이렇게 알리는 것은 이미 구입하여 이 책으로 공부하는 분들에게 교정 정보를 제공하여 도움을 주고, 이 분야의 입문서를 구입하려는 분에게는 책을 선정하는 데 있어 참고가 되고, 저자와 출판사에는 각성을 촉구하기 위해서다.

제가 발견한 오류들은 대략 아래와 같다.

 1. 32쪽 4행 : ＜P＞의 align 속성의 속성값이 left, right, center 중의 하나를 선택하라고 되어 있다.

==＞ 하지만, 선택값은 이 말고도 justify도 있다. 이를 포함시켜야 한다. 특어 동양 문화권에서는 중앙 정렬보다 좌우 정렬이 중요한 개념이니 이 속성값을 빼트려서는 안 된다.

 2. 123쪽 7행 : ＜FRAME＞ 태그의 속성으로 TARGET를 소개하고 "링크된 파일의 내용이 어느 프레임에 표시될지 알려 줍니다."라고 설명하고 있다.

==＞ 그러나 ＜FRAME＞ 태그에는 TARGET 속성이 없다. TARGET 속성은 ＜A＞ 등에 있는 속성을 ＜FRAME＞ 태그에도 있는 것인 양 착각하여 설명하고 있다.

 3. 126쪽 16행 -19행 : ＜A＞ 태그의 TARGET 속성에서 사용되는 속성값 _parent와 _top을 설명하면서 똑 같은 기능이라고 이야기하고 있다. _parent는 "현재 프레임 구성을 없애고 브라우저 창 전체에 링크 내용을 표시합니다. _top을 선택할 때와 같습니다"라고 하고, _top는 "현재 프레임 구성을 없애고 브라우저 창 전체에 링크 내용을 표시합니다. _parent을 선택할 때와 같습니다"라고 기술하고 있다.

==＞ 속성값의 역할이 똑같다면, 굳이 같은 속성값을 두 개 만들 이유가 없다. _parent는 현재 문서를 부른 링크가 존재하는 문서에 링크된 내용을 표시하라는 것이고, _top은 프레임을 없애고 웹 브라우저 전체 화면에 링크된 내용을 표시하는 것으로 _blank와 비슷하지만, 새 웹 창을 열지 않는 점이 다르다.

 4. 132쪽 22행 : 2번에서 지적한 대로 ＜FRAME＞태그의 속성으로 ＜TARGET＞를 잘못 들고 있다.

 5. 137쪽 6행 : ＜INPUT＞ 태그의 TYPE 속성의 속성값으로 9개를 예시하는데, image를 빼고 있다.

==＞ 일반적으로 사용하지 않는 file 속성값을 예시하면서 종종 사용하는 image 속성값을 뺀 것은 저자가 의도적으로 빼었다기보다는 실수나 판단 미스로 빠트렸다고 본다.

 6. 151쪽 16쪽 : 배경음악 플레이어 프로그램 exobud_mp33(img2).exe가 부록 CD의 Program 폴더에 있다고 설명하고 있다.

==＞ 그러나 부록 CD의 Program 폴더나 그 하위 폴더, 상위의 다른 폴더를 찾아봐도 전혀 이 파일을 찾을 수 없다. 나중에 알고 보니 Source\폴더의 myJS.exe라는 자체 풀림 실행 압축 파일 안에 압축되어 있었다. 누가 여기에 있을 줄 알았겠는가? 이를 클릭하여 압축을 풀어보니 exobud_mp33(img2).exe가 없고, 이를 bgm 폴더에 압축을 풀어서 저장되어 있었다. 프로그램 소스를 제공하면서 어느 폴더에 저장했는지, 저장했다면, 압축 파일 형태인지, 압축을 해제한 상태로 보관되어 있는지조차 제대로 파악하지 않은 채 부록 CD를 만들고, 책자에서 파일이 있는 위치를 엉터리로 기술하고 있다. 이만큼 출판사와 저자가 책을 날림으로 만들었다.

 6. 176쪽 10행 : color 속성을 설명하면서 사용 가능한 값으로 '색상'과 'inhert'를 들고 있다.

==＞ inhert에 대한 어떤 설명도 없다. 입문용 도서에서 막연히 inhert라고 해도 되는걸까? 이는 영한 사전에도 안 나오는 단어이다. HTML 사전을 찾아보니 '상속받은 값'임을 알 수가 있었다.

 7. 191쪽 3행 : text-indent 속성의 사용례로 P {text-indent:3em }로 들고 있다. 중급자들에게도 생소한 속성값의 단위인 em에 대한 어떤 언급도 없다.

==＞ html 사전을 찾아 보니 em:은 font-size에 대한 상대적인 크기라고 나와 있다. 입문용 도서임을 고려할 때 em에 대한 간단한 설명을 붙이든지 잘 알려진 단위인 px 단위를 써서 예를 보여 주는 것이 나았다.

 8. 193쪽 19-21행 : text-decoration 속성의 값 underline,overline,line-through에 대한 사용례를 "[예] 밑줄을 긋습니다. "와 같이 보여주고 있다.

==＞ "밑줄을 긋습니다"고 하며 예를 보여 준다면 말 그대로 밑줄을 그어 주어야 하는데 말로만 밑줄을 긋는다고 하고 있다. 그만큼 교정에 소흘히 하여 책을 만들었다는 것밖에 안 된다.

 9. 224쪽 20행 : ＜DIV ID="test2"＞라고 기술하고 있다.

==＞ 그러나 그 위에 정의된 외부 레이어 스타일 명칭은 "test"이다. ＜DIV ID="test"＞로 고쳐져야 한다.

10. 231쪽 2행 : 레이어와 스타일 단원의 "정리해 볼까요"에 이런 정리 내용이 나온다. "레이어를 만들 때 사용하는 태그는 ＜DIV＞ 태그와 ＜SPAN＞ 태그인데, ＜DIV ＞태그는 블록 형태를 지니고 ＜SPAN＞ 태그는 단락 중간에 삽입하는 레이어를 만듭니다."

==＞ .그러나 유감스럽게도 "레이어와 스타일" 단원에서는 ＜SPAN＞태그에 대한 소개나 설명이 전혀 없다. 전혀 설명하지 않고 있다가 정리할 때가 되어서야 마치 이미 설명하였던 것처럼 정리하는 지면에서 언급하면 될까? 또 이런 언급을 보면서 초입자는 얼마나 당황할지 저자와 출판사는 좀 생각해 보았으면 한다. ＜SPAN＞ 태그는 중요한 만큼 사전에 꼭 설명이 있어야 한다.

11. 262쪽 20행 : "자바스크립트 인터프리터는 소스에서 사용된 줄바꿈을 중요하게 생각지 않습니다"라고 기술되어 있다.

==＞ 그러나 줄을 바꾸어 표현된 문장을 한 줄로 이어서 쓰려면 문장 구분자인 ;를 사이에 넣어 주어야 하므로 한 줄 바꾼다는 것은 서로 다른 문장임을 자바스크립트 인터프리터에게 알려주는 의미를 지닌다. 따라서, 자바스크립트 소스에서 줄바꿈은 중요하다고 봐야 한다. 줄 바꿈이 중요하지 않는 경우는 C 언어에서처럼 줄을 바꾸어 쓰거나 한 줄로 이어 쓰거나 똑같게 해석될 때이다. 다만, 이와 관련하여 "문장 하나 하나를 줄 바꾸어 표현할 때에는 ;는 붙이는 것은 의미가 없습니다."는 정도의 설명을 해 주면 좋았다.

12. 428쪽 1행,8행,9행 : screen 객체를 Screen 객체로 잘못 쓰고 있다.

==＞ 자바스크립트 언어에서 영어 대문자와 소문자는 구분하여 다른 문자로 인식하므로 Screen 객체는 없고, screen 객체만 있다. 저자는 다음에 설명하는 String 객체의 이름의 첫글자가 대문자로 시작되어 screen 객체도 으레 그러려니 착각해서 오기한 것이 아닌가 한다. 그러나 저러나 제목에서까지 전문 용어를 틀리게 기술하는 것은 이 책이 얼마나 부실하게 만들어졌는지 잘 알게 해 준다.

13. 453쪽 7행 : window.open("poem1.htm", "pop1", "scrollbars=no, toolbars=yes, status)라고 기술되어 있다.

==＞ 그러나 이와 같이 타이핑하여 실행하면 오작동한다. 창의 속성 요소 이름인 toolbar를 toolbars로 잘못 써서이다. 이는 window.open("poem1.htm","pop1","scrollbars=no, toolbar=yes, status=yes")로 고쳐 써야 정상적으로 실행된다.

14. 496쪽 2행 : link 객체를 설명하면서 link 객체와 links 객체를 한데 섞어서 설명하고 있다.

==＞ 같이 설명하는 것은 좋은데, link 객체와 links 객체는 어떻게 다르고 어떤 개념인지 아무런 언급 없이 어떤 곳에는 links 프로퍼티를 설명하고, 이어서는 link 프로퍼티를 이야기하여 입문자에게는 혼란을 가중시킨다. 좀더 구분하여 명료하게 설명하지 않는 것이 아쉽다.

15. 499쪽 1행 : "document.image.length 같은 프로퍼티를 통해 이미지의 개수를 구할 수도 있다"고 설명되어 있다.

==＞ 이미지 정보가 배열 형태로 저장되는 객체의 명칭은 image가 아니고 images이다. 용어를 잘못 쓰고 있다. 이는 document.images.length로 고쳐야 한다.

16. 519쪽 마지막 행 : ＜INPUT NAME="id" TYPE="text" ID="id2" ......＞로 되어 있다.

==＞ 오류가 발생하지는 않겠지만, ＜INPUT＞태그의 NAME의 속성 값과 ID의 속성값을 동일하게 쓰는 관례를 고려한다면, id2는 id의 오기로 생각된다. 이 예제에서 'id2'로 써야 할 이유는 전혀 없다.

17. 543쪽 2행 : "라디오 버튼처럼 여러 가지 요소가 똑같은 이름을 가질 경우에는 배열 형태로 저장되어..."로 설명하고 있다.

==＞ radio 객체를 설명하면서 라디오 버튼에 비교하는 것은 모순이다. radio 객체가 checkbox 객체와 비슷해서 checkbox를 예로 들어 설명하려다가 실수한 것으로 보인다. 위 문장의 '라디오 버튼'은 'checkbox 버튼처럼' 으로 수정되어야 한다.

18. 560쪽 24행 : expireDate.setDate (Date.getMonth() + 1 ) 부분에서 오류가 발생한다.

==＞ 위 문장은 expireDate.setMonth (expireDate.getMonth()+1)로 고쳐야 한다. 다음 쪽 23행의 ＜P＞ 태그에 대응하는 닫는 태그가 없다. ＜P＞를 빼거나 닫는 태그를 넣어 주어야 한다. 더욱 황당한  점은  여기에 기술된 예제 cookies1.htm와 부록 CD의 cookies1.htm은 내용의 많은 부분이 다르다는 것이다. 아마도 저자는 실행되지도 않는 문제투성이의 소스를 출판사에 넘기고 나서 예제를 실행해 보니 오류가 난다는 것을 확인하고, 부랴부랴 예제를 수정하여 CD에만 정상적으로 작동하는 예제를 포함시킨 것으로 추측한다.

지금 언급한 내용들은 이 분야의 초입자로서 이 책을 일독하고 나름대로 문제가 있다고 생각되는 것들이다. 만일에 이 분야의 전문가가 이 책을 읽어보고 검수한다면, 잘못된 내용이나 오탈자를 더 많이 발견해낼지도 모른다.

서두에서도 언급하였지만, 이 책의 설명하는 문체나 내용 구성은 괜찮았다. 그러나 틀린 내용과 오자와 너무나 자주 맞닥뜨렸을 때의 짜증은 이루 말할 수가 없었다. ＜img src= ...＞ 태그 정도밖에 모르는 이 분야의 문외한이 큰 맘 먹고 공부하기 위해 고른 책에서, 책의 타이틀대로 무작정 따라해 보다가 계속 오류가 발생하여 "내 머리가 이상한 걸까? 아니면 내 컴이 귀신 들려서 안 되는 걸까?" 고민하다가 예제 소스가 틀리거나 내용이 잘못되어 오류가 난 것임을 알게 되었을 때 얼마나 허탈한지 출판사 관계자와 저자는 헤아려 주었으면 하는 바람이다.