1. Keep It Simple

웹상에서 사용되는 기법들은 무지 많습니다. 프레임, 테이블과 같은 HTML 요소뿐만 아니라, animated GIFs, 자바스크립트, CSS, FLASH, DHTML 등등....

그런데 문제는 너무 이런 기법들에 치우치다보면 정작 중요한 여러분이 웹페이지를 통해 전달하고자 하는 정보를 소홀히 할 가능성이 많아진다는 것입니다. 예를 들어 철학을 다루는 웹페이지에 화려한 DHTML기법을 남발한다면 방문객들의 환영을 받기가 힘들 것입니다.

핵심은 바로 웹페이지에서 다루려는 주제가 무엇인가를 파악하고 간결하고 명쾌하게 이를 전달하는 것입니다. 기법은 이를 보조하는 수단에 그쳐야 한다는 거죠.

2. Simple, Not Boring

Simple이라고 하면 단조로움을 생각하는 분이 많습니다. 그러나 지루함을 주는 단조로움과 심플의 의미는 전혀 차원이 다릅니다.

Simple = 깨끗한 디자인 + 적절한 기술의 사용

오히려 화려함에 치우치기 보다는 심플한 웹페이지가 오히려 정보전달에 유리한 것이죠.

3. Five Fingers

다섯손가락??? 사람들은 보통 5개 혹은 그보다 적은 수의 아이템을 한 그룹으로 인식합니다. 따라서 한 그룹에 너무 많은 아이템을 나열한다면 방문객을 어지럽게 할 수 있죠. 중요한 것은 체계적으로 아이템을 구성, 정렬하는 것입니다.

이것은 웹상이 아니라 일상 생활에도 그대로 적용되는데...

만약 주소록을 만든다면 하위 그룹없이 쭈~욱 아이템을 나열하는 것보다는 친구, 친척, 직장동료,...,... 친구는 다시 동네친구, 학교친구,...,... 식으로 구분해주는 것이 훨씬 효율적인 방법이죠.

반드시 5개 미만의 아이템으로 한 그룹을 만들 필요는 없지만 이러한 원칙을 알고 있으면 좀더 편하고 빠른 인터페이스를 만들 수 있지 않을까 생각됩니다

4. Three Clicks

이것은 Five Fingers와 마찬가지로 약간은 상징적인 표현인데... 방문객이 정보를 찾기 위해 세번의 클릭을 넘지 않도록 하자는 것입니다.

Click...Click...Click...Click...Click... 하는 사이 방문객들은 길을 잃어버리거나 혹은 귀챦기 때문에 여러분의 사이트를 서핑하는 것을 그만두는 경향이 있습니다.

특히 다른 사이트로 링크를 시킬 경우는 단순히 사이트로의 링크보다는 관련된 문서와 직접적으로 연결시켜주는 것이 Click 횟수를 줄일 수 있는 방법이죠

5. 30 Second Attention Spans

30초 이내에 웹페이지의 로딩과 방문객이 다음에 할 일을 결정할 수 있도록 하는 것이 좋습니다. 여기에 수 분을 소비할 사람은 웬만큼 느긋하지 않고는 없을테니까요.

방법은???

1. 웹페이지를 적절한 크기로 유지합니다. 모뎀 사용자까지 고려한다면 30K 보다 적은 정도면 OK!

2. 얼핏 보더라도 어떻게 페이지간의 이동을 할 수 있는 지를 파악할 수 있을 만큼 레이아웃을 명확하게 합니다

6. Words Matter

인터넷상에 올라간 자료들은 여러분도 모르는 사이 여러 사람에게 읽혀질 수 있습니다. 따라서 철자나 문법에 오류가 없도록 좀더 시간을 할애할 필요가 있습니다. 자료를 올리기 전에 다시 한번 읽어보는 습관... 잊지마세요

7. Balance

텍스트와 이미지의 균형 - 과도한 이미지의 사용은 산만한 느낌을 줄 수 있고 반대로 텍스트만으로 이뤄진 문서는 지루함을 가져다 줄 수 있습니다.

다운로드 시간과 페이지 내용의 균형 - 아무리 화려한 기술을 사용하였더라도 로딩에 시간이 너무 오래 걸린다면... 나홀로 홈페이지의 지름길이죠.

백그라운드와 포그라운드의 균형 - 백그라운드 이미지나 색상을 전달하고자 하는 내용과 조화를 이루도록 조절합니다. 검은 색 배경에 검은 색 텍스트를 사용하면 안되겠죠

8. Frames vs. Tables

페이지 이동(navigation)은 프레임을 사용하면 쉽게 해결할 수 있습니다. 하지만 프레임은 로케이션을 고정시켜 방문객이 문서의 위치를 파악하지 못해 헤메게 만들기도 하고, 북마크를 했을 때도 문서자체가 아니라 고정된 로케이션이 되는 등 불편한 점도 많으므로 사용에 주의를 기울여야 합니다.

보통 방대한 데이타를 가진 웹사이트의 경우는 이런한 이유때문에 프레임보다는 테이블을 이용해서 navigation 구조를 만듭니다. 방법은 각각의 페이지를 동일한 구조의 테이블을 사용해서 만들고 그 중 한쪽 셀에 navigation 구조를 집어 넣는 거죠.

어떻게 보면 약간은 깔끔하지 못하다고 생각할 수도 있지만 유리한 점도 많은 방법입니다. (예: 노상범님의 엉망진창 웹페이지 만들기)

그러나 항상 navigation 구조가 보이도록 하고 싶다면 프레임을 사용해야만 합니다.

9. Frames in Moderation

프레임의 남용은 자제해야 합니다. 보통 프레임은 3개를 넘지 않도록 하는 것이 좋습니다. 그 이상의 프레임을 사용하면 화면이 지저분해 질 가능성이 많습니다.

여러분의 컴퓨터에서는 제대로 보일 지 모르지만 만약 14인치 모니터를 사용하는 방문객이라면 엉망이 된 문서를 보고 눈쌀을 찌푸릴 것입니다

10. Learning More

웹페이지를 만든다는 것은 꾸준한 배움의 과정입니다. 하루가 다르게 기술과 도구가 변하기 대문에 조금이라도 이를 소홀히 하면 금방 뒤처지게 되는 것이죠. 위대한 소설가가 되려면 위대한 소설을 많이 읽어야 하고, 위대한 극작가가 되려면 위대한 영화를 많이 봐야 하는 것처럼 여러분의 웹사이트를 멋있게 만들려면 다른 웹사이트들을 많이 볼 필요가 있습니다.

또한 제대로 찾기만 한다면 책보다 훨씬 최신의 정보를 얻을 수 있을 것입니다.

어느 정도의 시간은 항상 웹서핑에 투자하는 것... 잊지마세요

daum 칼럼(HTML의 전설)