달콤한상상

XML이 왜 필요하게 되었을까요?

 

웹에서 사용하기에 HTML은 지금도 잘 쓰이고 있습니다. 그죠.. 거기에 자바스크립트, DHTML, CGI, ASP, PHP...
을 통해서 이제는 동적인 페이지의 구성도 가능하죠.. 하지만 그 이면에는 우리도 느끼지 못하는 문제점이 있네요.

 

첫째로 NT-IIS-ASP-MSSQL, LINUX-Apache-PHP-MySQL 무얼 말하려는지 눈치 채셨나요?
바로 호환성입니다. 여기에 지금은 그나마 나아졌지만 초기에 IE와 넷스케이프의 호환도 엄청난 문제였죠.
즉, 정적인 HTML의 기능을 보완하다 보니 각 스크립트, 제품별로 상호호환이 안되는 거죠.

 

둘째로는 홈페이지를 새롭게 개편한다고 해보죠.. 디자인이 바뀌면 HTML페이지의 내용이 모두 바꿉니다.
그죠.. 물론 텍스트니까 복사&붙여넣기를 사용한다고 해도 넘 불편하죠..
즉, 디자인 부분만 바뀌면 되는데,, 데이터부분도 바꾸어야 하는 거죠..

 

셋째로 만약 악보를 웹에서 표현하고 싶다면 어떻게 할까요? 이미지로 그려야겠죠.. 그럼 그 그림을 다른 사람에게 보내면
그 사람이 그 악보를 해석해 낼 수 있을까요? 당연히 하죠.. 사람인데..
하지만 컴퓨터는 해석할 수 없죠... 이미지 프로세싱도 아니고 그림에서 어디가 '도''레''미'인지 컴퓨터가 어찌 알겠습니까?

 

이런걸 XML로 해결할 수 있다는 겁니다.

 

여기에서 잠시만 뻘소리를 좀 하자면, 제가 이렇게 막 XML이 좋다고 설명을 하면 마치 XML을 만병통치약 정도로 생각하는 사람들이 있습니다.
죄송하지만 아직 XML은 만들어지고 있는 언어입니다. 즉, 이론은 모두 나와 있지만 실제로는 제한된 부분만 구현이 되고 있습니다.
아마도 2~3년 내에는 실제로 모든 구현도 이루어 질수 있으리라고는 보지만,, 지금은 일단 추세를 따라가 주는 것이 중요할 듯합니다.
잠시.. 헛소리였습니다... 지송함다..

 

그렇다고 이러한 표준이 XML이 먼저는 아니었습니다. 아실분은 다 아시죠.. SGML(표준화된 일반 마크업 언어)라구요..
SGML은 실제로 정부 기관에서 많이 사용되었습니다. 하지만 넘 덩치가 큰 표준이었고요..
웹이 발달하기 이전에 나온 것이라 웹에 대한 지원이 미약했습니다. 하지만 이것이 바로 XML의 부모인 셈이죠..
XML은 SGML에서 사용되는 많은 기술들을 받아들여서 간소화하고 보완하면서 현재 발전해 나가고 있습니다.
아래 그림을 그걸 간단히 보여주고 있습니다.

 

                           <그림 : SGML과 XML의 관계>

 

자 이제 정리 해 보도록 하죠... 하~~ 역시 말로만 설명하는 건 넘 어렵죠.. 걱정 마세요. 담부터는 예제 중심으로 설명하도록 하죠.
지도 힘드네요.. 말도 잘 못하는 것이 주저리주저리 타이핑하려니 장난이 아니군요.. T__T

 

XML의 장점이 뭐죠?

1. 문서의 내용과 디자인이 완전히 분리 되어 있다는 겁니다. 즉, 문서의 구조와 프리젠테이션의 분리라 할 수 있죠.
문서의 구조는 XML문서를 통해서 트리구조의 구조적인 형태로 나타냅니다. 그리고 출력, 포매팅은 XSL 문서를 통해서 나타낼 수 있습니다.

 

2. 다양한 방식의 링크 기능을 제공합니다. XLink, XPointer를 이용하면 기존 HTML에서 이용하던 하이퍼링크 이상의 기능을 발휘할 수 있습니다.
자세한 내용은 강좌를 진행하면서 설명하도록 하죠.

 

3. 표준화된 DTD를 통해서 모든 분야에서 사용이 가능합니다. 요즘 많이 사용되는 WML, SMIL, SVG등이 모두 XML에 기반을 둔
언어입니다. 이것은 XML의 DTD를 선언하고 모든 사용자가 그 규칙에 맞추어 사용하면 컴퓨터나 사람이 모두 해석할 수 있는 메타 언어가 된다는 거죠.

야.. 갑작스럽게 어려운 용어가 많이 나왔네요.. 이론... 머리가 어지럽네요.. 앞으로 차근차근 제가 아는 것만큼 설명해 드리도록 하죠..

XML 문서의 구조와 포매팅의 구분

