안정성, 성능, 사용성, 보안, 접근성, 호환성, 검색엔진 최적화 등을 모두 고려해 개선된 웹사이트를 만드는 방법을 설명한다. 쓸모없어진 코드를 최신의 안정적인 웹 표준(XHMTL, CSS, REST 등)으로 바꿀 수 있는 방법을 알려주는 책으로서 기존 사이트를 유지보수하거나 업데이트하려는 웹 디자이너, 개발자, 프로젝트 매니저가 꼭 읽어야 할 필독서다.


[ 소개 ]

여타의 소프트웨어 시스템이 그러하듯이, 웹사이트에도 시간이 지나면서 필요 없는 ‘군더더기’가 쌓인다. 이게 바로 사이트가 느려지는 이유다. 마치 마법처럼 보안과 호환성의 문제가 나타난다. 새로운 기능은 기존 사이트와 잘 연동되지 않는다. 이전처럼 모든 것이 잘 동작하지도 않는다. 이상적으로는 사이트를 처음부터 완전히 새로 만들고 싶을 것이다. 하지만 대개 이것은 불가능한 일이다(이를 위한 돈도, 시간도 없다). 다행스럽게도 해결책은 있다. 여러분은 소프트웨어 개발에서 이미 검증된 테크닉, 툴, 방법들을 사용해 웹 코드를 쉽게 리팩토링할 수 있다.

이 책의 저자인 엘리엇 러스티 해롤드는 『리팩토링 HTML』에서 거의 모든 웹사이트나 웹 애플리케이션을 개선할 수 있는 리팩토링 방법들을 소개하고 있다. 저자는 프로그래머든 아니든 모두에게 좀 더 향상된 안정성, 성능, 사용성, 보안, 접근성, 호환성, 심지어는 검색엔진 최적화를 위해 어떻게 리팩토링해야 하는지를 보여준다. 저자는 쓸모없어진 코드를 어떻게 최신의 안정적인 웹 표준(XHTML, CSS, REST 등)으로 바꿀 수 있는지, 그리고 화면 표시만을 위한 마크업, 많은 스테이트를 가진 애플리케이션, 수많은 태그로 이뤄진 코드 등 만성적인 문제들을 해결하는 방법까지 차근차근 소개하고 있다.

이 책에서 소개하고 있는 성공적인 웹사이트를 위한 상세한 리팩토링의 목록과 실제적인 방법들은 최소한의 노력으로 빠른 시간 안에 최대한의 효과를 볼 수 있도록 잘 정리돼 있다. 이 책을 활용하면 사이트의 성능을 빠르게 개선할 수 있을 뿐만 아니라, 쉽게 사이트를 향상/유지시키고, 수년 후까지도 사용 가능하게 만들 수 있다.


[ 이 책에서 다루는 내용 ]

▶ 리팩토링돼야 할 ‘악취’나는 웹 코드를 알아내는 방법
▶ 오래된 HTML을 단계적으로 유효하고 잘 짜인 XHTML로 변환하는 방법
▶ 현재의 레이아웃을 CSS로 현대화하는 방법
▶ 오래된 웹 애플리케이션을 업데이트하는 방법(POST를 GET으로 교체, 오래된 컨택트 폼의 변환, 자바스크립트의 리팩토링 등)
▶ 컨텐츠와 링크를 시스템적으로 리팩토링하는 방법
▶ 사용자가 사용하는 URL을 바꾸지 않고도 사이트의 구조를 개편하는 방법


[ 이 책의 대상 독자 ]

이 책은 웹 디자이너, 개발자, 프로젝트 매니저, 그리고 현존하는 사이트를 유지보수하거나 업데이트하고자 하는 모든 사람에게 알짜배기 정보를 제공한다. 특히나 HTML을 공부한 지 오래되고 현대의 웹 표준에 부합하는 좋은 예를 통해서 알고 있는 지식을 다시 한 번 정리하고자 하는 사람들에게는 큰 도움이 될 것이다.


[ 이 책에 쏟아진 찬사 ]

정말 대단한 정보와 노하우가 집약된 책이다! 너무나 놀랍다! 엘리엇은 책 이름에는 비할 바 없을 정도의 책을 써냈다. 이 책은 명확하고 명쾌한 어조로 리팩토링을 설명할 뿐 아니라 처음 리팩토링을 접할 때 어떻게 해야 하는지까지 알려준다. 무엇을 어떻게 해야 하는지 정확히 아는 저자가 쓴 책이다. 꼭 읽어보라!

