Web « deutism

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

분류: Web, Web Standards
날짜: December 29, 2009 3:12 pm

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

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

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

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

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

메일 도메인 리스트

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

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

이 글에 대한 Tag 리스트: UX, 신당동 떡볶이, 회원가입

Comments (2)

에디터 만들기! 1부

분류: Web, Web Standards
날짜: May 22, 2009 10:38 am

요즘 대부분의 게시판이나 블로그툴에는 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만 된다고 하는사람도 있었을 정도니까요:)

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

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

이 글에 대한 Tag 리스트: cross browsing, designmode, rich text editor

Comments (2)

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

분류: Ajax, Web, Web Standards
날짜: March 17, 2009 6:20 pm

맘에 들지 않지만 회사에서는 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 브라우저에서는 아직도 사용 할 수 없더라구요. 아예 플래시가 보이질 않아요..

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

이 글에 대한 Tag 리스트: bug, ExternalInterface, flash, form, opera

Comments (2)

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

분류: CSS, Web
날짜: February 14, 2009 11:09 am

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

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

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

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

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

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

textile을 사용한 흔적

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

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

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

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

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

이 글에 대한 Tag 리스트: CSS, soojung, textpattern, wordpress

Comments (2)

온오프믹스 힘든 UI

분류: Web
날짜: February 11, 2009 6:29 pm

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

위키로 알아서 신청하는 방식

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

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

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

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

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

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

: 93번신청자는 어디에…

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

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

이 글에 대한 Tag 리스트: onoffmix, Web Standards Day, 웹 표준의 날

Comments (9)

메가박스의 크로스 브라우징 지원

분류: Web, Web Standards
날짜: January 2, 2009 10:03 am

주말에 영화 뭐 볼까 하다가 평소 자주가는 극장인 메가박스 사이트를 보는데.. 하단에 익숙한 아이콘들이 있는겁니다.

메가박스 푸터

오오 다양한 브라우저 아이콘과 버전명들이 적혀 있는거로 봐서 지원하는 브라우저 목록이 아닐까 생각하면서 로그인을 해보려는 순간 비밀번호가 틀렸다고 나오더라구요… 이런 .. 신성한 확인작업을 하는데… 부정타게………..

비밀번호부터 찾고 진행했습니다.(자주이용한다며!!)
휴대폰 SMS 인증방식의 비밀번호 변경은 무척이나 잘되는군요.. 흐흐 벌써 기분이 좋아집니다.

실제 예매를 진행해 보았습니다. 여자친구가 무척이나 보고싶어했으나 기회가 계속 없었던 벼랑위의 포뇨를 보기로하고 예매를 진행해 보았습니다.
대부분의 기능이 무리없이 진행되네요:) 너무 기분이 좋았습니다.

다양한결재방법

결재의 방법이 다양하게 있는데, 그것들을 모두 지원할런지는 저도 잘모르겠습니다. 일단 카드는 잘되네요^^ 암튼 무리없이 영화 예매를 할수 있었습니다. 어느샌가부터 “영화 사이트는 플래시 얘매시스템을 사용한다.”가 당연한것처럼 되어 버렸는데 사용자의 히스토리를 잘 알 수 없는 플래시보다는 저는 그냥 폼 태그를 이용한 방식이 더 좋아 보여요..

이제 영화를 예매하기위해 기껏 IE를 키는일이 줄어들 것 같아서 기분이 좋네요:) 또한 영화도 즐겁게 볼 수 있을것 같아요

벼랑위의 포뇨 예매

이 글에 대한 Tag 리스트

Comments (3)

현실과 이상

분류: Web, Web Standards
날짜: November 26, 2008 9:43 am

요즘 제가 제일 많이 듣는 이야기중에 하나는 “당신의 생각 당신이 가지고 있는 웹 표준이라는 생각 나랑은 좀 다른데… 이해하기 힘들어…” 뭐 이런 이야기를 많이 듣습니다.
제가 이야기를 어렵게 하는지는 모르겠습니다.