여기서는 참고로 XML의 구조와 포매팅의 분리에 대해서 설명을 좀 더 할까 합니다.
자동차를 하나 예로 들어서 설명을 해보죠.. 자동차 음~~ 현대 아반테의 엔진에 대한 설명서를 XML문서로 하나 가지고 있다고 해보죠.
그렇다면 지금 XML 문서는 준비가 되어 있는 겁니다. 그리고 포매팅을 할 수 있는 것이 없는 상태죠.
차 엔진 설명서에는 XML 형태로 아반테의 엔진에 대한 모든 내용이 포함되어 있습니다.
아반테를 생산하는 공장에서는 엔진을 조립하는 방법이 필요합니다.
그리고 차를 수리하는 카센타와 같은 곳에서는 엔진이 고장났을 때 수리하는 방법이 필요합니다.
마지막으로 차량 구입자에게는 아반테 엔진을 사용하는 방법의 설명서가 필요합니다.
이런걸 기존의 미디어라면 모두 각각 만들어야 합니다.
하지만 XML이라면 포매팅만 새롭게 해주면 기존의 XML문서를 이용하여 모두 만들어 낼 수 있습니다.
XML이라는 것이 좀더 매력으로 느껴지지 않으세요?? 안그런가? 쩝... 어쨌던~~
어떻게 그럴수 있을까요?? XSLT라고요.. XML을 변환하는 것에 대한 표준안이 W3C에서 이미 발표된 상태입니다.
각 벤더들이 그에 대한 솔루션을 각각 발표하겠죠..
또한 이 XSLT를 이용하면 다른 미디어로도 출판이 가능하다고 합니다.
즉, 위의 아반테 엔진을......
CD-ROM 버전으로 출판할 수 있구요.
웹에서 사용할 수 있는 형태로 출판할 수도 있구요..
요즘 많이 사용되는 PDA에서 사용할 있도록 나타낼 수도 있답니다.
실제로 제가 본 것은요.. XSL의 포매팅 객체 (Formatting Object)를 이용해서 PDF파일(아크로뱃리더)형식과 HTML과 WAP의
3가지 형태로 출력하는 외국의 사이트를 본적이 있네요.. (http://www.renderx.com/)
이제는 이런 형태의 XML이용이 점차 보편화 되고 있는 추세죠..

첫 강좌는 여기까집니다. 휴~~ 그럼.......   2002/08/01  From 미니

1.

우선 달력을 만들기 위해서 기본배경이 되는 틀과 넣고싶은 이미지를 하나씩 불러옵니다.

달력의 틀이되는 이미지

내부를 채울 이미지

 

 

2.

먼저 틀이 되는 이미지부터 저번 시간에 배운 [이미지 사이즈] 조절을 통해 원하는 크기로 리사이징 합니다. 제가올린 위의 이미지가 400*400px인데, 그에비해 너무 크게 확대시키면 이미지의 질이 안좋게 변하는건 당연한 결과겠죠 ^^ 적당히 크기조절을 합시다.

자 됐으면 다음은 내부이미지. 내부에 들어가야하니깐 틀보다는 조금 작아야 안에들어갈수 있겠죠..

[이미지사이즈]조절이 끝나면 내부이미지를 전체선택(ctr + A) 혹은 사각형선택툴(M)로 원하는 부분만큼 선택을 하고, 복사(crt + C)해 틀 이미지에다가 붙여넣기(crt + V)합니다.

* 처음에도 언급하였듯이 포토샵에서는 보통의 윈도우 프로그램과는 달라 마우스의 오른쪽마우스를 클릭했을때 나오는 메뉴가 조금 다릅니다. 이 부분에서 설명한 단축키는 꼭 외워두도록 합시다. 안그러면, 작업이 너무 어려워져요 ㅠㅠ

 

 

자 그럼 위 그림과 같은 결과를 얻었나요?

그림 두개가 겹쳐져 있어도 당황하지마세요 ^^ 제대로 된 거니깐요..

 

3.

오른쪽 [레이어 페널]에서 새로 붙여진 레이어가 진한색으로 선택되어져 있다면,

왼쪽의 툴바에서 [이동툴(Move Tool, V)]을 선택한뒤, 위의 상태바에서 [Show bounding box]가 체크되어있는지 확인한다. 체크되어있지않으면 체크해줍니다.(한글판에서는 뭐라고 되어있는지 확실히 모르겠지만, 테두리보이기(?) 뭐 이런뜻으로 되어있을 겁니다 ㅡ.ㅡ)

 

그러고 나면 현재 선택되어있는 레이어의 이미지 테두리에 점선으로 된 사각형이 보여지게 된답니다. 그리고 아래위 좌우 그리고 대각선 방향에는 크기를 늘였다 줄였다 할수있는 조그만 사각형이 보입니다.

이 상태를 따로 Free transform(자유변형)이라고도 합니다.

 

어쨌든

새로 붙여진 이미지의 크기와 위치를 기존 판 레이어와 어울리게 배치해 봅시다.

먼저 이미지를 쉬프트키(Shift)를 누른채로 변형시켜봅시다.(대각선 방향으로만 합니다) 그리고 컨트롤(Ctr)키를 누르면서도 한번해보고, 알트(Alt)키를 누르면서도 해봅시다. 신기하죠? ^^

 

이 기능을 정리해보면 

쉬프트키(Shift)를 누른채로 변형 : 가로, 세로의 크기 비율이 유지되면서 변형됨

알트(Alt)키를 누른채로 변형 : 이미지의 정가운데를 중심 축으로 변형됨

컨트롤(Ctr)키를 누른채로 변형 : 해당 귀퉁이만 변형됨(이미지가 심하게 변할수있으니 조심)

 

이외에도 [이동툴(Move Tool, V)]의 Free transform(자유변형)은 이미지를 회전시킬수도 있고, 기울기도 변화시킬수 있습니다. 위의 상태바에서 찾아보세요 ^^

 

모양이 뒤에있는 이미지와 어울리게 되었다면 툴바의 맨위의 왼쪽에있는 [사각형선택툴(M)]을 마우스로 클릭해 봅니다. 변형된 이미지를 적용할꺼냐고 물어보면 OK를 꾹 눌러주세요..

 

4.

자 이제 숫자만 집어넣어주면 달력이 완성되겠죠?

왼쪽 툴바에서 T모양이 그려진 [문자툴(T)]를 선택하고 이미지 위에다 드레그해서 사각형 모양을 만들어 보세요.. 만들어보면 커서가 깜박일 거에요..

거기다 필요한 문자를 키보드로 써 넣으면 된답니다. 쉽져? ^^

 

문자를 편집할때는 위의 상태바에서도 할수있지만, 더욱 세부적인 편집을 위해서 위의 [Window]메뉴의 [Character]를 선택해서 문자패널을 이용하면 더 많은 기능들을 이용할수 있습니다.

 

오른쪽의 레이어패널에도 문자레이어가 하나 생성되었을거에요..편집의 묘를 살리기 위해서 월을 나타내는 레이어와 날짜를 나타내는 레이어를 따로해서 편집해 보죠.. 방법은 아까와 같이 문자툴을 선택하고 드레그해서 사각형모양을 만들면 됩니다.

 

타이핑과 글자색, 크기 등이 정해졌으면

아까 이미지의 크기와 모양을 조절했듯이, [이동툴(Move tool, M)]을 이용하여, 크기와 모양, 기울기, 윈근감을 조절해봅시다.

그런데 문자레이어는 아까와같이 쉬프트가 안먹죠? 그렇습니다. 조절이 가능하게 할수도 있지만, 오늘은 그냥 해보도록 하죠.(왜냐면 색이 단색으로 변해버리기때문에 조금 복잡한 작업이 필요하거든요 ^^)

 

됐으면, 레이어 페널 위에서 오른쪽 클릭을 하면 메뉴가 나오는데 거기서 [Blanding Options(혼합옵션)]을 선택, 그림자, 선, 엠보싱, 그라디에이션 등의 작업을 해 봅시다. 따로 설명을 해드릴 수도 있지만 이것만해도 꾀 많은 시간이 걸릴듯 하여 시간관계상 다음 시간으로 미루겠습니다.

 

 

5.

다 되었으면 마지막으로, 저장을 해야겠죠. 먼저 psd(포토샵원본파일)로 저장을 하고난 뒤, 새이름으로 저장하셔서, jpg(압축형태)파일로 따로 저장을 해둡니다. 왜냐하면 psd파일은 레이어가 나뉘어진 상태로 저장이 되어있어 이후에 작업을 하더라도 불편이 없지만, jpg나 gif로 압축된 형태에서는 레이어가 없기때문에 수정이 불가능하게 될지도 모르기 때문입니다.

 

그럼 제가만든거 한번 구경해보실래요? 컥 별루다,,, 선생맞오? ㅜ.ㅡ

 

 

킁...

 

포토샵을 종료하고 저장된 파일을 찾아서 바탕화면으로 지정해주시면, 내가만든 이쁜 달력 바탕화면이 된답니다. ^______^ 우와 신난다,,

1. 주제설정
만들고자 하는 사이트의 주제를 파악해야 합니다. 주제를 정해야 디자인의 컨셉(concept)을 잡고 그에 맞는 디자인을 할 수 있기 때문이지요.
주제에 따는 홈페이지 제작의도 또한 파악해야 합니다. 사이트에서 강조하고 싶은 것은 무엇인지(예 : 회사홍보, 제품소개, 전자상거래 등),주요 이용고객의 Target은 누구인지 (예 : 학생, 주부, 직장인, 각분야의 전문가 등)에 따라 디자인의 경향이 많이 달라지게 됩니다.

 

-> 물론 이정도는 다들 염두해 두셨을 거라 믿고 부가 설명없이 넘어가겠습니다. ^^

 

2. 자료조사
자료가 충분히 준비된 상테에서 진행을 해야 순조롭게 이루어집니다.
필요한 내용들을 text로 모두 준비 해 두고, 이미지들도 Scanning 해 두어 필요할 때 바로 꺼내어 쓸 수 있어야 합니다. 웹에서 글씨를 읽는 것은 책보다는 집중성이 떨어지고 쉽게 포기 해 버리는 경우가 많기 때문에 필요이상의 많은 자료보다는 중요한 부분만을 요점으로 간단명료하게 준비 해 두는 것이 좋습니다. 오타검사 또한 중요합니다.

 

-> 저는 사실 자료조사보다는 벤치마킹이 더 중요하다고 봅니다. 정말 좋은 싸이트가 있다면, 혹은 경쟁상대가 될만한(물론 혼자만의 생각이겠지만 ㅋㅋ) 싸이트가 있다면 그 싸이트의 전체 레이아웃부터 footer(카피라잇표시부분)까지 쫙 훌터 따라해 보면서 자기것으로 만들면 좋을것 같아요..물론 시간이 허락하는 만큼만이죠 ^^...모방은 창조의 어머니라는 말 거짓말 아닙니다!!!

 

 

3. 메뉴분류
메뉴를 크게 몇가지로 나눌 것인지, 그 나뉜 메뉴는 또 몇개의 sub로 나뉠지를 결정합니다.
메뉴가 너무 많게 되면 혼란스러우므로 적당히(5~7개가 적당) 나누고, 메뉴의 이동이 너무 잦지 않도록 분류를 잘 나누어야 합니다. sub메뉴들이 3단계(Three depths) 이상으로 계속 나뉘게 되면 화면상 배치하기도 어렵고 자칫 어지러워질 수 있으므로 간결하고 분명하게 구분하여 나누어야 합니다. 메인메뉴는 7개 이상이 넘어가면 화면 분배상, 이용상 좋지 않습니다. 가장 이상적인 메뉴는 5개 이지요. 그리고 Home, E-mail, Sitemap, English 등의 메뉴는 메인메뉴와는 구분지어 다른 디자인으로 꾸미는 것이 좋습니다.

 

4. 구조도 작성
메인메뉴과 서브메뉴 등을 정리하여 표로 만든 구조도가 필요합니다.
이 떄 이미지나 HTML 의 네이밍룰(Naming Rule)도 함께 정해두셔야 합니다.
네이밍룰이란 필요한 내용들의 문서에 대한 이름들을 나름대로 규칙을 짜서 만들어 놓으면 정리하기도 편하고 찾기도 쉬운 이점이 있습니다.

 

5. 화면레이아웃
디자인 작업에 들어가기 전에 레이아웃을 정해야 합니다.
메뉴프레임은 어떤 모양으로 할 것인지, 메인메뉴와 서브메뉴는 어느곳에 배치 시킬지 등이지요.
이런 스케치들을 러프스케치(Rough Scatch)라고 합니다.

 

-> 3번과 4번 5번을 붙여서 설명하는 것이 편하겠네요 ^^(저는 거의 동시에 이작업을 하거덩요)

 앞의 주제설정과 자료조사(혹은 사측 요구도조사) 및 다른 싸이트 벤치마킹이 끝나면 대충 이 싸이트에 들어갈 내용이 무엇일지 쭈루룩 나옵니다. 그것을 구조화시켜 표같은 걸로 작성하면 구조도가되는거죠 ^^ 저도 이번 작업때 한번 작성 해봤는데 프린터로 뽑아서 모니터옆에 붙여놓고 필요할때마다 수정, 추가 메모하니깐 헷갈리지않고 편해서 좋더군요 ^^..아래는 제가 짠 대충의 회사 홈피 구조도입니다.

 

1)메인페이지

