deutism

2006년 이었던가 아직 나이의 십의자리에 3자를 달기전에 그렇게 열심히 준비하고 사람들의 질책과 격려를 받으면서 웹 표준의 날을 했던것이 엊그제 같은데 벌써 네 번째가 되었습니다.

“웹 표준의 날” 이러면 “너무 거창하지 않냐” 라는 생각이 항상 머리속에 자리잡고 있고, 이왕 큰 이름을 걸어버린거 “크고 제대로된 모임을 만들면 되지” 라고 생각하면서도 또 제 능력의 밖이라는 생각도 많이 들더군요. 어찌보면 홍대에서 만나서 밤새 술을 먹으면서 처음에는 다른 얘기를 하다가도 새벽만되면 웹 표준 얘기들로 밤을 지새우던 그런 일개 커뮤니티의 정모가 대표성을 띄는 이름을 가진 세미나로 발전을 했다는것도보면 참 아이러니하기도합니다. 처음에는 모여서 술이나 먹자는 모임을 이번 네번째 행사에서는 공식적으로 뒷풀이 없습니다. 라고 말해버리는걸 보면 말하면서도 좀 재수없기도 하고 “니가뭔데 사람들의 즐길권리를 빼앗냐” 라는 생각도 들고 여러가지로 고민이 많습니다.

항상 모임을 딱 준비를 시작하면 그때부터 안팎으로 바쁜일이 몰려 들어옵니다. 회사일도 바뻐지고, 개인일도 바뻐지고, 또한 웹 표준의 날 준비도 당연히 원할할수 없겠죠. 그래도 항상 자신의일처럼 도와주시는 많은분들이 있어서 웹 표준의 날은 모임자체는 빈약해도 마음만은 풍족하게 진행 할 수 있을것 입니다. 이번에 물심양면으로 도와주시고 도움을 주시겠다고 말씀해주신 많은 분들께 “정말 고맙습니다.” 라고 말씀드리고 싶습니다.

더 많은 분들에게 함께하는 기회를 못드리는것도 정말 죄송하고.. 대기자 신청이나 사람 늘릴 수 없냐며 여기저기로 연락해 오시는들을 보며 참 미숙한 사람 하나때문에 여러 사람이 고생하는구나 생각이 들기도 합니다 다음에는 꼭 충분한 공간을 만들어서 인원 제한 같은거 없이 모든 분들과 이 웹 표준의 날이라는 즐거운 행사를 같이 할 수 있도록 노력 하겠습니다. 오늘 오고싶은데 참석신청이 늦어서 못오시는분들 정말 죄송합니다. 정말정말 죄송합니다. ㅜ_ㅜ

웹 표준의 날을 준비하기 위해 정말 많은 분들이 밤을 새가면서 준비해주셨습니다. 발표자료를 만들기위해, 이름표를 만들기 위해, 장소를 만들어주시느라, 상품들을 준비해 주시느라 많은 분들이 노력해 주셨습니다. 그 분들에게 누가 되지 않도록 제가 더 열심히 발로 뛰겠습니다.(무슨 선거 유세같은데…)

저는 이제 웹 표준의 날하러 가야겠습니다. 4시간후 쯤 만나요:)

예전에 개발자를 살려주세요 라는 캠페인이 있었습니다. IE6때문에 개발자가 힘드니 브라우저를 업그레이드 해달라는 내용의 캠페인이었습니다. 당시 찬반 논란이 많았지만 IE6를 업데이트 하자는데에는 큰 이견이 없었습니다.

이후 no more IE6 페이지가 생기고 서명을 받고있네요.

저도 IE6로 고생을 많이한 만큼 IE6 를 쉬게 해주자는 캠페인에 동의하고 지지합니다.
마이크로소프트에서 왜 IE를 강제업데이트 하지 않는지 참 궁금하기도 하구요.

