| 1. 웹 그래픽 제작방법 (1) 이미지 포맷 이미지 포맷은 수십 가지가 있습니다. 그 중에서도 웹브라우저에서 기본적으로 지원되는 포맷은 gif, jpeg 두 가지입니다. gif는 Graphics Interchange Format의 약자이며, jpeg은 Joint Photographic Experts Group를 뜻합니다. ▶ gif 이 포맷은 Lempel-Ziv and Welch의 LZW이라는 압축 방식을 이용하는데 8BIT(256 색상)를 지원합니다. 주요 특징을 살펴보면 첫째, 인터레이스가 됩니다. 즉 데이터가 전송되면서 처음에는 저해상도로 출력되고 점차적으로 데이터가 수신되면서, 고해상도로 나타나는 것을 말합니다. 둘째, 투명효과를 줄 수 있습니다. 즉 지정된 하나의 색상이 배경과 결합되어 투명하게 보이는 것을 말합니다. 셋째, 애니메이션을 하나의 파일 안에서 지원합니다. 특정한 사이트에 방문해보면, GIF 파일이 다양하게 애니메이션 되는 것을 볼 수 있습니다. ▶ jpeg 이 포맷은 손실 압축 연산 방식을 사용하는 것으로 원본 이미지를 이 포맷으로 저장할 때 데이터의 일부가 손실되는 방식입니다. 압축률은 매우 높지만 2회 이상 압축하면 그래픽의 질이 손상될 수도 있습니다. 주요 특징을 살펴보면 24bit(수천만 색상)를 지원하며, gif의 인터레이스 방식과 달리 이것은 모든 데이터가 수신된 후에 출력됩니다. 따라서 통신 속도와 처리속도에 따라 일부 다르겠지만, gif에 비하여 화면 출력 속도가 상대적으로 늦습니다. ▶ 기타 포맷 gif, jpeg 이외의 그래픽 포맷을 웹브라우저에서 사용하려된 특정한 플러그인이나, 헬퍼 애플리케이션 방식의 응용프로그램을 이용하여야 합니다. (2) 그래픽 품질 최적화하기 웹 기반에서 그래픽 품질을 최적화 하는 것은 반드시 필수적인 것입니다. 즉 통신속도에 대한 고려인데, 그래픽 파일의 크기를 최소화하여야 하고, 이와 더불어 그래픽의 질을 최대로 좋게 보여 주어야 합니다. 이렇게 하기 위해 몇 가지 예를 들면 다음과 같습니다. ▶ 그래픽의 파일 크기를 최소화합니다. - 색상의 수를 줄입니다. ( 24bit → 16bit → 8bit → 4bit → 2bit → 1bit ) 즉 자신이 제작한 그림의 색상수를 줄여 저장해 본 뒤 브라우저에서 보면서 화질에 큰 차이가 없다면 사용합니다. - 가능하면 팔레트를 활용합니다. 즉 24bit 또는 16bit 그림이라도 팔레트를 이용하여 8bit로 표현하면 화질을 그대로 유지하면서, 파일크기를 줄일 수 있습니다. gif 포맷으로 그림을 그리거나, 디렉터와 같은 저작도구 등을 이용할 수 있습니다. ▶ 그래픽의 화면 크기를 최소화합니다. 그림의 화면 크기를 640x480 정도의 크기로 보면 좋겠지만, 반드시 필요하지 않은 경우, 320x240, 160x120 정도로 표현해도 무방하다면 가급적 작은 크기로 만듭니다. ▶ 그래픽 포맷을 비트맵보다는 벡터를 이용하도록 합니다. 비트맵이란 그림의 요소를 바이러니 형식으로 보관하고 있어 화면에 나타나는 모든 요소가 점단위로 파일에 저장됩니다. 그러나 벡터 포맷은 수학공식과 같아 각각의 그림 요소를 라인 형식에 따라 수치 기호로 저장하기 때문에 비트맵에 비해 매우 크기가 작습니다. 이를 지원하는 도구는 Macromedia Freehand, Adobe Illustrator 등이 있습니다. 2. 홈페이지 제작과정 ▶ 홈페이지를 만들 서버를 결정합니다. 서버란 쉽게 말해 홈페이지를 완성하고 난 후 그것이 웹상에서 보여질 수 있도록 파일들을 저장할 집이라고 생각하면 됩니다. 서버는 안정적이며 회선의 속도가 빠른 곳을 찾는 것이 좋습니다. 그래야 방문자들이 홈페이지에 접속했을 때 별 무리 없이 웹 서핑을 할 수 있으며 서버의 이런 환경은 방문자의 계속적인 접속으로 이어질 수 있습니다. 홈페이지를 등록할 수 있는 서버는 유료로 제공하는 호스팅 업체와 무료로 가입하여 사용할 수 있는 통신 업체가 있습니다. 지원되는 서비스나 용량, 사용 요금, 안정성 등을 꼼꼼히 비교하여 만들 홈페이지의 성격에 맞는 곳을 선정합니다. ▶ 도메인 네임 결정 홈페이지를 등록할 서버를 선정했으면 도메인 네임을 결정하여 주소를 만들어 주어야 합니다. 무료 서버를 제공하는 업체를 선택하거나 유료로 도메인 대행서비스 업체에서 도메인을 신청할 수 있습니다. 홈페이지 주소는 방문자들이 쉽게 기억할 수 있도록 쉬운 이름을 사용하는 것이 좋으며 무료로 제공하는 서버공간을 사용하면서 통신회사의 주소 대신 별도의 도메인을 사용하고 싶을 경우에는 각 통신 회사에서 개인 도메인 포워딩 서비스를 제공하는지를 우선 알아봐야 합니다. ▶ 홈페이지 기획과 레이아웃 잡기 홈페이지를 만들기 위해서는 밑바탕이 되는 기획이 중요합니다. 기획은 경쟁 사이트 분석부터 시작해서 자료조사, 디자인 컨셉 정하기, 네비게이션 시스템 구축하기, Flow Chart 그리기, 스토리보드 만들기, 시안 만들기 과정을 거칩니다. ▶ 홈페이지 만들기 홈페이지를 만들기 위해서는 포토샵에서 전체적인 레이아웃 디자인과 세부 이미지를 만들고 저장한 파일은 나모나 드림위버 같은 HTML Editor에서 불러들여 페이지를 만들어 갑니다. 한페이지 한페이지를 만들 때마다 스토리보드에서 계획한 단계를 보며 작업을 합니다. ▶ 홈페이지 올리기 기본적인 홈페이지를 만들었으면 선택한 서버에 작업한 파일들을 올립니다. 각 통신 서비스 회사마다 파일을 올릴 수 있는 방법을 제공하지만 웹에디터에 내장된 FTP를 이용하거나 FTP 프로그램을 사용할 수도 있습니다. FTP 프로그램에는 알FTP, WS_FTP, Leech FTP, Cute FTP 등이 있는데 기능들은 비슷하므로 적합한 것을 선택합니다. ▶ 홈페이지 알리기 기업의 홈페이지는 배너광고나 경품행사 등의 이벤트를 통해 홍보할 수 있지만 개인 홈페이지는 보통 검색엔진에 등록해야만 쉽게 알릴 수 있습니다. 검색 엔진에서 검색할 수 있는 키워드를 문서의 <head>안 <meta> 태그로 삽인한 후에 무료로 검색 엔진에 등록해 주는 곳을 찾아 등록합니다. 3. 홈페이지 제작시 주의할 점 ▶ 로딩 속도를 높이기위해 고려 해야 합니다. 전화사용자를 기준으로 로딩 속도를 고려해야 많은 계층의 네티즌들이 방문합니다. 물론 요즘 전용선이나 ISDN등 많이는 쓰이고 있습니다. 웹디자인은 열악한 환경도 고려해야 합니다. 모뎀의 속도가 아무리 빨라야 56K밖에 되지 않기 때문에 속도를 생각해서 한 웹페이지당 용량을 신중히 결정해야 합니다. 보편적으로 70-80KB를 잡고 코딩하고 있습니다. ▶ 네티즌들의 컴퓨터 화면상태를 감안하여 작업합니다. 보다 많은 네티즌들을 위해 15"정도의 모니터인 800*600을 기준으로 잡고 디자인 하는 것이 좋습니다. 웹 서핑하는 네티즌들이 모두 17"의 모니터인 1024*768를 쓴다고 보장 할 수 없기 때문입니다. 그리고 256모드의 사용자도 고려하여 지나치게 많은 칼라를 사용하는 것은 무리이고 폰트도 제작 할때의 화면과 보는 사람의 화면이 다르기 때문에 기본폰트를 사용하는 것이 좋습니다. ▶ 현재 보고 있는 메뉴에 대한 위치확인이 용이해야 합니다 한 사이트를 여기저기 돌아다녀도 길을 잃지 않게 위치확인이 가능하게 합시다. 복잡한 경우에는 사이트맵을 만들던지 선택된 메뉴가 색상이 반전되어 있다던지 하는 표시를 해 주는 것이 좋습니다. ▶ 모든 브라우져에서 테스트를 해 봅니다. 네티즌들의 다양한 환경을 고려하여 모든 브라우져를 테스트르 한 후에 올려야 합니다. 넷스케이프와 익스플로러에서는 소스를 해석하는 방법이 좀 틀리기 때문입니다. 만약 브러우져가 한정되어 있다면 메인화면에 "이 화면은 브라우져 0000기준으로 작성되었습니다."라는 문구를 미리 명시해 주는 것도 좋은 방법입니다. ▶ 작업문서에 네이밍룰을 만듭니다. web-1.htm,web-2.htm.... 이렇게 이름에 일정한 규칙을 주면 차후 업데이트시에 화일을 쉽고 빠르게 찾을 수 있으며 분류하기도 쉬워집니다. ▶ 화면이 길이를 생각하여 디자인 합시다. 화면상 보이는 내용을 스크롤해서 볼 확률은 많지 않다고 합니다. 적당히 나누어 페이지를 배분하거나 배분이 싫다면 밑에 TOP버튼이라도 만들어 주는 것이 좋습니다. ▶ 사용자를 고려하지 않은 사이트 인터넷은 항상 어느 곳으로든 열려 있기 때문에 언제라도 떠날 자세가 되어있습니다. 그러므로 방문자를 오래 머물게 하기 위해서는 그들을 배려한 화면으로 꾸며져야 합니다. 예를 들면 과도한 배너광고의 사용은 방문자들을 짜증나게 하며 그림들이 모두 뜨기 전에 나가고 싶은 충동을 느끼게 하며, 플러그인이 필요한 화면에서 아무런 플러그인 안내가 되어있지 않다면 그들을 화나게 할 수도 있습니다. 어느 곳을 방문하든 그들이 궁금해 할 것이 있으면 상세히 설명을 해 주고, 그들이 필요할 것이 있을 만한 문제들은 준비해두는 치밀함을 갖추고 있는 것이 좋습니다. ▶ 자바스크립트나 자바 애플릿등을 남용하지 않아야 합니다. 홈페이지는 디자이너들의 자신의 실력을 과시하기위해 만들어지는 것이 아닙니다. 신기하고 새로운 기술이 있다고 해서 무작정 많이 보여주자고 하는 디자이너는 정말 없어야 겠습니다. 스크립트를 사용하지 않고서도 얼마든지 사용하기 편리한 사이트가 될 수도 있습니다. 그렇다고 사용하지 말라는 것은 아닙니다. 정말 필요한 기능에서 살짝 보여주는 것이 더 값어치 있지 않을까요? ▶ 지나치게 많은 새창을 열지 않도록 합시다. 어떤 사이트를 들어가면 어느새 자신의 브라우져가 3~4개씩 떠있는 경우가 있습니다. 어쩔때는 제맘대로 브라우져의 사이즈가 커져버려 조정할 수 없게끔 만들어 버리기도 합니다. 사이트에서 강조할 내용을들 보여주기 위하여 팝업윈도우를 사용하는 것은 좋으나, 이것은 꼭 필요한 때에만 한번씩 사용하는 것이 좋습니다. 너무 많이 뜨면 정말 강조하고 싶은 것도 그 속에 파묻혀 버리는 수가 있기 때문입니다. ▶ 회원가입을 요구하는 사이트 요즘은 거의 모든 사이트들이 회원제로 운영되고 있습니다. 그러나 어떤 사이트는 본인이 회원이 아니더라도 Guest의 자격으로 둘러보기를 할 수 있습니다. 무조건 회원가입부터 요구하는 사이트는 정말 이기적입니다. 프로그램도 데모프로그램이 있듯이 홈페이지를 모두 둘러본 후에 맘에들면 회원에 가입하도록 만드는것이 더 신사적이지 않을까요? 제발 회원가입하라고 강요하지 맙시다. ▶ 프레임이 깔끔하게 나눠지지 않은 사이트 프레임은 참으로 좋은 역할을 하는 기능입니다. 이 프레임의 사용 수준도 디자이너에 따라 천차만별입니다. 프레임을 퍼센트로 나눌 것인지 픽셀로 나눌 것인지에 따라서도 다른 차이를 보여줍니다. 사용자가 창을 아주 작게 하고 볼 경우와 큰 화면모드에서 전체화면으로 볼 경우를 고려하여 내용이 깨지지 않도록 프레임 구성을 잘 짜야 합니다. 프레임을 교묘히 잘 사용하면 정말 멋진 사이트가 될 수 있습니다. ▶ 다양한 칼라, 다양한 폰트의 사용 한 화면에서 3가지 이상의 칼라배색을 보게 되면 눈이 피로 해 집니다. 그러므로 너무 많을 칼라의 사용은 피하는 것이 좋습니다. 또한 폰트도 여러가지를 사용하게 되면 오히려 조잡하고 가벼운 사이트로 느껴지게 됩니다. 좀더 깔끔하고 고급스러운 홈페이지를 만들고 싶다면 칼라와 폰트의 사용을 일관성 있게 사용해야 합니다. ▶ 차후 업데이트를 고려하여 제작합니다. 제작 초기에 업데이트를 고려한 후에 그래픽 작업을 합니다. 구축 후에 클라이언트축에서 유지보수를 맏게 되었다면 그래픽 전문가가 없는 회사일 경우 미숙한 그래픽 처리로 홈페이지를 망쳐버리는 경우가 많습니다. 가변성있는 메뉴들을 텍스트 처리를 할 것인지 이미지로 할 것인지 심사숙고하여 결정합니다. |
| 4. 홈페이지 메인화면 만들기 기업 홈페이지의 메인화면을 만드는 작업으로 우선 메인화면을 만들 도큐멘트를 만들고 사각형 툴로 사각형을 만든 후 색을 채웁니다.           |
댓글 없음:
댓글 쓰기
국정원의 댓글 공작을 지탄합니다.