워드프레스(WordPress) 2.3의 첫번째 베타 버전이 출시됐습니다. 기존에는 베타 버전을 Trac에서만 다운받을 수 있었는데, 이번엔 개발자 블로그에서도 다운받을 수 있습니다. 2.3 beta-1 버전에서 추가된 사항은 크게 아래의 3가지입니다.

• 워드프레스 2.2에 추가된다던 자체 Tag 기능이 이제서야 추가됐네요.
• 그동안 관리자 페이지를 무겁게 만들었던 자바스크립트가 무척 빨라졌습니다.
• 파이어폭스처럼 플러그인과 워드프레스의 업데이트 소식을 알려줍니다.

3가지 모두가 오랫동안 기다려온 기능입니다. 얼마 전에 Tag 플러그인을 Jerome’s Keywords에서 Simple Tagging Plugin로 변경한 저로써는 자체 Tag 기능이 가장 맘에 듭니다. 이번 beta-1에서는 기존의 분류(category)를 태그로 전환하는 기능이 포함됐으며, 또한 Ultimate Tag Warrior의 태그들도 이전해서 사용할 수 있습니다. 물론 정식판에서는 Simple Tagging Plugin과 Jerome’s Keywords도 불러오는 기능이 추가될 예정입니다.

제 블로그에 설치해서 사용하고 있는데, 특별한 문제는 확인하지 못했습니다. 위의 기능 외에도 글 상태에 Pending Review가 추가됐네요. 글을 출판(공개)하기 전에 비공개 상태에서 리뷰할수 있는 기능 같습니다. 아무래도 팀블로그나 매거진 형식에서 유용할 듯 싶습니다.

변경될 워드프레스 2.3의 모습을 미리 보고 싶으신 분은 다운받아서 설치해보세요. 업데이트하기 전에 백업은 필수입니다!

이번에 사이트를 개편하면서, 탭 메뉴로 구성된 추천 글 목록을 추가했습니다. 제 사이트의 방문자 통계를 확인하니, 방문자들의 이동 경로가 1개의 글만 읽고 사이트를 떠나거나, 홈페이지로 이동하는 등 무척 기초적인 수준의 이용만 하고 있다는 것을 확인했기 때문입니다. 블로그의 글이 360개임에도 불구하고 1~2개 글만 보고 떠나는 걸 방치할 수 없었기에 추가한 콘텐츠입니다.

웹 사이트에서 탭 메뉴를 구현하기 위한 일반적인 방법은 Javascript의 onClick 이벤트를 이용하여, style의 display 속성을 조정하는 것입니다. 이때 보통은 HTML a 태그에 Javascript를 직접 사용하는 방식을 이용합니다. 때문에 이 방법은 구조적인 HTML 마크업과 거리가 멀이질 수 밖에 없죠. 즉, 웹 표준에 어긋난는 방법입니다. 또한 마우스를 사용하지 못하기 때문에 onClick 이벤트를 발생시킬 수 없는 시각장애인의 경우 해당 컨텐츠에 접근하기도 어렵습니다.

제 사이트는 Javascript library로 JQuery를 사용하고 있습니다. JQuery는 파이어폭스나 워드프레스와 비슷한 점이 많습니다 . 예전에 몇몇 글에서 밝혔듯이, 무척 작고 효율적이며, 다양한 기능 외에도 플러그인이 많은 라이브러리죠. 특히 JQuery의 $(document).ready는 DOM의 고질적인 문제인 브라우저의 늦은 랜더링을 해결할 수 있답니다.

탭 메뉴에 해당하는 콘텐츠 구성

저는 사이트 방문객이 좀 더 머무르면서 다양한 콘텐츠에 접근할 수 있는 기회를 제공하기 위해서, 탭 메뉴로 구성된 콘텐츠를 제공하고 싶었습니다.

HTML로 콘텐츠 구조화

탭 메뉴를 책의 목차(Table Of Contents) 형식으로 구성했습니다. 현재의 HTML과 XHTML 스펙에서 가장 구조적인 방법이죠. 물론 앞으로 HTML 5가 채택되어 nav 요소를 사용할 수 있기 전까지 입니다.

