stophobia

구글의 검색페이지에서 에러가 났네요...

회사 컴터가 전부 이 상태인걸 보니 바이러스가 돌아다니고 있는건가...

일단 저 패스워드를 넣으면 정상적으로 동작은 하지만...

뭔가 찜찜...

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

오늘 구글독스를 쓰던 중 에러가 발생했습니다.

그런데, 에러메세지가 보통이 아니군요.

친절한 듯 하면서도, 그 센스에서 약간 화가 날려고도 하는, 매우 야릇한 기분...



확대해서 봐 주세요.

해석을 하자면...

나쁜 소식은, 구글독스가 에러를 만났다는 것입니다.
좋은 소식은, 당신이 우리가 에러를 발견할 수 있도록 도와주셨다는 사실입니다.
당신이 초래한 불편함에 우리는 사죄드립니다.

죄송합니다. 그리고, 도와주셔서 감사합니다!

음...
결국 내가 잘못했다는건가효?

항상 딱딱한 사죄 인사에 길들여져 있어서일까, 이런 재치있는 사죄가 익숙하지 않긴 합니다.

웬지 친근하게도 느껴지구요.

하지만... 이왕 기분좋게 만들 계획이셨다면, 60년대 유머는 좀 지양해 주셨으면...

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

우선 여기서 밝힐 것은, 저는 웹기획자가 아니고, 순전히 웹디자이너이고 웹서핑을 좋아하는 블로거일뿐입니다. 그러니, 저의 포스팅에 영향을 받지 마시고 한번 읽으신 후 일상생활로 돌아가시면 좋겠습니다.

저는 2007년은 이러한 서비스들의 결과가 나오는 시간이라고 생각합니다. 네이버마저 CSS레이아웃으로 큰 변혁을 마치고(웹표준에 맞추었다는 말은 도저히 나오지 않네요) 스마트에디터를 이용한 여러 서비스로 정면승부를 예고한 이상, 올해 하반기와 내년초의 반응으로 내년의 전개 방향을 결정할 가능성이 큽니다. 흥미있는 것은 포토서비스와 동영상서비스 등 역사가 그리 길지 않으면서도 색깔을 가진 서비스를 출시한 것인데, 내년 상반기의 평가에 의해 이러한 서비스들이 제색깔을 버리고 스마트에디터를 사용해 색깔을 갖추는 서비스로 변모할 가능성도 있습니다. 스마트 에디터는 제 생각으로는 단지 글쓰는 기능만으로 끝나기엔 아까운 툴입니다. 내년 상반기를 넘길 가능성은 그리 많지 않습니다. 업계의 변화속도가 지금보다 더 빨리질테니까요.

또한 다음도 베타로 제공중인 웹인사이드, 애드클릭스, 오픈아이디 등의 결과가 슬슬 나올 때입니다. 하지만 다음의 경우는 네이버만큼 부담이 크진 않습니다. 이미 중요 섹션에서 웹표준을 달성했고, 많은 스텝들이 웹표준에 익숙해져있는 만큼 그에 따라 후속 사업들의 전개 개념이 상당히 유연해져 있을테니까요. 그리고 다음의 경우는 사업전개를 예측하기 어려운 것이, 네이버의 경우는 다음의 사업을 벤치마크한다는 느낌이 상당히 강한데, 다음의 경우는 오리지날에 가까운 사업을 전개하는 경우가 많다는 것입니다. 다만, 전세계적인 트렌드에 상당히 민감하게 반응하는 느낌이 강한데, 이번에 구글이 한 연구기관에 의해 평가 절하당한 충격이라던지, 야후의 위상이 서서히 원점으로 돌아오는 이 시점에서 다음이 다른 노선을 걸을 가능성도 있습니다.

또한 엠파스를 인수한 SK의 행보도 주목할만합니다. 이미 네이트온 메신저와 싸이월드 미니홈피로 안정적인 사업을 펼치고 있는 SK가 엠파스를 인수하여 웹검색쪽으로 공격적인 사업을 전개할 가능성이 매우 큽니다. 제 생각으로는 예전의 파란처럼 어설픈 서비스를 전개하여 제살마저 깎아먹는 전철을 밟지 않기를 바라는 마음뿐이지만, 열린 검색 등 예전부터 쭉 파격적이고 어찌보면 공격적이었던 엠파스의 전개 방향과 그리 크게 다를것같지는 않습니다. 아마 검색서비스만 강화하는 방향으로 나갈 것 같습니다.

2008년...