그런데 훈스닷넷이라는 커뮤니티에서 더이상 IE6를 지원하지 않겠다며 IE6로 접속 하면 다른 브라우저를 설치할수있는 페이지로 이동하게 되는데요.
나름 결단을 내리신 것이겠지만 제가 생각하기에는 특정 브라우저의 접속 차단은 절대로 해서는 안되는 일이라고 생각을합니다.
IE6을 공식적으로 지원 중단을 한 google의 경우나 no more IE에 참여하기로 한 어떤 사이트도 IE6를 차단하지는 않고 있습니다.
제가 활동하는 커뮤니티도 아니고 아는 사람도 없는 커뮤니티라 조심스럽기는 합니다만, 훈스닷넷의 이번 IE6 차단은 정말 안타까운일 이라고 생각이 듭니다. 다음과 같은 이유로 말이죠

우리나라에는 현재까지도 IE만 지원하는 사이트들이 정말로 많습니다.
제가 다니던 회사였던 넥슨의 간판 게임인 메이플스토리의 한국 사이트는 IE만 지원 한다고 하고 있으며 아직도 많은 사이트가 “netscape는 지원하지않습니다.”라는 문구들을 alert으로 띄우고 사이트를 차단해 버립니다.

많은 웹 표준 추종자들이 처음부터 말했던게 “모든 브라우저를 지원하라는것이 아니다. 적어도 웹사이트를 볼수만 있게라도 해달라”라는 얘기들을 정말 많이 했습니다.
그 당시에는 크로스브라우징 따위 얘기할 상황도 안되었었죠, 현재는 정말 많이 좋아졌다는 생각이 듭니다. 그런데 IE6를 차단 하는것도 예전에 netscape사용자는 접근을 막았던것과 같은 상황이라고 생각이 듭니다.
차라리 이제부터는 “IE6에서는 사이트가 이용 불가 하더라도 어쩔수없다. 참고 쓰던가, 다른 브라우저를 업데이트 하던가” 이런식으로 선택의 기회를 주는것이 바람직하다고 생각합니다.
IE6를 통한 접속의 차단은 선택의 기회를 주는것이 아닌 선택을 강요하는것이라 생각이 듭니다.

IE6을 차단해서는 안되는 또 하나의 이유는 바로 IE6를 차단한 사이트가 개발자 커뮤니티이기 때문입니다.
개발자 커뮤니티에서 IE6를 차단 해버리면 그 커뮤니티에 즐겨가는 사람들은 어느샌가 자기가 작업한 페이지를 테스트 할때 IE6을 테스트 환경에서 빼버릴지도 모릅니다. IE6은 안맞추어도된다고 생각해 버릴지도 모르죠.
웹 페이지를 만드는 사람들(웹 퍼블리셔가 되었던, 서버 사이드 웹어플리케이션 개발자가 되었던)은 IE6를 잘 알고 테스트 하며 지원해야하는 마지막 사람이 되어야한다고 생각합니다.(IE6뿐만은 아닙니다.)
사용자에게 IE6를 업데이트하게 권유를 하더라도 개발자는 IE6을 언제나 염두에 두어야 한다는것이죠.

물론 IE6는 현재 계륵같은 브라우저입니다. 다른 브라우저들간의 차이도 많고, 버그도 많으니까요. IE6를 맞추기 위해 개고생 하는것 보다 다른 발전적인 일을 하는게 낫다고 생각하기도 합니다.
저도 IE6 때문에 고생을 참 많이 했습니다. 정말 귀찮아도 하기싫어도 저는 IE6를 지원 해야한다고 생각합니다. 많은 사람은 IE6가 뭔지 브라우저가 뭔지 알지도 못할 테니까요.(알 필요도 없죠.)

제일 좋은 방법은 일반 웹을 사용하는 사람이 IE6 대신에 다른 브라우저를 써야하는 이유를 사이트쪽에서 만들어서는 안된다고 생각합니다.
IE6보다 IE7이나 IE8 그리고 파이어폭스, 사파리, 크롬, 오페라 브라우저가 더 좋다는것을 알려야한다고 생각합니다.
우리는 브라우저 업데이트를 권고하는 방향이 최선일것 같습니다. 강제하지 말구요..

