카테고리 보관물: Web

회원가입 하기 왜 이리 힘든가요

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

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

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

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

메일 도메인 리스트

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

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

에디터 만들기! 1부

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

일단 작업을 시작했을때 생각보다 자료가 별로가 없었고, 그 마저도 크로스 브라우징 논의 자체가 없었습니다. 그와중에도 이미 XquaredSmart 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

Flash의 ExternalInterface 와 Form태그가 만나서 짜증이납니다.

맘에 들지 않지만 회사에서는 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");

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

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

블로그툴을 변경했습니다.

처음에 블로그를 만들때는 수정블로그를 사용했는데.. 스팸이 너무 많아서 닫았습니다. 그래서 두번째는 지윤님의 추천을 받아 택스트패턴을 사용을 했고 약 3년간 잘 사용해 왔습니다. 그런데 트랙백이 지원 안되는 문제는 심각하더라구요.
가뜩이나 오는 사람도 별로없는 블로그에 트랙백도 안되고 코멘트를 남기는시스템도 불편하고.. 무엇보다 글을 쓰는 방식(textile)이 맘에 안들었습니다.

그래서 블로그툴을 바꾸기로 결심하고 알아보는데… 현석님이 좋은 사이트를 하나 알려주시더 라구요. 블로그 툴 간의 스팩을 비교하는 사이트 였습니다. 기능이 진짜 많은 툴도 있었고 좋아보이는 툴도 있었습니다만 제가 선택한것은 WordPress 였습니다. 이유는 일단 제가원하는 기능이 모두 지원 되었고, 텍스트패턴에서의 데이터 이동도 지원이 되었죠. 주변에 많은 사람들이 사용을 하고 있어 정보 공유가 빠를것 같았기 때문이죠.(수정의 현석님, 택스트패턴의 위스턴님 죄송=_=)

워드프레스의 textpattern 에서의 import 기능지원
워드프레스의 textpattern 에서의 import 기능지원

그래서 워드프레스를 설치하고 기존 블로그의 데이터를 가져왔습니다. 예전에 할때는 잘 안되었던것 같은데 이번에는 무척 잘되는군요. 글, 코멘트 카테고리등이 모두 제대로 옮겨졌습니다. 4000여개의 스팸까지도 말이죠 =_=;;;

그런데 문제가 있었습니다. 마이 그레이션을 하고 깔끔하게 기존 DB를 지웠는데 그 DB중에 제가 메인으로사용하는 CSS가 저장되어 있었습니다. 초천재님이 만들어준 디자인인데 deuticious, planet, blog를 모두포함하고 있어서 저에게는 중요했거든요… 다행히 서버 관리자인 정태영군에게 백업DB 를받아서 CSS는 복구 했습니다.

textpattern에서 사용하는 textile이 자동변경되지않고 그냥 글에 노출이 되었기 때문에

textile을 사용한 흔적
textile을 사용한 흔적

태영군이 그자리에서 plugin을 하나 만들어 주더군요.. 역시 천재!!

이제 예전에 사용하던 스킨을 그대로 입힐 차례 입니다. 뭐 이건 전문 분야인데다가 워드프레스의 문법이 그렇게 어렵지 않아서 순조롭게 진행중(응?)에 있습니다. 조만간 추가된 기능에 대한 CSS만 추가가 된다면 좀 더 이쁘게 보이지 않을까 생각합니다.(전 이 디자인 맘에 들어요^^)

툴은 워드프레스이지만 폴더명은 “txp”를 그대로 가져가기로 했습니다.
이미 txp 로 너무 오래 블로깅을 해서 바꾸면 혼란이 있을것 같았고, 만약에 걸려있을 다른곳에서의 링크도 살려야했기 때문입니다.
마찬가지로 RSS주소도 현석님의 도움을 받아서 .htaccess 에서 리다이렉트하는 방식으로 기존주소를 그대로 사용하게 되었습니다. .htaccess에대해서는 조만간 블로깅 하겠습니다.