<div id="readMore02">
	<h2>또 다른 읽을거리</h2>
	<ul class="tabs-nav">
		<li class="tabs-selected"><a href="#relatedPost">Related Post</a></li>
		<li><a href="#randomPost">Random Post</a></li>
		<li><a href="#recentPost">Lasted Post</a></li>
	</ul>
	<div id="relatedPost" class="tabs-selected ">
		<h3>Related Post</h3>
		<ol>
			<li><a href="#">웹표준의 득과 실</a></li>
			<li><a href="#">브라우저 업그레이드 캠페인</a></li>
			<li><a href="#">Hooney.net 리뉴얼 계획-1</a></li>
			<li><a href="#">올블로그의 플래시 네비게이션</a></li>
			<li><a href="#">아직 메인시안도 미완성이네..</a></li>
		</ol>
	</div>
	<div id="randomPost">
		<h3>Random Post</h3>
		<ol>
			<li><a href="#">세계 비보이 대회 한국 개최, 그리고 잡담</a></li>
			<li><a href="#">KWAG 7회 워크샵</a></li>
			<li><a href="#">CSS, 웹표준 실무 적용 워크샵 2006</a></li>
			<li><a href="#">Global Web Expert 실무 워크샵</a></li>
			<li><a href="#">변경된 구글 코리아의 첫 화면을 뜯어 보자.</a></li>
		</ol>
	</div>
	<div id="recentPost">
		<h3>Recent Post</h3>
		<ol>
			<li><a href="#">블로그 4번째 리뉴얼</a></li>
			<li><a href="#">Fujitsu ColorSelector 사용기</a></li>
			<li><a href="#">W3C의 마크업 유효성 검사 서비스 디자인 개편</a></li>
			<li><a href="#">Fujitsu 웹 접근성 보조도구</a></li>
			<li><a href="#">구글 페이지 랭크 7점 획득</a></li>
		</ol>
	</div>
</div>

CSS로 콘텐츠 시각화

CSS를 이용하여 콘텐츠를 시각적으로 표현했습니다. float 속성을 사용하여 탭 메뉴를 가로로 배치한 점 외에는 특별히 고급 기술을 사용하지 않았습니다. IE가 비순차적 목록(ol)의 상단 마진를 다르게 출력하는 버그 때문에, 2줄의 CSS가 추가됐습니다.

body {
	margin:0; padding:0;
	font: .75em/1.5 "AppleGothic", "Malgun Gothic", dotum, sans-serif;
}
a { color:#369; font-weight:bold;}
#readMore02 {
	position:absolute; top:50%; left:50%;
	width:350px;
	margin:-120px 0 0 -180px;
	border:1px solid #ccc;
}
#readMore02 h2,
#readMore02 h3 { display:none; }
#readMore02 ul {
	margin:0; padding:5px 0 0 2px;
	height:26px;
	border-bottom:1px solid #ccc;
	background:#eee;
}
#readMore02 ul li {
	list-style:none;
	float:left;
	margin:0 0 0 3px; padding:0;
	position:relative; top:1px;
}
#readMore02 ul li a {
	display:block;
	padding:.25em .75em;
	border:1px solid #ccc;
	line-height:1.5; text-decoration:none;
	background:#aaa; color:#fff;
}
#readMore02 ul li a:hover,
#readMore02 ul li a:focus,
#readMore02 ul li.tabs-selected a {
	border-bottom:1px solid #fff;
	background:#fff; color:#f60;
}
#readMore02 div {clear:left;padding-top:1em;} /* IE6 마진 버그 */
#readMore02 div.tabs-selected { display:block; }
#readMore02 div.tabs-hide { display:none; }
#readMore02 ol { margin-top:0; } /* IE6 마진 버그 */
#readMore02 ol li { line-height:2; }

JQuery로 콘텐츠 동적 구현