P.S 그나저나 왜 no more IE6 에는 브라우저 리스트에 Opera Browser가 없는건가요!!!
P.S2 이 글은 CDK의 한 글타래에서 시작 되었습니다.

제가 요즘 여러사이트를 둘러볼 일이 많은편인데요. 둘러보니 그동안 많은 웹사이트가 웹2.0이다 Ajax 다해서 많은 발전을 하고 있는것같아요. 많은 클라이언트 기반 웹 기술들이 사용자를 위한 발전을하고 있고 실제로 많은 사이트들이 사용성 이나 편의성이 많이 좋아진것같아제가 요즘 여러사이트를 둘러볼 일이 많은편인데요. 둘러보니 그동안 많은 웹사이트가 웹2.0이다 Ajax 다해서 많은 발전을 하고 있는것같아요. 많은 클라이언트 기반 웹 기술들이 사용자를 위한 발전을하고 있고 실제로 많은 사이트들이 사용성 이나 편의성이 많이 좋아진것같아

하지만 기술의 발전에 비해 내용의 발전은 아직 많지 않은것 같아요. 꼭 필요할 것 같지 않은 요소들이 남발이 된다던가 그냥 고민 없이 해오던대로 페이지를 구성한다던가 하는일들이 무식한 제가 보기에는 많이보이는것 같아서요 혹시 이글을 보시고 현답을 주실분이 있다면 좋을것 같네요.

각종 사이트를 원할하게 사용하려면 거의 대부분이 회원 가입을 하고 로그인을 한뒤 사이트를 이용하게 되는데 회원가입 하는게 쉬운일이 아니죠. 보통 회원가입시 받는 정보들을 살펴보면 이름, 주민등록번호, 닉네임, 아이디, 주소, 전화번호, 휴대전화번호 등등 완전 호구 조사가 따로 없어요. 주민등록번호 입력은 그중 제일 이해 안가지만 뭐 다들 고집을 하니 넘어가도록 하고 그다음으로 이해안가는 항목이 하나 있다면, 주소를 입력받는건데요. 이 정보가 왜필요한지모르겠어요 쇼핑몰 같은경우 주소가 필요 할수도 있겠지만, 다른 경우에는 별로 안필요할것 같은데요 경품을 줄때이용 할수도 있을거라 생각해봐도 보통 경품 보내줄때는 주소 정보를 수동으로 관리하고 수집하더라구요 입력하는 사람도 정말 귀찮은 일이 아닐수없는데요. 게다가 대부분 우편번호까지 입력해야하니 정말 귀찮아요. 이용할때도 없고 입력하기도 귀찮은 이 항목이 왜 회원가입 항목에 있는질 모르겠어요.

대부분 위와 같이 입력해 보신적 없나요?

또 하나 걸고 넘어져 보면, 대부분 회원가입시에 메일주소를 입력받는데요. 많은 사이트들이 많이 사용되는 메일의 도메인을 미리 리스트업해놓고 그중에 선택하던가 직접 입력하던가 할수 있게 하는데요. 돌려 쓰는건지 퍼와서 사용하는건지는 모르겠으나 도메인이 상당히 오래되어서 서비스 되지않는 도메인이 있는경우도 보이더라구요. 개인적인 생각 으로는 그냥 메엘주소를 도메인 포함해서 입력하는게 더 편하다고 생각 하는데 이건 뭐 개인차가 있을것 같네요.

회원 가입시에 저같으면 정말 최소의 정보만 받을것 같은데 사이트마다 나름의 이유가 있겠죠?

제가 초천재님과 아이폰을 사러 대리점에 갔을때 개인정보를 여기저기 뿌리는것에 동의 하라고 안하면 아이폰을 가입할수 없다고 하던 고속터미널의 모 대리점이 생각이 나는데요 설마 사이트도 그런건 아니겠죠?