왼쪽플레임(180px)            가운데플레임(470px)             오른쪽플레임(150px)

-----------------------------------------------------------------------------------------------

로그인                              주요사업/이벤트큰배너         싸이트내부검색

회원가입                           미니게시판1                        동맹싸이트배너

각종사업배너                     미니게시판2

-----------------------------------------------------------------------------------------------

Footer(로고 주소 전화번호 Fax 관리자이메일)

 

2)메뉴분류

소개 : 소개1, 사업, 연혁, 약도

주요컨텐츠1 : .....

주요컨텐츠2 : .....

열린광장 : 자유게시판, 사진자료, 문서자료, 링크

 

제가 대충 짠거인대 글자 문구하나, 픽셀하나까지 처음부터 정확하게 정해놓고 하는게 좋아요^^

그리고 실제로 할땐 이것 보다 훨씬 복잡하답니다. ㅠㅠ

 

 

6. 디자인 작업
디자인 작업에 주로 쓰이는 툴은 Adobe Photoshop입니다.
우선 프레임 디자인(메뉴가 있는 부분)을 꾸며봅니다. 이떄 프레임은 어떻게 나눌 것인지를 염두에 두면서 작업해야 합니다.
이미지는 어떻게 쪼갤것인지, 백그라운드로 쓸 것인지, 그냥 이미지로 얹을 것인지 모두 고려해야 합니다.

 