JQuery와 tabs 플러그인을 이용하여 탭 메뉴를 동적으로 구현했습니다. 플러그인에서 지원하는 페이드 효과를 이용하니 훨씬 보기 좋은 탭 메뉴가 구현됐습니다.

<script src="/theme/v4/js/jquery.js" type="text/javascript"></script>
<script src="/theme/v4/js/jquery.tabs.pack.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function()	{
$('#readMore02').tabs({ fxSlide: true, fxFade: true, fxSpeed: 'normal' });
});
</script>

이 글이 저처럼 블로그에 많은 글을 작성했음에도 불구하고, 예전에 작성한 글이 방문객에게 좀처럼 노출되지 않는 문제로 고민하던 분들에게 도움이 됐으면 좋겠니다.

제 오랜 숙원 중 하나였던 hooney.net 사이트 리뉴얼을 단행했습니다. 2005년 7월에 진행한 3번째 개편 이후로 무려 2년만에 대대적인 리뉴얼입니다. 즉 단순히 디자인 뿐만 아니라, 컨텐츠도 수정했답니다.

사이트 디자인은 약 2달 전에 완료했으며, 몇개의 시안 중에서 가장 맘에 드는 녀석을 선택했습니다. 물론 가장 처음에 작업한 디자인을 선택하게 되더군요. 이는 마치 객관식 문제를 풀다가 나중에 수정한 문항이 오답이 될 확률이 높은 것과 유사한 이치같습니다.

디자인의 목표는 “좀 있어 보이자” 입니다. 기존 사이트의 디자인인 So Basic 테마가 너무 없어 보였기 때문입니다. 이런 목표에 맞춰서 좀 있어 보이는 색상인 검정색과 어두운 계열의 색들을 조합했답니다. 일부 색조합은 작년 겨울부터 컴퓨터 운영체제로 사용중인 윈도우 VISTA의 영향을 받았습니다.

디자인이 완료된 후 곧바로 리뉴얼을 진행하지 못한 이유는 사이트의 로고를 선정하지 못했기 때문입니다. 아무리 있어 보이는 색조합과 레이아웃을 구현한다고 해도, 로고가 부실하면 결국 없어 보일 것이기 때문입니다. 백지에 연필로 데생하고 일러스트레이터에서 패스를 따서 몇 개의 로고를 만들었지만 모두 맘에 들지 않았습니다. 이렇게 2달이 지날 동안 사이트 리뉴얼은 결국 포기해야 하나 싶을 정도였답니다. 타블렛을 구입한 이유 중에 하나가 로고를 그리기 위해서였답니다.

좌절의 연속 중에 6과 9라는 숫자가 머릿속에 떠올랐답니다.제 생일이 6월 9일이거든요. 서로 대칭형이며 다양한 조합을 구사할 수 있는 이 두 숫자를 로고에 사용하기로 결정했고, 지난 주말에 로고를 완성했습니다. 그리고 8월 15일 광복절에 최종 마무리 작업을 진행해서 이렇게 개편을 완료할 수 있었답니다.

아직 사이트 개편이 완료된 건 아닙니다. 첫 페이지(Home-page, Start-page)를 아직 완성하지 못했으니깐요. 또한 아직도 곳곳에 버그들이 눈에 띄고 있습니다. 하지만 웹 사이트를 제작 완료단계에서 모든 것이 종료되는 공산품이 아닌, 살아 움직이는 유기적인 존재로 인식한다면 완료라는 단어를 붙이기 어렵죠. 웹 사이트는 오픈 상태에서 꾸준히 유지/보수하는 것이 더욱 중요하다고 생각했기에, 이렇게 무작정 오픈합니다.

꼬릿말 묶음

1. 후니넷을 개편한 과정과 이후 To-do-list에 대해선 다음 포스팅에서 이어가겠습니다.
2. 사이트 상단 우측에 신현석님 결혼 축하 배너를 달았습니다. 방문객 유치에 도움이 됐으면 좋겠습니다.
3. 오랜 고민 끝에 방명록을 달았습니다. 당신의 흔적을 남겨주세요~
4. 사이트 디자인이 말끔하니 글이 자꾸 쓰고 싶네요~

