메뉴 건너뛰기

XE : Xpress Engine




웹디자인 강의

아 .. -_- 제 홈페이지를 만들다가 갑자기 심각한 고민에 빠져버려서 -_-;;;;;
강좌를 쓰려고합니다.

#02. 개인홈페이지를 구성해보자.

개인홈페이지의 경우에는 정말 빠른 시일내로 홈페이지를 구성하고 완성하게 될 수 있습니다.
음.. 그렇다고 초 단시간 홈페이지가 된다는 소리는... 아니지요;

일단 개인홈페이지나 다른 어떠한 홈페이지도 주제를 먼저 정합니다.
주제만 정해버리면 간단하게 홈페이지를 구성하게 될 수 있는게 바로 개인홈페이지입니다.

가상적으로 여기서는 돌피인형 홈페이지를 만든다고 하고 구성을 해나가겠습니다.

1. 일단 돌피인형이 주제가되므로 모티브가될만한 사이트들을 검색해봅니다.
그리고 거기서 나오는 공통적인 메뉴바들은 체크를 해둡니다.
각자의 홈페이지마다 풍기는 느낌이 있을겁니다.
조잡하거나 , 깨끗하거나 등등... 'ㅡ'a

일단 위의 사항들을 꼼꼼히 체크를 해둡니다.
그리고 자신의 툴사용 능력을 최대한 사용할수있는 범위가 어디까지인지는 이해하고 있어야합니다.

2. 분위기를 정합니다.
돌피인형은 종류별로 다양하지요. 싸늘하거나 밝거나 귀엽거나...
저같은 경우에는 싸늘한 ;;;;; 것을 매우 좋아하기 때문에 싸늘한 분위기를 택하게됩니다.

분위기를 정했다면 천천히 구성을 할 단계가 되는겁니다.

2-1. 전체적인 색상 [ 색상톤 : 그레이 , 화이트&블랙 ,등등;;; ]
이렇게 되면 그레이톤이나 화이트&블랙톤이 싸늘한 분위기에 알맞을 껍니다.

이런 방식으로 자신의 홈페이지가될 전체적인 색상을 선택하게 됩니다.

2-2. 음악을 넣게되면 알맞은 분위기로;;
요즘에 보면 음악을 넣는 홈페이지들이 상당히 많아지고 있지요 'ㅡ'?
음악도 분위기를 정해주는 요소입니다.

3. 대강의 스케치를 시작합니다.
스케치에 필요한것들이요... 음 .... 어디보자;;

index 부분과 main 이 될부분정도면 되겠네요.
이부분에서 레이아웃을 잘 짜둬야합니다.
자신이 찾을 그림들. 그리고 그림의 위치등을 선정해야 하거든요.
분위기를 설정했으니까 그 분위기에 맞는 구도를 잡아둬야해요.

4. 메뉴정하기.
쓰잘때기 없어보여도 메뉴를 정하는것도 구성을 해둬야하는 부분에 꼭 필요한 부분입니다.
레이아웃을 짜면서 같이 생각하는것도 좋은 방법이겠지요.. [ 개인홈페이지에서는 별로 상관없습니다만은..
다른류의 홈페이지를 만들때는 메뉴를먼저정하기도 합니다.. 저는 메뉴를 나중에 정하는 성향이 강해서;; ]

ex) Profile / 주인장 소개
Tutorial / 포토샵강좌 , 나모강좌 , html 팁.. 등등 'ㅡ';
뭐 이런식으로 짜나가야죠; 큰 메뉴 -> 작은 부속메뉴.

기억해두세요 큰 메뉴 -> 작은 부속메뉴. -_-;;;; 광고같다는;;

5. 이미지 만들기.
저같은경우에는 거의 모든작업을 포토샵과 일러로 해버립니다 -_-;;; 대부분의... 사람이 아닐까;;
라고해도 되겠지요 ?? [ 플래쉬를 주로하시는 분들은 예외로 해두겠습니다;; 죄송합니다 ]
자신의 분위기에 맞는 이미지들을 찾아뒀겠지요?
그렇게 되면 스케치를 해둔곳에 알맞은 사이즈와 함께 여러가지 작업들을 해줍니다.

아마 3 , 5번을 계속 되풀이하게될 겁니다.
스케치에 대강맞게 만들었다 싶어도 막상 완성하고나면 어설프거나 안어울리다고 생각이들거든요.