도대체 웹 표준이 머길래 어떤 사람들은 열광하며 어떤 사람들은 머하는건지도 모르는 상태가 3년 이상 지속되고 있습니다. 여건이 많이 좋아졌다고는 하지만 좋은게 좋은거다 라는 방식의 개선이 아니었나. 그런 생각을 해봅니다. 그래도 모임에 가면 제일 많이 나오는 얘기는 “저희 회사는 웹 표준 인식이 떨어져서 … 어쩌구 저쩌구 인식을 높일 수 있는 방법은 무엇일까요”이 이야기고, 어느정도 위치에 올라가 있는 사람들은 뼈를깍는 고통을 가지면서 노력한 결과이기도 하죠..
웹 표준하기 정말 힘든가 봅니다. 저도 정말 힘들더라구요. 뭐 제 능력이 딸려서 그런것이겠지만
수년을 자기의 방식대로 작업들을 해왔는데 항상 낮은등급이라고생각했던사람들이 하는얘기를 들으려 하겠어요? 저같아도 귓등으로도 안듣습니다. 그렇게 외부의 인식을 고치는게 어렵습니다.

하지만 우리안에도 큰 문제는 있을것 같아요.
어느샌가 “웹 표준인식의 차이로 웹 퍼블리셔와 기존의 HTML Coder로 나뉘어서 서로다른 계층을을 이룬다”라는 정의까지 보게 되었습니다. 진짜 쓴웃음이 나더라구요. 웹 표준을 잘알면(div로 마크업을 진행하고 CSS layout을 사용하고 크로스 브라우징 좀하면) 웹 퍼블리셔, 테이블로 레이아웃을 만들면 HTML Coder 진짜 이게 말이나 된답니까? 그렇게 자기를 웹 퍼블리셔를 만들면 좀 잘나 보이는 건지 그렇게 얘기하는 사람들의 속내를 잘 모르겠습니다.

예전에 대부분 HTML Coder는 이쪽일에 대한 분위기를 쉬운일을 하면서 배워나가서 서버사이드개발자가 되거나 디자이너가 되거나 그렇게 좀더 발전한(?) 모습으로 되기 위해 지나가는단계? 뭐이런식으로 생각하는 사람들이 많았을겁니다. 자연히 다른 부분에 비해서 신기술 정보 습득력이나 공부하는시간 진입장벽 뭐 다 낮았었지요…
그런데 지금은 안 그렇지 않습니까? 이 직종만큼 다양하고 전문적인 지식을 요구하는데도 없을겁니다. 각 직무의 사람들과 무리없이 커뮤니케이션 해야하며, 발전이 늦었던 분야인 만큼 요즘 기술 발전의 속도도 장난 아니구요. 누구나 시작 단계의 일로서 선택 할 수 있는 직종 자체가 아닙니다.
그럼에도 커뮤니티에 보면 아직도 직종을 옮기기 위한 수단으로서의 직종을 가지신 분들이 보이더라구요.

우리나라에 HTML, CSS를 전문으로 작업 하는분이 얼마나 되는지는 모르겠습니다만, 많은분들이 계실거라고 생각을 합니다. 몇몇분들을 제외하고 대부분의 사람들에게 당부하고 싶은것이 있습니다.
공부를 많이 하세요. 그리고 사람들이랑 많은 얘기를 하세요. 실력은 코드로 보여주세요..

날로 먹을 수 있는 대충 시류가 좀 흘러 흘러 나에게도 좋은 세상이 오겠지 하는 사람들이 있을 그런 직종이 아닙니다. 그런분들은 조용히 사라져 주시는것이 더 좋을것 같다는 생각을 합니다.

사실 저는 운좋게도 좋은 웹 퍼블리셔분들만 봐서 잘 몰랐는데 욕먹어 마땅한 사람들이 요즘들어 많이 보여서 안타까운마음에 글을적어봅니다;(제가봐도 횡설수설…..)

이 글에 대한 Tag 리스트

Comments (7)

요즘 빡세게 살고있습니다.

분류: Life story, Web, Web Standards
날짜: September 30, 2008 5:02 pm