W3C의 Markup Validation Service가 개편됐다. 기능 개선이야 꾸준히 진행되고 눈에 잘 보이지 않는 대신, 이번의 디자인 개편은 서비스를 이용하는 사람들의 시선을 사로잡기 충분하다. 기존의 디자인에 비해서 부드러운 톤의 배경색과 둥근 모서리가 눈에 뛴다. 아무래도 W3C 사이트의 디자인에 대한 불만을 수용한 듯 싶다.

개편 전 사이트 모습

개편 후 사이트 모습

W3C의 Markup Validation Service 기록

• 현재 모습 : http://validator.w3.org/
• 가장 최근 : http://web.archive.org/web/20070524231841/http://validator.w3.org/
• 과거 기록 : http://web.archive.org/web/*/http://validator.w3.org/

지난 주 금요일인 6월 22일에 e-비즈니스 컨퍼런스 2007′에 토론자로 참석했습니다. 웹어워드위원회가 주최한 국내 e-비즈니스의 활성화 및 관련 전문가들의 핵심역 량 강화 등을 목적으로 진행한 행사였고, 웹표준의 득과 실이라는 패널토론에 한국정보문화진흥원의 현준호 부팀장, 다음커뮤니케이션의 임종혁 팀장과 함께 토론을 진행했습니다. 함께 토론하신 분들과 좌장을 맡은 홍익대학교 미술대학 시각디자인과의 김현석 교수님, 토론을 지켜봐주고 질문해주신 참석자분을 만나서 반가웠습니다.

사전에 답변 내용을 정리했었기에 부담없는 토론 자리였습니다. 저를 포함한 토론자 분들이 서로 다른 환경과 위치에서 웹표준화를 담당하다 보니, 다양한 의견을 들을 수 있는 좋은 자리였다고 생각됩니다. 당일 제가 주장한 내용은 아래와 같습니다.

(Q.1) 제작업체의 관점에서 볼 때 웹표준화로 인해 현재 웹 환경에 무엇을 개선할 수 있는가? 그리고 현재 웹 환경에 웹표준화를 적용함으로써 제공해 줄 수 있는 장점은 무엇인가?

(A) 첫 번째로 웹사이트 제작 프로세스의 개선이다. 해외에서는 2000년대 초반부터 W3C가 제안한 웹표준을 이용하여 구조와 표현, 동작을 각각 분리하는 프로세스를 이용하고 있는데 반해, 국내에서는 아직까지도 1990년대 중반의 낡은 프로세스를 이용하고 있다.이렇게 구조, 표현, 동작을 분리한 프로세스는 제작 과정의 효율성을 증대시키고, 결과적으로 인력과 비용의 감소로 이어질 수 있다.

두 번째로 웹 접근성 향상이다. 웹표준을 준수한 사이트가 얻게 될 가장 큰 혜택이 바로 웹 접근성 향상이다. 시각 장애인이나 노인을 위한 별도의 사이트를 구축할 필요가 없으며, 최근 이슈가 되는 모바일 웹을 위한 별도의 사이트도 제작할 필요가 없다.

세 번째로 기술 마케팅 진행이다. 웹 2.0으로 대변되는 차세대 웹의 핵심으로 UCC와 Ajax를 뽑곤 한다. 특히 Ajax는 사용자 인터페이스를 획기적으로 개선하여 많은 클라이언트에게 환호를 받고 있다. Ajax라는 단어를 만든 사람이 기술 마케터인 Jesse James Garrett이다. 표준 기술을 활용한 UI는 클라이언트와 사용자 모두의 경험을 혁신시킬 것이다.

(Q.2) 제작업체의 관점에서 볼 때 웹표준화로 인해 기존 웹 환경에 야기될 수 있는 문제점은 무엇인가?

