[팁] 인상 좋은 홈페이지 만들기

1999. 1. 12. 오전 3:47:32

글자

만나면 반가운 인상 좋은 홈페이지 꾸미기

인기 홈페이지의 자격은 간단! 단순하고 깨끗하고 사용하기 쉽고 항상 새로운 느낌을 주는 것이다. 그러려면 신경써야 할게 한둘이 아니다. 여기 편리하게 사용할 수 있는 테크닉과 함께 산뜻하게 디자인할 수 있는 비법, 그리고 재미있는 이미지 맵에 대해 알아보자.

홈페이지를 방문하다 보면 어떤 홈페이지는 정말 갈 때마다 기분 좋고 산뜻한 느낌을 받는 반면 어떤 홈페이지에는 정말 갈 때마다 짜증이 나고 허무감마저 드는 곳도 있다. 만약 어떤 홈페이지를 처음 방문했을 때 후자와 같이 좋지 못한 느낌을 받았다면 다시는 그 홈페이지에 가지 않을 것이다. 이렇듯 홈페이지에서는 결코 방문자에게 반감을 살 행동을 해서는 안된다.

업데이트를 자주 하자 자주 자주 업데이트를 해야 함은 홈페이지 관리에 있어서 기본. 보통 홈페이지를 한 번 만들고 특별한 변화가 있기 전에는 업데이트를 하지 않는 경우가 많은데, 그렇게 되면 그 홈페이지에 방문했을 때 마치 오래된 낡은 집에 방문한 듯한 케케묵은 느낌을 받게 된다. 겨울이 다 돼 가는데 아직도 "여름 방학 잘 보내세요~" 등의 카피 문구가 있다면 보는 사람으로 하여금 실소를 금치 못하게 할 것이다.

공사는 되도록 빨리 마치자 홈페이지는 시간을 투자하면 투자할 수록 더 좋아지는 법이다. 사실 좋은 홈페이지를 만들려면 멋진 테크닉이나 기교보다는 세심한 정성과 끈질긴 노력이 필요하다. 보통 홈페이지를 만들기 전에 전체적으로 어떻게 만들겠다는 구상을 미리 해놓고 시작하는데, 이러한 상황으로 인해 예상과 달리 시간이 없어서 또는 작업의 지루함에 지쳐서 미완성인 채로 홈페이지 제작이 일단락되는 경우가 많다. 이렇게 되는 경우 보통 '공사중'이라는 문구나 공사중 마크, 또는 클립아트 등을 이용해 임시적으로 무마시켜 놓는데, 많은 홈페이지에서 이 공사중이 평생(?)가는 경우가 많다. 공사중인 곳은 공사를 되도록 빨리 마무리시켜야 된다. 만약 어떤 사람이 홈페이지를 방문했는데 공사중이라는 문구를 보고 다음 기회에 다시 찾아왔다고 하자. 그런데 여전히 공사중이라고 한다면 그때의 허망함으로 인해 홈페이지에 대한 나쁜 인상을 갖게 될 것이다. 그렇기 때문에라도 공사는 최대한 빨리 마무리해야 한다.

불필요한 자바 애플릿 사용을 자제하자 자바 애플릿을 이용하면 객체지향 언어인 자바를 이용해 마치 일반적인 프로그래밍을 하듯 별다른 제약없이(물론 많은 제약이 있지만....) 게임 등 애플리케이션을 구현할 수 있다. 하지만 자바 애플릿은 그 실행 속도가 무척 느리다. 필요하지도 않은 부분까지 자바 애플릿을 사용하면 그 로딩 속도로 인해 홈페이지를 위한 자바 애플릿이 오히려 자바 애플릿을 위한 홈페이지가 되고 말 것이다. 불필요한 곳에는 절대 자바 애플릿을 사용하지 말자.

60KB 넘는 홈페이지는 정말 곤란 월간 <인터넷> 4월호 200페이지를 보면 홈페이지 크기에 대한 기사가 있다. 이를 간추려 보면 홈페이지 크기가 20KB 이하이면 최적화된 페이지이고, 20∼40KB이면 적당한 크기, 40∼60KB는 부담스럽고, 60KB 이상은 도저히 수용할 수 없는 크기의 페이지로 분류돼 있다. 물론 꾸미기를 위해서는 적당량의 크기가 필수적이긴 하지만 크기가 작을수록 전송 속도도 빠르다. 세계적으로 유명한 기업의 사이트(월간 <인터넷> 4월호 201페이지)를 보면 썬은 55.3KB, 마이크로소프트는 54.9KB, 넷스케이프는 53.1KB, IBM의 경우에는 51.4KB, 그리고 야후의 홈페이지는 19.6KB다.