여러 일에 치이고, 신경 쓸것이 많은 만큼 개고생하고 있는 시기 이기도 합니다.
너무 글이 뜸해서 소박한 작은 사진 하나 올려봅니다.
듓심으로 대동단결

이 글에 대한 Tag 리스트

Comments (7)

구글 크롬 10분사용기

분류: Web, Web Standards
날짜: September 3, 2008 10:31 am

잠깐 써본 구글 크롬이라는 녀셕은 좀 할말이 많을거 같습니다.
구글 크롬 피카츄
아침에 출근하자마자 제일 먼저 한일이 구글 크롬을 설치하는거 였습니다. 설치경로를몰라서 그냥 막상 구글사이트르 들어가니 링크가 보이는군요.
명확한 구글 크롬 링크
설치를 걸어놓고 아름다운 요구르트 배달을 다녀온뒤(이제 지하에서 나눠주므로 아는동생과 함께 들고와서 나눠줍니다;) 다녀오니 firefox의 개인정보 데이타를 복사해가는 모양이군요. 흐음 firefox가 없을때는 ie 를 긁어가는지는 모르겠습니다.
명확한 구글 크롬 링크
일단 사용해보았습니다.
역시 업무시간에는 업무를 해야하기 때문에(응?) 저희 회사의 사이트를 들어갔지요.별다른 큰문제없이 잘 들어가지는듯 합니다. 작동도 대부분 잘되구요. 오~ 그러면서 서핑을하고있는데 문득느껴지는것은 속도였습니다. 일단 진짜 빨라졌네요 신기합니다. 왜 빨라졌는지는 좀더 알아봐야겠습니다. http통신에 한계란것이 있을터인데; 이거 궁금하군요;
일단 브라우저가 나오면 먼저 해보는 ACID2 테스트 부터 진행했습니다.
ACID2 통과
뭐 가뿐히 통과하는듯하구요. 역시 엔진이 좋아야………
또한 자주가는 페이지 9개를 미리볼수있는 기능을 지원합니다. 이건 오페라에서 봤던 기능이네요.
자주가는 사이트 미리보기

한가지 약간 의아한 부분이 있습니다.
바로 document.all의 지원입니다. 제가 일하는회사의 어떤사이트들은 아직 DOM을 접근하는방법으로 document.all을 사용하고 있어서 에러가 났었는데 크롬으로 확인을 해봤더니 문제없이 나오는군요… 흐음 좋은건지 나쁜건지 모르겠습니다.
또한 그래도 약간씩은 화면이 깨지거나 그런 사이트들이 많이 보이는데.. 이게 더 큰걱정입니다.
깨지는 사이트가 많고 물론 activeX가 안되므로 꼬진 브라우저다 라고 얘기할사람들이 많지 않을까 살짝 걱정이 됩니다. 그건 브라우저의 문제가 아닌 사이트 자체의 문제일 가능성이 큰데 말이죠..
저도 예전에 netscape navigator 6인가 7인가 나왔을때 그랬거든요 ‘브라우저가 얼마나 꼬지면 다음도 제대로 안나오냐.’ 그런분들 생각보다 많지 않을까요? 구글도 그런 이유로 IE와의 호환 타협을 본게 아닐까 하는 생각도 들고 뭐 약간 찝찝하네용..
IE의 점유율을 살금살금 잡아먹었으면 하는 구글크롬이 firefox나 safari, oprea등의 점유율만 잡아먹지 않을까 걱정입니다. 십중 팔구는 그렇게 되지 않을까 생각됩니다만…

암튼 구글 크롬은 구글의 다른 서비스보다 좀더 파격적인 느낌을 줍니다. 점점 괴물이 되어가는 그런 느낌으로 말이죠….

ㅎㅎ 저는 테스트 더하러 갑니다.(실버라이트는 아예 시원하게 안되는군요 =_=;;;)

이 글에 대한 Tag 리스트

Comments (0)

Flash Activate

분류: Web, Web Standards
날짜: August 29, 2008 10:34 am

Flash의 활성화 이슈

