HTML 코딩, 리펙토링 원인 5가지

HTML 코딩, 리펙토링 원인 5가지


HTML5 표준, HTML코딩


리팩토링을 해야 하는 시점인지를 어떻게 알 수 있을까? 코를 찌르는 나쁜 코드의 악취는 어떤 것인가? 나쁜 코드에는 꽤 많은 증상이 있지만, 가장 지독한 것들을 몇 가지 소개한다.


리펙토링 이유1 : 코드를 읽기가 어렵다

가장 눈에 띄는 증상은 웹 페이지에서 소스 보기를 했을 때 마치 그리스어로 쓰인 것처럼 보이는 코드다(물론 당신이 그리스인이라면 얘기가 다르다).


대부분의 코더는 소스를 봤을 때 지저분한 코드를 바로 알 수 있다.


보기 어려운 코드는 읽기도 어렵다. 예제 1.1과 예제 1.2 중에서 당신이라면 어떤 코드를 보겠는가?


어떤 코드가 더 보기 어려운지, 그리고 어떤 코드가 유지보수하기 더 쉬울지 따로 말하지 않아도 알 수 있으리라 생각한다.

예제 1.1 지저분한 코드


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="100%">
<TR><TD WIDTH="70" <A HREF="http://www.example.com/" TARGET="_blank"
>
            <IMG SRC="/images/logo-footer.gif"
HSPACE = 5 VSPACE="0" BORDER="0"></A></TD>
    <td class="footer" VALIGN="top"> &#169;2007 <A HREF="http://
www.example.com/" TARGET="_blank">Example Inc.</A>.
All rights reserved.<br>
        <A HREF="http://www.example.com/legal/index.html"
TARGET="_blank">Legal Notice</A> -
        <A HREF="http://www.example.com/legal/privacy.htm"
TARGET="_blank">privacy policy</A> - <A HREF="http://www.example.com/
legal/permissions.html"
TARGET="_blank">
 
            Permissions</A>
</td>
    </TR></TABLE>
cs


예제 1.2 깔끔한 코드


1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id='footer'>
    <a href="http://www.example.com/">
        <img src="/images/logo-footer.gif" alt="Example Inc."
             width='70' height='41' />
</a>
<ul>
<li>@ 2007 <a href="http://www.example.com/">Example Inc.</a>.
All rights reserved.</li>
<li><a href="http://www.example.com/legal/index.html">
    Legal Notice
</a></li>
<li><a href="http://www.example.com/legal/privacy.htm">
    privacy Policy
</a></li>
cs

 

예제 1.2는 코드를 다시 정렬했을 뿐이지 않으냐고 반문할 수 있다.

실제로 코드가 바뀐 부분도 있다.


예를 들어, 테이블은 div로 바뀌었고 하이픈은 제거됐다. 하지만 예제 1.2는 예제 1.1에서 제거한 포맷팅 부분에 외부 CSS 스타일시트를 사용하는 것을 염두에 뒀다.


이것이 바로 페이지를 리팩토링하고 문서를 정리하는 데 사용할 주요 기술 중 하나다.


리팩토링의 시작, 이름 정리리팩토링의 시작, 이름 정리


새로운 창이나 탭을 여는 속성인 TARGET="_blank"도 제거했다. 이것은 보통, 사용자가 원하지 않는 경우가 많고, 실제로 좋은 생각인 경우도 별로 없다.


사용자는 필요할 경우 뒤로 버튼이나 열어본 페이지 목록을 사용하면 되고, 그렇지 않을 때에는 대부분 링크를 같은 창에서 열면 된다.

사용자가 링크를 새창에서 열고 싶을 경우에는, 오른쪽 클릭을 사용하면 되기 때문에 선택은 사용자의 몫이 된다.


정리작업의 절반은 처음부터 있어서는 안 됐던 부분을 제거하는 것에서 시작한다.


[라인 수]

예제 1.2는 아직 완전히 최적화된 것이 아니다.

한 줄에 80자가 넘어가면 읽기가 힘들어지고 그것 자체로 악취가 나기 시작한다.