애플리케이션의 품질과 보안을 지속적으로 향상시킬 수 있는 기술과 툴을 알고 있어야 하는 사람들과 함께 일해보고 난 후, 뭔가 빠진 것이 있다는 느낌을 받았다. 애플리케이션을 다시 빌드하고 코드하는 능력은 웹 디자이너와 웹 애플리케이션 개발자가 공통적으로 갖고 있는 가장 큰 약점이다. 리팩토링을 개발 프로세스에 넣음으로써 레이아웃이나 내부 효율을 높이기 위한 소소한 수정들로 인해 전체를 다시 개발하는 불상사를 피할 수 있다. 이 멋진 책은 웹을 리빌드, 리코드, 리팩토링하고자 하는 모든 이에게 도움을 줄 것이다.

엘리엇의 책은 웹 페이지의 품질을 급격히 향상시켜주는 보기 드문 힌트와 기법을 알려준다. 새로 개발하는 것이든 이미 개발된 것이든, 회사 규모에도 상관없이 본격적으로 HTML을 다루는 개발자라면 저자가 알려준 제안 중 일부를 실행하는 것만으로도 엄청난 효과를 볼 수 있을 것이다.


[ 추천의 글 Ⅰ ]

10년 남짓한 기간 동안 웹은 가능성 있는 기술에서 세계 인프라의 중요한 부분으로 급부상했다. 이 놀라운 기간 동안 많은 유용한 리소스가 만들어졌다. 모든 기술이 그렇듯, 우리는 이것을 어떻게 하면 잘 쓸 수 있을지를 배워왔고, 우리가 좀 더 잘 사용할 수 있도록 기술 자체도 무르익었다.

웹 애플리케이션이 아무리 복잡하더라도, 이것은 궁극적으로 공용 웹 페이지 언어인 HTML의 폼 안에서 만나게 돼 있다. HTML은 아주 제한적이고 독특하기는 하지만 결국 컴퓨터 언어일 따름이다. 따라서 시간이 지남에 따라 쉽게 진화할 수 있는 시스템을 만들고자 한다면 HTML을 깔끔하고 이해하기 쉽게 작성하는 데 신경을 써야 한다. 하지만 여타 컴퓨터 언어와 마찬가지로, 아니 작성하는 모든 것이 그렇듯이 처음부터 제대로 하기란 쉬운 일이 아니다. 깔끔한 코드란 따라 하거나 이해하기 쉽게 만들겠다는 의지를 가지고 작성하고 고치기를 반복해야만 나오는 것이다.

코드를 수정하면 버그를 만들어낼 위험이 있다. 몇 년 전 나는 소프트웨어를 가지고 재작업을 할 때 버그를 만들어낼 가능성을 현저히 줄이는 코드 재작성 방법인 리팩토링이라는 테크닉에 대한 책을 썼다. 리팩토링은 일반적인 소프트웨어 언어에 큰 반향을 불러일으켰다. 프로그래머들은 코드를 깔끔하게 만들고 프로그램의 미래 생산성을 향상시키기 위해 리팩토링을 일상적으로 사용하고 있다. 리팩토링 업무를 자동화하고 워크플로를 더욱더 향상시키기 위해 여러 가지 툴도 개발됐다.

리팩토링이 일반적인 프로그래밍을 크게 향상시켰듯이, 기본적인 개념은 HTML에도 동일하게 적용할 수 있다. 리팩토링의 단계는 다르지만 그 저변에 깔린 철학은 동일하다. HTML을 어떻게 리팩토링하는지 배움으로써, 미래에 일어날 수 있는 피치 못할 수정작업을 하기 쉽게 만들고 깔끔한 HTML을 유지할 수 있다. 리팩토링을 통해, 나날이 발전하는 새로운 웹 기술을 웹사이트에서 도입해 사용할 수 있으며, 특히 XHTML과 CSS도 지원할 수 있다.

