출처 - http://blog.naver.com/wdig
######################################################
##### 작성자: 간츠 gantz2010@hotmail.com #####
##### 블로그: http://blog.naver.com/wdig #####
##### 기 타: 퍼 가실때는 출처를, 질문은 이메일로... #####
####################################################
DIV 레이아웃 [5] : 웹표준 작업시 꼭 필요한 도구들
웹표준에 맞춰 본격적으로 DIV 레이아웃에 대한 공부를 시작할 때가 되었습니다.
하지만 B.U.T.~!!!!!!!!!! 준비물이 필요합니다.
아무리 고수라 할지라도 좋은 도구들이 없으면 자신의 실력을 100% 발휘하기가 힙이 듭니다.
웹표준 작업에 꼭 필요한 준비물,,,, 군인으로 비유하자면 개인화기가 되나요?
지금부터 어떤것들이 필요한지 함 살펴 보도록 하겠습니다.
1. 웹브라우저 4종 기본 셋트 (PC 기준)
- Firefox 3 이상
(다운로드: http://www.mozilla.com/en-US/products/download.html?product=firefox-3.0.4&os=win&lang=en-US) - Safari 3 이상
(다운로드: http://www.apple.com/safari/download/) - IE 7
(다운로드: http://www.microsoft.com/downloads/details.aspx?FamilyID=9ae91ebe-3385-447c-8a30
-081805b2f90b&displaylang=en) - IE 6
(다운로드: http://www.microsoft.com/downloads/details.aspx?familyid=1E1550CB-5E5D-48F5-B02B
-20B602228DE6&displaylang=en)
앞으로는 작업한 것을 확인하실 때 기본 웹 브라우저로 파이어폭스를 사용하시기 바랍니다.
모질라 계열의 파이어폭스는 IE 계열 브라우저 보다 W3의 웹표준 권고안에 훨씬 더 근접해 있는 브라우저이기 때문입니다.
인터넷 익스플로러의 경우 사실 IE 7 에 이르러서야 그나마 웹표준에 근접해졌습니다.
IE 6 까지는 거의 독자적인 노선을 걸었었다고 해도 과언이 아니지요.
하지만 IE7 도 파이어폭스에 비하면 아직도 몇몇 엘레멘트와 CSS를 렌더링 하는데 있어 표준안을 따르지 않고 있습니다.
최근에 IE 8 베타 2 가 나오긴 했습니다만 그래도 제 개인적으로는 파이어폭스를 기본 브라우저로 해서
웹표준 작업을 진행하시는 것을 추천해 드리고 싶습니다.
파이어폭스 브라우저를 사용하여 사이트 작업을 하신다음
아무런 이상이 없다면 그다음에는 사파리 브라우저로 확인을 하게 됩니다.
사파리 브라우저는 맥킨토시 사용자들이 주로 사용하는 브라우저 입니다.
즉, 맥킨토시 사용자들을 위해서 내가 작업한 사이트가 올바르게 렌더링 되는지를 확인하는 것입니다.
맥킨토시 사용자들의 숫자.... 절대 무시할 수 없습니다.
(맥용 사파리와 PC용 사파리는 같은 사파리 브라우저라 할지라도 몇몇 CSS 프로퍼티를 다르게 해석합니다.
따라서 가장 좋은 방법은 맥에 깔려 있는 사파리 브라우저로 직접 확인을 하시는게 좋습니다만
맥이 없는 분들은 최소한 PC 용 사파리 브라우저를 사용해서라도 확인을 해보시라는 뜻입니다.)
파이어폭스와 사파리 브라우저로 확인을 했는데
아무 이상없이 내가 의도한대로 모든 문서와 디자인이 잘 렌더링 되어진다면
그 다음엔 IE 7 브라우저로 확인을 할 차례입니다.
파이어폭스 -> 사파리 -> IE7 이런 순서가 되네요.
이렇게 하는 이유는
가장 웹표준에 근접해 있는 브라우저 순서대로 사이트를 검사할 경우
문제가 있을 시 수정하기가 훨씬 더 수월하기 때문입니다.
웹표준에 따라서 작업한 페이지를 파이어폭스와 사파리로 검사했을 때는 아무런 이상이 없었는데
IE 7 으로 확인하니까 레이아웃이 깨지더라.... 라고 한다면
IE 7 일 경우에는 요... CSS 를 사용해라... 라는 식으로 작업을 진행할 수가 있습니다.
하지만 IE 7으로 먼저 확인을 했는데 문제가 있다면
이 문제가 웹표준과 관련된 문제인지 아님 브라우저 별 렌더링 방식에 따른 문제인지를
가려내기가 상당히 혼동스러울 수 있습니다.
IE 7 다음에는 IE 6 로 확인해 볼 차례입니다.
인터넷 익스플로러의 문제는
전세계적으로 가장 사용자 수가 많은 웹 브라우저임에도 불구하고
가장 웹표준을 지키지 않는 웹 브라우저라는 것입니다.
개발자 입장에서는 인터넷 익스플로러 자체를 사용하고 싶지 않지만
수요와 공급의 법칙이 지배하는 세상이기 때문에
사용자들의 편의를 위해서 일할 수 밖에 없습니다.
아까 말씀 드렸듯이 IE 7은 그나마 웹표준에 근접해 지기 위해 MS 가 많은 노력을 기울인 브라우저입니다만
IE 6 는 오만과 독선으로 뭉쳐진 웹브라우저입니다.
문법 검사해서 오류가 0% 인 아무리 완벽한 웹페이지라고 해도
IE 6 에서 확인해 보면 여지 없이 깨져 보일 경우가 많습니다.
그렇기 때문에 아까 IE 7 처럼 IE 6 의 경우에도 렌더링에 문제가 있다면...
IE 6 일 경우에는 요 CSS를 사용해라.... 라는 식으로 작업을 진행해야만 합니다.
여러분들이 생각하는 것보다 훨씬 더 많은 사람들이
아직도 묵묵히 IE 6 를 사용하고 있기 때문에 어쩔 수 없습니다. ㅜㅜ
===================================================================================================================
*** 참고 *********************************************************************************************************
IE 6 나 IE 5.5 같은 브라우저들을 한꺼번에 사용할 수 있게 해주는
멀티 브라우저 프로그램을 이용하시는 분들도 계실텐데...
요건 비추 입니다. 절대... 제대로 확인 안됩니다.
IE 6 는 별도의 컴터에 따로 설치 하세요... 아님 다른 파티션에 설치 하시든가요~ 멀티 부팅... 유노?)
===================================================================================================================
===================================================================================================================
*** 왕~ 보너스 **************************************************************************************************
IE 6 Standalone 버전을 본 글에 첨부하였으니 다운로드 받으셔서 사용하세요.
Standalone 버전은 독립적인 exe로 돌아가는 프로그램으로써
IE 7이 설치되어 있다하더라도 그것과는 별개의 프로그램으로써 작동합니다.
단, HTML + CSS 렌더링 확인 작업에만 사용하세요. 자바스크립트는 제대로 작동 안합니다.
===================================================================================================================
얘기하다보니까 방탄웹 강좌가 되버린것 같네요~ ^^;;
이 이외에도 넷스케이프 4 나 IE 5 같은 진짜 구식 버전의 브라우저들도 있을 수 있겠지만
이런 구식 버전들의 경우, 먼저 사이트 방문자 통계를 살펴 보신 후 작업 진행 여부를 결정 하시기 바랍니다.
구식 버전 브라우저들을 사용하는 방문자들이 없거나 아님 진짜 무시해도 좋을 만큼 미비하다면
굳이 별도의 CSS 설정 작업을 진행할 필요가 없으니까요.
===================================================================================================================
*** 참고 *********************************************************************************************************
오페라... 구글크롬... 등과 같은 브라우저들은 렌터링 속도라든가... 메모리 소모 등 기능면에 있어서 차이가 있을 뿐이지
웹문서 렝더링 자체와 관련해서는 제 경험상 별 특이점이 없습니다.
파이어폭스 > 사파리 > IE 7 > IE 6 에서 이상이 없다면 오페라나 구글 크롬에서도 거의 99% 이상 문제 없습니다.
특히 구글 크롬은 애플의 웹킷과 모질라 파이어폭스 등의 유용한 구성 요소들을 흡수해 만든 브라우저이기 때문에
더욱 그렇습니다.
===================================================================================================================
===================================================================================================================
*** 추가설명 *****************************************************************************************************
지난 2008년 12월 4일에 오페라 10 알파버전이 릴리스 되었습니다.
오페라 10 정식버전이 나오기 전의 베타 버전인데요. Acid3 테스트에서 100점 만점을 받았습니다.
놀라운 진보가 아닐수 없습니다. 파이어폭스가 74점인가.. 아무튼 그랬는데 100점 만점이 나오다니.....
Acid 테스트란 웹브라우저가 DOM(Document Object Model)이나 자바스크립트, HTML, CSS등을 렌더링 하는데 있어
얼마만큼 웹표준을 올바르게 따르고 있는지를 테스트하는 건데요.
100점 만점을 받으면 100% 웹표준에 부합하는 브라우저란 뜻입니다.
(Acid 테스트에 대해선 나중에 좀 더 자세한 설명을 하기로 하겠습니다.)
그렇다면 오페라를 기본 브라우저로 하는게 좋지 않겠느냐... 라고 질문하시는 분들도 계실텐데요.
상관은 없지만 뭐 굳이 그럴 필요는 없습니다.
왜냐면 IE는 사용자가 가장 많은 브라우저고 오페라는 사용자가 가장 적은 브라우저니까
그 중간정도인 파이어폭스가 기본 브라우저로써는 제일 적당하다....라는 쪽으로 접근하는게 훨씬 더 현실성 있으니까요.
===================================================================================================================
2. 파이어폭스 Add Ons
- Web Developer (다운로드: https://addons.mozilla.org/en-US/firefox/addon/60)
- Firebug (다운로드: https://addons.mozilla.org/en-US/firefox/addon/1843)
제가 기본 웹 브라우저로써 파이어폭스를 추천한 또 다른 이유~!!!!
강력하고 편리한 기능의 수 없이 많은 Add On 프로그램들이 있기 때문입니다.
게다가.....
모조리 다 무료라는 거.... 요즘같은 각박한 세상에 이럴수가....... ㅜㅜ
수 없이 많은 애드온 프로그램들이 있습니다만
이중에서 Web Developer 와 Firebug 애드온은
웹개발자들에게 빼놓을 수 없는.....
필수적인~!!!!!!
아주 아주 중요하고 편리한 개발 도구들입니다.
- Web Developer
Web Developer 를 파이어폭스에 애드온 하시면
브라우저 상단에 다음과 같은 툴바가 생깁니다.
수 없이 많은 기능들이 있습니다만 그 중에서 몇가지만 말씀 드리자면....
- 자바스크립트 ON/OFF 기능
- CSS ON/OFF 기능
- 자바스크립트 문서 확인 (링크된 것 포함)
- CSS 문서 확인 기능 (링크된 것 포함)
- 스크립트 에러 로그 기능
- CSS 문법 검사
- HTML/XHTML 문법검사 등등이 있습니다.
설치하신 후 이것 저것 한번 사용해 보세요~
사용해 보시면 왜 이 애드온의 이름이 Web Developer인지 아시게 됩니다.
- Firebug
Firebug 를 파이어폭스에 애드온 하시면
브라우저 하단에 다음과 같은 아이콘이 생깁니다.
이 아이콘을 클릭하시면
브라우저 하단에 다음과 같이 Firebug 창이 뜨게 됩니다.
Console, HTML, CSS, Script, DOM, Net 이라는 메뉴가 있습니다.
기능면에서는 Web Developer와 비슷한 것들도 많이 있는데요.
제가 마음에 들어하는 기능은 바로 편집 기능과 프로토콜 헤더 분석 기능입니다.
Firebug의 편집 기능을 이용하시면 다른 사람의 사이트라고 할지라도
온라인 상에서 HTML 엘레멘트의 내용 컨텐츠 변경이 가능하고 그것을 곧장 웹브라우저에서 확인하실 수 있습니다.
CSS 도 그자리에서 프로퍼티 값을 변경할 수 있고 또 바로 확인이 가능합니다.
이 기능을 이용하면
작업한 사이트에 문제가 있을 시 그 자리에서 수정한 후 바로 바로 확인을 해볼 수가 있다는 것입니다.
수정한 후 서버에 올리고 확인하고 뭐 이런 번거로운 단계를 거치지 않고서 말이죠.
Net 이라는 메뉴는 프로토콜 헤더 분석 툴입니다.
인터넷 익스플로러에서 사용하던 IE Watch 라는 Plug-in 과 비슷한 기능인데요.
가장 큰 차이점은 IE Watch는 상용이지만 이건 완전 무료라는 거지요.
기능면에 있어서도 거의 완벽합니다.
특히 헤더 정보들을 HTML, CSS, JS, XHR, Images, Flash 처럼 종류별로 묶어서 확인할 수 있기 때문에
아주 편리합니다.
프로토콜 헤더 분석기를 가지고 뭘 하는건지 모르시는 분들을 위해 잠깐 부연 설명을 하자면...
하나의 HTML 페이지가 브라우저에 로딩 될때는 그 안에 포함된 관련 파일들도 로딩이 되겠지요?
이미지라든가 자바스크립트 파일이라든가 플래시 파일이라든가....
뭐 이런 파일들이 하나의 HTML 페이지를 구성하는 거잖아요~
이중에서 하나라도 제대로 로딩이 안된다면 페이지가 온전히 보일리가 없습니다.
프로토콜 헤더 분석기는 HTML을 분석하여 관련 파일들의 위치정보(주소), 로딩이 잘 되었는지의 여부, 로딩시간, 파일 사이즈 등등의
정보를 보여 줍니다. Form Action 이 있었다면 어떤 Form 값들이 어느 주소로 Send 되었는지도 보여 줍니다.
사이트에 문제가 발생하였을 때, Trouble Shooting 하기 위해서는 정말 꼭 필요한 기능이지요.
이외에도 유용한 애드온 프로그램들이 더 많이 있습니다만
지금 이 두개만으로도 무지 편리하게 웹 작업을 진행 하실 수 있으리라 생각합니다.
지금 바로 설치해 보세요~!!!
3. 텍스트 에디터
- HomeSite 5.5 (다운로드: http://www.adobe.com/products/homesite/)
- Aptana Studio (다운로드: http://www.aptana.com/studio/download/)
웹표준 작업을 하시려면 이제부터 드림위버나 나모 같은 위지윅 웹저작 툴들은 처다보지도 마세욤.
오직 한줄 한줄 코드를 타입해서 작업해야하는 텍스트 에디터들을 사용하시기 바랍니다.
가장 확실한건..... 노트패드입니다만..... 가장 중요한...... 들여쓰기 하기가 힘들어서..... ^^;;
- HomeSite 5.5
제가 지난 8년간 사용하고 있는 텍스트 에디터가 매크로 미디어의 Homesite (홈사이트) 입니다.
매크로미디어가 홈사이트를 사버리고 어도비가 다시 매크로미디어를 사들이는 격변기를 거쳤지만
사실 프로그램 자체는 뭐 그닥 많이 바뀌진 않았습니다.
(드림위버의 텍스트 모드 엔진이 바로 이 홈사이트입니다.)
홈사이트의 매력이라고 한다면
정말로 텍스트 에디터로써의 역활에만 충실하다는 것입니다.
다른 텍스트 에디터들 처럼 잡다구리한 여러가지 기능들을 최대한 배제하고 있기 때문에
뭐라 그럴까 집중력이 높아진다고나 할까요?
ASP와 JSP 코딩도 지원합니다.
저도 닷넷의 경우에는 어쩔수 없이 비주얼 스튜디오를 사용하지만
ASP 프로젝트의 경우에는 아직도 무조건 홈사이트를 이용합니다.
공교롭게도
지금 제가 다니는 회사에서
모든 웹개발자들에게 공통적으로 기본 지급되는 텍스트 에디터가 바로 이 홈사이트 입니다.
단 한가지 아쉬운 점이라고는 돈주고 사야되는 상용 프로그램이라는 정도죠~ ^^;;
- Aptana Studio
그리고 홈사이트 예찬론자인 저의 눈을 번쩍 뜨이게 한 또 하나의 텍스트 에디터가 있습니다.
바로 Aptana Studio (앱타나 스튜디오) 입니다.
2005년 경에 첫 베타 버전이 나온 후 지금은 1.2.1 버전까지 업데이트가 되어 있습니다.
Aptana Studio의 장점은 우선 무료라는거......... 진짭니다.
쉐어웨어가 아니라 프리웨어~~~!!!!!!!
이렇게 굉장한 프로그램을 정말 공짜로 다운받아 사용할 수 있습니다.
Aptana Studio는 전적으로 웹 2.0 을 지향하는 텍스트 에디터 입니다. (제가 보기엔 3.0 도 가능할 것 같은데,..... ^^)
Ajax, Javascript, XML, Database 등을 위한 작업 환경이 아주 좋습니다. (PHP도 지원합니다)
또한 자체적으로 실시간 오류검사 기능이 있어서
만일 코드 작성 시 잘못된 코딩이 있으면 바로 표시를 해주기 때문에 아주 편리합니다.
(모양이나 폰트도 비주얼 스튜디오와 아주 흡사합니다~)
특히 워드문서에서 어떤 컨텐츠를 Copy & Paste 할 경우
잘못된 문자 Character 때문에 XML이나 HTML 이 깨질 경우가 있잖아여..
그런 Bad Character 들 까지 다 잡아냅니다.
참고로 이 Aptana Studio는 Jaxer라는 Ajax 웹서버 서비스를 운영하는데
이것을 이용하면 여러가지 다양한 기능의 서버 사이드 Ajax Function 들을
아주 쉽고 간단하게 사용할 수 있습니다. (근데 이 서비스는 유료.... ㅜㅜ)
******************
위의 두가지 프로그램은 전적으로 제 개인적 취향에 의한 추천입니다.
Edit Plus 같은 또 다른 좋은 텍스트 에디터를 가지고 계시다면
그것을 그냥 사용하셔도 전혀 상관 없습니다.
******************
CSS 에디터를 별도로 사용하시고자 하는 분들은 그렇게 하셔도 상관 없습니다만
사실 본 강좌에서는 별로 필요하지 않습니다.