프로 디자이너가 제안하는 제작순서-코딩및프로그래밍,테스트

 

레이아웃이 끝난 후엔 HTML 코딩 및 각종 프로그래밍 작업에 들어간다. HTML 코딩에 들어가려면 코딩을 위한 디자인이 된 이미지들의 작업이 나와야 한다. 이미지들을 코딩하기 적절하게 잘라서 코딩에 들어간다. HTML 코딩 시 고려해야 할 사항들을 짚고 넘어간다. 한 페이지의 용량은 이미지, 텍스트까지 50kb~60kb가 넘지 않도록 주의한다. 페이지 로딩속도를 고려해야 하는 것은 아무리 강조해도 지나치지 않는다. 레이아웃 및 인터페이스를 설계 시에도 로딩속도를 고려해야 하지만 html코딩에 들어가면서 가장 많이 신경을 써야 할 단계라고 할 수 있다. 아무리 멋진 디자인이라 할지라도, 아무리 좋은 콘텐츠라 할지라도 페이지 로딩속도가 느리면 사용자들의 외면을 받게 되면 말짱 헛수고 !!! 코딩에 들어가기 전 이미지들을 잘라서 저장할 때 칼라 수를 제한하거나 이미지 제작 시 WEB에서 안전한 색상을 사용한다면 용량을 조금 더 줄일 수 있다. 포토샵에서는 WEB에서 안전한 색상을 선별하여 작업할 수 있다.   * 용량에 따른 파일포맷은 [웹디자인 시 고려할 사항]들을 참고하세요. 디렉토리 구조 정하기 웹 사이트 제작 시 각 파일(*.html, *.htm, *.jpg, *.gif등등)들은 디렉토리별로 구분하여 나누어 준다. 이미지 디렉토리를 종류별로 나누어 주면 파일이 늘어나게 되어도 파일 관리를 용이하게 할 수 있다. 예를 들면 잘 정리된 디렉토리는 여럿이 작업할 때 아주 편리하다. * HTML코딩은 HTML포럼 강좌 http://www.webmania.co.kr/forum/html/에서 다룹니다. HTML코딩의 몇 가지 TIP ~ !! ■ 절대경로와 상대경로 절대경로는 루트(root) 디렉토리에서 출발하는 경로를 말한다. 또한 다른 URL(예: http://www.webmania.co.kr/forum/design/)도 절대 경로이다. 예를 들면 ../images/deco/apple.gif나 companyinfo/index.html 등으로 쓰인다. 절대 경로는 디렉토리의 구조가 달라지면 경로의 의미가 없게 되지만 상대경로의 경우 서버가 달라지게 되어도 현재의 디렉토리 구조만 같다면 문제 없이 사용할 수 있다. ■ 유용하게 쓰이는 1 * 1 픽셀의 투명이미지 가로1 * 세로1 픽셀의 gif 투명이미지를 제작하라. 이 투명 이미지는 어중간한 간격 띄우기를 비롯하여 여러 곳에 유용하게 사용할 수 있다. < > 라는 태그를 많이 이용하기도 하지만 투명 이미지의 width와 height를 원하는 사이즈로 사용한다면 좀 더 정확한 결과값을 얻을 수 있다. ■ 다이나믹한 홈페이지를 구현할 수 있는 DHTML(Dynamic HTML), xxxxJavaScript를 활용하라 DHTML, xxxxJAVASCRIPT를 적극 활용하여 좀 더 다이나믹하고 동적인 페이지를 구성한다. 애니메이션, 동영상 등의 파일로도 동적인 페이지를 구성할 수 있지만 간단한 스크립트 몇 줄로 저렴한(?) 용량으로도 역동적인 페이지 구성을 할 수 있다. 또한 웹 페이지의 외양을 제어하고, 각 요소들의 속성을 세밀하게 규정할 수 있는 CSS도 적극 활용한다면 좀 더 다양한 페이지제작을 할 수 있을 것이다. :: 테스트와 수정 어느정도 웹 사이트의 틀을 갖추었을 것이다. 이제 사용자 테스트와 수정을 하는 과정이 남아 있다. 사용자 테스트는 개발의 전과정에서 이루어져야 하지만 어느 정도 모습을 갖춘 지금의 단계에서라도 사용자 테스트 과정을 거친후 수정 작업이 이루어 져야한다. 웹 사이트의 타깃 사용자층을 대상으로 정확한 프로세스에 의거해 사용자 테스트를 하여야 하지만 여의치 않을경우 우선 주변 동료, 주변 사람들, 클라이언트등을 대상으로 시연과 함께 테스트를 요청한다. 이러한 테스트에는 사이트의 구조, 네비게이션의 편리함, 칼라, 페이지 내의 정보량의 적절함, 링크가 안되는 곳은 없는지를 꼼꼼히 체크하여 수정작업에 들어간다. 수정작업전에 이루어져야할 체크리스트 너무 많은 그래픽으로 인해 혼란스럽지는 않은가? 사용자가 원하는 정보로 쉽게 이동할 수 있는 네비게이션 시스템인가? 한 페이지 내에서 보여주는 정보량이 적절한가? 링크가 안되는 곳은 없는가? 기타 등등... 위의 사항등을 점검하여 수정작업에 들어간다