내 책장에는 엘리엇 러스티 해롤드가 쓴 XML 기술과 XML 프로세싱을 위한 오픈 소스 소프트웨어 관련 책들이 꽂혀 있다. 나는 해롤드를 훌륭한 프로그래머이자 저자로 존경해왔다. 이 책에서도 그는 리팩토링의 혜택을 HTML 세계에서도 적용할 수 있게 끌어올리는 큰 일을 해냈다.



[ 추천의 글 Ⅱ ]

월드와이드웹의 성공 열쇠는 누구라도 웹 페이지를 만들고 모두가 볼 수 있는 곳에 게시하기 쉽다는 점이었다. 사람들이 서로 링크로 연결된 페이지들을 만들어냄에 따라 그들의 웹사이트는 좀 더 많은 사람들에게 유용해졌고, 웹으로 백만장자가 된 사람들의 이야기는 웹 개발자가 더 큰 것을 만들어내도록 꿈을 심어줬다.

하지만 많은 웹사이트가 커져감에 따라 성장통을 겪게 됐다. 수정된 링크는 깨져버리고, 페이지는 브라우저마다 다르게 보였으며, 특히나 전체 사이트에 일관되게 변경사항을 적용하려고 했을 때 무엇이 어디에 있는지조차 알기가 어려워졌다. 물론 이때 웹사이트를 만들어내기 위해 전문가의 도움을 받을 수도 있겠지만, 이 책 『리팩토링 HTML』이 있으면 이제 당신이 그 전문가가 될 수 있다. 당신이 이미 웹 전문가라면 능력을 더욱 향상시킬 수 있다.

웹 기술의 입문서들은 시중에 많이 나와 있지만, 『리팩토링 HTML』은 전문적이고 유지보수가 쉬우며 접근성이 뛰어난 웹사이트를 만들기 위한 모든 핵심 기술의 중급 수준 주제들을 한데 묶어놓은 최초의 책이다. 독자들은 이 책에서 다루는 주제 중 한두 가지 정도에 있어서는 전문가일지 모르나, 이 책의 저자만큼 이 모든 분야를 잘 아는 이는 드물다. 그만큼 이 책의 저자는 이 주제들을 잘 설명하고 있다(나는 XML에 대해서는 상당히 잘 알고 있지만, 이 책은 내가 만든 웹 페이지들에 도움이 될 나의 CSS 버릇을 고칠 수 있는 간단한 길을 보여줬다).

이 책에 나오는 각 제안에서, 저자는 왜 그렇게 하는 게 좋은지에 대한 동기, 제안한 방법을 적용했을 때 생길 수 있는 문제점, 어떻게 적용하면 되는지에 대한 방법을 모두 나열해, 독자로 하여금 각 팁을 적용하는 이유와 방법에 대한 전체적인 그림을 볼 수 있게 했다.

나는 저자의 책을 이미 여러 권 읽어봤다. 『리팩토링 HTML』을 쓰고 있다는 얘기를 들었을 때, 하루 빨리 그의 책을 읽고 싶었고, 먼저 이 책을 볼 수 있어서 기뻤다. 나는 이 책을 통해 많은 것을 배웠고, 독자 여러분도 그럴 것이라 확신한다.

[ 저자 소개 ]

엘리엇 러스티 해롤드(Elliotte Rusty Harold)
세계적으로 유명한 작가이자 프로그래머이며 교육자다. 그의 웹사이트인 Café con Leche(www.cafeconleche.org)는 XML에 대한 가장 유명한 사이트 중 하나다. 또한 그는 수많은 책의 저자 또는 공동 저자로, 최근의 저서로는 『Java I/O』(O’Reilly, 2006), 『Java Network Programming』(O’Reilly, 2004), 『Effective XML』(Addison-Wesley, 2003), 『XML in a Nutshell』(O’Reilly, 2002) 등이 있다.


[ 옮긴이의 말 ]

웹은 이제 더 이상 우리와 뗄래야 뗄 수 없는, 세상에서 가장 빠르고 널리 정보를 교환하는 수단이 됐다. 하지만 그 대단한 영향력과는 달리 웹은 많은 개발자에게 여타 영역에 비해 홀대받는 분야였다. 대충 작성해도 어느 정도 마음에 들 만한 화면을 보여주는 HTML의 관대함 때문일 수도 있을 것이다. 이 때문에 웹은 최적화되지 못한 코드와 난잡한 화면, 특정 브라우저의 특정 환경에서만 작동하는 까탈스런 사이트들의 집합이 되어가고 있다. 이제는 웹에서도 리팩토링이 필요할 때다.