컨텐츠 관리 시스템CMS(Content Management System) 등에서 생성된 코드는 예외가 될 수 있다.


이런 경우, 소스 보기로 열어보는 코드는 진짜 코드가 아니다. 컴파일된 머신 포맷일 뿐이다. 이 경우에 보기 좋고 읽기 편해야 하는 것은 CMS에 입력되는 내용이다. 그렇지만 CMS나 웹 편집기 같은 툴들이 깔끔하고 잘 정돈된 코드를 생성한다면 더욱 좋다.

툴이 만들어내는 코드가 작업의 끝이 아니라 시작이라는 사실을 놀랍게도 자주 느끼게 될 것이다.

툴이 생성해 놓은 코드에 스타일 시트나 스크립트 등을 추가하고 싶을 수도 있다.


이 경우에 툴이 생성한 코드를 그대로 다뤄야 하고 깔끔한 코드라면 더 쉽지 않을까.


HTML코딩. Content Management SystemHTML코딩. Content Management System


리펙토링 이유2 : CEO가 자신의 여행경비서류를 작성하지 못한다

웹의 사용성은 지난 몇 년간 발전해왔지만 가능한 만큼, 필요한 만큼에는 미치지 못하고 있다.

대부분 사이트는 개발자와 디자이너가 아닌 사용자에게 포커스를 맞추는 것만으로도 많은 이득을 볼 수 있다.


글자 크기를 키우거나 폼 필드form field를 합치는 등, 사용성 향상을 위한 몇 가지 간단한 수정만으로도 생산성을 몰라보게 향상할 수 있다. 이것은 인트라넷 사이트나 소비자와 직거래하는 사이트 같은 곳에서 특히 중요하다.


리펙토링 이유3 : 페이지 로딩이 느리다

주로 사용되는 브라우저에서 웹 페이지를 표시하는 데 0.5초 이상 걸린다면 문제가 있는 것이다.


많은 경우에 느린 로딩은 네트워크 딜레이나 데이터베이스와 HTTP 서버의 과부하로 인한 것이기 때문에 이 문제는 판단하기가 다소 까다롭다.


보통 이런 문제들은 HTML을 수정한다고 고칠 수 있는 문제는 아니다. 하지만 로컬에 저장된 페이지가 웹 브라우저에 로딩되는 데 0.5초 이상 걸린다면 로딩 시간을 개선하기 위한 리팩토링을 해야 한다.


HTML코딩, 로딩 시간은 짧아야 한다HTML코딩, 로딩 시간은 짧아야 한다


리펙토링 이유 4 : 회사 홈페이지에 천재 해커님 왔다감이라는 문구가 있다

웹사이트의 외부적 손상은 누구나 알아차릴 수 있는 매우 큰 문제다.


이런 상황이 일어나는 데는 여러 가지 이유가 있지만, 가장 흔한 이유는 잘못 개발된 폼 프로세싱 스크립트를 통한 코드 인젝션 공격 때문이다.


솔직히 웹사이트가 외부적인 손상만 입었다면 이 공격을 시도한 해커에게 고마워해야 할지도 모른다.

더 심각한 경우 대외비인 자료를 빼가거나, 중요한 정보를 삭제해버릴 수도 있다.


리펙토링 이유 5 : 홈페이지 검색 결과는 구글에서 17번째 페이지에 처음 나온다

검색엔진에 최적화하는 것은 웹사이트 리팩토링의 가장 중요한 목적 중 하나다. 검색엔진은 이미지보다 텍스트를, 페이지의 후반부에 나오는 문구보다 전반부의 문구가 더 중요하다고 판단한다.


검색엔진은 테이블 레이아웃을 이해하지 못하고, 쿠키나 자바스크립트에도 별 신경을 쓰지 않는다. 하지만 특이한 제목이나 메타태그 같은 것은 굉장히 좋아한다는 사실을 기억해두자.


HTML코딩 기초


효율적인 XHTML 웹 표준 사이트 구축을 위한 리팩토링 HTML, 엘리엇 러스티 해롤드, 에이콘

이 글을 공유하기

댓글(0)

Designed by JB FACTORY