웹디자이너로서 주목할만한 것은 정식판이 출시되는 사파리에 대한 지원을 하느냐 않느냐인 것입니다. SK의 경우는 맥용 네이트온을 이미 발표하였고, 다음같은 경우는 우분투에 대해 지원을 하고 있는 관계로 이 두회사가 정책의 일관성이나 이미지 유지를 위해서라도 사파리 유저들을 껴안을 가능성은 매우 큽니다. 문제는 네이버인데, 네이버의 경우 지금까지의 경험으로 미루어볼 때 일단 내년은 사파리 유저들을 지원하지 않을듯 합니다. 내년말쯤 다음과 SK의 실적을 보고 판단을 내리겠지요.

또한 각 포탈을 중심으로 인력이동을 예상해볼 수 있습니다. 구글코리아의 한국지사 전개를 가볍게 평가하시는 분들이 있는데, 현재 IT인력들이 해외로 탈출하고 있는 이 상황에서, 각 포탈의 일부 핵심인력이 구글코리아를 비롯한 좀 더 나은 근무 환경을 제공하는 곳으로 이동하기 시작하면 그 충격은 적지 않을 것입니다.

사업의 전개에 대해서는 올해 전개되고 있는 사업을 중심으로 각 포탈이 색깔을 찾아나가는 작업이 한층 강하게 진행되리라는 예상입니다. 세계적인 트렌드를 파악해 나가는 다음과, 국내 사용자에 최적화된 서비스만을 엄선하여 전개하는 네이버, 이 양단에 끼어 전방위로 공격적인 사업을 전개하는 SK.

과연 내년의 포탈은 어떤 모습일까요?

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

내년은 어떤 의미를 가지는 해일까?

우선 과거 2년동안 무슨 일이 있었는지 정리해보았습니다.

2005년 : 저작권
네이버, 다음, 네이트온으로 포탈의 3강체계가 확립됩니다. 네이트온의 경우 싸이월드에 힘입어 엠에스엔 메신저를 누르는 기염을 토하며 부동의 국내1위의 메신저가 됩니다. 다음의 서비스를 벤치마크해오던 네이버가 이러한 네이트온의 성공에는 별로 동요하지 않는데, 메신저 서비스를 추가하는 것보다 기존의 블로그서비스를 강화하는게 났다고 판단했는지도 모릅니다. 확장형 포탈의 길을 걷던 네이버와 다음이 자존심을 지킨 덕분에, 3강 체제는 계속 이어져 나갈 수 있었습니다.

2006년 : 웹2.0
네이버의 블로그시즌2, 싸이월드C2, 다음의 티스토리 인수, 파란의 넥스트파란, 프리챌의 큐서비스 등 대형 포탈들이 조금씩 변혁을 시작해 나갑니다. 구글마저 개인화 홈페이지 서비스를 시작해 버렸으니, 전세계적인 포탈들의 변혁이라고 말해도 될 듯 합니다. 왜? 갑자기 전세계적으로 이런 일들이 일어난 것일까요?
바로 웹2.0이라는 단어의 탄생이라고 생각합니다. 오렐리 사장님의 이 한마디 때문에 많은 블로거들이 웹2.0을 인정한다 안한다로 양분되어 다투기도 했는데, 이 웹2.0이 단어의 탄생이 아닌 개념의 증명이라는 것을 증명하는데는 오래 걸리지 않았습니다. 새롭게 탄생한 많은 서비스들이 웹2.0을 새로운 사업의 전개로 연결시키지 않고, 전부터 존재하던 서비스들의 패러다임을 바꾼 상태로 제공해 나가기 시작했기 때문입니다. 웹2.0을 기반으로 새로운 사업을 전개한 기업들이 몰락한 것이 그 증거입니다.
또한, 구글의 애드센스가 기폭이 되어 국내에서도 검색광고시장이 확대되는데, 이를 위한 기반 사업의 일환으로 다음의 애드클릭스, NHN의 첫눈 인수, SK의 엠파스 인수등이 표면화되어 나타납니다.
비스타의 발표로 마이크로소프트 이외의 브라우저에 대한 관심이 깊어지고, 이제까지의 테이블 코딩에서 벗어나려는 움직임이 소형 웹사이트를 시작으로 점차 보이기 시작합니다. 웹표준의 태동이라고할 수 있겠지요. 한국의 대형 포탈중에는 다음이 제일 재빠르게 홈페이지를 개편해 나갑니다.

그렇다면, 2007년은?