7. 그림쪼개기
결정된 디자인을 웹에 띄우기 위해서는 그림을 GIF나 JPG로 저장 해야 합니다.
이 때 큰 그림의 경우는 여러조각으로 쪼개어 Table에 정렬하여 올리게 됩니다.
또한 Javascript나 여러 효과를 위해서도 이미지를 쪼개야 하는 경우가 많이 생깁니다.

 

-> 음 여기서 부터는 앞으로 나가게 될 포토샵 강의에서 하는 게 좋겠군요.. 저도 처음에 아무생각 없이 픽셀만 맞추면 되겠지 하고 시작했는데..전체적인 통일성을 맞추면 세부적인 부분이 안맞고,,하나하나신경쓰다보면 통일성이 깨지고..해서 아무래도 여기서 부터 흔이 말하는 감(感)이 필요한것 같아요 ㅋ

 그냥 여기서는 홈페이지 기조색을 2-3가지(RGB색상코드로 정확하게) 정해두면 통일감있고 좋겠다는 말 정도만 해둘게요^^ 

 

 

8. 웹에 올리기
HTML(Hyper Text Markup Lanague)을 이용하여 준비된 내용들을 브라우져에 실제로 띄우는 작업입니다. 직접 메모장에서 HTML을 만드는 경우도 있고 Editor(Frontpage, 나모 웹에디터, Dreamweaver, Golive 등)을 이용하여 만들기도 합니다. 전문가들은 주로 기본 틀을 에디터에서 잡고 메모장으로 소스를 추가하여 정리하는 방법으로 작업합니다.

 

-> 요즘은 에디터가 잘 나와있어서 저장과 동시에 ftp에 올라간답니다. 참 편하죠?^^ 다시말해 컴퓨터에서 저장하는순간 웹에서도 바로 리뉴얼 된다는 말입니다. 저는 주로 텍스트편집할때는 울트라 에디터롤 사용하고 여기서 기본적인 구조 틀이 갖춰지고, 세세한 디자인적인 면들을 고칠때만 드림위버를 사용한답니다. 뭐 절대적으로 좋은 프로그램은 따로없고요..취향에 따라 쓰세요 ^^

 

 

9. Scripting
화면을 좀더 Intractive하게 만들어 주기 위한 방법으로 Javascript, Java applet, dHTML 등이 있습니다. 이런 작업들을 추가하여 동적이고 화려하게 만들어 줍니다.

 

-> 개인적으로 비추천입니다. ^^ 제가 컴공과를 다녀서 그런지(공부도 못하는게 땡고집은? -_-;;)..잘모르고 썼을때 에러의 주요 원인이 되고, 코딩자체가 지저분해지고 길어진답니다. ㅠㅠ 필요한부분 모두 html로 작성하시고.. 꼭 필요한 부분이 있다면 마지막에 덧붙이도록 합시다 ^^ 

 

10. 테스트
링크된 곳은 제대로 연결이 되어있는지, 모든 브라우져에서 무리없이 잘 보이는지, 에러나는 부분은 없는지 전체 페이지를 모두 테스트 해 봅니다.

 

11. 오류수정
테스트를 거쳐 발견된 오류들을 수정합니다.

 

-> asp나 자바스크립트 혹은 비쥬얼 베이직 등등의 에러의 경우 익스플로러의 메뉴 (보기)에서 (상태표시줄)을 선택하시면 브라우저 왼쪽 아래에 노란색 느낌표로 뜬답니다. 고놈을 더블클릭하면 에러가 뭔지 상세하진 않아도 대충은 에러가 난 코드의 줄번호까지 나옵니다. 울트라 에디트로 보면 줄번호가 표시 되기대문에 표시되는 줄번호를 찾아가 고쳐주면 된답니다. ^^

 

 

12. 서버올리기
웹에 바로 연결되어 있는 서버로 올립니다.
FTP는 주로 ws_ftp나 cute ftp를 많이 씁니다.
디렉토리 구조도 제대로 확인 한 후에 올리도록 합니다.

 

-> 휴~~~ 모든걸 하늘에 맞기고 편한한 마음과 자세로 커피한잔 들이키며 올려봅시다 ^^*

 

 

 

!!!물론 이걸로 강의가 끝난건 아닙니다. ^^ (혹시 걱정하는분이 계시다면..그럴리 없겠지만.-_-;;)

앞으로의 HTML강의에서 하나하나 단계별로 예시를 들면서 설명을 해드리도록 하죠 ^^ 시간이 허락하는한 ㅋㅋ

흠흠...뽀샵 작업을 하지않아도 될 만큼 이쁘군요 ^^

 

 

2.

우선은 전에 배웠던걸 이용해 원본이미지에서 필요한 부분을 선택해 작업공간으로 옮겨야겠죠 ^^

 

툴바의 젤위 왼쪽에 있는 사각형 선택툴(M)로 필요한 부분 드레그해서

컨트롤+C(복사하기)해서, 컨트롤+N(새창열기)으로 작업공간 열기, 컨트롤+V (붙여넣기)

(저번 강의 때 중요한 부분을 빼먹은것 같은데, 직접해 보시면 알겠지만 컨트롤+C(복사하기)해서, 컨트롤+N(새창열기)를 하면 포토샵에서 자동으로 복사된 부분의 크기만큼의 새 작업공간이 생깁니다. 그래서 따로 가로,세로크기와 해상도를 조절할 필요가 없답니다 ^^붙이기 해보면 정말 창크기에 딱맞게 붙여넣기가 되죠? 저도 처음에 디게 신기해했답니다 ㅡ.ㅡ 그리고 여담 하나더..만약 크기가 다른 창에 붙여넣기를 할 경우 창의 중심과 사진의 중간지점이 일치되게 한가운데 붙여넣기가 된답니다. ^-^)

 

 

3. 이미지 크기조절

기본적으로 이미지의 크기조절은 두 종류로 나뉩니다.

이미지사이즈 조절(alt + I + I )과 켄버스사이즈 조절(alt + I + S)로 나뉩니다. 화면의 위쪽의 Image메뉴에서도 실행이 가능합니다.

 

이 기능은 판자체의 크기를 조정하는 것입니다. 이미지사이즈조절은 판이 커지는 비율만큼 이미지도 커지고,작아지며, 켄버스사이즈 조절은 판만 커졌다 작아지고 이미지의 크기는 그대로 유지된답니다.

 

 이 기능에서 유의해야될 점이 두가지가 있는데,

 