저작권 문제를 확인하라 보통 홈페이지를 만들 때 움직이는 GIF 파일 등 각종 이미지나 클립아트 등은 다른 곳에 있는 것을 다운로드받아서 쓰는 경우가 많다. 그런데 이는 무척 위험한 일이다. 인터넷에 있는 자료들은 모두 공개돼 있는 것처럼 보이지만 실은 아닌 것도 많기 때문이다. 실제 사례를 볼 때 국내의 어떤 사람이 미국의 모 컴퓨터 잡지의 홈페이지에서 그림과 기사의 일부를 자신의 홈페이지에 기재한 일이 있었다. 그러다가 그 잡지 회사의 간부가 우연히 검색엔진을 통해 그 기사에 대한 부분을 검색하다가 그 사람의 홈페이지를 보게 된 것이다. 그 결과 그 사람은 경고장을 받고 여기 저기에 사과 메일을 보내는 등 곤욕을 치뤄야 했다. 이를 방지하려면 항상 다른 홈페이지의 모든 리소스를 가져다 사용하기 전에 미리 양해를 구해서 허락을 받은 후에 사용해야 한다. 항상 저작권 문제를 신중히 검토해야 할 것이다.

<TABLE> 태글 깔끔&깨끗한 표 만들기 어떤 디자인이던지 같은 기능과 틀을 가지고도 그 홈페이지를 만드는 사람의 번뜩이는 아이디어에 따라 천차만별로 느낄 수 있는 것이 홈페이지다. <TABLE> 태그에 있어서도 예외는 아닌데, 흔히 시간표와 같은 표를 만들 때 사용하는 <TABLE> 태그는 본래의 기능 외에도 잘만 활용하면 그 성능을 200% 발휘할 수 있는 잠재력을 가지고 있다.

가운데 정렬을 변형하라 <CENTER>와 </CENTER> 태그를 이용해 가운데 정렬을 했더니 모든 문장이 가운데 정렬된 모습을 띄고 있다. 하지만 사용자들은 좀더 발전된 형태를 원할 것이다. 이를테면 단순히 가운데 정렬만으로 끝나는 것이 아니라 가운데로 정렬된 상태에서도 앞 줄을 맞춘 그런 형태 말이다. 이럴 때 사용하는 것이 바로 <TABLE> 태그다. 기존 소스에서는 단순히 <CENTER>와 </CENTER>로 정렬했지만 그 사이에 <TABLE><TR><TD>와 </TR></TABLE> 태그를 삽입해보자. 그러면 소스는 다음과 같이 될 것이다.

<TABLE>

<TR>

<TD>

...

(기존에 입력했던 내용)

...

</TR>

</TABLE>

</CENTER>

이런 식으로 소스 사이에 몇 줄을 추가하면 가운데 정렬 문제를 해결할 수 있다. 마치 탭을 사용한 것처럼 똑바로 줄이 맞추어진 깔끔한 결과를 만들 수 있다.

다단편집을 하자

신문을 떠올려 보자. 한 면이 있다고 하면 그 한 면을 왼쪽 끝부터 오른쪽 끝까지 한 번에 쓰는 신문은 거의 없다. 보통 다단으로 나누어 신문을 편집하기 마련이다. 이러한 다단편집을 하면 화면을 좀더 효과적으로 구성할 수 있는데, 홈페이지도 이를 구현할 수 있다. 바로 <TABLE>을 이용한 테크닉이다. 프레임을 사용해도 비슷한 효과를 낼 수 있는데 프레임을 쓰면 다단을 나눈 부분에 각기 독립된 HTML 문서가 들어가므로 일반적으로 말하는 다단이라고 할 수 없다.

보통 가로로 둘 또는 세 부분 정도로 나누어 표현하는 효과를 쓰는데 먼저 각각의 단을 표의 셀로 설정해 원하는 내용을 입력하고 표의 외곽선만 없앤다면 훌륭한 다단 편집 효과를 볼 수 있다.

별이 반짝이는 우주를 그리자

표는 정해진 틀이 있긴 하지만 모양이 일정한 것은 아니다. 즉, 가로와 세로 길이와 각 칸 마다의 크기가 항상 가변적일 수 있다는 이야기다. 이를 이용하면 멋진 화면 구성이 가능하다.

만약 우주의 모습을 그린다고 해보자. 화면에 무수히 반짝이는 별과 지구, 달, 화성과 같은 행성들이 들어갈 것이다. 만약 이 모습이 화면에 꽉 찬다고 하면 전체적인 모습을 커다란 이미지로 찍을 것인지 생각해보라. 물론 경우에 따라서는 그럴 수도 있겠지만 이러한 경우는 그럴 필요가 없다. 만약 커다란 이미지를 찍어낸다면 전송 속도에 힘입어 상당한 오버헤드가 생길 것이다. 사용자들은 보통 3초가 지나면 지루함을 느끼기 시작한다고 한다. 과연 3초 내외로 이미지를 전송할 수 있을지는 미지수다. 이러한 상황에서 사용할 수 있는 묘책이 바로 <TABLE>이다.

일단 우주가 배경이므로 반짝이는 작은 별들이 있는 작은 이미지로 배경화면을 반복적으로 찍는다(<BODY>태그 안에 BACKGROUND 옵션을 이용하면 된다). 그리고 테두리가 없는 <TABLE>을 이용(ALIGN 등의 옵션과 함께)해 (그림 1)과 같이 복잡한 모양의 표를 구현하고, 그 표 안의 번호가 있는 위치에 각 행성들의 이미지를 한 칸당 한 개씩 찍는다면 아마도 멋진 우주의 모습을 쉽게 만들 수 있을 것이다.

