웹사이트 기획에서 제작까지

웹사이트 기획에서 제작까지

웹사이트 기획에서 가장 중요한 점은 홈페이지의 구축 목적입니다. "왜 만드는가" "이용자층은 누구인가?" "어떤 내용을 담을 것인가" 등의 정확한 사이트의 성격을 정해놓아야 기획이 쉽습니다. 웹디자인은 디자인을 위한 디자인이라기 보다는 웹을 이용하는 사람들을 위한 보다 편리한 User Interface와 사이트의 특성에 맞는 개성있는 표현, 그리고 이용이 편리하고 보기에 좋은 화면구성을 하는 것입니다. 홈페이지를 자신의 미적감각의 표현대상이라 생각하고 그저 예쁘게만 만들려고 하는 것보다 홈페이지의 기본 원리에서 벗어나지 않는 최대한 절제된 표현이 중요합니다. 1. 주제설정 만들고자 하는 사이트의 주제를 파악해야 합니다. 주제를 정해야 디자인의 컨셉(concept)을 잡고 그에 맞는 디자인을 할 수 있기 때문이지요. 주제에 따는 홈페이지 제작의도 또한 파악해야 합니다. 사이트에서 강조하고 싶은 것은 무엇인지(예 : 회사홍보, 제품소개, 전자상거래 등),주요 이용고객의 Target은 누구인지 (예 : 학생, 주부, 직장인, 각분야의 전문가 등)에 따라 디자인의 경향이 많이 달라지게 됩니다. 2. 자료조사 자료가 충분히 준비된 상테에서 진행을 해야 순조롭게 이루어집니다. 필요한 내용들을 text로 모두 준비 해 두고, 이미지들도 Scanning 해 두어 필요할 때 바로 꺼애어 쓸 수 있어야 합니다. 웹에서 글씨를 읽는 것은 책보다는 집중성이 떨어지고 쉽게 포기 해 버리는 경우가 많기 때문에 필요이상의 많은 자료보다는 중요한 부분만을 요점으로 간단명료하게 준비 해 두는 것이 좋습니다. 오타검사 또한 중요합니다. 3. 메뉴분류 메뉴를 크게 몇가지로 나눌 것인지, 그 나뉜 메뉴는 또 몇개의 sub로 나뉠지를 결정합니다. 메뉴가 너무 많게 되면 혼란스러우므로 적당히(5~7개가 적당) 나누고, 메뉴의 이동이 너무 잦지 않도록 분류를 잘 나누어야 합니다. sub메뉴들이 3단계(Three depths) 이상으로 계속 나뉘게 되면 화면상 배치하기도 어렵고 자칫 어지러워질 수 있으므로 간결하고 분명하게 구분하여 나누어야 합니다. 메인메뉴는 7개 이상이 넘어가면 화면 분배상, 이용상 좋지 않습니다. 가장 이상적인 메뉴는 5개 이지요. 그리고 Home, E-mail, Sitemap, English 등의 메뉴는 메인메뉴와는 구분지어 다른 디자인으로 꾸미는 것이 좋습니다. 4. 구조도 작성 메인메뉴과 서브메뉴 등을 정리하여 표로 만든 구조도가 필요합니다. 이 ? 이미지나 HTML 의 네이밍룰(Naming Rule)도 함께 정해두셔야 합니다. 네이밍룰이란 필요한 내용들의 문서에 대한 이름들을 나름대로 규칙을 짜서 만들어 놓으면 정리하기도 편하고 찾기도 쉬운 이점이 있습니다. 5. 화면레이아웃 디자인 작업에 들어가기 전에 레이아웃을 정해야 합니다. 메뉴프레임은 어떤 모양으로 할 것인지, 메인메뉴와 서브메뉴는 어느곳에 배치 시킬지 등이지요. 이런 스케치들을 러프스케치(Rough Scatch)라고 합니다. 6. 디자인 작업 디자인 작업에 주로 쓰이는 툴은 Adobe Photoshop입니다. 우선 프레임 디자인(메뉴가 있는 부분)을 꾸며봅니다. 이? 프레임은 어떻게 나눌 것인지를 염두에 두면서 작업해야 합니다. 이미지는 어떻게 쪼갤것인지, 백그라운드로 쓸 것인지, 그냥 이미지로 얹을 것인지 모두 고려해야 합니다. 7. 그림쪼개기 결정된 디자인을 웹에 띄우기 위해서는 그림을 GIF나 JPG로 저장 해야 합니다. 이 때 큰 그림의 경우는 여러조각으로 쪼개어 Table에 정렬하여 올리게 됩니다. 또한 　xxJavascript　나 여러 효과를 위해서도 이미지를 쪼개야 하는 경우가 많이 생깁니다. 8. 웹에 올리기 HTML(Hyper Text Markup Lanague)을 이용하여 준비된 내용들을 브라우져에 실제로 띄우는 작업입니다. 직접 메모장에서 HTML을 만드는 경우도 있고 Editor(Frontpage, 나모 웹에디터, Dreamweaver, Golive 등)을 이용하여 만들기도 합니다 전문가들은 주로 기본 틀을 에디터에서 잡고 메모장으로 소스를 추가하여 정리하는 방법으로 작업합니다. 9. Scripting 화면을 좀더 Intractive하게 만들어 주기 위한 방법으로 　xxJavascript　, Java applet!!, dHTML 등이 있습니다. 이런 작업들을 추가하여 동적이고 화려하게 만들어 줍니다. 10. 테스트 링크된 곳은 제대로 연결이 되어있는지, 모든 브라우져에서 무리없이 잘 보이는지, 에러나는 부분은 없는지 전체 페이지를 모두 테스트 해 봅니다. 11. 오류수정 테스트를 거쳐 발견된 오류들을 수정합니다. 12. 서버올리기 웹에 바로 연결되어 있는 서버로 올립니다. FTP는 주로 ws_ftp나 cute ftp를 많이 씁니다. <웹사이트 타겟선정과 분석>   인터넷 사업을 할 때, 자신의 사이트를 이용할 가능성이 있는 사용자 계층을 타겟이라고 할 수 있습니다. 이러한 타겟 분석은 타겟의 특성에 따라 웹사이트를 최적화할 수 있도록 해줍니다. 컨텐츠 구성부터 디자인, 네이게이션, 마케팅 등의 요소는 모두 타겟에 적합하게 기획.구성되어야 합니다. 웹사이트의 타겟의 범위는 비즈니스에 따라 매우 복합적으로 나타날 수도 있지만, 최대한 단순화하는 것이 사이트를 기획하고 운영하는데 실질적인 효율성을 부여할 수 있을 것입니다. 웹사이트 이용자 타겟 구분은 다음과 같습니다. - 연령별 : 10대, 20대, 30대, 40대, 50대 이후 등 - 성별 : 남자, 여자, 아줌마, 아저씨, 아동 등 - 지역별 : 나라별, 지역별, 도시.농촌 등 - 언어별 - 직업별 : 학생, 주부, 직장인, 공무원 등 - 기업별 : 개인, 소상공인, 중소기업, 대기업, 외구계기업 등 > bnks.net의 사이트 타겟 - 10대 후반 ~ 40대 - 성별 구분 없음 - 대한민국 전체 - 한국어 사용자 - 인터넷 관련 종사자, 사이트 제작이 필요한 사업주 등 bnks.net은 대체적으로 넓은 사이트 타겟을 가지고 있음을 알 수 있습니다. 너무 넓은 타겟층을 잡는 것은 기획에 혼란을 가져올 수 있습니다. 그래서 필요한 것이 핵심 타겟층의 선정이라고 할 수 있습니다. 만들고자 하는 웹사이트의 핵심타겟이 결정되었으면 이제는 그 타겟 이용자들의 성향을 분석하여야 합니다. 타겟 이용자들의 분석자료는 자체분석도 필요하겠지만 필요에 따라 통계청, 컬러연구소, 심리학서적 등을 참고하면 도움이 될 것입니다. 전문 웹기획자라면 일반적인 이용자 분류에 따른 웹사이트의 사용 현황과 특성들에 대해 지속적으로 분석하고 있어야 하며 그 변화되는 흐름을 파악하고 있어야 합니다.   <웹디자인의 용어 - 전반적 개념>   인포메이션 아키텍쳐 사이트내에서 사람들이 찾고자 하는 정보에 대한 올바른 해답을 찾을 수 있도록 정보를 분류하고, 체계화하는 방법이라고 할 수 있겠습니다.   네비게이션 사이트에 들어가야할 컨텐츠를 정확하게 파악하고, 사이트의 컨텐츠를 배치하는 방법 이라고 할 수 있겠네요. (다시 말씀드립니다만, 인포메이션 아키텍쳐,네비게이션,레이아웃은 비슷한 의미 입니다.)   레이아웃 웹사이트의 화면구성과 배치모양. 덧붙여 설명하면 "레이아웃이 잘되었다." 라고 하면 이것은 화면구성과 배치가 잘 이루어졌다. 그리고 "네비게이션이 잘되었다." 라고 하면 사용자 인터페이스가 편하고 직관적으로 잘 되어있다. 정도로 이해하시면 되겠네요.   스타일시트 HTML과 관련된 것인데요. 태그의 속성에 대한 묶음 정도로 이해하시면 되겠네요. 직접 HTML문서에 넣을 수도 있고 따로 .css 파일을 만들어서 쓸 수도 있습니다. 예를 들어 폰트에 크기와 색깔을 줄때 이렇게 줄수도 있지만 이렇게 줄수도 있구요 .css파일을 인클루드 시켜서 아래처럼 주면 모든 폰트태그는 아래와 같은 설정을 따르게 되지요.   레이블링 이것은 아마 레이어를 말씀하시는 것으로 보이네요. HTML이나 자바스크립트를 사용할때, 이미지 등에다 layer= "layer01" 등의 이름을 줄 수 있습니다.  ID나 NAME도 비슷한 역활을 하지요. 이렇게 이름을 주는것을 레이블링이라고 할 수 있겠고, 그런 시스템을 레이블링시스템이라고 할 수 있겠네요. (참고로 저렇게 레이블링을 하면, 해당 HTML문서에서는 layer01 이라는 이름의 객체를 사용할 수 있는것입니다.)   캘리그래피 필기체·필적·서법 등의 뜻으로, 좁게는 서예를 가리키고 넓게는 활자 이외의 서체(書體)를 뜻하는 말이다 단어뜻은 저런테 이미지관련 프로그램에서 사용하는 메뉴이거나 기능을 의미하는 것으로 보이네요.     타이포그래피 단어의 뜻은 활자를 사용해서 조판하는 것인데, 좀더 넓고 다양한 의미가 있는 것으로 보입니다.  폭넓은 이해에 아래 글들이 도움이 될 듯 하여 올립니다.     웹아이덴티티 우리가 흔히 삼성, LG, 농심, 등의 기업이름을 생각하면, 해당 기업의 이미지가 어느 정도 떠오르지요. 광고의 효과일수도 있겠고, 실제 상품을 사용해본 경험, 등이 축적되어 나타나는 결과이겠지요. 웹사이트 상에서 이런 역활을 하는 것이 웹아이덴티티가 아닐까 합니다. 해당사이트의 이미지일수도 있고, 그 사이트를 운영하는 기업의 이미지일 수도 있겠지요.     1. 타이틀 (흔히 메뉴 또는 메뉴명칭이라고 부르는 거죠) (제목과 제목의 체계. 글로벌, 로컬뎁쓰1, 로컬뎁쓰2 등이 체계적으로 정해져야겠지요) 2. 컨텐츠 아이덴티피케이션 (컨텐츠 정의 정도가 되겠네요) (분류된 컨텐츠별로, 픽토그램, 아이콘, 배경이미지, 칼라, 서체 등을 체계적으로...) 3. 메뉴 네비게이션 설정 (타이틀을 네비게이션에 배치하고, 인터액션을 주고, 표시하는 것)