[출처:http://experthomep.com.ne.kr/]
1. 홈페이지 제작(계획) 순서
2. 홈페이지의 컨셉 개발하기
3. 홈페이지의 콘텐츠 구성하기
4. 올바른 인터페이스와
올바르지 않은 인터페이스
5. 로딩 속도와 이미지의 용량
1. 홈페이지 제작(계획) 순서
1-1. 홈페이지 컨셉 개발하기
어떤 홈페이지를 제작할 것인지 치밀하게 컨셉을 구상합니다. 만약 자신이 다룰 수 없는 영역이 있다면 그 해결책을 찾던가 컨셉에서 제외시켜야 한다.
1-2. 홈페이지 제작 툴의 선택
HTML 에디터는 나모 웹에디터, 프론트페이지, 드림위버 중에서 선택합니다. 홈페이지를 디자인할 메인 그래픽툴은 포토샵을 사용하고 보조 그래픽 툴은 이미지스타일러, 파이어웍스 등을 사용합니다.
1-3. 자료 수집 및 제작 준비
필요한 사진을 스캐닝하고 필요한 문서를 준비합니다.
1-4. 홈페이지의 제작
앞에서 선택한 에디터로 홈페이지의 제작을 시작합니다. 필요하다면 다이나믹 문서를 제작하거나 자바 애플릿을 사용합니다.[주의:자주 자바에플릿을 사용하시면 서버에 부하가 생기며 로딩속도가 느려집니다.]
1-5. 서버에 홈페이지 등록
여러분의 계정에 완성된 홈페이지 문서를 업로드합니다. 이 작업은 나모 웹에디터 등을 사용하면 손쉽게 진행할 수 있습니다.
2. 홈페이지의 컨셉 개발하기
1. 컨셉이란
컨셉(concept)이란 쉽게 말해 왜, 무엇을, 어떤 방식으로 표현하고 이 효과로 어떤 이득을 얻을 수 있느냐를 정의 내리는 홈페이지에 대한 종합적인 계획 작업입니다.
예를 들어 기업 홈펭지를 제작한다고 가장해 봅시다. 먼저, 여러분은 이 홈페이지에서 기섭을 홍보해야 하며 신상품을 소개해야 합니다. 신상품을 소개할 경우에는 온라인 판매 방법을 삽입할 수 있는데 이로 인해 홈페이지에 결제 시스템을 연결하고 애프터서비스 기능을 부여할 수 있습니다. 이처럼 홈페이지에다 삽입 할 내용들을 체졔적으로 정리하고 종합적이로 구상하는 작업이 바로 컨셉을 결정하는 과정입니다.
2. 개인 홈페이지에도 컨셉
게인 홈페이지라 해도 인터넷 이용자들에게 많은 공감대를 끌어내려면 다각적인 컨셉을 개발해야 합니다. 커피를 주 컨셉으로 잡은 홈페이지를 계획하고 있다면 커피의 종류, 가격, 기원, 끓이는 방법, 구입할 수 있는 곳, 맛있는 커피가 나오는 카페는 물론 커피를 온라인으로 판매해 돈을 벌 생각으로 판매해 돈을 벌 생각으로 홈페이지를 제작하는 것이 좋은 것입니다.
웹에서의 컨셉은 아이디어 싸움이며 새로운 경쟁인 것입니다.
3. 홈페이지의 콘텐츠 구성하기
콘텐츠는 쉽게 말하면 홈페이지의 목차를 구성하는 작업을 말합니다.
1. 첫 페이지에서 어떤 용도의 홈페이지인지 정보를 제공합니다.
집으로 따지면 대문을 디자인하는 작업입니다. 방문객이 첫 페이지에서 이 홈페이지가 어떤 정보를 제공하고 있고 어떤 이득을 자신에게 주는지 한눈에 파익할 수 있도록 정보를 제공해야 합니다.
2. 웹페이지의 내용과 구성을 명확하고 일목요연하게 배열합니다.
웹페이지의 순서는 콘텐츠와 담겨있는 내용을 어떻게 구성하느냐에 따라 달라집니다.
제공되는 콘텐츠와 자료가 홈페이지의 성격에 맞게 명확한 한편 독창적이어야 하면 일목요연하게 정리되도록 배치해야 합니다.
3. 방문자를 위한 상호 정보 제공 기능을 염두해 줍니다.
방문자의 의견을 참고할 수 있도록 피드백이나 게시판, 채트 기능을 제공해야 합니다. 일방벅으로 여러분의 생각만을 표현하기 보다는 방문자에세도 말할 귄리를 주는 것입니다.
4. 방문자를 위한 내부 검색 기능을 제공해야 합니다.
이는 야후와 같은 다국적 검색 엔진을 말하는 것이 아니라 홈페이지가 제공하는 자료에 대한 자체 검색 기능을 말합니다. 방문자는 기능을 이용해 홈페이지에서 제공되는 각종 정보를 찾아갈 수 있습니다.
5. 다수의 html언어를 사용하겠지만 일괄적으로 처리해야 합니다.
필료에 따라 JAVA, DHTML, FLASH 등의 다양한 애니메이션 기술을 사용하지만 이는 일관적이고 다운로드 속도에 방해되지 않아야 합니다.
4. 올바른 인터페이스와 올바르지 않은 인터페이스
1. 홈페이지의 구조 구상하기
초보자들이 제작한 홈페이지는 일반적으로 직렬 건전지가 연결된 형태의 홈페이지 구조를 가지고 있습니다. 그러나 많은 정보를 제공하고 싶다면 병렬 건전지가 연결된 형태로 홈페이지를 제작하는 것이 좋습니다. 이것은 웹에디터에서 페이지의 링크를 어떻게 하느냐에 따라 달라지기 때문에 웹에디터를 마음대로 요리할 수 있다면 어떤 형태로건 링크가 가능합니다.
2. 레이아웃의 일관성 유지하기
일단 홈페이지의 구조를 구상하였다면 이때부터는 다양한 레이아웃을 구사하면서 홈페이지를 제작하게 됩니다.
레이아웃이란 홈페이지의 전반적인 폼(모양)을 말하는데 이는 독창적이고 사용성이 편리해야 합니다. 물론 가장 중요한 점은 일관성을 유지 하는 것인데 이는 일관성이 없다면 홈페이지의 형태가 망가지기 때문입니다.
2-1. 서로 다른 레이아웃을 제작할 때 일관성 유지하기
페이지마다 서로 다른 레이아웃을 적용한 경우에도 일관성을 유지할 수 있습니다. 왜냐면 디자인이나 색상, 네비게이션 버튼 혹은 폰트를 통일하는 방법으로 일관성을 유지할 수 있으니까요.
웹페이지가 바뀔 때마다 계속 같은 모양의 버튼이나 바 이미지 , 폰트가 있다면 각각의 레이아웃이 틀릴지라도 일관성을 유지할 수 있는 것입니다.
2-2. 웹페이지의 길이를 조정해 일관성 유지하기
우습겠지만 웹페이지의 길이도 일관성을 유지하는 요소 중의 하나입니다. 각 페이지의 길이가 서로 틀리다면 방문객에게 혼돈을 심어줄 것입니다. 텍스트가 많은 페이지는 분산시키는 방법을 사용해 웹페이지의 길이를 균등하게 배분해야 일관성이 유지됩니다.
2-3. 링크 보튼이나 로고 이미지를 배치하여 일관성 유지하기
하이퍼텍스트 등의 네비게이션 바의 위치는 누르기 싶고 기억하기 쉽도록 계속 같은 위치에 배치해야 일관성이 유지됩니다. 메인 화면의 왼쪽에 네비게이션 바를 위치하였다면 다른 페이지에서도 네비게이션 바의 위치를 왼쪽으로 계속 배치하는 방법을 사용합니다. 이렇게 하면 버튼의 위치가 계속 같은 곳에 있으므로 전체적으론 일관성이 유지됩니다.
3. 전문적인 웹 그래픽 구축하기
3-1. 독창적인 그래픽 구축하기
좋은 그래픽만이 높은 점수를 획득할 수 있기 때문에 포토샵은 물론 다양한 그래픽 툴을 사용해 멋진 인터페이스를 제작해야 합니다. 필요하다면 Adobe Image Styler, Microsoft Photo Draw, Painter 3D 등으로 그래픽을 구축해야 하는데 이들 프로그램은 다루는 것이 그리 어렵지 않습니다.
욕심을 낸다면 3D 이미지 제작툴인 Bryce 3D, 3D Max, Ray Dream Studio, Poser 3, Maya 2, Soft Image, Extreme 3D 등으로 소스를 제작한 뒤 포토샵으로 다스 작업하는 것이 좋습니다.
3-2. 기술적인 우수성 확보하기
기술적인 우수성을 확보하기 위해 자바 애풀릿을 사용하거나 Gif 애니메이션을 사용해 동적인 그래픽을 구사하는 것이 좋습니다. Gif 애니메이션과 배너 이미지는 Microsoft Liquid Motion, Gif Movie Gear, Cool 3D, Xara 3D, 페이트샵 프로의 AnimationShop으로 제작하며 전문적인 Gif 애니메이션은 Mhcromedia Fireworks 2로 제작합니다.
5. 로딩 속도와 이미지의 용량
아무리 훌륭한 이미지라 해도로딩 속도가 많이 걸리면 곤란합니다. 제작한 이미지의 용량은 최대한 줄이는 것이 좋으며 이를 위해 불필요한 요소는 반드시 제거해야 합니다.
권장하는 웹 이미지의 파일 용량
이미지가 만흥면 많을수록 로딩 속도를 많이 잡아먹으므로 웹 이미지는 되도록 용량을 줄여야 합니다. 웹 사이트에 접속했을 때 최초로 표시되는 홈페이지의 용량은 대략 150K 바이트 용량이 적절한데 이것을 기준으로 웹마스터는 이미지의 용량을 규정해야 합니다.
중요한 점은 웹마스터 자신이 이미지의 품질을 우선하느냐 로딩 속도를 우선하느냐 스스로 판단해야 한다는 것입니다.
5-1. 버튼 이미지의 크기
0.1Kb ~ 1kb 사이의 파일 용량 권장
5-2. 배경 이미지
5Kb ~ 30kb 사이의 파일 용량 권장
5-3. 네비게이션 이미지의 파일 크기
2가지 색의 네비게이션 이미지 0.3Kb ~ 0.5kb 사이의 용량 권장
256색상의 네비게이션 이미지 1Kb ~ 20kb 사이의 용량 권장
5-4. Gif 애니메이션과 배너 이미지의 파일 크기
버튼형 애니메이션 0.1Kb ~ 10kb 사이의 용량 권장
바 형태의 배너 애니메이션 5Kb ~ 40kb 사이의 용량 권장
5-5. 메인 타이틀 이미지의 파일 크기
5Kb ~ 50kb 사이의 용량 권장
풀 사이즈로 올리는 것보다 이미지를 격자 형태로 쪼갠 뒤 편집 프로그램에서 정밀하게 배치해 줍니다. 쪼개진 이미지는 인터넷에서 로딩 속도에 도움을 줍니다.
5-6. 동영상의 파일 크기
5초 ~ 30초 내외의 플레이 시간, 사이즈 160 * 120 권장
프리미어나 디렉터에서 동영상의 크기를 축소하는 방법으로 파일 용량을 줄입니다.
[re]=====================================================
이번에 홈페이지를 하나 만들생각입니다.
그런데 어떻게 만들어야 할지 도통 모르겠습니다.
만드는 순서를 좀 알려주세요.
많은 도움이 될것 같습니다. |
|
|
|
