2022. 6. 24. 02:18ㆍ카테고리 없음
[ 웹 스타일 가이드 구성]
홈페이지 기획에 따라 웹페이지 제작에 들어가기 앞서 웹 스타일 가이드를 만들어야 합니다. 웹 스타일 가이드를 만듦으로써 웹 스타일에 대한 규칙을 정하고, 정해진 틀에서 벗어나지 않도록 할 수 있습니다. 웹 스타일 가이드는 홈페이지에 통일성 있는 시각적인 정체성을 부여하기 위한 요소입니다. 웹 사이트를 구축할 때는 기본적으로 지켜야 하는 제작 규칙을 정한 후, 규칙을 벗어나지 않는 범위 내에서 다양한 변화를 추구하는 것이 좋습니다.
1. 브랜딩 가이드
통합 아이덴티티를 구축하기 위한 가이드입니다. 기업의 이미지를 통합하기 위해 CI 매뉴얼 가운데 웹에서 나타낼 수 있는 이미지와 문장 구성 기준 등을 포함합니다. 일관된 웹 브랜드 이미지를 전달하는 것에 중점을 둡니다.
2. 디자인 스타일 가이드
홈페이지의 시각적인 통일성을 유지하기 위한 규칙입니다. 그리드 시스템, 메뉴 라벨링, 색상, 타이포그래피, CSS 등 디자인적인 요소에 해당하는 기준을 제시합니다.
3. 기술 가이드
홈페이지에서 구현되는 코딩에 관련된 규칙입니다. HTML 코딩과 제작 템플릿, 용어 규정, 파일의 디렉터리 구조, 코딩 규정, 검색 정보 등의 기술적인 기준을 제시합니다.
[ 디자인 스타일 가이드 제작의 필요성 ]
1. 시행착오를 줄일 수 있습니다. 홈페이지 개발 비용과 작업시간을 줄일 수 있습니다.
2. 홈페이지의 정체성을 유지할 수 있습니다. 홈페이지의 정체성이란, 일관성 있는 내비게이션, 레이아웃, 컬러 등 을 통해 방문 객들에게 홈페이지를 더욱 쉽게 각인시킬 수 있는 방법입니다.
3. 앞으로의 홈페이지 운영을 수월하게 도와줍니다. 디자인 스타일 가이드를 제작하면 향후 수정과 유지 및 관리가 용이합니다.
[ 디자인 스타일 가이드 기본원칙 ]
1. 모니터 해상도는 1024X768 픽셀, 모니터 컬러는 256컬러 이상을 기준으로 둡니다. 최근 모니터 해상도는 보통 1024X768픽셀 이상의 해상도를 가지고 있기 때문에 홈페이지 제작 해상도 역시 이에 맞추는 것이 좋습니다. 작업자의 모니터 해상도를 기준으로 제작하는 것이 아니라 다양한 해상도 사이즈를 염두에 두고 홈페이지를 제작하는 것이 좋습니다.
2. 이미지는 GIF 포맷을 기준으로 해, 선명한 이미지를 사용할 때에는 JPG 포맷을 사용합니다. JPG 파일은 선명한 사진을 표현할 때 효과적입니다. 보통의 이미지일 경우 GIF 포맷을 원칙으로 하되, 사진의 질이 중요할 경우 JPG 포맷으로 저장하는 것이 좋습니다.
3. 메뉴, 하위 구성 요소는 시선의 흐름에 따라 좌에서 우로, 위에서 아래로의 순서로 중요도를 주어 배치합니다. 사람의 시선은 왼쪽 상단에서부터 오른쪽 하단으로 이어지는 것이 보통입니다. 이를 활용해 왼쪽 상단에 가장 중요한 홈페이지 로고를 삽입하고, 상단에 메뉴, 하단에 내용 등을 배치합니다. 시선의 이동거리가 너무 멀거나 흐름을 방해하는 배치는 지양해 야 합니다.
4. 모든 페이지는 컬러, 글꼴 사용에 있어서 일관성을 고려해야 합니다. 컬러와 글꼴은 홈페이지에 일관성을 부여하는 중요한 요소 중 하나입니다. 주변과 어우러지지 않는 색상과 서체의 이용은 흐름을 방해하고, 어지러운 느낌을 줄 수 있습니다. 그러므로 디자인 스타일 가 이드에 맞춰 통일성 있는 홈페이지를 제작하는 것이 좋습니다.