웹 페이지에서 구성되는 기본적인 필수 요소는 아니지만 플래시는 그 미려한 모션과 다양한 액션등으로 많은 곳에서 사용 되고 있습니다.
2006년경 object를 HTML 에서 사용하는 방식에대해 미국의 Eolas사에서 MS에 소송을 걸게 되었고 판결이 나기까지 MS는 Object를 js를 이용해서 로드하게하는 패치를 진행하였습니다.
2008년 초에 MS는 소송에서 이기게 되었고 다시 <object>를 이용해 바로 Object를 로드할 수 있게 패치를 진행하였으나, 사용자의 업데이트율이 낮은관계로 아직까지 js로 Object를 로드해야 안전하게 사용자가 플래시를 사용할 수 있게 됩니다.

ngbFlashActivate()

플래시 구현시에 정의 할 수 있는 대부분의 요소들을 원하는것으로 정의가 가능 하기 위해 작업이 되었으며, 여러가지 상황에 대비해서 고려가 되었습니다. 현재 플래시CS3 에서 제공하는 플래시 구현 방식을 차용해서 script 방식과 script가 로드되지 않을때의 방식 모두를 지원하게 했습니다. 파라미터는 원하는대로 추가 할 수 있습니다.

JS Source

function ngbFlashActivate()
{
	var isIE  = (navigator.appVersion.toLowerCase().indexOf("msie") != -1) ? true : false;
	var isWin = (navigator.appVersion.toLowerCase().indexOf("win") != -1) ? true : false;
	var fullParam = new String;

	this.clsid = "clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"; //MS Object ClassID
	this.codebase = "https://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"; //Flash Version
	this.pluginspage = "http://www.macromedia.com/go/getflashplayer"; //Flash Plugin Link

	this.flashURL = new String;
	this.width = new String;
	this.height = new String;
	this.objId = new String;
	this.objClass = new String;

	this.wmode = new String;
	this.quality = new String;
	this.bgcolor = new String;
	this.allowScriptAccess = new String;
	this.allowFullScreen = new String;
	this.accessibility = new String;
	this.parameter = function( property, value )
	{
		if(isIE && isWin) { fullParam += "<param name='"+ property +"' value='"+ value + "' />\n"; }
		else { fullParam += " " + property +"='" + value +"'"; }
		switch ( property )
		{
			case "wmode": this.wmode = value; break;
			case "quality": this.quality = value; break;
			case "bgcolor": this.bgcolor = value; break;
			case "allowScriptAccess": this.allowScriptAccess = value; break;
			case "allowFullScreen": this.allowScriptAccess = value; break;
			default:;
		}
	}

	this.init = function( strFlashUrl, n4Width, n4Height)
	{
		this.flashURL = strFlashUrl;
		this.width = n4Width;
		this.height = n4Height;
	}
	this.loadFlash = function( showId )
	{
		if(this.wmode == ""){ this.parameter("wmode", "window")};
		if(this.quality == "") { this.parameter("quality", "high")};
		if(this.bgcolor == "") { this.parameter("bgcolor", "#FFFFFF")};
		if(this.allowScriptAccess == "") { this.parameter("allowScriptAccess", "always")};
		if(this.allowFullScreen == "") { this.parameter("allowFullScreen", "false")};

		var resultHTML = new String;
		var genIDAttr = (this.objId!="") ? " id='" + this.objId + "'" : "";
		var genClassAttr = (this.objClass!="") ? " class='" + this.objClass + "'" : "";
		var widthSizeAttr = (this.width !=0) ? " width='"+ this.width +"'" : "";
		var heightSizeAttr = (this.height !=0) ? " height='"+ this.height +"'" : "";
		if(isIE && isWin)
		{
			resultHTML = "<object " + genIDAttr + genClassAttr + " classid='"+ this.clsid +"' codebase='"+ this.codebase +"' " + widthSizeAttr + heightSizeAttr + ">\n";
			resultHTML += "<param name='movie' value='"+ this.flashURL +"' />";
			resultHTML += fullParam ;
			resultHTML += this.accessibility;
			resultHTML += "</object>";
		}
		else
		{
			resultHTML = "<object  " + genIDAttr + genClassAttr + "  type='application/x-shockwave-flash' data='" + this.flashURL + "' " + widthSizeAttr + heightSizeAttr + fullParam + ">\n";
			resultHTML += this.accessibility;
			resultHTML += "</object>";
		}
		(showId) ? document.getElementById(showid).innerHTML = resultHTML : document.writeln ( resultHTML );
	}
}

