deute의 모든 글

사원증, 명함이 변경되었어요

넥슨의 CI가 바뀌면서 명함과 사원증이 모두 새롭게 변경이 되었어요..
아시는분은 아시겠지만 제 사원증 사진이 표정이 이상해서 이번에는 좀 무난한거로 바꿔봤습니다.

명함은 받았는데 25장씩 뒷면의 인쇄가 다르네요…
뭐 별로 감흥은 없습니다. 그렇게 이쁜명함은 아니니까요…
명함 앞면
앞면은 모두똑같은데요.
{{{ 명함 뒷면}}}
뒷면은 조금씩 다 다릅니다.
저는개인적으로 마지막께 가장 좋아요:)

플래시가 당연히 다 깔려 있을까요?

요즘은 다이나믹한 페이지를 구성하기 위해 Flash 를 사용해서 페이지를 만드는것이 마치 당연하듯이 많은곳에서 사용하고 있는데요. 플래시 없으면 사이트가 구려 보이나 봅니다. 그래서 그런지 사용자의 컴퓨터에도 대부분 Flash Player Plugin 이 설치되어 있습니다. 뭐 제가 쓰는 컴퓨터들도 마찬가지죠.

닭이 먼저인지 달걀이 먼저인지는 모르겠지만
‘플래시 플레이어가 대부분 깔려 있어서 플래시를 웹사이트에서 사용하는것은 당연하다. 어짜피 다 깔려 있잖아!’
라고 말하는 사람들도 적잖게 볼 수 있구요.
스크린리더에서 조차 플래시를 읽어주려고 노력한다니 플래시의 파급력은 참 대단한것 같습니다.

그런데 플래시를 이용해서 컨텐츠를 만드시는 분들 대체 컨텐츠는 제공하십니까?
플래시가 돌아가지 않는 환경이 진짜 없다고 생각하세요?
또한 플래시 플레이어가 버그가 있어서 사용할 수 없다고 느껴보신적은 없으십니까?

플래시는 풍부한 표현력 때문에 용량을 많이 차지합니다. 인터넷이 느리면 보기 힘들어 지기도 합니다. 브라우저는 점점 사용자의 브라우징 커스터 마이징 기능을 많이 제공해 나가고 있는데, 플래시 로드 안하기 이런 옵션이 생길것도 같지 않아요? 모바일에서 플래시 다들 표현해주나요?(잘모릅니다. 힘들것같은데 속도 때문에…) 그래서 플래시가 로딩되지 않았을때의 대체 컨텐츠는 필수 요소 입니다. 조금만 신경쓰면 어렵지않게 할 수 있습니다.

또한 저는 플래시 플레이어 버전 9를 쓰고있습니다.
그런데 firefox에서 플래시로 만든 동영상 재생이 안되던데요? 버전 10으로 업데이트하면 해결된다는 얘기를 들었습니다.
이럴때 플래시 플레이어가 제공을 안하니 어쩔 수 없지 않느냐 하고 그냥 손놓고 기다리면서 외면할거에요? 그에 대응하는 컨텐츠를 제공해 주는것이 참된 서비스 제공자의 모습이 아닐까요?

한 업체에서 독점을 하는 플러그인의 경우 버그가 있을때 버그가 수정된 업데이트 버전을 하염없이 기다려야합니다. 또한 플러그인이 알아서 업데이트를 진행해주지도 않구요.(하면큰일이죠; )
저만해도 아직 플래시 플레이어를 업데이트안하는데 업데이트 한사람이 많을까요?

저런 이유들 때문에 대체 컨텐츠는 필요합니다. 고작 작은 플러그인 하나로 서비스를 포기하지마세요. 플래시를 좋게 사용하고 그에 대한 대체 컨텐츠를 잘 지원한다면 웹은 좀더 풍성하게 될것같아요

구글 크롬 10분사용기

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

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

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

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

Flash Activate

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로 가진 앨리먼트 안으로 앨리먼트가 표현되게 됩니다.
함수안에 파라미터가 존재하지 않으면 오브젝트가 정의된 곳에 그대로 플래시오브젝트를 표현합니다.

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

  • wmode= “window”
  • quality= “high”
  • bgcolor = “#FFFFFF”
  • allowScriptAccess = “always”
  • allowFullScreen = “flase”

당연히 파라미터 지정을 새로이하면 값은 변경이 됩니다.

이걸 본 한사람의 반응
‘플래시를 스크립트로 구현한다는게 좀 구림 플래시오브젝트 여부를 판단해서 대체텍스트를 뿌려줄지 플래시 코드를 뿌려줄지 선택할수 있지 않을까?’
라고 했으나 더이상은 귀찮아서 작업하기 싫었어요;