추가 : 2006년은 네이버와 다음, 야후 등 많은 포털이 자사 API를 공개한 해이기도 합니다. 물론 구글의 영향이 있었음을 부정할 수 없습니다.

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

이어, SEO와 시각장애인을 위한 접근성 대책에 대한 부분을 소개하겠습니다.

6. SEO에 최적화
메타태그의 입력방법, 헤드부분 처리는 물론, 본문의 각 요소에도 SEO처리를 해 놓았습니다. 이것도 Semantic으로 반은 먹고 들어갔습니다. 아픈 기억으로 입력방법이나 헤드처리요령 등은 설명하지 않겠습니다.

사실 검색엔진이라고 부르기엔 뭐한 네이버가 국내 검색시장을 대표하는 마당에선 제일 충실한 SEO대책은 네이버에 광고를 올리는 것이겠지만요.

7. 시각 장애인을 위한 접근성 대책
제가 사실 스크린 리더기를 사용할 기회가 없어서 이 부분은 확언을 못드리겠습니다. 하지만 웹에서 얻은 지식으로 accesskey 라던지 title의 사용을 최적화해 보았습니다. 시각장애자분들이라도 적어도 링크는 제대로 누르시지 않을까 생각합니다.

또 access단축키를 생각하면서도, 입으로 스틱을 물고 사용하시는 분들의 입장에서 어떤 키 배열이 좋을까 생각해보니, 단축키가 ALT키와 함께 쓰인다는 점에 착안해 스킨을 바꾸는 accesskey는 ALT와 가까운 곳에 있는 Z, X, C, V로 해보았습니다. 로고와 연결된 accesskey는 아마 대부분의 웹페이지가 단축키를 숫자 0이나 1로 설정해 놓지 않았을까 생각하여 익숙하신대로 쓰는게 제일 편하지 않을까 하는 마음에 1로 설정해 보았습니다. 저에게 메일을 보낼 수 있는 키는 7입니다. 행운의 7! (경험상 이래도 메일은 안오더라구요)

기획을 할 때 장애인용 키보드에 대한 자료를 찾아보았지만, 한국어로 된 자료가 많이 없었기에, 어쩔수 없이 일반 키보드를 기준으로 했습니다.

8. Semantic 구현
100% 완벽하다고는 할 수 없지만, 이전까지 제가 참고했던 어떤 웹페이지보다 더욱 Semantic에 가깝게 작업했습니다. id와 class가 의미를 가지도록 하는데 집중하였고, 이미지 파일의 이름도 용량의 범위 내에서 의미를 가지도록 신경을 써 보았습니다.

http://wis1674.dothome.co.kr/

이 사이트를 제작하면서 느낀 것이지만, 작업의 순서가 바뀌었습니다.

일단 XHTML코딩을 하고, 그 다음 디자인을 하였습니다.
이 순서의 변화가 무엇을 의미하는지 아시리라 믿습니다.

예전의 웹공정, 특히 테이블 레이아웃에서는 디자인이 나오고 나서야 코딩이 진행되었습니다. 물론 프로그래밍은 코딩이 끝난 뒤가 되니 웹제작에 시간이 걸리게 마련이었지요.

하지만, 코딩이 우선이 되면, 코딩과 디자인을 동시에 들어갈 수 있게 됩니다. 기획단계에서 레이아웃과 요소들을 결정하면, 그 다음은 퍼블리셔와 디자이너가 동시에 작업을 진행할 수 있다는 이야기가 되겠지요. 작업에 대한 패러다임까지 발전적으로 변화합니다.

다음 글부터는 XHTML제작과 CSS제작에 대해 간단히 적어보겠습니다.

읽으시느라 수고하셨습니다!!!

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

100% 만족하지는 않지만, 입으로만 떠드는 것을 탐탁치 않게 여기는 저이기에, 글은 이정도면 쓸만큼 써둔 것 같고, 실제로 웹표준에 입각한 사이트를 만들어보자고 해서 만든 것이 이 사이트입니다. 사이트에 명시는 해 두었지만, 절대 W3C의 밸리데이션 통과를 목적으로 만들지 않았습니다.

http://wis1674.dothome.co.kr/

일단 이 사이트 설계시의 기준 (기획이라고 하는 말이 어울리겠군요.)을 말씀드리겠습니다.