(A) 첫 번째로 인력 수요와 공급의 불균형이다. 공공기관을 중심으로 웹표준 및 접근성 이슈가 확대되면서 많은 클라이언트들이 웹표준화를 요구하고 있다. 하지만 현재 국내 업계에선 이들 요구에 맞춰 사이트를 만들지 못하는 사례가 발생하고 있다. 웹표준화 인력의 부족이 그 이유인데, 업체들이 구인하고 싶어도 인력이 없는 게 사실이다.

두 번째로 자기개발하지 않는 업체들의 퇴출이다. 업체들이 자기개발을 해야만 한다. 신규 인력이 부족한 현실에서 기존 인력의 재교육과 자기개발 여건 마련에 노력해야 한다. 그렇지 않은, 또는 못한 업체는 클라이언트의 요구에 부응하지 못한체 자연방출될 수 있다.

(Q.3) 2번 의제에서 제시한 문제점을 극복하기 위해 대안으로 제시될 수 있는 점은 무엇인가?

(A) 첫 번째로 연구개발 활성화이다. 일부 몇몇 인력이 웹표준 능력이 있다고 하더라도 웹 사이트가 웹표준화되지 않는다. 기획자, 개발자, 디자이너는 물론이고 심지어 마케터들도 웹표준화를 명확한 이해하고 활용할 수 있을 때, 웹사이트의 웹표준화가 가능하다.사내에서 웹표준에 대한 연구개발은 반드시 진행해야만 한다. 기존 인력은 물론이고, 신규 인력 또한 웹표준화에 대한 지식이 부족할 수 밖에 없기 때문이다.

두 번째로 조직체계 변경이다. 클라이언트측 기술/디자인 센터로 통합이 필요하다. DB나 코어 개발인력을 제외한 기존의 디자인, 개발인력들을 체계적으로 관리하고 기술력을 전문화하기 위한 UI 센터 형식으로 통합할 필요가 있다.

세 번째로 전문업체와의 협력관계 유지이다. 클라이언트측 기술의 다양화 및 전문화로 인해서 해당 기술력을 보유한 전문업체와의 협력을 유지할 필요가 있다. 해외에서는 이와 같은 사례들이 꾸준히 증가하고 있는 추세이며, 국내에서도 몇몇 쇼규모 업체들이 전문성을 갖고 큰 업체의 업무를 돕고 있다.

동일한 주제를 전달할 때라도 듣는 사람을 파악하고, 그 사람들이 원하는 방향으로 전개하는 방법적인 측면이 중요하다고 봅니다. 당일 패널토론장에 찾아주신 분들의 대부분이 웹 에이젼시의 기획자나 마케터였습니다. 일부 디자이너도 참석해주셨지만, 개발자분은 거의 없더군요. 다행히 제 예상이 맞아서 제 의견을 전달하는 데 무리가 없었답니다. ㅎㅎ

웹 개발자와 디자이너를 위한 최고의 도구(tool) 중 하나인 파이어폭스 확장기능 Web Deveoper가 1.1 버전으로 업데이트됐습니다.

돋보기 기능 등 추가된 기능은 제작자 웹 사이트에서 확인할 수 있습니다. CSS와 HTML 수정하기 기능은 정말 멋지군요. 아직 세세한 테스트를 거치지 않은 듯, 몇몇 기능을 테스트하다보니 툴바에서 버그가 발견되고 있네요.

“창밖을 보라 창밖을 보라 창밖을 보라 흰눈이 내린다 창밖을 보라 창밖을 보라 찬 겨울이 왔다 썰매를 타는 어린애들은 해가는 줄도 모르고 눈길 위에다 썰매를 깔고 신나게 달린다 긴긴해가 다가고 어둠이 오면 오색빛이 찬란한 거리거리의 성탄빛”

조선시대처럼 유리창이 없었을 땐, 한 겨울에 내리는 눈을 보기 위해선 마당으로 나가야만 했죠. 하지만 지금은 유리창이 있기에 따뜻한 집 안에서도 창밖으로 내리는 눈을 볼 수 있습니다.