얼마 전부터인가 소프트웨어 엔지니어링, 그중에서도 리팩토링에 관한 수많은 책들이 쏟아져나오는 동안에도 웹사이트의 리팩토링을 다룬 책은 찾아보기 어려웠다. HTML의 리팩토링은 다른 어떤 언어보다도 많은 것을 고려해야 한다. 이 책은 웹사이트를 XHTML 기반으로 웹 표준에 맞춰 리팩토링하고 사용자들의 접근성과 사용성을 극대화하기 위한 작업에 가뭄의 단비와 같은 실제적인 가이드를 제시해줄 것이다. 또한 이 책에 담겨 있는 다양한 팁과 고려사항은 새로 웹사이트를 구축할 때도 활용할 수 있다.

이 책에서 소개하는 리팩토링의 방법과 조언 모두 한국의 웹 개발자에게는 그다지 친숙하지 않을 수도 있다. 우리가 아무 생각 없이 사용하던 이미지 한 장, 플래시 파일 한 개마저도 이 책에서는 모두 개선의 대상이기 때문이다. 혹자는 액티브X와 플래시가 난무하는 우리의 웹 환경에서 이러한 것들은 ‘좀 과하지 않은가?’라고 느낄 수도 있다. 하지만 이는 우리가 알고 개발해온 웹사이트들이 그만큼이나 많은 문제를 안고 있고, 개선의 여지가 크다는 방증이 아닐까?

리팩토링은 하루 아침에 되는 게 아니다. 욕심을 버리고 조금씩 진행하자. 적용이 어렵다 싶은 부분은 건너뛰고 할 수 있는 부분부터 시작하자.

이 책을 통해 좀 더 나은 웹 환경을 만들어갈 모든 웹 개발자에게 이 책을 바친다.


[ 옮긴이 소개 ]

김인교
웹과 게임 개발에 관심이 많으며 반지의 제왕 3 등의 모바일 게임과 건그리폰 등의 Xbox용 게임 개발에 참여했다. 참여한 웹 프로젝트로는 대한화재, 서울 프라자 호텔 등이 있으며 현재는 삼성전자 기술총괄에서 연구원으로 일하고 있다. 저서로는 『위피 모바일 게임 프로그래밍』이 있다.

목차

• 1장 리팩토링
• 1.1 리팩토링을 하는 이유
  • 문제점: 코드를 읽기가 어렵다
  • 문제점: CEO가 자신의 여행경비서류를 작성하지 못한다
  • 문제점: 페이지 로딩이 느리다
  • 문제점: 브라우저마다 다르게 보인다
  • 문제점: 위험하거나 표준이 아닌 기술을 사용한다
  • 문제점: 회사 홈페이지에 ‘천재 해커님 왔다감’이라는 문구가 있다
  • 문제점: 홈페이지 검색 결과는 구글에서 17번째 페이지에 처음 등장한다
  • 문제점: 사용자에게서 웹사이트에 오류가 있다는 메일을 받았다
• 1.2 리팩토링을 하는 시점
• 1.3 리팩토링의 대상
  • 왜 XHTML인가?
  • 왜 CSS인가?
  • 왜 REST인가?
• 1.4 리팩토링에 대한 반대 의견
  
• 2장 툴
• 2.1 백업, 스테이징 서버, 소스코드 컨트롤
• 2.2 밸리데이터
  • W3C 마크업 유효성 검사 서비스
  • 로그 밸리데이터
  • xmllint
  • 편집기
• 2.3 테스팅
  • JUnit
  • HtmlUnit
  • HttpUnit
  • JWebUnit
  • FitNesse
  • Selenium
  • 테스트 시작하기
• 2.4 정규표현식
  • 검색
  • 검색 패턴
• 2.5 타이디
  • -asxhtml
  • -clean
  • 인코딩
  • 예쁘게 출력하기
  • 생성된 코드
  • 라이브러리로 사용하자
• 2.6 태그수프
  • 태그수프와 타이디의 비교
• 2.7 XSLT
  
• 3장 잘 짜인 문서
• 3.1 잘 짜인 문서란 무엇인가?
• 3.2 이름은 소문자로 바꾼다
  • 의도
  • 발생 가능한 문제점
  • 방법