1. XHTML1.1 과 CSS 3.0기준에 맞추어 제작
실무에서는 에러방지를 위해 제일 유연성이 풍부한 HTML4.01 transitional을 쓰지만, 이 사이트는 목적 자체가 포트폴리오니만큼 제가 아는 한 "최신의 기술"을 사용하고 싶었습니다. 언제까지 최신의 기술일지는 모르겠지만... XHTML의 밸리데이션이야 분석기가 DTD를 자동으로 판별해 주니 알기 쉽지만, CSS 3.0? 지금 2.1도 안나와있는데 무슨? 하시는 분들을 위해 알려드리면, CSS 검증페이지에 가면 옵션으로 검증모드를 선택할 수 있게 되어있습니다. 여기서 원하는 검증 모드를 선택하시면 선택된 모드로 검증이 됩니다.

XHTML의 경우는 ol, ul, blockquote, fieldset, table 등등 고루 사용했습니다. Semantic에 신경쓰다보니 당연히 그렇게 되더라구요.

또한 CSS도 그냥 대충 요소를 집어넣지 않고, 모질라에서 권장하는 순서대로 적어 넣었습니다. Naver UI 팀 지침 참고 퍼포먼스에 차이가 있는지 어떤지는 모르겠지만, 있다고 해도 과연 느껴질 수준인지는 모르겠지만, 설마 순서가 괜히 있는것은 아니겠지 싶어서 말이지요.

2. UTF-8 사용
제가 외국에 살고 있어서인지는 몰라도, 여러 외국어를 한꺼번에 쓸 경우가 종종 있습니다. 영어도 되지않을뿐더러, 행여 외국의 웹에 들어가보아도, 한글을 쓸 수가 없어서 영어로 적을수 밖에 없었던 아픈 기억을 되살리면서 작업했습니다. 결정적인 이유 중의 하나는, 제가 쓰는 드림위버8이 일본어판이기 때문에 한글이 깨져서 보입니다. 그래서 utf-8모드가 아니면 한글이 제대로 나오지 않았던 이유도 있습니다.

3. 자바스크립트를 이용하여 페이지를 갱신하지 않고 외부CSS 교환
CSS를 교환하는 사이트가 꽤 되는걸로 알고 있습니다. 대표적으로 zengarden이 있지요. 하지만 CSS를 교환하기 위해서는 페이지를 갱신해야 했습니다. 이 부분을 자바스크립트를 사용하여 갱신없이 파일을 교환하도록 했습니다. "아! AJAX틱하다"하고 멋대로 생각해 버렸습니다만...
참고로 이 자바스크립트는 순수한 저의 작품은 아닙니다.

4. 1999년 9월 26일 이후 발표된 모든 브라우저에서 동일한 외관을 보장
저 날짜의 근거는 인터넷 익스플로러 5.0 버전이 네이버 자료실에 올라간 날짜를 기준으로 한 것입니다. 참고로 제가 크로스브라우징에 사용한 브라우저는

Internet Explorer 5
Internet Explorer 5.5
Internet Explorer 6
Internet Explorer 7
Firefox 2
Opera 9
Safari Beta 3 for Windows
Netscape 8
Netscape 9
Avant
Flock

이렇게 되겠습니다.
AVANT와 FLOCK이 생소하신 분들도 있으시겠지만, AVANT는 IE의 렌더링 엔진을, FLOCK은 Firefox의 렌더링 엔진을 각각 사용하고 있습니다.

이렇게 다양한 브라우저에서 테스트를 하다보니 CSS Hack이 조금 들어갔습니다. 하지만 그에 대한 주석은 생략했습니다. 일하면서 안좋은 기억이 있어서...

5. Clear Font 사용
구글 스킨(기본 스킨)을 제외한 모든 스킨은 Cleartype Font 를 사용했습니다.

한글 : 맑은 고딕체
일본어 : 명료체
영어 : Segoe UI

이유는 단지 개인적으로 예쁘게 보이기 때문에. 그리고 앞으로 비스타가 널리 보급되면 그만큼 클리어타입이 친숙하게 될텐데, 그 때를 대비해서 분위기를 미리 파악해보는 것도 좋지 않나 하는 생각에서 입니다.

다음 글에서 계속...

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

세월도 조금 지난 듯, 웹표준을 지켜야 된다는 글들도 이젠 어렵지 않게 보이고, 어떻게 하면 웹표준을 지킬수 있는지에 대한 글도 꽤 많이 보입니다. 웹표준이라는 단어가 이제는 개념적인 차원에 머물지 않고 실용적으로 다가오고 있음을 실감할 수 있습니다.