제가 원한것은 획기적인 변화가 아니라  기능개선 정도 였기 때문에 위의 삽질들을 진행했었습니다만 잘한짓 인것 같아요ㅎㅎㅎ 링크는 살아있어야하니까요..

몇가지 문제점만 해결을 하면 되는데… 결혼식 갈준비를 해야 하는군요..저녁에 마저 해야 겠습니다.

온오프믹스 힘든 UI

작년 여름 즈음에 firefox 모임을 참석 하려하는데… 눈에 띄는 서비스가 하나 있었습니다.
모임 신청 방식 중 그 당시 유행(?)하는 참가 신청 방식이었던 위키 방식이 아닌 모임 신청을 하는 서비스가 따로 존재를 하더 라구요. 그것이 바로 Onoffmix 였습니다.

웹표준의날 1회 참가 신청 페이지
위키로 알아서 신청하는 방식

참 참신해 보였고, 디자인도 깔끔하니 잘나와서 웹 표준의 날 할때도 써먹어야겠다 싶었죠… 그래서 이번에 웹 표준의 날을 진행하면서 한번 사용해 보기로 하였습니다. 참석자 관리까지 되니까, 저에게는 최고의 서비스였습니다.

처음 세팅을 하기 시작했습니다. 자원봉사 그룹은 5명, 참석자 그룹은 70명 두 그룹으로 세팅을 했습니다. 그런데 사람들이 자꾸 자원봉사에만 신청을 하는것이었어요. 자원봉사는 이미 모집 완료 되었습니다. 생각해보니 자원봉사 그룹을 먼저 생성해서 신청시의 기본값이 자원봉사로 되어 있던것입니다.

참가신청 페이지
자원봉사가 기본으로 되어있어 의도와는 다르게 자원봉사 신청이 될 수 있다.

조금만 신경쓰지 않으면 그냥 신청이 되었기 때문에 문제가 심각했습니다. 순서에 상관없이 기본값을 설정할 수 있는 기능이 필요하다고 생각을 했습니다. 그래서 이 기능 좀 만들어주세요 하고 리포트를 하려고 했는데 리포트 하는곳을 찾을수가 없습니다. 그냥 이만바득바득 갈았습니다. 현재 대기자수만 24명입니다.

사람들이 갑자기 100명이 넘어가고 그러니까… 정신이 하나도 없었습니다. 자원봉사자들한테 메일을 보내려고 자원봉사 리스트를 보았습니다. 그리고 항목정보를 열어서 메일 주소를 복사하고 정보 레이어창을 닫았습니다. 그랬더니 이게 뭡니까 첫페이지로 돌아갑니다.제가 180번째 분을보고싶으면 그 전에 다른분의 회원 정보를 봐서는 안되는겁니다.
왜 사용자 정보를 보는데 레이어만 띄우면서 페이지를 리프레시 하는지 이해를 할 수 없었습니다.
저는 그래서 회원 리스트를 이벤트 페이지에서 항상 확인해야 했습니다.

또한 디비가 꼬였는지 100명정원인데 99명만 신청이 되어있길래 확인해보니 번호 98번이 없더라구요 그래서 저는임의로 참가자를 101 명으로 고쳤습니다. 그래야 100명을 채울수있었습니다. 데이터를 정리 할 수 있는 기능이 필요할것 같습니다.

93번신청자는 어디에...
93번신청자는 어디에…

파이어폭스에서의 에러는 좀더 심합니다. 로그인할때의 폼간의 탭 이동이 불가하다거나…
내용 쓰기에서 링크를 삽입할때 잘못된 링크가 삽입이 된다거나…

아직 beta인것을 봤을때 이해는 가지만 벌써 1년이 다되어가는 서비스라고 보기에는 너무 문제점이 많아 보이는 서비스 였습니다. 무엇보다 시스템에 의견을 전하는 창구같은것이 없어서 아쉬웠습니다.
좀 더 발전할 가능성이 보이는 onoffmix 입니다. 많은 문제들을 해결하고 좀더 사용성에 초점을두어 다음 CDK 의 행사도 이곳에서 진행할 수 있었으면 좋을것 같아요.