1. User Interface의 요소
|
네비게이션
서핑이란것을 하다 종종 길을 잃는다. 해당 웹 사이트를 직접 제작, 운영하는 사람이 아닌 이상 사용자가 접속한 웹사이트의 맵, 그 구조를 한눈에 알아차리고 원하는 페이지, 원하는 정보로 바로 가기란 쉬운 일이 아니다. 좋은 네비게이션을 위한 몇가지 고려사항을 소개한다. 1) 해당 웹사이트이 성격에 맞는 네비게이션 시스템을 고려한다. 계층적인 네비게이션 성격으로 작업할 것이냐 전체적으로 글로벌한 네비게이션 구조로 작업할 것이냐를 웹사이트의 성격과 컨셉에 맞게 결정한다. 앞서 말한것처럼(네비게이션시스템) 컨텐츠가 많고 복잡한 웹사이트 일수록 네비게이션 시스템의 신중한 설계는 꼭 필요하다. 2) 적절한 레이블과 메타포어 사용 레이블과 메타포어는 연상작용을 유도한다. 사용자들로 하여금 적절한 연상작용을 유도하여 보다 빠르게 정보를 파악하고 네비게이션 할 수 있도록 한다. 3) 정보의 카테고리별로 메뉴를 구분하여, 정보의 체계를 나눈다. 정보의 체계를 잡는 일은 아주 중요하다. 뉴스사이트 처럼 매일매일 많은 정보가 쏟아져 나오는 웹 사이트의 경우 정보의 체계가 잘 잡혀 있지 않다면 네비게이션 시 많은 어려움이 따를 것이다. 4) 일관성있는 네비게이션은 사용자들이 예측을 유도하여 원하는 정보로의 접근을 도와준다. 5) 웹 사이트의 내용과 구조를 한눈에 파악할 수 있는 사이트맵을 사용한다.
Metaphor
적절한 정신모형의 형성을 도울 수 있는 해결책 중 하나는 시각적이고 역동적인 사용자 인터페이스 은유(user interface metaphor)의 이용이다. (Dingeldein, 1994) 은유(metaphor)는 사용자 인터페이스에서 사용자가 시스템이 어떻게 작용하는지에 대한 적절한 정신모형을 재빨리 채택하도록 하여 사용자가 해야하는 시스템-특정적인 학습의 양을 최소화 시키는데 사용되는 유추적 모형이다.(Caroll and Mack, 1985) 메타포어? 실생활에 있어서 사람들이 생각하고 행동하고 있는 것을 사용자 인터페이스를 통해 은유하는 것을 말한다. 예를 들어 컴퓨터의 파일관리를 실생활에 있어서의 서류를 관리하는 종이 폴더를 사용하는 것처럼 하는 것 또는 파일들을 삭제할 때 실생활에서 휴지통의 계념을 도입한 것을 은유(메타포)라고 한다. 적절한 메타포어? 메타포어를 이용하여 실생활에서의 사고체계를 웹 사이트에 적용시킨다면 보다 편리하게 네비게이션 할 수 있을것이다. 주로 메뉴버튼이나 검색, 홈으로 가는 버튼 또는 게시판의 기능버튼등을 제작할 때 이 메타포어를 사용하여 이미지를 그리게 된다. 주의점은 사용자가 인식하기 쉬운 직관적인 이미지여야 메타포어의 효과를 볼 수 있으며 지나치게 정교하거나 복잡한 이미지일 경우 오히려 역효과를 볼 수 있다. 이러한 메타포어는 사이트의 특성, 성격, 컨셉을 표현하는 중요한 수단이 될 것이다. 2. 테스트화 수정
|
레이아웃이 끝난 후엔 HTML 코딩 및 각종 프로그래밍 작업에 들어간다.
HTML 코딩에 들어가려면 코딩을 위한 디자인이 된 이미지들의 작업이 나와야 한다.
이미지들을 코딩하기 적절하게 잘라서 코딩에 들어간다.
HTML 코딩 시 고려해야 할 사항들을 짚고 넘어간다.
한 페이지의 용량은 이미지, 텍스트까지 50kb~60kb가 넘지 않도록 주의한다.
페이지 로딩속도를 고려해야 하는 것은 아무리 강조해도 지나치지 않는다.
레이아웃 및 인터페이스를 설계 시에도 로딩속도를 고려해야 하지만 html코딩에 들어가면서 가장 많이 신경을 써야 할 단계라고 할 수 있다.
아무리 멋진 디자인이라 할지라도, 아무리 좋은 콘텐츠라 할지라도 페이지 로딩속도가 느리면 사용자들의 외면을 받게 되면 말짱 헛수고 !!!
코딩에 들어가기 전 이미지들을 잘라서 저장할 때 칼라 수를 제한하거나 이미지 제작 시 WEB에서 안전한 색상을 사용한다면 용량을 조금 더 줄일 수 있다.
HTML 코딩에 들어가려면 코딩을 위한 디자인이 된 이미지들의 작업이 나와야 한다.
이미지들을 코딩하기 적절하게 잘라서 코딩에 들어간다.
HTML 코딩 시 고려해야 할 사항들을 짚고 넘어간다.
한 페이지의 용량은 이미지, 텍스트까지 50kb~60kb가 넘지 않도록 주의한다.
페이지 로딩속도를 고려해야 하는 것은 아무리 강조해도 지나치지 않는다.
레이아웃 및 인터페이스를 설계 시에도 로딩속도를 고려해야 하지만 html코딩에 들어가면서 가장 많이 신경을 써야 할 단계라고 할 수 있다.
아무리 멋진 디자인이라 할지라도, 아무리 좋은 콘텐츠라 할지라도 페이지 로딩속도가 느리면 사용자들의 외면을 받게 되면 말짱 헛수고 !!!
코딩에 들어가기 전 이미지들을 잘라서 저장할 때 칼라 수를 제한하거나 이미지 제작 시 WEB에서 안전한 색상을 사용한다면 용량을 조금 더 줄일 수 있다.
* 용량에 따른 파일포맷은[웹디자인 시 고려사항]을 참고하세요.
디렉토리 구조 정하기
웹 사이트 제작 시 각 파일(*.html, *.htm, *.jpg, *.gif등등)들은 디렉토리별로 구분하여 나누어 준다.
이미지 디렉토리를 종류별로 나누어 주면 파일이 늘어나게 되어도 파일 관리를 용이하게 할 수 있다.
디렉토리 구조 정하기
웹 사이트 제작 시 각 파일(*.html, *.htm, *.jpg, *.gif등등)들은 디렉토리별로 구분하여 나누어 준다.
이미지 디렉토리를 종류별로 나누어 주면 파일이 늘어나게 되어도 파일 관리를 용이하게 할 수 있다.
HTML코딩의 몇 가지 TIP ~ !!
■ 절대경로와 상대경로
절대경로는 루트(root) 디렉토리에서 출발하는 경로를 말한다.
■ 절대경로와 상대경로
절대경로는 루트(root) 디렉토리에서 출발하는 경로를 말한다.
예를 들면
../images/deco/apple.gif나 companyinfo/index.html 등으로 쓰인다.
절대 경로는 디렉토리의 구조가 달라지면 경로의 의미가 없게 되지만 상대경로의 경우 서버가 달라지게 되어도 현재의 디렉토리 구조만 같다면 문제 없이 사용할 수 있다.
■ 유용하게 쓰이는 1 * 1 픽셀의 투명이미지
가로1 * 세로1 픽셀의 gif 투명이미지를 제작하라.
이 투명 이미지는 어중간한 간격 띄우기를 비롯하여 여러 곳에 유용하게 사용할 수 있다. < > 라는 태그를 많이 이용하기도 하지만 투명 이미지의 width와 height를 원하는 사이즈로 사용한다면 좀 더 정확한 결과값을 얻을 수 있다.
■ 다이나믹한 홈페이지를 구현할 수 있는
DHTML(Dynamic HTML), xxxxJavaScript 를 활용하라
DHTML, xxxxJAVASCRIPT 를 적극 활용하여 좀 더 다이나믹하고 동적인 페이지를 구성한다.
애니메이션, 동영상 등의 파일로도 동적인 페이지를 구성할 수 있지만 간단한 스크립트 몇 줄로 저렴한(?) 용량으로도 역동적인 페이지 구성을 할 수 있다.
또한 웹 페이지의 외양을 제어하고, 각 요소들의 속성을 세밀하게 규정할 수 있는 CSS도 적극 활용한다면 좀 더 다양한 페이지제작을 할 수 있을 것이다.
:: 테스트와 수정
어느정도 웹 사이트의 틀을 갖추었을 것이다.
이제 사용자 테스트와 수정을 하는 과정이 남아 있다.
사용자 테스트는 개발의 전과정에서 이루어져야 하지만 어느 정도 모습을 갖춘 지금의 단계에서라도 사용자 테스트 과정을 거친후 수정 작업이 이루어 져야한다.
웹 사이트의 타깃 사용자층을 대상으로 정확한 프로세스에 의거해 사용자 테스트를 하여야 하지만 여의치 않을경우 우선 주변 동료, 주변 사람들, 클라이언트등을 대상으로 시연과 함께 테스트를 요청한다.
이러한 테스트에는 사이트의 구조, 네비게이션의 편리함, 칼라, 페이지 내의 정보량의 적절함, 링크가 안되는 곳은 없는지를 꼼꼼히 체크하여 수정작업에 들어간다.
수정작업전에 이루어져야할 체크리스트
../images/deco/apple.gif나 companyinfo/index.html 등으로 쓰인다.
절대 경로는 디렉토리의 구조가 달라지면 경로의 의미가 없게 되지만 상대경로의 경우 서버가 달라지게 되어도 현재의 디렉토리 구조만 같다면 문제 없이 사용할 수 있다.
■ 유용하게 쓰이는 1 * 1 픽셀의 투명이미지
가로1 * 세로1 픽셀의 gif 투명이미지를 제작하라.
이 투명 이미지는 어중간한 간격 띄우기를 비롯하여 여러 곳에 유용하게 사용할 수 있다. < > 라는 태그를 많이 이용하기도 하지만 투명 이미지의 width와 height를 원하는 사이즈로 사용한다면 좀 더 정확한 결과값을 얻을 수 있다.
■ 다이나믹한 홈페이지를 구현할 수 있는
DHTML(Dynamic HTML), xxxxJavaScript 를 활용하라
DHTML, xxxxJAVASCRIPT 를 적극 활용하여 좀 더 다이나믹하고 동적인 페이지를 구성한다.
애니메이션, 동영상 등의 파일로도 동적인 페이지를 구성할 수 있지만 간단한 스크립트 몇 줄로 저렴한(?) 용량으로도 역동적인 페이지 구성을 할 수 있다.
또한 웹 페이지의 외양을 제어하고, 각 요소들의 속성을 세밀하게 규정할 수 있는 CSS도 적극 활용한다면 좀 더 다양한 페이지제작을 할 수 있을 것이다.
:: 테스트와 수정
어느정도 웹 사이트의 틀을 갖추었을 것이다.
이제 사용자 테스트와 수정을 하는 과정이 남아 있다.
사용자 테스트는 개발의 전과정에서 이루어져야 하지만 어느 정도 모습을 갖춘 지금의 단계에서라도 사용자 테스트 과정을 거친후 수정 작업이 이루어 져야한다.
웹 사이트의 타깃 사용자층을 대상으로 정확한 프로세스에 의거해 사용자 테스트를 하여야 하지만 여의치 않을경우 우선 주변 동료, 주변 사람들, 클라이언트등을 대상으로 시연과 함께 테스트를 요청한다.
이러한 테스트에는 사이트의 구조, 네비게이션의 편리함, 칼라, 페이지 내의 정보량의 적절함, 링크가 안되는 곳은 없는지를 꼼꼼히 체크하여 수정작업에 들어간다.
수정작업전에 이루어져야할 체크리스트
- 너무 많은 그래픽으로 인해 혼란스럽지는 않은가?
- 사용자가 원하는 정보로 쉽게 이동할 수 있는 네비게이션 시스템인가?
- 한 페이지 내에서 보여주는 정보량이 적절한가?
- 링크가 안되는 곳은 없는가?
- 기타 등등...
위의 사항등을 점검하여 수정작업에 들어간다.
레이아웃이 끝난 후엔 HTML 코딩 및 각종 프로그래밍 작업에 들어간다.
HTML 코딩에 들어가려면 코딩을 위한 디자인이 된 이미지들의 작업이 나와야 한다.
이미지들을 코딩하기 적절하게 잘라서 코딩에 들어간다.
HTML 코딩 시 고려해야 할 사항들을 짚고 넘어간다.
한 페이지의 용량은 이미지, 텍스트까지 50kb~60kb가 넘지 않도록 주의한다.
페이지 로딩속도를 고려해야 하는 것은 아무리 강조해도 지나치지 않는다.
레이아웃 및 인터페이스를 설계 시에도 로딩속도를 고려해야 하지만 html코딩에 들어가면서 가장 많이 신경을 써야 할 단계라고 할 수 있다.
아무리 멋진 디자인이라 할지라도, 아무리 좋은 콘텐츠라 할지라도 페이지 로딩속도가 느리면 사용자들의 외면을 받게 되면 말짱 헛수고 !!!
코딩에 들어가기 전 이미지들을 잘라서 저장할 때 칼라 수를 제한하거나 이미지 제작 시 WEB에서 안전한 색상을 사용한다면 용량을 조금 더 줄일 수 있다.
HTML 코딩에 들어가려면 코딩을 위한 디자인이 된 이미지들의 작업이 나와야 한다.
이미지들을 코딩하기 적절하게 잘라서 코딩에 들어간다.
HTML 코딩 시 고려해야 할 사항들을 짚고 넘어간다.
한 페이지의 용량은 이미지, 텍스트까지 50kb~60kb가 넘지 않도록 주의한다.
페이지 로딩속도를 고려해야 하는 것은 아무리 강조해도 지나치지 않는다.
레이아웃 및 인터페이스를 설계 시에도 로딩속도를 고려해야 하지만 html코딩에 들어가면서 가장 많이 신경을 써야 할 단계라고 할 수 있다.
아무리 멋진 디자인이라 할지라도, 아무리 좋은 콘텐츠라 할지라도 페이지 로딩속도가 느리면 사용자들의 외면을 받게 되면 말짱 헛수고 !!!
코딩에 들어가기 전 이미지들을 잘라서 저장할 때 칼라 수를 제한하거나 이미지 제작 시 WEB에서 안전한 색상을 사용한다면 용량을 조금 더 줄일 수 있다.
* 용량에 따른 파일포맷은[웹디자인 시 고려사항]을 참고하세요.
디렉토리 구조 정하기
웹 사이트 제작 시 각 파일(*.html, *.htm, *.jpg, *.gif등등)들은 디렉토리별로 구분하여 나누어 준다.
이미지 디렉토리를 종류별로 나누어 주면 파일이 늘어나게 되어도 파일 관리를 용이하게 할 수 있다.
디렉토리 구조 정하기
웹 사이트 제작 시 각 파일(*.html, *.htm, *.jpg, *.gif등등)들은 디렉토리별로 구분하여 나누어 준다.
이미지 디렉토리를 종류별로 나누어 주면 파일이 늘어나게 되어도 파일 관리를 용이하게 할 수 있다.
HTML코딩의 몇 가지 TIP ~ !!
■ 절대경로와 상대경로
절대경로는 루트(root) 디렉토리에서 출발하는 경로를 말한다.
■ 절대경로와 상대경로
절대경로는 루트(root) 디렉토리에서 출발하는 경로를 말한다.
예를 들면
../images/deco/apple.gif나 companyinfo/index.html 등으로 쓰인다.
절대 경로는 디렉토리의 구조가 달라지면 경로의 의미가 없게 되지만 상대경로의 경우 서버가 달라지게 되어도 현재의 디렉토리 구조만 같다면 문제 없이 사용할 수 있다.
■ 유용하게 쓰이는 1 * 1 픽셀의 투명이미지
가로1 * 세로1 픽셀의 gif 투명이미지를 제작하라.
이 투명 이미지는 어중간한 간격 띄우기를 비롯하여 여러 곳에 유용하게 사용할 수 있다. < > 라는 태그를 많이 이용하기도 하지만 투명 이미지의 width와 height를 원하는 사이즈로 사용한다면 좀 더 정확한 결과값을 얻을 수 있다.
■ 다이나믹한 홈페이지를 구현할 수 있는
DHTML(Dynamic HTML), xxxxJavaScript 를 활용하라
DHTML, xxxxJAVASCRIPT 를 적극 활용하여 좀 더 다이나믹하고 동적인 페이지를 구성한다.
애니메이션, 동영상 등의 파일로도 동적인 페이지를 구성할 수 있지만 간단한 스크립트 몇 줄로 저렴한(?) 용량으로도 역동적인 페이지 구성을 할 수 있다.
또한 웹 페이지의 외양을 제어하고, 각 요소들의 속성을 세밀하게 규정할 수 있는 CSS도 적극 활용한다면 좀 더 다양한 페이지제작을 할 수 있을 것이다.
:: 테스트와 수정
어느정도 웹 사이트의 틀을 갖추었을 것이다.
이제 사용자 테스트와 수정을 하는 과정이 남아 있다.
사용자 테스트는 개발의 전과정에서 이루어져야 하지만 어느 정도 모습을 갖춘 지금의 단계에서라도 사용자 테스트 과정을 거친후 수정 작업이 이루어 져야한다.
웹 사이트의 타깃 사용자층을 대상으로 정확한 프로세스에 의거해 사용자 테스트를 하여야 하지만 여의치 않을경우 우선 주변 동료, 주변 사람들, 클라이언트등을 대상으로 시연과 함께 테스트를 요청한다.
이러한 테스트에는 사이트의 구조, 네비게이션의 편리함, 칼라, 페이지 내의 정보량의 적절함, 링크가 안되는 곳은 없는지를 꼼꼼히 체크하여 수정작업에 들어간다.
수정작업전에 이루어져야할 체크리스트
../images/deco/apple.gif나 companyinfo/index.html 등으로 쓰인다.
절대 경로는 디렉토리의 구조가 달라지면 경로의 의미가 없게 되지만 상대경로의 경우 서버가 달라지게 되어도 현재의 디렉토리 구조만 같다면 문제 없이 사용할 수 있다.
■ 유용하게 쓰이는 1 * 1 픽셀의 투명이미지
가로1 * 세로1 픽셀의 gif 투명이미지를 제작하라.
이 투명 이미지는 어중간한 간격 띄우기를 비롯하여 여러 곳에 유용하게 사용할 수 있다. < > 라는 태그를 많이 이용하기도 하지만 투명 이미지의 width와 height를 원하는 사이즈로 사용한다면 좀 더 정확한 결과값을 얻을 수 있다.
■ 다이나믹한 홈페이지를 구현할 수 있는
DHTML(Dynamic HTML), xxxxJavaScript 를 활용하라
DHTML, xxxxJAVASCRIPT 를 적극 활용하여 좀 더 다이나믹하고 동적인 페이지를 구성한다.
애니메이션, 동영상 등의 파일로도 동적인 페이지를 구성할 수 있지만 간단한 스크립트 몇 줄로 저렴한(?) 용량으로도 역동적인 페이지 구성을 할 수 있다.
또한 웹 페이지의 외양을 제어하고, 각 요소들의 속성을 세밀하게 규정할 수 있는 CSS도 적극 활용한다면 좀 더 다양한 페이지제작을 할 수 있을 것이다.
:: 테스트와 수정
어느정도 웹 사이트의 틀을 갖추었을 것이다.
이제 사용자 테스트와 수정을 하는 과정이 남아 있다.
사용자 테스트는 개발의 전과정에서 이루어져야 하지만 어느 정도 모습을 갖춘 지금의 단계에서라도 사용자 테스트 과정을 거친후 수정 작업이 이루어 져야한다.
웹 사이트의 타깃 사용자층을 대상으로 정확한 프로세스에 의거해 사용자 테스트를 하여야 하지만 여의치 않을경우 우선 주변 동료, 주변 사람들, 클라이언트등을 대상으로 시연과 함께 테스트를 요청한다.
이러한 테스트에는 사이트의 구조, 네비게이션의 편리함, 칼라, 페이지 내의 정보량의 적절함, 링크가 안되는 곳은 없는지를 꼼꼼히 체크하여 수정작업에 들어간다.
수정작업전에 이루어져야할 체크리스트
- 너무 많은 그래픽으로 인해 혼란스럽지는 않은가?
- 사용자가 원하는 정보로 쉽게 이동할 수 있는 네비게이션 시스템인가?
- 한 페이지 내에서 보여주는 정보량이 적절한가?
- 링크가 안되는 곳은 없는가?
- 기타 등등...
위의 사항등을 점검하여 수정작업에 들어간다.
레이아웃이 끝난 후엔 HTML 코딩 및 각종 프로그래밍 작업에 들어간다.
HTML 코딩에 들어가려면 코딩을 위한 디자인이 된 이미지들의 작업이 나와야 한다.
이미지들을 코딩하기 적절하게 잘라서 코딩에 들어간다.
HTML 코딩 시 고려해야 할 사항들을 짚고 넘어간다.
한 페이지의 용량은 이미지, 텍스트까지 50kb~60kb가 넘지 않도록 주의한다.
페이지 로딩속도를 고려해야 하는 것은 아무리 강조해도 지나치지 않는다.
레이아웃 및 인터페이스를 설계 시에도 로딩속도를 고려해야 하지만 html코딩에 들어가면서 가장 많이 신경을 써야 할 단계라고 할 수 있다.
아무리 멋진 디자인이라 할지라도, 아무리 좋은 콘텐츠라 할지라도 페이지 로딩속도가 느리면 사용자들의 외면을 받게 되면 말짱 헛수고 !!!
코딩에 들어가기 전 이미지들을 잘라서 저장할 때 칼라 수를 제한하거나 이미지 제작 시 WEB에서 안전한 색상을 사용한다면 용량을 조금 더 줄일 수 있다.
HTML 코딩에 들어가려면 코딩을 위한 디자인이 된 이미지들의 작업이 나와야 한다.
이미지들을 코딩하기 적절하게 잘라서 코딩에 들어간다.
HTML 코딩 시 고려해야 할 사항들을 짚고 넘어간다.
한 페이지의 용량은 이미지, 텍스트까지 50kb~60kb가 넘지 않도록 주의한다.
페이지 로딩속도를 고려해야 하는 것은 아무리 강조해도 지나치지 않는다.
레이아웃 및 인터페이스를 설계 시에도 로딩속도를 고려해야 하지만 html코딩에 들어가면서 가장 많이 신경을 써야 할 단계라고 할 수 있다.
아무리 멋진 디자인이라 할지라도, 아무리 좋은 콘텐츠라 할지라도 페이지 로딩속도가 느리면 사용자들의 외면을 받게 되면 말짱 헛수고 !!!
코딩에 들어가기 전 이미지들을 잘라서 저장할 때 칼라 수를 제한하거나 이미지 제작 시 WEB에서 안전한 색상을 사용한다면 용량을 조금 더 줄일 수 있다.
* 용량에 따른 파일포맷은[웹디자인 시 고려사항]을 참고하세요.
디렉토리 구조 정하기
웹 사이트 제작 시 각 파일(*.html, *.htm, *.jpg, *.gif등등)들은 디렉토리별로 구분하여 나누어 준다.
이미지 디렉토리를 종류별로 나누어 주면 파일이 늘어나게 되어도 파일 관리를 용이하게 할 수 있다.
디렉토리 구조 정하기
웹 사이트 제작 시 각 파일(*.html, *.htm, *.jpg, *.gif등등)들은 디렉토리별로 구분하여 나누어 준다.
이미지 디렉토리를 종류별로 나누어 주면 파일이 늘어나게 되어도 파일 관리를 용이하게 할 수 있다.
HTML코딩의 몇 가지 TIP ~ !!
■ 절대경로와 상대경로
절대경로는 루트(root) 디렉토리에서 출발하는 경로를 말한다.
■ 절대경로와 상대경로
절대경로는 루트(root) 디렉토리에서 출발하는 경로를 말한다.
예를 들면
../images/deco/apple.gif나 companyinfo/index.html 등으로 쓰인다.
절대 경로는 디렉토리의 구조가 달라지면 경로의 의미가 없게 되지만 상대경로의 경우 서버가 달라지게 되어도 현재의 디렉토리 구조만 같다면 문제 없이 사용할 수 있다.
■ 유용하게 쓰이는 1 * 1 픽셀의 투명이미지
가로1 * 세로1 픽셀의 gif 투명이미지를 제작하라.
이 투명 이미지는 어중간한 간격 띄우기를 비롯하여 여러 곳에 유용하게 사용할 수 있다. < > 라는 태그를 많이 이용하기도 하지만 투명 이미지의 width와 height를 원하는 사이즈로 사용한다면 좀 더 정확한 결과값을 얻을 수 있다.
■ 다이나믹한 홈페이지를 구현할 수 있는
DHTML(Dynamic HTML), xxxxJavaScript 를 활용하라
DHTML, xxxxJAVASCRIPT 를 적극 활용하여 좀 더 다이나믹하고 동적인 페이지를 구성한다.
애니메이션, 동영상 등의 파일로도 동적인 페이지를 구성할 수 있지만 간단한 스크립트 몇 줄로 저렴한(?) 용량으로도 역동적인 페이지 구성을 할 수 있다.
또한 웹 페이지의 외양을 제어하고, 각 요소들의 속성을 세밀하게 규정할 수 있는 CSS도 적극 활용한다면 좀 더 다양한 페이지제작을 할 수 있을 것이다.
:: 테스트와 수정
어느정도 웹 사이트의 틀을 갖추었을 것이다.
이제 사용자 테스트와 수정을 하는 과정이 남아 있다.
사용자 테스트는 개발의 전과정에서 이루어져야 하지만 어느 정도 모습을 갖춘 지금의 단계에서라도 사용자 테스트 과정을 거친후 수정 작업이 이루어 져야한다.
웹 사이트의 타깃 사용자층을 대상으로 정확한 프로세스에 의거해 사용자 테스트를 하여야 하지만 여의치 않을경우 우선 주변 동료, 주변 사람들, 클라이언트등을 대상으로 시연과 함께 테스트를 요청한다.
이러한 테스트에는 사이트의 구조, 네비게이션의 편리함, 칼라, 페이지 내의 정보량의 적절함, 링크가 안되는 곳은 없는지를 꼼꼼히 체크하여 수정작업에 들어간다.
수정작업전에 이루어져야할 체크리스트
../images/deco/apple.gif나 companyinfo/index.html 등으로 쓰인다.
절대 경로는 디렉토리의 구조가 달라지면 경로의 의미가 없게 되지만 상대경로의 경우 서버가 달라지게 되어도 현재의 디렉토리 구조만 같다면 문제 없이 사용할 수 있다.
■ 유용하게 쓰이는 1 * 1 픽셀의 투명이미지
가로1 * 세로1 픽셀의 gif 투명이미지를 제작하라.
이 투명 이미지는 어중간한 간격 띄우기를 비롯하여 여러 곳에 유용하게 사용할 수 있다. < > 라는 태그를 많이 이용하기도 하지만 투명 이미지의 width와 height를 원하는 사이즈로 사용한다면 좀 더 정확한 결과값을 얻을 수 있다.
■ 다이나믹한 홈페이지를 구현할 수 있는
DHTML(Dynamic HTML), xxxxJavaScript 를 활용하라
DHTML, xxxxJAVASCRIPT 를 적극 활용하여 좀 더 다이나믹하고 동적인 페이지를 구성한다.
애니메이션, 동영상 등의 파일로도 동적인 페이지를 구성할 수 있지만 간단한 스크립트 몇 줄로 저렴한(?) 용량으로도 역동적인 페이지 구성을 할 수 있다.
또한 웹 페이지의 외양을 제어하고, 각 요소들의 속성을 세밀하게 규정할 수 있는 CSS도 적극 활용한다면 좀 더 다양한 페이지제작을 할 수 있을 것이다.
:: 테스트와 수정
어느정도 웹 사이트의 틀을 갖추었을 것이다.
이제 사용자 테스트와 수정을 하는 과정이 남아 있다.
사용자 테스트는 개발의 전과정에서 이루어져야 하지만 어느 정도 모습을 갖춘 지금의 단계에서라도 사용자 테스트 과정을 거친후 수정 작업이 이루어 져야한다.
웹 사이트의 타깃 사용자층을 대상으로 정확한 프로세스에 의거해 사용자 테스트를 하여야 하지만 여의치 않을경우 우선 주변 동료, 주변 사람들, 클라이언트등을 대상으로 시연과 함께 테스트를 요청한다.
이러한 테스트에는 사이트의 구조, 네비게이션의 편리함, 칼라, 페이지 내의 정보량의 적절함, 링크가 안되는 곳은 없는지를 꼼꼼히 체크하여 수정작업에 들어간다.
수정작업전에 이루어져야할 체크리스트
- 너무 많은 그래픽으로 인해 혼란스럽지는 않은가?
- 사용자가 원하는 정보로 쉽게 이동할 수 있는 네비게이션 시스템인가?
- 한 페이지 내에서 보여주는 정보량이 적절한가?
- 링크가 안되는 곳은 없는가?
- 기타 등등...
위의 사항등을 점검하여 수정작업에 들어간다.
3. 레이아웃 요소설계
기타 요소(사이트맵)
사이트맵은 시각적으로 사이트 전체의 내용을 개괄해 보여주는 기능이다.
사용자는 사이트맵을 이용하여 해당 사이트의 구조를 "한 눈"에 볼 수 있어야 하며 간결하고 명확한 방법으로 페이지의 계층구조를 나타낼 수 있어야 한다.
이러한 사이트맵은 사용자가 자신의 위치를 쉽게 찾을 수 있게 도와준다
기타 요소(검색)
사용자들은 그들이 찾는 정보를 좀 더 편하고 빠르게 찾길 원한다.
검색기능은 사용자가 원하는 정보로의 접근을 좀 더 빠르게 도와주며 사용자들은 좀 더 편하고 빠르게 제공하는 정보를 유용하게 활용 할 수 있게 된다.
사이트맵은 시각적으로 사이트 전체의 내용을 개괄해 보여주는 기능이다.
사용자는 사이트맵을 이용하여 해당 사이트의 구조를 "한 눈"에 볼 수 있어야 하며 간결하고 명확한 방법으로 페이지의 계층구조를 나타낼 수 있어야 한다.
이러한 사이트맵은 사용자가 자신의 위치를 쉽게 찾을 수 있게 도와준다
기타 요소(검색)
사용자들은 그들이 찾는 정보를 좀 더 편하고 빠르게 찾길 원한다.
검색기능은 사용자가 원하는 정보로의 접근을 좀 더 빠르게 도와주며 사용자들은 좀 더 편하고 빠르게 제공하는 정보를 유용하게 활용 할 수 있게 된다.
기타 요소(옵션들의 위치)
주요 메뉴가 아닌 사이트맵, 홈으로 가는 기능버튼 등 옵션기능들은 소홀히 하지 말아야 한다.
사용자들은 언제 어디서든 홈으로 가기 원하고, 사이트맵을 찾길 원한다.
가장 니즈가 많은 부분이 될 수 있기 때문에 어느 페이지에서든 항상 같은 위치, 같은 형태로 제작하여 찾기 쉽게 한다
주요 메뉴가 아닌 사이트맵, 홈으로 가는 기능버튼 등 옵션기능들은 소홀히 하지 말아야 한다.
사용자들은 언제 어디서든 홈으로 가기 원하고, 사이트맵을 찾길 원한다.
가장 니즈가 많은 부분이 될 수 있기 때문에 어느 페이지에서든 항상 같은 위치, 같은 형태로 제작하여 찾기 쉽게 한다
지금까지 레이아웃 및 인터페이스 설계의 예를 들었는데요!
레이아웃 기획시 고려해야할 사항들을 짚고서 마무리 합니다.
아래의 체크리스트를 잘 유념하시면 웹 사이트의 레이아웃 및 유저 인터페이스 설계시 많은 도움이 될겁니다.
* 체크리스트
레이아웃 기획시 고려해야할 사항들을 짚고서 마무리 합니다.
아래의 체크리스트를 잘 유념하시면 웹 사이트의 레이아웃 및 유저 인터페이스 설계시 많은 도움이 될겁니다.
* 체크리스트
- - 레이아웃, 버튼 아이콘, 각종 아이콘등이 사용자가 학습하기 쉬운 위치와 형태인가?
- 레이아웃 및 버튼, 각종 아이콘들의 모양과 형태 칼라가 일관성있는가?
- 그래픽의 비율과 위치, 사이즈는 제공하는 정보의 의미전달에 적절한 수준인가?
- 그래픽의 용량이 커서 로딩속도에 지장을 주지는 않는가?
- 링크되는 것과 그렇지 않은 부분과의 구별이 확실한가?
- 메뉴의 개수가 적절하여 사용자들이 쉽게 인식할 수 있는가?
- 사이트의 계층구조를 시각적으로 보여주는 사이트 맵이 있는가?
- 사이트내의 내용을 쉽고 빠르게 찾을 수 있는 검색방식을 지원하고 있는가?
- 각각의 페이지에 제목, 날짜와 출처가 있는가?
- 메인홈과 사이트의 주요 섹션 페이지로 쉽게 이동할 수 있는가?
- 페이지의 뒤로, 앞으로 가는 버튼(혹은 링크)가 적절한 위치에서 그 기능을 잘 행하고 있는가?
- 메타포어는 단순하고, 논리적이고, 사용자에게 친숙한가?
'취미 & 상식 > IT & Web' 카테고리의 다른 글
| 타이포그래피 관례 (0) | 2010.03.26 |
|---|---|
| 컬러 감각있는 웹디자이너 되기 '센과 치히로의 색감'| (0) | 2010.03.26 |
| 포트폴리오 - 기업웹진 환골탈태! (0) | 2010.03.26 |
| 웹디자인의 실재(2) (0) | 2010.03.26 |
| 데몬 프로그램 다운로드 및 사용법 (0) | 2010.03.05 |