• 3.3 속성 값은 따옴표로 표시한다
  • 의도
  • 발생 가능한 문제점
  • 방법
• 3.4 빠진 속성 값은 채워넣는다
  • 의도
  • 발생 가능한 문제점
  • 방법
• 3.5 빈 태그는 빈 엘리먼트 태그로 교체한다
  • 의도
  • 발생 가능한 문제점
  • 방법
• 3.6 끝태그를 추가한다
  • 의도
  • 발생 가능한 문제점
  • 방법
• 3.7 겹침을 제거한다
  • 의도
  • 발생 가능한 문제점
  • 방법
• 3.8 텍스트를 UTF-8로 변환한다
  • 의도
  • 발생 가능한 문제점
  • 방법
• 3.9 ‘<’를 이스케이프한다
  • 의도
  • 발생 가능한 문제점
  • 방법
• 3.10 앰퍼샌드를 이스케이프한다
  • 의도
  • 발생 가능한 문제점
  • 방법
• 3.11 속성 값의 따옴표를 이스케이프한다
  • 의도
  • 발생 가능한 문제점
  • 방법
• 3.12 XHTML DOCTYPE 선언을 사용한다
  • 의도
  • 발생 가능한 문제점
  • 방법
• 3.13 각 엔티티 참조를 끝낸다
  • 의도
  • 발생 가능한 문제점
  • 방법
• 3.14 가상의 엔티티 참조를 교체한다
  • 의도
  • 발생 가능한 문제점
  • 방법
• 3.15 루트 엘리먼트를 적용한다
  • 의도
  • 발생 가능한 문제점
  • 방법
• 3.16 XHTML 네임스페이스를 삽입한다
  • 의도
  • 발생 가능한 문제점
  • 방법
    
• 4장 유효성
• 4.1 transitional DOCTYPE 선언을 도입한다
  • 의도
  • 발생 가능한 문제점
  • 방법
• 4.2 존재하지 않는 모든 태그를 제거한다
  • 의도
  • 발생 가능한 문제점
  • 방법
• 4.3 alt 속성을 추가한다
  • 의도
  • 발생 가능한 문제점
  • 방법
• 4.4 embed를 object로 바꿔준다
  • 의도
  • 발생 가능한 문제점
  • 방법
• 4.5 strict DOCTYPE 선언을 도입한다
  • 의도
  • 발생 가능한 문제점
  • 방법
• 4.6 center을 CSS로 교체한다
  • 의도
  • 발생 가능한 문제점
  • 방법
• 4.7 font를 CSS로 교체한다
  • 의도
  • 발생 가능한 문제점
  • 방법
• 4.8 i를 em 또는 CSS로 교체한다
  • 의도
  • 발생 가능한 문제점
  • 방법
• 4.9 b를 strong 또는 CSS로 교체한다
  • 의도
  • 발생 가능한 문제점
  • 방법
• 4.10 color 속성을 CSS로 교체한다
  • 의도
  • 발생 가능한 문제점
  • 방법
• 4.11 img 속성을 CSS로 변경한다
  • 의도
  • 발생 가능한 문제점
  • 방법
• 4.12 applet을 object로 교체한다
  • 의도
  • 발생 가능한 문제점
  • 방법
• 4.13 프리젠테이션 엘리먼트를 CSS로 변경한다
  • 의도
  • 발생 가능한 문제점
  • 방법
• 4.14 인라인 엘리먼트는 블록 엘리먼트 안에 배치한다
  • 의도
  • 발생 가능한 문제점
  • 방법
    
• 5장 레이아웃
• 5.1 테이블 레이아웃을 교체한다
  • 의도
  • 발생 가능한 문제점
  • 방법
• 5.2 프레임을 CSS 포지션으로 교체한다
  • 의도
  • 발생 가능한 문제점
  • 방법
• 5.3 컨텐츠를 앞으로 이동시킨다
  • 의도
  • 발생 가능한 문제점
  • 방법
• 5.4 리스트는 리스트로 마크업한다
  • 의도
  • 발생 가능한 문제점
  • 방법
• 5.5 blockquote/ul 들여쓰기를 CSS로 교체한다
  • 의도
  • 발생 가능한 문제점
  • 방법
• 5.6 스페이서 GIF를 교체한다
  • 의도
  • 발생 가능한 문제점
  • 방법