마찬가지로 브라우저가 없다면, 웹을 자유롭게 서핑할 수 없겠죠. 현실 세계 너머 웹이라는 공간으로 안내해주고, 자유롭게 서핑할 수 있도록 도와주는 브라우저는 유리창 못지 않게 생활의 중요한 요소가 됐습니다.

만약 당신의 유리창이 깨졌다면, 또한 깨진 틈 사이로 찬바람이 들어온다면, 게다가 유리창 모퉁이에 거미줄이 지저분하게 걸쳐있다면, 창밖의 흰눈이 잘 보일까요? 흰눈이 보이긴 커녕, 유리창 가까이에 가기도 싫겠죠.

당신이 현재 사용하고 있는 웹 브라우저가 노후되어, 곳곳의 보안사각지대로 악성코드가 자동설치되며, 심지어 웹 디자이너의 의도와 전혀 다르게 웹 사이트를 보여주고 있는 사실을 알고 있나요? 확인하고 싶다면, 이 사이트를 방문해보세요. 아래 스크린샷처럼 나옵니까?

그렇지 않다면 웹 브라우저를 업그레이드하시길 권해드립니다. 유리창처럼 시중에는 다양한 최신 웹 브라우저가 출시되어 있고, 당신은 선택하고 사용하면 됩니다. 물론 업그레이드 비용은 유리창과 달리 무료입니다.

• 인터넷 익스플러(Internet Exploer) 7 : Google에 최적화 되어 있음.
• 파이어 폭스(Firefox) 2
• 오페라(Opera) 9
• 사파리(safari) 1.2 & 2.01 업데이트 : Mac OS가 있어야 합니다.

좋은 썬그라스는 자외선으로부터 눈을 보호하고 강렬한 태양빛으로부터 사물을 보다 쉽게 분간할 수 있도록 도와줍니다. 하지만 오래돼고 기스가 많은 썬그라스는 오히려 시력을 저하시킵니다.

h2. 당신은 어떤 브라우저를 통해서 웹사이트를 보나요?

혹시 2002년에 출시되어 악성코드가 자동설치되는 보안의 문제가 많은 인터넷 익스플러 6(Internet Exploer 6)을 사용하고 있나요?

2002년에 출시된 256컬러, 16화음 벨소리의 핸드폰를 아직도 사용하진 않겠죠? MP3 기능과 카메라 기능은 기본이고, DMB 방송 수신도 가능한 최신 핸드폰을 사용하지 않나요?

아래의 다양한 최신 브라우저로 업그레이드해보세요. 썬그라스를 새로 사기 위해선 돈이 들지만, 브라우저를 업그레이드는 무료랍니다.

• 인터넷 익스플러(Internet Exploer) 7 : Google에 최적화 되어 있음.
• 파이어 폭스(Firefox) 2
• 오페라(Opera) 9
• 사파리(safari) 1.2 & 2.01 업데이트 : Mac OS가 있어야 합니다.

최근 국내 포털사이트중 하나인 엠파스와 네이트가 개편됐다. 아직 미약한 부분들이 많지만, 테이블 태그를 벗어나서 웹 표준(Web Standards) 방식으로 사이트를 개편한 점은 크게 환영할 일이다.

요즘 들어 코드 분석을 하는 일이 없는 나이지만, 최근 포털 사이트의 개편은 적지 않은 시간을 투자해서, 코드를 분석할만큼 호기심을 준다. 왜 A라는 태그를 사용했는지, B라는 태그를 사용하는 것이 구조적/의미론적으로 올바르지 않는지, 왜 C라는 클래스(class)와 아이디(id) 선택자를 사용했는지, D를 사용해서 좀 더 직관적인 선택자 명명규칙을 이루는 게 좋지 않은지, 왜 E와 같은 CSS 속성을 지정했는지, F 형식으로 지정하는 게 유지/보수 측면에서 수월하지 않은지.. 꽤 많은 생각들을 할 수 있다.