그렇습니다. web2.0처럼 개념적으로도, 수익모델적인 측면에서도 추상적인 의미에 머무르는 단어가 있는 반면, 웹표준은 실제 사업모델에서 고급이면서도 경제적인 웹 퍼포먼스를 보여주기 위한 도구로서 적극적으로 사용되고 있다는 뜻이겠지요.

하지만, 실제 웹표준을 표방하고 있는 사이트를 살펴보면, 사실은 HTML 또는 XHTML과 CSS만을 사용한 사이트가 대부분이라는 사실에 조금 실망하게 됩니다. (게다가 이런 사이트들은 W3C의 밸리데이션 통과마크를 꼭 걸어놓습니다. 아마 그것이 의무사항이라고 생각하고 있는지도 모르겠지만, 이부분은 W3C의 홍보부족이 아닌가 싶네요. 역으로 과다홍보일수도 있죠. 어쨌든.)

물론 XHTML과 CSS를 사용했다는 사실만으로도 매우 장족의 발전이고, 이러한 코딩이 익숙해질수록 웹표준에 상당히 가깝게 다가간다는 사실은 부정할 수 없습니다. 하지만, 매일매일 쏟아지고 있는 웹표준과 관계된 웹문서나 서점에 진열된 책의 수준과 비교해보면, 역시 아직은 웹표준이 개념적인 측면에 머물고 있지는 않은가 생각하게 됩니다.

일단 웹표준은 Semantic에 입각해야합니다. 밸리데이션 따위, 부차적인 목적이 되어도 좋습니다. 접근성도 일단 접어둡시다. Semantic만 해결하신다면, 모두 거저 얻으실 수 있습니다.
 
Hn요소가 순서대로 들어가 있는지, 사이트맵을 나타내는 웹페이지의 이름은 sitemap.html인지, 그 사이트에 링크가 걸린 이미지 버튼의 이름은 sitemap.gif인지, 각 div의 id명은 의미를 가지고 있는지, 다 생각하면서 해야합니다.

로고에 H1요소를 쓰는 것은 알고 있지만 글자를 넣어버리면 처리가 불가능해지기 때문에 글자대신 이미지를 넣어버린다던지 아예 H1요소를 빼버린 (정말... 눈물이 날 지경입니다.) 사이트, 사이트맵의 이름은 꼭 gnb05.gif 또는 top-btn05.gif인 사이트, div의 id나 class명은 어김없이 숫자나 알파벳을 순서대로 나열한 사이트...

단지 XHTML밸리데이션 통과가 목적이라면, 공부는 충분합니다. 밸리데이션 통과 마크를 얻으셨지 않습니까?

웹표준이란, 기초적인 XHTML 문법과 CSS 문법만 적어놓은 책에서는 절대로! 얻으실 수 없습니다.

또한, 웹표준과 함께 부가적으로 얻을 수 있는 여러 장점, 특히 웹접근성과 관련된 장점을 살리지 못한다는 것이 매우 유감이지요.

예를 들면 스크린 리더에서 무리없이 읽어줄 수 있는 구조인가, 입에 전용 스틱을 물고 키보드를 치시는 장애인들도 단축키를 이용하여 마우스없이 메뉴를 선택할 수 있는 구조인가, 탭을 사용하여 순차적으로 데이터를 입력할 수 있는 구조인가... 웹표준이라는 주제에 대해 생각하기 이전에는 당연히 전문가의 손길이 닿지 않으면 안되었던 이런 부분들 조차, 웹표준에 입각한 코딩이라면 어느 정도는 대책이 가능하다는 것입니다.

물론 매우 기초적인 장벽도 있습니다. 크로스브라우징이 바로 그것인데요, 인터넷익스플로러 의존도가 높은 편인 우리나라에서는 아주 최근에 문제의 심각성을 인식하고 (비스타님 감사합니다) 대책을 세워나가는 분야입니다.

인터넷익스플로러만 믿고 여기까지 왔는데(정확히 말하면 인터넷 익스플로러 6 이 되겠지만) 파이어폭스나 오페라는 그렇다치고 인터넷익스플로러 7마저 형을 배반하는 바람에 익스플로러 6과 7이 무엇이 다른지도 모르는 불쌍한 소비자들만 인터넷 뱅킹을 못하게 되는 상황이 되어버린 것 아닙니까?

서론이 길었습니다만, 저조차도 이론만 늘어놓는 것은 아니다 싶어서 (사실은 다른 목적을 가지고) 사이트를 한번 만들어 보았습니다.

http://wis1674.dothome.co.kr

다음 글에서 설명을 올리겠습니다.

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.