하나는 저번 강의때 잠깐 언급된 바 있는 픽셀과 인치 그리고 해상도의 관계를 잘 염두해 두어야합니다. 픽셀은 모니터상의 아주촘촘한 모눈종이라 생각하면 되고요 그 칸칸마다 하나의 색이 색칠이 된답니다(아 모니터니깐 빛이 주사된다고 해야 말이 맞겠군요), 인치나 센티미터 등은 실제 크기고요, 해상도는 단위인치당 픽셀의 갯수..그러니깐 이미지의 정밀도라고 보면 됩니다.

 

두번째는 지난 강의때 배운 무브툴(V, 툴바 젤위의 오른쪽)의 FreeTransform(자유변형)기능이랑 햇갈리지 않았으면 합니다. 무브툴은 판크기와는 상관없이 이미지의 크기와 모양을 자유롭게 변형시킬수 있는 기능을 가지고있답니다. ^^

 

그러면 이미지나 판의 크기를 왜 조절해야할까요...당연한걸 물었는지 모르겠지만...-ㅗ-

필요한곳에 적당한 크기로 적당한 용량의 그림파일을 만들기 위해서입니다.

(싸이월드의 경우 조금 더 작지만 보통 이미지자료실 게시판같은경우 가로 픽셀을 5-600정도로 잡아 놓기 때문에 올렸을때 너무크면 창의 크기를 넘어서고, 너무 작으면 이미지가 잘 안보이겠죠 ^^)

 

 

4. 이미지 보정의 정수 색감조절

 

  ---> 

 

어두운 부분이 약간 밝아지고 얼굴이 잘안보여 붉은색을 약간 강조하였습니다.

원본사진의 모자부분이 너무 강조되어있어 대조비를 높이는 과정에 색이 날라가는 현상은 어쩔수가 없었습니다.(해결이 불가능 한건 아닌데 이과정에서는 좀 무리일것 같아 차후로 미룰게요 ^^)

 

화면의 위쪽의 Image메뉴에 adjustments의 기능들을 사용하면 되는데요.. 구체적으로 살펴보면 아래와같이 나뉘어 집니다. 근데 이게 이론적으로 잘 설명이 안된답니다. ㅠㅠ (저의 능력부족에 크게 실망했슴~)

사람마다 선호하는 색감과 밝기, 대조비의 정도가 다를 뿐더러 그 사진이 어디에 쓰이냐에 따라서도 다르고,.. 어쨌든 하나씩 직접해보시다 보면 조금씩 감이 잡힐것 같습니다.

(포토샵은 히스토리의 기능이 있다고 했죠? 따로 저장을 하지않는한, 너무많은 작업을 하지않는한, 창을 닫아버리지않는한.. 작업내역은 항상 히스토리 창에 남아있습니다. 마음대로 연습해 보세요 ^^) 

 

아래의 기능설명은

http://www.worldcad.co.kr//education/Photoshop1/htm/index.htm의 페이지에서 발췌하였습니다

 

- Level  : 작업 이미지의 명도(Brightness)와 대비(Contrast)를 조정할 때 사용작업 이미지를 밝게 하거나, 어둡게 할 수 있을뿐 아니라 대비차를 조정하여명암 상태를 확연히 드러나게 할수도 있음

 

- Auto Levels : 자동 레벨 메뉴, 메뉴를 실행하면 대화상자라 나타나지 않고 자동으로 명도가 조정 된다. Curve- Level과 마찬가지로 이미지이 명도와 대비를 조정할 떄 사용. 다른점이 있다면 커브 형태의 곡선을 자유자재로 드래그 하는 방식으로 조절

 

- Color Balance (*자주쓰는기능 ctr+ B 혹은 alt + I,A,B 의 단축키를 사용) : 원본 이미지에 다른 색상을 추가할 때 사용, 추가 할 수 있는 색상은 RGB와 CMYK가 있음

 

- Brightness/Contrast (*자주쓰는기능 alt + I,A,C 의 단축키를 사용) : 원본 이미지의 명도와 대비를 손쉽게 보정하는 기능으로 사용법이 용이하고 간단하여 작업 결과를 빨리 확인 할
수 있는 장점이 있다.

 

- Hue/Saturation : 색의 3요소인 색상, 채도, 명도를 조정할 때 사용

 

- Desaturate : 채도를 감소 시키는 기능, 채도를 제거하여 칼라이미지를 흑백이미지를 전환할 때 사용.

Replace Color- 색상을 교환할 영역을 선택한 뒤 이 영역을 다른 색으로 교체할 때 사용.  색상뿐 아니라 명도와 채도의 교체도 가능

 

- Selective Color : 잉크색상을 조절하는 기능, 잉크사용량을 조절해 색상을 바꿀 때 사용

 

- Channel Mixer : 채널을 혼합하는 기능

 

- Gradient Map : 그라데이션 색상으로 칠하기, 부드럽게 처리하기 위해 디더링이 가능하고 그라데이션의 색을 반전시켜 적용할 수 있다.

 

- Invert : 보색으로 반전하기, 주로 네커티브 이미지를 제작할 때 유용하게 쓰임.

 

- Equalize : 작업이미지에 분포된 명도를 평균화 시킬 때 사용. 주로 어두운 이미지를 밝게 만들 때 유용

 

- Threshold : 고대비조정기능. 고대비란 검정색과 흰색으로만 구성된 대비차가 큰이미지를 말한다. 대화상자에서 Level슬라이더를 조정하면 검정색과 흰색의영역을 조절할수 있다.

 

- Posterize : 원본 이미지를 포스터화 시킬 때 사용, 대화상자가 나타나면 채널당 사용할 색상수를 지정하면 된다.

 

- Veriations : 전체 이미지나 선택 영역으로 지정된 이미지의 색상과 명도 채도를 육안으로 확인하며 보정할 때 사용. 보정중인 결과는 샘플로 나타나므로 보정작업이 간편하고 쉽다.

 

5. 리터칭 도구

 : 화장을 할때도 파운데이션이 끝나고나면 리터칭이 들어가지요??(남자로 자라난 죄로 잘은 모릅니다만 ㅠㅠ). 어쨌든 전체적인 색감조절이 끝났으면, 리터칭에 들어가게 된답니다.

 

- 블러툴 : 이미지의 초점을 흐리게 합니다.

- 샤픈툴 : 이미지를 더욱 선명하게 해준다.

-스머지툴 : 손가락으로 문지른 것과 같은 효과를 줍니다.

- 닷지툴 : 이미지를 부분적으로 밝게 하여주는툴
- 번툴 : 이미지를 부분적으로 어둡게 해주는 번툴
- 스펀지툴 : 이미지의 채도를 조절하여 주는툴

다음에 배울 필터에 더 세세하게 다룰수 있지만, 리터칭 도구의 장점은 뽀샵이라는 별명에 걸맞게(?) 부분적인 보정을 할때 유용하다는 것이다.

 

 