사용법

<script type="text/javascript">
	var flash = new ngbFlashActivate();
	flash.init('http://s.nx.com/S2/Nexon2007/banner/banner_brand/main_promotion.swf','225','283','main_promotion');
	flash.accessibility = '<p><img src="" alt="대체컨텐츠" /></p>';
	flash.parameter('wmode','transparent');
	flash.parameter('flashVars','menu= 001');
	flash.loadFlash();
</script>

<noscript>
<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="225" height="283" id="Untitled-2">
	<param name="allowScriptAccess" value="sameDomain" />
	<param name="allowFullScreen" value="false" />
	<param name="movie" value="http://s.nx.com/S2/Nexon2007/banner/banner_brand/main_promotion.swf" />
	<param name="quality" value="high" />
	<param name="bgcolor" value="#ffffff" />
	<param name="wmode" value="transparent" />
	<param name="flashVars" value="menu= 001" />

	<!--[if !IE]> <-->
	<object type="application/x-shockwave-flash" data="http://s.nx.com/S2/Nexon2007/banner/banner_brand/main_promotion.swf" quality="high" bgcolor="#ffffff" width="225" height="283" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" wmode="transparent" flashvars="menu=001">
		<p><img src="" alt="대체컨텐츠" /></p>
	</object>
	<!--> <![endif]-->
</object>

크게 스크립트 로드부분과 <noscript>에 의한 대체 컨텐츠 부분으로 구성이 되어 있습니다.
컨디셔널 코멘트를 사용하여 IE일때와 IE가 아닐때를 구분해서 IE용을 먼저 로드후 로드되지않을때 안의 컨텐츠를 로드하는 방식으로 구성되어 있습니다.

var flash = new ngbFlashActivate();

필수요소입니다. 플래시 오브젝트를 생성하고 특정 변수(flash)에 대입합니다. 특정 변수는 알아보기 쉽고 중복되지 않는 범위에서 자유롭게 결정합니다.

var 정의오브젝트명 = new ngbFlashActivate();

flash.init(‘http://s.nx.com/S2/Nexon2007/banner/banner_brand/main_promotion.swf’,'225′,’283′,’main_promotion’);

필수요소입니다. 플래시에서 기본적으로 필요한 요소들을 정의합니다.

정의오브젝트명.init('flash URL','가로사이즈','세로사이즈','플래시의 DOM ID');

flash.accessibility = ‘<p><img src="" alt="대체컨텐츠" /></p>’;

부가요소입니다. 플래시가 로드되지 않을 경우에 보여야 하는 컨텐츠를 구성하여 넣어 줍니다. 접근성 관련 콘텐츠입니다.

정의오브젝트명.accessibility = "대체 콘텐츠";

flash.parameter(‘wmode’,'transparent’);

부가요소입니다. 플래시에서 사용되는 각종 속성들(wmode, flashvars 등등) 정의 할 수 있습니다.

정의오브젝트명.parameter('속성', '속성값');

flash.loadFlash(); , flash.loadFlash(‘DOM ID’);

필수요소입니다. 각종 요소들과 정의된 옵션들을 조합해서 실제로 플래시 오브젝트를 표현해 줍니다.
loadFlash 함수안에 파라미터의 값이 있게 되면 파라미터의 값을 ID로 가진 앨리먼트 안으로 앨리먼트가 표현되게 됩니다.
함수안에 파라미터가 존재하지 않으면 오브젝트가 정의된 곳에 그대로 플래시오브젝트를 표현합니다.

각종 요소에 기본값이 세팅되어 있습니다.