웹사이트의 디자인을 CSS 기반으로 개편하는 것은, 단순히 대세에 따르거나 유행을 쫒는 것이 아니다. 먼저 사이트의 컨텐츠들을 효율적으로 정리/관리할 수 있고, 사이트 전체적인 디자인(특히 UI측면)의 통일성과 일관성을 유지할 수 있고, 그에 따라 개별 컨텐츠의 개성을 살린 디자인을 수행할 수 있다. 특히 CSS가 제거된 상태에서도 웹사이트(문서)를 인식 가능할 수 있도록 하기 위해 개별 컨텐츠의 의미적 구조를 확립할 수 있다.

나는 작년 여름쯤 블로그에 쓴 글을 통해서 ‘올해 말까지 많은 대형 사이트들이 CSS 기반 디자인으로 개편될 것으로 예상한다. 또한, 이에 따른 인력 수요가 증가될 것이라고 예상한다. 그럼, 이제 남은 건 인력 공급의 문제 뿐일 것이다.’라고 예상했다. 그 글 이후 다음, 비씨파크, 엠파스, 야후 등의 대형 사이트들이 웹표준을 기반으로 개편되고 있으며, 현재도 개편이 진행중인 몇몇 사이트들이 있는 것으로 알고 있다.

웹표준을 기반으로 한 사이트 개편은 전적으로 코더(coder, publisher)의 몫이 아니다. 제작사 내부의 개편팀에 소속된 모두의 몫이며, 기획자, 디자이너, 코더 모두가 웹표준에 대한 이해를 필요로 한다. 수박 겉핥기식의 웹표준에 얕은 지식이나, 팀내 몇몇 소수의 지식만으로는 결코 훌륭한 사이트로 개편될 수 없다. 이에 따른 실패 사례 또한 많은 사이트들을 통해서 확인할 수 있다.

웹사이트 제작과 관련된 일을 하고 있는 분이라면, 아직 늦지 않았다. 지금 책과 인터넷을 통해 웹표준을 공부하고 습득하는 것이 당신의 경쟁력을 높히는 지름길이 될 것이다.

그나저나 개편된 이후에도 네이트의 GN(Global Navigation) 버튼들은 파이어폭스에서 작동되지 않는다. 도대체 무슨 의도로 이런식으로 링크를 만들었는지 알 수가 없다. 사이트 최상단에 ‘인터넷익스플러가 아니면 사이트 이용이 불가능합니다.’라고 명시해주면 좋겠다. 바로 북마크에서 지워버리게..

웹개발자의 필수 아이템인 Web Developer의 1.0 버전이 공개됐다. 이전의 0.93 버전의 경우 몇몇 기능들이 파이어폭스에서 사용할 수 없었는데, 이번 업그레이드를 통해서 그런 문제들이 모두 해결됐으며, 몇몇 기능들이 추가됐다.

추가된 기능들 중에서 Element Infomation이라는 것이 있는데, DOM Inspector와 비슷한 기능을 수행하는 편리한 도구인듯 싶다. 또한 예전 버전에서 가장 많이 사용하던 기능이었던 View Style Infomation은 예전에 앵커가 활성화돼서 불편한 점이 많았는데, 이번엔 앵커가 비활성화됐다.

View Document Size 기능을 활용하면 더욱 경량화된 웹페이지 제작에 도움이 될 것 같고, Line Guide를 이용하면 웹페이지의 가로/세로 크기를 알아보는데도 유용할 것 같다. 이외에도 Color Infomation을 이용해서 웹사이트의 주/보조색들을 파악하는 것도 가능해졌다.

기존의 Edit CSS이 무척 유용한 기능이였다면, 이번에 추가된 Edit HTML 기능은 그다지 쓸모가 있을지 모르겠다. 다만, 다음 버전의 웹디벨로퍼 툴바에서는 웹에디터 기능이 보강되지 않을까 예상될 뿐이다. ㅎㅎ

웹 개발/디자인하는 사람들의 필수 아이템 1번째에 Web Developer 툴바가 자리잡힐 날이 얼마 남지 않은 듯 싶다.