요즘 대부분의 게시판이나 블로그툴에는 HTML에디터라고 불리우는 Online Rich Text Editor(이하 RTE) 가 사용되고 있지요.
우연히 허접한 실력으로 만들 기회가 생겨 회사 게시판에 사용되는 에디터를 만들게 되었고 만들면서 느낀점들을 한 두개 정도 공유하려 합니다. 에디터를 만들어 보신분이라면 볼필요도 없는 내용이 될것이고, 저처럼 온갖 삽질을 하던사람에게는 조금 도움이 되지 않을까 생각해 봅니다.

일단 작업을 시작했을때 생각보다 자료가 별로가 없었고, 그 마저도 크로스 브라우징 논의 자체가 없었습니다. 그와중에도 이미 Xquared나 Smart Editor 같은 훌륭한 에디터가 나와 있었으나, 소스가 너무 어려웠어요 =_=;;;;

• openmaru의 Xquared 는 깔끔한 코드를 산출해준다는 장점이 있었습니다. 기존의 에디터는 대부분 HTML4.01를 기준으로 태그를 생성해 주거든요. 그런데 Xquared의 경우는 상당히 깔끔한 XHTML 1.0 베이스의 코드를 만들어주는데 그 장점이 있었습니다. 별것 아닌것처럼 보일지 모르겠지만 저는 아직 그 방법을 완벽히 찾지는 못했거든요. 그외에도 여러 좋은 기술들이 있지만 일단 그 당시 생각한건 저정도…;
• NHN의 Smart Editor는 지도나 책 같은 다양한 부가 기능 지원과 레이아웃 지원등 최고의 서비스 회사답게 에디터에 많은 서비스를 담아내었습니다.
• 외산 에디터도 많습니다만 뭐 FCK Editor가 제일 좋다는 얘기만 들었는데 저는 정이 안가더라구요..(English………….)

첫번째 제 목표는 크로스 브라우징이 었습니다. 마침 4대 브라우저에서(IE5.5, Opera 9.5, Firefox 2+ and Safari 3) 모두 에디터를 만들 수 있다는 소식을 들었거든요.
firefox 에서는 midas라는 코드네임을 가진 프로젝트의 형태로서 지원을 했습니다. 저는 데모화면을 보면서 희망을 가지기 시작했어요.

이제 에디터가 무엇이라는것은 알았으니 맨땅에 헤딩만 하면되겠죠? 자 이제 삽질 시작됩니다.
제가 좀 찾아보니 에디터는 자바스크립트를 이용하여 페이지의 designmode 라는 속성으로 출발을 하게 됩니다.
쉽게 말해서  문서를 직접 디자인 할수있게 만들어 주는 속성이 랄까요? designmode는 HTML의 속성은 아닙니다. 표준속성도 아닐거구요. 그래서 스크립트로 접근을 해주어야 합니다.
iframe을 designmode 로 변경을 해줌으로써 iframe내의 문서를 편집 할 수 있게 되는거죠. 자바스크립트를 잘 모르시는분들도 차근차근 따라하면 쉬울것이라 생각되는데요?
만약에 iframe의 id속성 값이 “editWindow” 라고 한다면, 일단 iframe에 접근을 해야하니 제일많이 보는 getElementById()를 이용하는게 속편하겠죠?

document.getElementById(“editWindow”) //iframe으로 접근!

iframe 안에 우리는 글을 쓸것이니 프레임내의 document 부분으로 접근을해야겠죠? iframe내의 document는 접근하는방법이 약간다릅니다. 아래의 코드가 정답이라고 보시면됩니다.

document.getElementById(“editWindow”).contentWindow.document.designMode = “on”;

로 지정을 해주면 해당 iframe은 수정 할 수 있는 iframe, 즉 에디터가 됩니다. 쉽죠? 에디터가 이렇게 완성되었습니다. =_=/
참고로 풀소스를 한번볼까요?

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”    “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html>
<head>
<title>에디터 만들기</title>
<style type=”text/css”>
iframe { width:500px;height:400px; }
</style>
</head>
<body>
<iframe id=”editWindow”></iframe>
<script type=”text/javascript”>
document.getElementById(“editWindow”).contentWindow.document.designMode = “on”;
</script>
</body>
</html>