자 그럼 이제 기본적인 이미지보정이 끝난 것 같네요.. 마치 연애인들이 성형수술을 하고난 듯한 효과는 아직 볼수 없지만... 하루종일 푹쉬고 싸우나에서 땀빼고, 맛사지 받고난 후 정도의 (너무 오바했나 ㅡ.ㅡ) 효과정도는 얻을 수 있었나용?

나름대로 재밌게 구성해보려고 노력을 했지만..역시나 썰렁하네요...

그럼 아쉽지만 이번주 강의는 이쯤에서 마치겠습니다.

name : 앞으로 저장될 파일이름
Preset Sizes : 주로 인쇄용으로 사용합니다.
Mode : 비트맵, 그레이스캐일(흑백), RGB(모니터에서, 보통 72), CMRK(인쇄,출판용,200-300이상)
Revolution : 해상도입니다.

3. crt + O ( 컨트롤 오픈 )
편집할 이미지를 불러오는 단축키입니다. 화면 오른쪽상단의 File Browser(버젼7.0에 새로 추가된기능)와 함께 사용하면 편합니다 ^^

4. crt + C, V, X, A, Z ( 문서편집때 꼭!!!! 써야할 윈도우 단축키 )

정말 중요합니다 ^^ 포토샵이 아니더라도 윈도우에서 돌아가는 모든 애플리캐이션에서 수시로 활용됩니다. 특히 포토샵에서는 인터넷이나 파일탐색기 등 다른 프로그램들과 연동하기위해 자주쓰입니다.
crt + C : 복사하기
crt + V : 붙여넣기
crt + X : 잘라내기
crt + A : 전체선택
crt + Z : 되돌리기(작업취소) ! 꼭 외워주세요 ^^

5. crt + alt + S ( 다른이름으로 저장하기 )

이것만 컨트롤과 알트가 붙었네요.. 무언가 이유가 있겠죠 ^^
앞의 new창에서 파일이름을 미리 지정해 두는 버릇을 안들이셨다면~.. 꼭 crt + s (그냥 저장하기) 보다는 불편하더라도 이것을 사용해주세요. 포토샵에서는 여러가지 파일 포멧을 다루어야 하기때문에 더더욱 필요합니다.
추가로 아래의 기능도 알아두면 유용합니다.(왼손의 손가락 끝이 약간 아플거에요 ㅜ.ㅡ)
crt + shift + alt + S : 웹용으로 저장하기(gif의 형태로 저장합니다)

이미지 포멧에 대한이야기..
- PSD : 포토샵 작업파일
- BMP : 장점은 이미지 파일중 가장 선명한 화질을 자랑하며 제작 편집 저장이 매우 쉽고 간편하다, 단점은 용량이 가장 크며, 웹브라우져마다 제한이 있다
- JPG : 장점은 많은 색을 쓸수 있으며 선명도를 %로 정할수도 있으며 선명도에 따라 용량도 줄일수 있다. 단점은 화질이 더러워서 중소규모 그림에서는 쓰이기 그렇다. 화질이 더러워서 메뉴에 사용하기 곤란하다
- GIF : 장점은 화질이 깨끗하면서도 용량이 적고, 움직이는 gif와 투명 이미지를 쓸수 있다. 단점은 트루칼라색도 쓸수 있지만 256가지 색만 저장해 담을수 있어서 화질을 좋게할려면 이미지를 잘라야함
- PNG : 장점은 화질이 BMP와 맞먹는 수준이다. 단점은 용량이 JPG나 GIF보단 크다.
내용출처 : [기타] 인터넷 : 엔지오

6. History (히스토리)

워낙 세밀하게 다양한 작업이 많기 때문에, 이 기능이 IT직 평균연령을 엄청 높여줍니다 ^^

7. Layer ( 레이어를 모르고 포토샵을 논할수 없다!! -_-;)

OHP필름을 여러장 겹쳐놓은 거나, 만화영화의 원리를 생각하면 이해하기 쉽다.

 