• 5.7 ID 속성을 추가한다
  • 의도
  • 발생 가능한 문제점
  • 방법
• 5.8 이미지에 너비와 높이를 추가한다
  • 의도
  • 발생 가능한 문제점
  • 방법
    
• 6장 접근성
• 6.1 이미지를 텍스트로 변환한다
  • 의도
  • 발생 가능한 문제점
  • 방법
• 6.2 폼 입력 필드에 레이블을 추가한다
  • 의도
  • 발생 가능한 문제점
  • 방법
• 6.3 표준 필드 이름을 사용한다
  • 의도
  • 발생 가능한 문제점
  • 방법
• 6.4 자동완성을 사용한다
  • 의도
  • 발생 가능한 문제점
  • 방법
• 6.5 스킵 내비게이션을 적용한다
  • 의도
  • 발생 가능한 문제점
  • 방법
• 6.6 폼에 탭 인덱스를 추가한다
  • 의도
  • 발생 가능한 문제점
  • 방법
• 6.7 내부 헤딩을 적용한다
  • 의도
  • 발생 가능한 문제점
  • 방법
• 6.8 중요 컨텐츠는 링크와 헤드라인 앞쪽으로 이동시킨다
  • 의도
  • 발생 가능한 문제점
  • 방법
• 6.9 입력 필드를 더 크게 만든다
  • 의도
  • 발생 가능한 문제점
  • 방법
• 6.10 ???
  • 의도
  • 발생 가능한 문제점
  • 방법
• 6.11 Acronym 엘리먼트를 사용한다
  • 의도
  • 발생 가능한 문제점
  • 방법
• 6.12 lang 속성을 사용한다
  • 의도
  • 발생 가능한 문제점
  • 방법
    
• 7장 웹 애플리케이션
• 7.1 안전하지 않은 GET을 POST로 교체한다
  • 의도
  • 발생 가능한 문제점
  • 방법
• 7.2 안전한 POST를 GET으로 교체한다
  • 의도
  • 발생 가능한 문제점
  • 방법
• 7.3 POST를 GET으로 리다이렉트한다
  • 의도
  • 발생 가능한 문제점
  • 방법
• 7.4 캐싱을 사용 가능하게 한다
  • 의도
  • 발생 가능한 문제점
  • 방법
• 7.5 캐싱을 방지한다
  • 의도
  • 발생 가능한 문제점
  • 방법
• 7.6 ETag를 사용한다
  • 의도
  • 발생 가능한 문제점
  • 방법
• 7.7 플래시를 HTML로 교체한다
  • 의도
  • 발생 가능한 문제점
  • 방법
• 7.8 웹폼 2.0 타입을 추가한다
  • 의도
  • 발생 가능한 문제점
  • 방법
• 7.9 컨택트 폼을 mailto 링크로 교체한다
  • 의도
  • 발생 가능한 문제점
  • 방법
• 7.10 로봇을 막는다
  • 의도
  • 발생 가능한 문제점
  • 방법
• 7.11 사용자 입력을 이스케이프한다
  • 의도
  • 발생 가능한 문제점
  • 방법
    
• 8장 컨텐츠
• 8.1 맞춤법 오류를 수정한다
  • 의도
  • 발생 가능한 문제점
  • 방법
• 8.2 깨진 링크를 수정한다
  • 의도
  • 발생 가능한 문제점
  • 방법
• 8.3 페이지를 이동한다
  • 의도
  • 발생 가능한 문제점
  • 방법
• 8.4 인트로 페이지를 제거한다
  • 의도
  • 발생 가능한 문제점
  • 방법
• 8.5 이메일 주소를 인코딩한다
  • 의도
  • 발생 가능한 문제점
  • 방법
    
• 부록 A 정규표현식
• A.1 자신과 정확히 일치하는 문자
• A.2 메타문자
• A.3 와일드카드
• A.4 정량자
  • 0 또는 1: ?
  • 0 또는 그 이상: *
  • 1 또는 그 이상: +
  • 특정한 수만큼의 반복: {}
• A.5 클래스 줄임명령어
• A.6 문자 클래스
• A.7 그룹과 백 레퍼런스
• A.8 공백
• A.9 alternation: |
• A.10 그리디와 비그리디 매칭