6. 홈페이지를 최종적으로 구성합니다.
이부분이 가장 복잡할듯 하네요;;

6-1. index부분에 알맞게 레이아웃팅해줍니다. [ 스케치참조를하면서.. ]

6-2. 전체적인 구조 [ 각 페이지마다 구조가 다른것은 예외로 합니다. ]
모든 페이지의 모티브가될 페이지를 구성합니다.
[ 노 프레임도 제외로 해두지요;;; ]
프레임을 나누게되겠지요?
프레임을 나누는 순서도 대강대강 하시면 안된다는것을 나중에가시면 뼈저리게 느끼기전에
프레임도 하나하나 잘 생각하시면서 나누어 줘야합니다.

6-3. 사이트메뉴에 링크걸기.
링크방법이 여러가지가 현재 웹에서 나돌아댕기구있습니다.
요즘에는 거의 밑줄을 없애는게 기본이되어버린것처럼 느껴질만큼 깔끔하게 링크를 걸어야겠지요.
자신에 맞는 방법으로 링크를 걸어주면 전체적인 구조도 일단락되는겁니다.

마지막. 혹시나해서 적어두는 작은 팁같지도 않은 팁들.

아 난 미니사이트를 만들어서 보드를 사용하니까 너무 조잡해져요;
->> 이런경우에는 주로 새창을 띄우게 됩니다. 적당한 사이즈로 띄워주면 되겠지요;;

나도 XXXXXXX 님처럼 멋지게 만들고싶은데 잘 안되는데요..?
->> 처음부터 너무 멋지게는 안되는거랍니다. 그리고 자신만의 스타일을 익혀두는것도 중요합니다.

아... 다른것들은 다음에 적어두겠습니다 죄송합니다 ㅠ_ㅜ;;
배가고파....서;; 철푸덕
번호 제목 글쓴이 날짜 조회 수
공지 공지 강좌를 올리기전 공지사항을 읽어주세요 [12] Eccen 2004.12.15 48026
62 폰트 글씨 분명히하기? 라고 해야하나.ㅡ.,ㅡ [8] newpy 2003.02.14 4892
61 SWISH (스위시) 메인화면 설명 [2] file 아메 2003.02.13 4213
60 [힐링포션의 그림판강의] 명암있는 구체 쉽게 그리기 [18] file Heal.P.XERO 2003.02.12 5965
59 [팁]칼라 팁 세번째 이야기 [7] ECKS 2003.02.08 3295
58 [팁]칼라팁 그두번째 이야기입니다 [6] ECKS 2003.02.07 3086
57 (나모) 그림에 마우스 대면 아래에 서브메뉴 뜨게 하기 [30] Probe 2003.02.06 11329
56 그림판으로 포토샵처럼 브러시를 끼워넣자 [#그림판강좌] [7] file Probe 2003.01.30 6658
55 [페인터] 미로만들기=_=~ 길도 찾아준답니다;; (*_*페인터 첫강좌!!) [5] file 야로-_-v 2003.01.22 4042
54 1024x768,IE 6.0에 최적화 되었습니다. 라는말은 쓰지마라! [46] Smileru™ 2003.01.19 6487
53 #07. 홈페이지의 분위기 극대화시키기. [13] Nersion 2003.01.19 7747
52 [ All User? ] #06. 나 자신을 돌아보기. [11] Nersion 2003.01.18 6482
51 [ All User? ] #05. 형식 벗어나기 - 1부 - [14] Nersion 2003.01.16 3373
50 [ All User? ] #04. 홈페이지 짜임새있는 레이아웃 짜기. - 2부 - [8] Nersion 2003.01.15 11712
49 [ All User? ] #03. 홈페이지 짜임새있는 레이아웃 짜기. - 1부 - [6] Nersion 2003.01.15 15873
» [ All User? ] #02. 개인홈페이지를 구성해보자. [8] Nersion 2003.01.13 11396
47 [ All User? ] #01개인홈피편. 웹디자인을 좀더 멋지게하려면 - 1부 - [7] Nersion 2003.01.13 6657
46 [제 1강 : POV-RAY 에 대해서 알아보자... ] [30] 시진 2003.01.07 3345
45 [HomePage Step] 홈페이지의 제작단계 [12] ZipShin 2002.12.27 8325
44 그래픽 파일 포맷에 대하여 [5] ZipShin 2002.12.06 3155
43 플래시 커튼효과할때 [10] Dearvil 2002.12.04 7733