8. 도구모음 혹은 툴바 (제가 생각하기론 강좌 전체에서 가장어려운 분입니다.

 

- M : 선택툴입니다.사각형, 원형, 선형
- V : 이동툴, 이동 뿐아니라 크기변형, 회전, 대칭 등의 모양변형의 기능을 수행한다.
- L : 자유선택 올가미툴입니다. 마우스가는대로 선택합니다.
- W : 매직완드 마술봉툴, 유사색상 올가미로 선택한다.
- C : 크롭툴, 필요한부분만 남기는 툴, 선택한 이미지만 남기고 나머지는 없애준다.
- K : 슬라이스 툴, 분할하려는 영역을 드래그합니다. 웹페이지 제작에 사용
- J : 힐링
- B : 브러시 툴, 붓이라 보면된다, 오른쪽 상단에 보면 무쟈게 많다.
- S : 패턴도장 툴, 비스무리하게 만들어준다. 이미지 보정에 사용된다.
- Y : 히스토리 브러시
- E : 지우개, 드레그해서 일정범위를 지운다.
- G : 페인트 통, 색칠하기, 그라디언트
- R : 블러 툴, 흐리게
- O :뽀샤시하게, 어둡게, 스폰지로 문지르는것처럼
- A : 페스셀렉트
- T : 텍스트툴, 이미지 위에 글을 넣을 수 있습니다.
- P : 펜툴, 원하는 모양을 그릴수 있게합니다.
- U : 다각형툴, 정해진 다각형을 드레그해서 그립니다.
- N : 노트
- S : 스포이드 툴입니다. 색을 가져옵니다.
- H : 손바닥 툴입니다. 캠퍼스(판)를 드레그해서 보는 위치를 조정 할수있습니다.
- Z : 돋보기 툴, 확대 축소를 담당합니다.

* 자주쓰는 기능은 두꺼운 글씨로 처리하였습니다.

9. crt + 0, -, + ( 내가 보고싶은 크기로 보자!!! 화면확대,축소 키 )

크게 중요하지는 않지만 크게 불편한 부분들을 없앨수 있습니다.
crt + 0 : 화면 크기에 맞게
crt + + : 화면확대
crt + - : 화면축소
crt + alt + 0 : 실제크기로 보기
이와 더불어 위에서 배운 H(핸드,손바닥툴)을 이용해서 보고싶은 파일들을 조정하여 볼수있다.

10. crt + C, V, X, A, Z ( 문서편집때 꼭!!!! 써야할 윈도우 단축키 )

정말 중요합니다 ^^ 포토샵이 아니더라도 윈도우에서 돌아가는 모든 애플리캐이션에서 수시로 활용됩니다.
특히 포토샵에서는 인터넷이나 파일탐색기 등 다른 프로그램들과 연동하기위해 자주쓰입니다.

* 오늘 배운내용이 제가 평소에 작업하는 내용의 90%이상을 차지합니다. 어려워 보여도 이게 다라고 생각하면 쉽습니다. 하도 여기저기 따다붙이고 책뒤지고해서 출처를 밝힐수가 없습니다. 이해바랍니다. ㅠㅠ

1. 이미지 합성을 할 수 있습니다.

이 기능은 포토샵의 가장 큰 기능이라고 할 수 있는데 , 여러 이미지들을 서로 합성하여 모양이나. 배경등을 바꿀 수 있으며 심지어는 성형수술(?) 까지도 가능한 강력한 이미지 편집 프로그램입니다.

2. 홈페이지 타이틀 이미지나 메뉴를 만들 수 있습니다.
요즘 인터넷의 보급으로 웹 서핑 인구가 늘어나면서 홈페이지를 많이 만들고 있습니다. 홈페이지를 만들 때 필수적으로 해야하는 작업이 홈페이지에 들어가는 각종 로고나 그림, 메뉴등 입니다. 이러한 작업들을 포토샵을 이용하여 멋있고 예쁘게 디자인 할 수 있습니다.

3. 문자 디자인을 할 수 있습니다.
포토샵에서는 각종 문자를 아주 멋있게 디자인 할 수 있습니다. 이러한 문자들은 책표지 디자인, CD-ROM 타이틀 디자인, 포스터, 카탈로그등 인쇄용매체의 디자인 작업에 많이 활용됩니다.

4. 웹 포토갤러리를 만들 수 있습니다.

마치 앨범처럼 포토샵을 이용해서 전자앨범도 만들 수 있습니다. 이제 필름으로 현상해서 보는 시대는 가고 인터넷을 통하여 앨범을 제작하는 사람들이 늘고 있습니다. 자신의 가족들 사진이나 자신의 홍보용으로도 사용합니다.

5. 3D 나 애니메이션 작업의 기초 이미지로 많이 사용합니다.
3차원 그래픽을 제작하거나 애니매이션 제작시 기초그림으로 많이 활용이 됩니다. 또한 요즘 만화의 원고들도 포토샵으로 작업을 하여 채색을 하는 등 그 활용도가 더욱더 넓어지고 있습니다.

6. 멀티미디어 분야에도 사용하고 있습니다.멀티미디어의 발달로 영화나 일러스트, 게임등 다양한 분야에 사용됩니다

안녕하세요?
디지탈디자인의 백종수입니다.
이번에 새롭게 웹디자인 방법론 강좌를 진행하게 되었습니다. 오늘 강좌는 앞으로 진행될 강좌에 대한 내용을 미리 살펴보고 왜 웹을 디자인하는 방법을 배워야 하는가에 대한 이야기를 하려고 합니다.

1-1. 왜 웹을 디자인하는 방법을 배워야하나?

국내에는 많은 웹디자이너들이 있습니다. 제가 굳이 언급하지 않아도 이 강좌를 보시는 분이라면 다 아실 것입니다. 중요한 것은 `왜 웹디자이너가 많은가` 라는 것입니다. 여러분들도 이런 생각을 한번쯤 해보셨을 것입니다. `나와 같은 일을 하는 웹디자이너 너무 많구나!` 하는 생각..., 이런 생각을 하다보면 자기 자신도 모르게 웹디자인 일에 무기력해지고 정체성을 느끼게 되기도 합니다. 저도 그런 경우가 있었습니다.

이에 대한 해답은 웹디자인 교육에 있습니다. 대부분의 예비 웹디자이너들은 웹을 디자인하기 위해 학원을 다니고, 그 속에서 다양한 웹디자인 방법을 배웁니다. 포토샵, 일러스트레이터, 플래시, 드림위버, HTML, Javascript 등과 같은 것을 배우죠. 그러나 정작 배워야할 것을 못배운 채 웹디자인을 시작하게 됩니다. 하지만 웹디자이너로써 사회적 생명은 짧고, 회사를 옮기는 경우가 빈번하게 일러나는 것이 현재 웹디자인 업계의 현실입니다.

웹디자인 업계의 현실이 이렇게 된 것은 웹을 디자인하는 방법을 배우기 전에 툴 다루는 것을 먼저 배웠기 때문입니다. 그렇다면 툴을 다루는 것을 배우기 전에 무엇을 배워야 한다는 말인지 의문이 들 것입니다. 그것은 다름아닌 HTML입니다.

제가 HTML라고 해서 놀라지 않으셨는지요? 그 시시한 것을 뭐하러 배우냐고 반문하실 분도 계실 것이고, 나모나 드림위버를 이용하면 척척 다알아서 코딩해주는 데 HTML을 배우면서 시간을 낭비하는 것이 아니냐고 의문을 제기할 수도 있을 것입니다. 그러나 저는 조금 다르게 생각합니다. 지금 HTML은 거의 찬밥 신세나 다름없습니다. 너나할것 없이 보수 좋고, 사회적 생명력이 웹디자인보다 긴 웹 프로그램을 배우느라 정신이 없는 시기이기 때문이죠. 그러나 HTML을 모르고는 웹디자인도 웹 프로그램도 할 수 없다는 것을 알아야합니다. 겉이 번지르하다고 해서 좋은 웹사이트가 아니기 때문이죠.

그렇다면 왜 HTML을 배워야 할까요? 우리가 알고 있는 HTML은 웹페이지를 만든데 가장 기본이 되는 프로그램 언어라고 요약할 수 있습니다. 이 말에 이의를를 제기하는 사람은 없을 것입니다. 왜냐하면 맞는 말이기 때문이죠. HTML이 웹페이지를 만든다는 말은 다시 말해 웹을 디자인한다는 말과 같습니다. 그렇다면 웹을 디자인하는 것을 배운다는 것은 바로 HTML 배우는 것으로 결론지을 수 있을 것입니다. 바로 HTML로 웹페이지를 디자인하는 방법을 배워야 한다는 것입니다.

제가 HTML로 웹을 디자인하는 배워야한다는 것은 나모나 드림위버와 같은 툴을 전혀 사용하지 않고 웹페이지를 만들어야 한다는 것은 아닙니다. 또한 HTML 태그와 속성을 다 외워야 한다는 말도 아닙니다. 그럼 무엇이냐고 성급하게 물어보실 분도 계실 것입니다. 그것은 다름아닌 HTML에 담긴 철학과 원리에 대한 이해를 배워야 한다는 것입니다. 철학과 원리는 포토샵으로 웹페이지의 시안을 만드는 것과 아무런 관련이 없습니다. 또한 플래시 에니메이션을 구현하는 데에도 아무런 도움이 되지 않습니다. 그러면서도 배워야 한다는 것은 지금과 같은 상황을 만들지 말아야 한다는 것과 앞으로 웹디자인에 대한 가치를 높이기 위해서입니다. 그리고 늦은 만큼 제대로 웹을 디자인 하는 방법을 알아야 한다는 것입니다.


1-2. 웹을 디자인 하는 것이 아니라 정보를 디자인하는 것이다.

많은 웹디자이너들이 실수하는 말 중에 하나가 `웹을 디자인한다` 는 말입니다. 이 말의 의미는 `제품을 디자인 한다` 라는 말과 다를게 없습니다. 즉, `웹 = 제품` 이라는 등식을 자연스럽게 만들어 내는 것이죠. 그러나 웹은 제품이 아닙니다. 웹에서 수익이 발생한다 해서 웹 자체가 제품이 될 수는 없는 것입니다. 그것은 HTML과 다른 길을 가는 것입니다. 웹은 정보를 전달하는 하나의 매체로 인식되어야 합니다. 이것이 HTML의 철학입니다. 다시 말하자면, HTML은 정보를 디자인하기 위한 언어라는 것입니다. `정보를 디자인 한다` 는 것은 누구든지 원하는 정보를 쉽게 찾을 수 있도록 만든다는 것입니다.

그렇다면 HTML이라는 것이 어떻게 만들어 졌는지 잠시 살펴볼까요? HTML에서 M은 Markup을 의미합니다. 인쇄 업계에서는 `활자 지정` 이라는 말로 사용됩니다.

디지탈디자인

위 코드는 HTML에서 `디지탈디자인` 이라는 텍스트를 굵은 스타일로 지정하라는 것입니다. 이 코드를 웹브라우저가 읽어 들여 굵은 스타일의 글씨를 만드는 것입니다. 여기서~를 Markup Tag라고 합니다. 그러나 인쇄에서는 원고에 `디지탈디자인` 이라는 글씨에 b 또는 bold라고 표시하면 조판을 하는 사람이 이 원고를 보고 굵은 스타일의 활자로 조판을 하게 됩니다. 따라서 HTML의 원리는 조판의 원리를 그대로 차용한 것이라 할 수 있습니다.

이처럼 HTML에서 사용되는 모든 태그와 속성의 원리는 인쇄의 조판과 거의 흡사하다는 것을 알아야 합니다. 또한 HTML과 함께 사용하는 CSS라는 스크립트가 있습니다. CSS는 HTML이 가지는 조판의 한계를 해결해 주는 역할을 하는 스크립트입니다. 예를 들자면, 줄간격을 설정하거나, 폰트의 크기를 자유자재로 조절하는 기능을 수행합니다. 인쇄가 조판에서 DTP로 발전한 것과 비슷하다고 보면 됩니다.

HTML의 원리가 조판과 유사하다면, HTML의 철학은 무엇일까요? 그것은 다름아닌 누구나 정보를 쉽게 찾는다는 것에 있습니다. 본 인터넷 방법론을 끝까지 수강하다보면 자연히 HTML의 철학에 대해 알게 되겠지만, 미리 말씀을 드리자면 철학의 핵심은 `누구나`에 있습니다. 남자건 여자건, 아이이건 노인이건, 일반인이건 장애인이건 간에 누구나 웹에서 정보를 찾고 얻을 수 있게 하는 것이 HTML의 철학입니다.

예를 들자면, 하이퍼 링크가 설정된 텍스트는 파랑색이고 밑줄이 그어집니다. 파랑색은 색맹이 구별할 수 있는 색상이고 하이퍼링크가 설정되지 않은 파랑색 텍스트와 구별하기 위해 밑줄이 그어집니다. 보통 강조하기 위해 밑줄을 긋는 경우가 있는데, HTML에서는 하이퍼링크가 설정된 텍스트와 구별하기 위해 밑줄 대신 굵은 스타일의 텍스트를 사용합니다. 야후나 네이버와 같은 대형 포탈 사이트에서 하이퍼 링크가 설정된 텍스트가 파랑색의 밑줄이 그어진 기본값을 사용하는 이유가 여기에 있습니다.

1-3. 이 강좌에서 다루려고 하는 것들은....

본 강좌는 웹디자인 방법론입니다. 그러나 디자인 원론에 대해서는 다루지 않습니다. 즉 색상이 어떻고, 이미지의 디자인이 어떻고 하는 이야기는 하지 않는 다는 말입니다. 그런 이야기 말고도 웹을 디자인하기 위한 이야기는 많습니다. 예를 들자면, `야후의 메인 페이지에는 왜 로그인 입력란이 없을까?`, `야후는 왜 GIF 이미지만 사용하는가?`, `플래시 파일이 웹페이지에 미치는 영향`, `메뉴는 왜 왼쪽에 있나? 오른쪽에 있으면 큰일 나는가?` 등과 같은 웹을 디자인하며 한번 쯤 고민해 보았을 그런 문제를 HTML 관점에서 풀어갑니다.

본 웹디자인 방법론에서 다룰 이야기들은 다음과 같습니다.

먼저, 웹을 디자인 하는 방법에 대한 이야기를 다음 강좌부터 진행합니다. 웹에 대한 정확한 이해와 웹을 디자인하는 세가지 방법론에 대해 이야기할 것입니다.
그 다음으로 웹페이지 디자인, HTML 객체 디자인, 사이트 디자인에 대해 세부적으로 다룰 예정입니다.
웹페이지 디자인은 메뉴, 네이블링 시스템, 그리드, 페이지 안전영역, 프레임, 페이지 배경 등에 대해 다룰 것입니다.
HTML 객체 디자인은 HTML에서 사용되는 객체 중에 텍스트, 이미지, 테이블, 멀티미디어 객체에 대해 다룰 것입니다.
마지막으로 사이트 디자인은 웹사이트 진행과정, 디자인 프로세스, 웹 인터페이스, 인포메이션 아키텍쳐, 웹 아이덴티티에 대해 다룰것입니다.

앞서 말씀 드린대로 본 강좌는 웹에서 `왜`로 시작되는 의문에 대한 원리를 이해하는 강좌입니다. 본 강좌를 끝까지 수강하시면 그 원리를 이해하실 수 있고 보다 나은 웹을 디자인하는 초석이 될것입니다. 덧붙이자면 본 강좌는 HTML을 배우는 강좌가 아님을 명확히 밝혀둡니다.


웹디자인 방법론
백종수 | webmaster@ddcom.co.kr