아 진짜 간단합니다.

참고로 contentWindow는 frame이나 iframe의 window를 나타나는 개체입니다. IE의 경우에는 생략이 되어도 상관없지만 기타 브라우저에서는 꼭 필요한 속성 입니다. 이걸 몰라서 에디터는 IE만 된다고 하는사람도 있었을 정도니까요:)

이제 에디터 영역은 만들었으니 각종 스타일이나 이런것을 넣을수 있어야 겠죠?
그건 다음시간으로 넘어갑시다~ 캬캬캬캬캬캬캬캬

참고로 이글은 에디터를 만드는데만 포커스가 맞춰져있습니다. 에디터에 대한 즐거운 생각, 더나은 에디터의 컨셉 등은 다음글을 보시는게 도움이 될듯합니다.

1. [2008년 3월 13일] 웹 에디터, 어떻게 만들어야 할까 III
2. [2007년 9월 20일] 웹 에디터, 어떻게 만들어야 할까 II
3. [2007년 8월 22일] 웹 에디터, 어떻게 만들어야 할까 I

맘에 들지 않지만 회사에서는 asp.net 을 사용 하고 있습니다. asp.net이 무슨 죄겠습니까만 제가 싫어 하는 것중의 하나가
모든 컨텐츠를 form 태그 하나로 감싸고 그안에서  모든 액션을 취한다는것이죠…
그래서 소스는 지저분해지고 script의 양만 늘어납니다. 적절한곳에 적절한 태그를 사용했으면 좋겠는데 말이에요.

엄청난 글자의 빨간부분이 데이터를 담는 부분이래요=_=;;;

암튼 그런데 띵가띵가 회사에서 미투하는 도중에 메일 한통이 날아 왔는데,
운영쪽에서 웹에서 하는 게임실행이 안된다는 리포트가 왔다는거에요…
그래서 메일을 잽싸게 봤더니 스크립트 오류가 나는거네요?

오류화면

여러가지 test를 해본 결과 flash에서 사용되는 자바스크립트 호출하는 함수인 “ExternalInterface” 가 문제 인것을 찾았습니다.
Form 태그내에서 Flash를 사용하며 그 Flash에서 ExternalInterface를 호출하면 DOM 에서 플래시를 찾지못해 스크립트가 에러가 나더라구요.
form 태그안에 왜 플래시가 들어가는지는 아까도 설명드렸죠;;

물론 Flash Player의 모든 버전에서 나는 문제는 아니고 특정 버전인 8~9초반 사이에서 나는 문제였습니다. 또한  IE에서만 발생하는 문제구요.(IE 버전과는 상관없습니다.)

해결방법은 두가지가 있습니다.

한가지는 Flash Player의 버전업을 유도합니다
보통 IE에서의 플래시 사용방법을 보면 object태그에 codebase로 Flash Player의 버전을 명시하게 되어있습니다.

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="980" height="216" id="MainNavFla">

저 부분을 변경해 주는거죠. 지금은 8.0이니 뭐 9.0이나 10.0으로 변경하면되겠죠?

또 한가지 방법은 플래시 오브젝트를 window의 객체에 바로 연결해주면 된다 하는군요.. (코멘트에 있습니다. jwatkins님의 코멘트)
요즘 대부분 플래시를 자바 스크립트로 활성화하니 활성화 코드뒤에

window.플래시오브젝트ID = document.getElementById("플래시오브젝트ID ");

같은 방법으로 해결을 할 수 있다고 합니다. (저는 이방법으로 해결을 했습니다.)
위의 코드로 보면 이렇게 되겠지요…

window.MainNavFla = document.getElementById("MainNavFla");

또한 ExternalInterface는 Opera 브라우저에서는 아직도 사용 할 수 없더라구요. 아예 플래시가 보이질 않아요..

저번에도 말했었지만 플래시가 가지는 웹상에서의 영향력 만큼이나, 신중하게 그리고 에러가 없게 플래시 플레이어를 배포했으면 하는 바램이 있어요..