이미지 맵을 구현해보자

웹서핑을 하다보면 어떤 하나의 커다란 그림이 있지만 그 그림의 어떤 영역을 선택했느냐에 따라 다른 곳으로 링크되는 것을 볼 수 있다. 물론 앞서 소개했던 방식처럼 표를 이용해 구현할 수도 있겠지만, 그렇게 하려면 그림을 잘게 쪼개야 하는 번거로움이 생긴다. 또한 결정적으로 표를 사용하면 이미지를 <A> 태그로 묶게 되므로 클릭할 수 있는 부분이 사각형만으로 이루어질 뿐 원이나 다각형으로는 만들 수 없다. 그렇다면 어떤 방법을 이용하면 이 문제를 해결할 수 있을까? 바로 이미지 맵이 해답이다.

이미지 맵을 만들 수 있는 방법은 크게 두 가지다. 초창기 이미지 맵은 웹서버와 밀접한 관련을 갖고 있기 때문에 홈페이지를 제작하는 사람이 이미지 맵을 추가하려면 관리자에게 이야기를 해야만 가능했다. 그러나 이러한 불편을 없애기 위해 HTML 문법이 버전업되면서 클라이언트에서 스스로 해결할 수 있는 클라이언트 이미지 맵이 나오게 됐다.

일단 이미지 맵에 사용할 그림을 준비한다. 어떠한 그림이라도 괜찮고 부분적으로 마우스로 선택할만한 특징이 있는 그림이면 더 좋겠다. 예제로 여기에서는 (그림 2)와 같은 사진 이미지를 준비했다.

원하는 그림을 선정했으면 그 그림에 있어서 좌표를 설정해야 한다. 즉, 마우스로 그 그림을 클릭했을 때 어떠한 영역을 클릭한 건지에 따라 원하는 곳으로 이동해야 하기 때문이다. 그림의 가장 왼쪽 위 모서리가 (0, 0)의 위치다. 보통 영역으로는 사각형과 원을 많이 쓰므로 그림의 부분에 따라 원하는 모양을 사용해서 영역 좌표를 기억해놓고 있어야 한다. 예를 들어 사각형의 영역이라면 사각형에 있어서 왼쪽 위 좌표와 오른쪽 아래 좌표를 알아야 하고 원 모양이라면 중심의 좌표와 반지름의 길이를 알아야 한다. 그림의 좌표는 보통 페인트 샵 프로 등의 그래픽툴을 이용하면 쉽게 알아낼 수 있다. (그림 2)에서 클릭의 대상은 모두 세 곳이다. 왼쪽에 있는 사람은 (46, 44)∼(87, 146)인 사각형이고, 가운데 있는 사람은 (115, 61)∼(158, 135)인 사각형, 그리고 오른쪽에 있는 사람은 (200, 127)을 중심으로 하고 30의 반지름을 갖는 원으로 그 영역을 그 예로 설정했다.

좌료를 알아냈으면 이제 소스에 <MAP> 태그를 이용해 구현하면 된다. <BODY>와 </BODY> 태그 안에 다음 태그를 끼워 넣는다. HREF 따옴표 안에 있는 내용은 예제이므로 각자 원하는 곳의 URL을 기입하면 된다.

</MAP>

위의 내용은 MAP을 설정하는 부분으로 MAP 이름을 STICKER라고 명명했다. 이는 각자 마음대로 지으면 된다. 그리고 <AREA> 태그를 이용해 영역을 설정했는데 SHAPE은 영역의 모양을 나타내는 것으로 사각형이면 rect을, 원이면 circle을 써주면 된다. 그리고 COORDS는 좌표로서 에서 잠깐 언급했듯이 사각형은 왼쪽 위의 x, y 좌표, 그리고 오른쪽 아래의 x, y 좌표를 연속해서 써주면 되고, 원의 경우에는 중심점의 x, y 좌표, 그리고 반지름의 길이를 연속해서 써주면 된다. HREF는 그 영역을 클릭했을 때 링크되는 주소다.

이런 식으로 하나의 그림에 여러 영역을 설정해줄 수 있다. 단, 영역이 겹치면 안되며 만약 겹치게 되면 어떤 일이 일어날지 아무도 모른다.

마지막으로 <BODY>의 원하는 부분에 해당 그림을 삽입하되 다음과 같이 넣는다. 이왕이면 <MAP> ... </MAP> 뒤에 넣는 것이 좋다.

즉, 이미지를 삽입하는 것은 기존의 방법과 같으나, USEMAP을 이용해 이미지 맵을 적용한다는 정의를 내린 것이다. 주의할 점은 USEMAP의 따옴표 안에 <MAP> 태그에서 NAME으로 설정해준 내용이 들어간다는 것인데 앞에 반드시 '#'을 붙여야 한다는 것이다.

[월간 인터넷]

게시판

게시판

[팁] 인상 좋은 홈페이지 만들기

댓글 0

[테크닉게시판] Q&A