|
웹디자인이란 무엇인가?
웹디자인이란 쉽게 말해 홈페이지를 어떻게 만드느냐 하는 것이다. 홈페이지는 텍스트뿐만 아니라 이미지, 사운드, 동화상 등의 여러 가지 형태의 멀티미디어 요소뿐만 아니라 사용자와 서버와 의 인터랙티브한 동작을 위하여 CGI프로그래밍, Java, Java-script등의 프로그래밍 지식이 필요합니다. 또한 홈페이지 서비스를 제공하기 위해 유닉스나 윈도우즈NT 기반의 웹 서버를 운영하고 관리할 수 있는 시스템 매니지먼트 기술도 필요하다. 이와같이 웹에 관련된 모든 일을 처리하고 총괄하는 사람을 (웹 마스터)라고 합니다. 웹디자이너와 웹마스터와는 서로의 영역을 어느 정도 공유하면서도 담당하고 있는 분야의 비중이 서로 사뭇 다릅니다. 웹 마스터라고 하면 일반적으로 그래픽이나 웹오쏘링에 관한 일반적인 지식을 갖고 있으면서 전문적인 컴퓨터 운용기술을 구사하는 사람입니다.
웹 디자이너라고 하면 실제 웹 오쏘링에서 웹의 구성과 기획 그리고 홈페이지의 디자인과 그래픽을 담당하는 사람을 웹 디자이너라고 한다. 또한 웹을 직접 만드는 것이 아니고 웹 싸이트를 기획하고 컨텐트를 발굴하는 사람을 웹 디렉터라고 합니다. 신속성 웹페이지를 로딩함에 있어서 속도는 생명입니다. 사람마다 다 다르겠지만 한 페이지가 20kb 정도를 넘어서게 되면 로딩이 느리게 된다. 자신이 방문객이라고 생각할 때 페이지가 느리게 로딩되면 짜증날 것입니다. 항상 방문객 중심으로 생각하는 자세가 중요합니다.
정확성
- 인류의 수많은 사람들이 방송매체 및 서적등을 통하여 정보와 지식을 습득하게 됩니다. 그와 다를 바 없이 네티즌 (Netizen)들은 인터넷상의 수많은 웹페이지를 통하여 정보와 지식을 습득하게 됩니다. 방송이나 서적등에서 모순된 사실이 발견되면 신뢰를 잃게 되어 다음부터 그 매체를 이용하지 않는 것과 같이 웹문서에서도 정확하지 않은, 모순된 정보를 발견하게 될 시에는 네티즌들의 시기와 욕을 사게 되고 급속도로 방문객을 잃게 됩니다.
적합성
- 만약 여름을 소개하는 홈페이지를 제작하려고 하는데 흰색, 검정색, 보라색 등과 같은 색상을 넣어 디자인을 한다면 뭔가 어색함을 느끼겠죠. 이와 같이 홈페이지의 주제와 특성에 맞는 디자인을 해야 합니다. 그래야 제작자가 웹페이지를 통해서 알리고자 하는 세계에 방문객이 더욱 이끌릴수 있습니다.
명료성
- 쓸데없이 복잡하게 꾸민다면 시선의 초점을 잃게되며 알리고자 하는 주제를 벗어난 분위기를 연출하게 됩니다. simple하면서도 주제를 잘 드러내는 것이 훌륭한 웹디자인이라 할 수 있습니다.
일관성
- 서브페이지들이 인덱스페이지와 일관성있게 디자인 되어야 합니다. 다르게 말하면 테마성이 있는 웹페이지가 더욱 흥미를 이끌 수 있습니다.
홈페이지를 제작함에 있어서 교과서 처럼 꼭 순서가 있는 것은 아닙니다. 단지 제작하기가 한결 쉬워지고 제작순서또한 빨라 질 수 있습니다.
ㅇ 웹디자인의 순서
1. 주제설정
- 어떤 홈페이지를 제작할 것인지 주제를 설정합니다.
2. 자료조사
- 주제에 해당하는 모든 자료를 있는대로 수집합니다.
3. 기술적인 기준설정
- 어떤 기술을 이용하여 제작할 것인지 설정해둡니다.
4. 제작기간설정
- 365일 하루종일 홈페이지 만들거 아니죠? 기간설정을 해두어서 체계적인 제작이 될 수 있도록 합니다.
5. 개요작성
- 글짓기에 있어서 개요작성하는 것과 같습니다. 메뉴는 어떻게 구성할 것인지 하위분류에는 어떤 자료를 넣을 것인지 구상합니다.
6. 실제제작
7. 베타테스트,오류체크
8. 웹에 탑재
9. 사용자테스트
10. 최종오류체크,보수
ㅇ 웹디자인시 주의점
1. 로딩 속도를 고려한다.
전용선이나 ISDN 등 요즘은 모뎀을 쓰지않는 사람도 많습니다. 그렇지만 웹제작자는 항상 최고의 열악한 환경의 사람들도 고려해야 하는 법. 접속후 30초가 지나도 버벅대고 뜨고 있다면 바로 떠날 수 밖에 없습니다. 웹은 접속하기도 쉽지만 떠나 기도 쉽다는 점을 명심합시다.
2. 사용자의 컴퓨터 화면상태를 감안하여 작업한다.
최하의 화면모드는 640*480입니다. (외국의 경우는 이 모드로도 많이 접속을 합니다.) 최소한 800*600모드의 사용자를 고려하 여 너무 큰 화면구성은 피해야 합니다. 또한 256모드의 사용자도 고려하여 지나치게 많은 칼라를 사용하는 것은 무리입니다. 또한 본인의 PC에는 있지만 상대방에는 없는 폰트롤 사용하면 제작시의 화면과 보는사람의 화면이 다르기 때문에 기본폰트 를 사용하는 것이 좋습니다.
3. 메뉴의 이동을 최대한 간편하게 한다.
메인메뉴와 서브메뉴과 규칙적으로 펼쳐지며 한눈에 보일 수 있도롤 화면구성을 만들어야 합니다. 또한 관련된 메뉴들에 대 한 짜임새 있는 구성과 구조를 만들어 이용자가 쉽게 메뉴를 찾을 수 있도롤 해야 합니다.
4. 현재 보고있는 메뉴에 대한 위치확인이 용이하게 한다.
한 사이트를 여기저기 보다보면 현재 어디에 와 있는지 헷갈릴 때가 있습니다. 그러므로 선택된 메뉴가 색상이 반전되어 있 다던지 하는 표시를 해 주는 것이 좋습니다. 너무 복잡한 경우에는 사이트맵을 꼭 만들어야 합니다.
5. 모든 브라우져에서 테스트를 해 본다.
넷스케이프와 익스플로러에서는 소스를 해석하는 방법이 좀 틀립니다. 이용자가 어떤 환경을 이용하고 있는지 모르므로 모든 브라우져로 테스트를 한 후에 올려야 합니다. 그렇지않으면 메인화면에 "이 화면은 브라우져 0000기준으로 작성되었습니다." 라는 문구를 미리 명시 해 주는 것도 좋은 방법입니다.
6. 스크롤이 지나치에 많이 생기지 않게 한다.
화면상 보이는 내용을 스크롤을 해서 볼 확률은 많지 않다고 합니다. 적당히 나누어 페이지를 배분해야하며 많이 그렇게 하기 싫다면 밑에 top버튼이라도 만들어 줍시다.
7. 가로 스크롤은 피한다.
가로로 스크롤 시킨다는 것은 정말 원초적인 실수입니다. 어느누구라도 가로로 스크롤을 해서 보고 싶지는 않을 것입니다. 자칫 불쾌감을 줄 수도 있구요.
8. 지나치게 화려한 디자인은 피한다.
웹은 종이와는 달리 화면에 보이는 디자인에 상당히 예민합니다. 그만큼 쉽게 질리고 눈에 부담이 되기도 하지요. 깔끔하고 단정된 화면이 질리지도 않고 편안하게 볼수 있는 디자인입니다. 속도 또한 고려하여 절제되고 깨끗한 화면을 만드는 것이 중요합니다.
9. 스크립트나 자바 애플릿등을 남용하지 않는다.
불필요한 자바 애플릿등을 띄우는 것은 보기에도 않좋을 뿐 아니라 속도에도 영향을 줍니다. 필요한 최소한의 스크립트만 사 용하는 것이 좋습니다.
10. 사운드 사용을 적절하게 사용한다.
효과음을 제외한 모든 사운드는 불필요하게 사용되는 경우가 많습니다. 자주 들어오는 사람이 그 음악에 질려 들어도기 싫은 경우도 있겠지요!
11. 차후 업데이트를 고려하여 제작한다.
제작 초기에 업데이트를 고려한 후에 그래픽 작업을 합니다. 구축 후에 클라이언트축에서 유지보수를 맏게 되었다면 그래픽 전문가가 없는 회사일 경우 미숙한 그래픽 처리로 홈페이지를 망쳐버리는 경우가 많습니다. 가변성있는 메뉴들을 텍스트 처 리를 할 것인지 이미지로 할 것인지 심사숙고하여 결정합니다.
12. 작업문서에 네이밍룰을 만든다.
body01a.htm, body01b.htm.... 이렇게 이름에 일정한 규칙을 주면 차후 업데이트시에 화일을 쉽고 빠르게 찾을 수 있으며 분 류하기도 쉬워집니다.
13. 링크의 칼라를 임의로 마구 바꾸지 않는다.
링크릐 기본칼라는 파란색입니다. 또한 밑줄이 있습니다. 이 기본사항은 인터넷에 미숙한 사람들이 자칫 다른 칼라로 변해 있는 경우 착각을 하게 만들 수도 있습니다. 불필요한 밑줄도 피하는 것이 좋습니다. 다만 밑줄이 없고 칼라가 다르다 하더 라도 누가봐도 "아, 이것은 링크구나" 라고 느낄 수 있게 화면을 정돈한다면 문제가 되지느 않겠지요.
14. 지나치게 많은 새창을 열지 않는다.
누를때마다 새창이 열리면 이용자가 짜증이 나게 됩니다. 2번 이상을 열리지 않도록 합시다.
15. 전체 이미지의 통일성을 고려한다.
화려하게 디자인 한다고 이화면 저화면을 각각 개성있게 꾸며 이사이트가 아까 그 사이트와 같은 곳인지도 모르게 착각할 만큼 어지려운 화면을 오히려 역효과를 냅니다. 한 사이트에는 통일된 포인트나 칼라배색을 사용하는 것이 좋습니다. 그래픽은 크게 4가지로 나뉩니다. GIF, Animation GIF, JPG, SWF(shockwave animation)이지요. 각각에 대한 간략한 설명을 드리겠습니다. GIF 256color이하로 표현되는 그래픽 파일포맷입니다. 이것은 일반적으로 브라우져에 띄우게 되는 그림들입니다.
포토샵에서 저장시에 interace를 체크하면 브라우져에 뜰때 이미지가 서서히 선명하게 보이게 됩니다. 또한 Export >GIF89 Export를 선택 하신 후에 원하는 색상을 찍으면 그 부분을 투명하게 할 수도 있습니다. JPG 손실압축기법을 이용한 이미지 파일포맷입니다. 즉 저장할 때마다 화질이 떨어진다는 뜻이지요. 256칼라 이상을 지원하기 때 문에 사진이나 그라데이션 등 세밀한 그림팩을 띄울 때 JPG가 적당합니다. 포토샵에서 저장할 때에 압축률을 선택할 수 있 습니다.
Animation GIF GIF화일들을 한 컷 한 컷 그려서 에니메이션으로 만든 화일입니다. 플러그인도 필요업소 다양한 온라이 에플리케이션에 의 해 지지되고 있기 때문에 매우 선호되는 에니메이션 파일입니다. 그러나 너무 많은 컷의 에니메이션은 용량을 많이 차지하기 때문에 피하는 것이 좋습니다. SWF Macromedia Flash라는 프로그램으로 생성하는 에니메이션입니다. 벡터방식으로 에니메이션의 양에 비해 용량이 작으며 에니 메이션도 자연스러워 많이 사랑받고 있는 파일포맷입니다. 다만 플러그 인을 필요로 한다는 것이 단점이지요.
흔히 웹디자인을 잘하려면 어떻게 해야 되느냐는 질문을 많이 받습니다. 물론 왕도는 없습니다. 하지만 효과적인 공부방법은 있을 겁니다...
아래는 웹 디자인 레이아웃을 잘 하기 위해 흔히 제가 쓰는 방법들입니다...^^ 웹디자인을 잘 하고 싶으신 분은 참고가 되었으면 합니다.
ㅇ 웹디자인을 잘하려면?
1. 실제 웹사이트를 가능한한 많이 돌아다녀본다...
가장 현실적인 답입니다. 트렌드분석도 해볼 겸, 남이 만들어놓은 것 슬쩍 훔쳐도 볼 겸 유명한 사이트들은 한달에 한번씩 정기적으로 가보고... 디자 인이 잘되었다는 소문이 난 사이트들 역시 빠짐없이 둘러봅니다... 스스로 평가하고 분석하고 응용도 해보고... 제일 많이 도움이 될 겁니다... 특정 주제를 정해 돌아다녀보시면 더 좋을 겁니다. 오늘은 쇼핑몰, 내일은 검색엔진, 모레는 신문사... 목적에 맞는 디자인과 레이아웃을 파악하실 수 있겠지요... 열심히 돌아다니시면서 정기적으로 업데이트를 체크해 볼 사이트나, 두고두고 참조할 사이트는 북마크를 하시고.. 꼭 소스는 챙겨보시기 바랍니다. 대충 보시다 보면 트랜드가 보일 겁니다.. 아니면, 자신이 좋아하는 스타일이 생길겁니다...머리 속으로 정리해도 좋고, 노트를 만드셔도 좋을 겁니다... 새로운 스타일이나 기법등은 반드시 직접 해보시면 내 것이 됩니다...^^
2. 가능한한 많이 보고, 많이 생각한다...
전 주변에서 볼 수 있는 모든 디자인되어진 것들을 열심히 챙겨보는 편입니다. 하다못해 지하철 광고까지도 폰트나 레이아웃 을 유심히 봅니다. 차이점은 많겠지만 그래도 웹 디자인의 기초는 출판에서 비롯되었습니다. 레이아웃이 잘된 잡지들을 유심히 보시기 바랍니 다. 컨텐츠가 많은 사이트의 경우에는 도움이 많이 됩니다. 통일성 확보라든지... 칼라, 톤.. 폰트까지 꽤 도움이 됩니다. 가능 한한 외국잡지를 참조하시길... (자금이 딸리시면 대형서점에 가시면 과월호를 싸게 팔더군요..^^) 국내잡지는 미용실이나 까페에 가서 잡지를 달라고 하면 쉽게 볼 수 있습니다...^^ 방송에 쓰이는 CG도 꽤 도움이 됩니다. 타이틀도 타이틀이지만... 요즘은 스포츠경기의 스코어보드나, 자막도 상당히 세련된 디자인이 나옵니다. 스타TV의 채널V나, CNN, 스포츠 등를 주로 많이 봅니다... 직접적인 도움은 안될 지 몰라도 감각을 키 울 수 있습니다...게임이나 시디롬을 자주 보는 것도 도움이 됩니다. 오락실용 게임의 인터페이스도 눈여겨 보세요...^^ 가끔씩은 흰백지에 직접 손으로 예쁜 편지를 써보는 것도 도움이 됩니다...
3. 백문이 불여 일견, 백견이 불여 일행! 시간이 나시면 직접 만들어보시기 바랍니다...
자기 홈페이지를 만들어도 좋고...많이 만들어보는 게 좋습니다. 업무에 관련되다보면 매너리즘에 빠지기 쉽고, 시간에 쫓기다 보면 계속 그밥에 그나물이 됩니다... 부담없이 이것저것 변화도 줄 수 있는 웹사이트를 만들어 보세요...^^ 포토샵 팁이나 필터 공부를 하실 때.. 이미지 하나만 달랑 만들어보지 마시고...^^ 웹페이지 하나를 만들어보시기 바랍니다. 레 이아웃은 구성, 조화, 통일 등등(역시 이론은 안돼..^^)이 바탕이 되어야 합니다... 가끔씩 자신과 승부를 해보십시오... 이미지를 하나도 쓰지않고 가장 멋지게 만들겠다든가... 50K이내에서 승부를 걸겠다든 가... 폰트만 써서 메인이미지를 꾸미겠다든가... 어떤 목적을 설정하고 도전해보십시오... 어떤 컨셉을 두고 만드셔도 됩니다...^^ 제 경험에 비추어보자면 가장 부담없이 만든 사이트가 가장 맘에 들고 애착이 가더군요...^^반드시 만든 웹페이지는 가능한한 많은 사람들에게 보여주고 조언을 구하십시오.
|
