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

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

하쿠나마타타!

하쿠나마타타 스와힐리어의 구문으로 말 그대로 옮기면 “걱정 거리가 없다”라는 뜻이라는데…
뭐 저는 잘 모르겠고 갑자기 왜 이런 얘기를 꺼내는가하니~
바로 이것 때문이에요…

Hakuna Matata
Hakuna Matata

PlayStation3 게임 인데요..

소니네쇼날지오그래픽이 공동 개발한 간접 체험 게임입니다.
아프리카에 가서 다양한 동물 사진을 찍는 게임인데요.

어렸을때 동물의왕국이라는 TV프로 기억하세요? 아프리카에 사는 동물들이 막나오는…
플레이어는 사진 작가가 되어서 다양한 클라이언트의 요청에 따라 사진을 찍으며 사파리를 즐기는 게임입니다.
PS3의 진가가 나타나는 게임이 랄까요? 저희 집에 있는 42인치 TV 와 완벽한 콤보로 우리집을 아프리카로 옮겨놓습니다.

그런데 이게 물건이에요. 컨트롤러가 카메라가 되어 사진을 찍는데 컨트롤러를 돌려서 세로로도 찍고, 진짜로 카메라를 이용해서 찍는 느낌이랄까요?

촬영모드 뷰 파인더로 표현
촬영모드 뷰 파인더로 표현

급하게 카메라를(컨트롤러)들고 찍으면 사진이 흔들리기도 합니다. 조심조심 다가가서 몰래 찍고 나와야해요.

카메라는 역시 소니 계열의 DSLR 과 렌즈군을 지원합니다.

네 종류의 sony 카메라를 지원합니다.
네 종류의 sony 카메라를 지원합니다. 저는 현재 알파100을사용중이죠

저는 아직 게임을 진행중 이라서 네 종류 모두 사용 할 수 없구요.  현재 알파100까지만 사용하고 있습니다.

촬영하는장면은 다양합니다. 치타가 사냥하는 사진도 찍고 단란한 코끼리 가족의 사진도 찍습니다.
그 동안 많이는 아니어도 제가 직접 찍은 사진들을 공개해 봅니다.

마사이 기린
마사이 기린
두목코끼리!
두목코끼리!
코끼리 무리!
코끼리 무리!
석양의 마사이기린
석양의 마사이기린
폭포의코끼리
폭포의코끼리
타조님
타조님
치타
치타
사냥하는치타
사냥하는치타
거의다 쫓아갔다
거의다 쫓아갔다
잡았다!
잡았다!

Footer를 브라우저 하단에 꼭 붙여야 하나요?

일을 하다보면 푸터 부분을 항상 브라우저의 최 하단에 고정 시켜 달라는 디자이너의 요청이 있을때가 있죠?
예전에는 그냥그러려니 하면서 작업을 하고는 했는데 다시 생각해보니 이게 왜 꼭 붙어 있어야 하나 라는 생각이 들더라구요..

“네놈이 디자인에 대해서 뭘 아냐; 다 디자인적인 이유가 있는거다!” 라고 말하면 뭐 사실 할만은 없지만 말이죠..

이런 생각이 들더라구요.. 푸터를 항상 하단에 붙이는 건 화면의 크기가 그렇게 크지 않아서 컨텐츠의 크기가 작을때도 실제 표현되는 푸터의 위치가 크게 다르지 않았기 때문에,
통일성을 주려다보니 일부러 푸터를 하단에 붙인게 아니었을까? 하는 생각이 드는데요..어짜피 몇 픽셀 차이 나지 않을꺼 하단에 붙여 통일성을 주자라는 느낌을 가질 수 있도록 말이죠.

요즘은 모니터가 사이즈가 많이 높아져서 전체 height가 많이 길어졌기 때문에 푸터를 하단에 붙인다면 컨텐츠와의 간격이 너무벌어져서 오히려 디자인의 동질성도 떨어지고 알아보기도 힘들것 같아요.

푸터가 이렇게 하단에 붙는게 좋은건 아니겠죠?
푸터가 이렇게 하단에 붙는게 좋은건 아니겠죠?(LG를 욕하는건 절대아닙니다)

다시 잘 살펴보니 요즘은 푸터를 하단에 붙이는 사이트가 그렇게 많지는 않군요 =_=; 사이트 예를 들려다보니  잘 안보입니다.
제가 모르는 “푸터를 브라우저 하단에 붙이는 이유” 어떤것들이 있을까요?

맥북이 사망하셨습니다 ㅜ_ㅜ

자 세상일이 꼬일려면 이렇게도 꼬이고 타이밍이 맞을라면 이렇게도 맞는것 같아요.

저번주 일요일 맥북을 켜는데  남은 하드의 용량이 3~4기가 정도밖에 안되는 거에. 마침 성민장군님의 맥북 하드 교체를 부러워 하기도 했고,
살까 말까 고민하다 ‘에이 돈도 없는데 무슨’ 이라며 접었지요…

그런데 그 다음날 월요일 회사에 소프트웨어 단속이 나온다고 파일을 다 지우라는거 에요.. 여친님은 데이터  옮겨야한다고 외장 하드를 사야한다 하시고 저도뭐 사실 불법 소프트웨어는 사용하고 있지 않지만, 그 정리해둔 mp3나 소녀시대 동영상(응?) 떄문에 외장하드가 필요한 차였죠, 그래서 320기가 짜리 속도빠른 720rpm 의 노트북용 하드와 외장하드 케이스를 구매했습니다.

집에가서 맥북에 달아 주었는데 그 다음 부터 전원이 안들어오네요 -_-;;;;;; 별의 별짓을 해도 안 들어 오더군요 그렇습니다. 망가졌어요. 알고보니 하드를 거꾸로 넣어서 열라 넣었으니 그게 안망가지고 베기겠습니까?
흙 저는 포기하고 80영던 첫 경험을 했어요(응?)

다음날 출근해 보니 딱 보너스와 연말 정산 금액이 들어와 있네요. =_=;
시원하게 카드값으로 증발시켜주시고… 그래도 돈이 조금 남긴 하네요=_=;

사람들한테 얘기하니 회사 마일리지 카드로 사~
(지금 다니는회사는 분기별로 40만원의 마일리지가 카드에 적립이 되는데요. 이번에 경기 불황으로 안나오게되었습니다.)
제가모아둔 돈은 맥북을 충분히 살수있지만 카드의 1개월 사용한도가 120뿐이라 못산다고 아쉬워 했죠…
그런데 확인해본 순간……. 잔액은 늘어나있었습니다-_-

이제 고민을 하고 있습니다.
맥북을 산다면 유니바디를 사고 싶은데 너무비싸요… 예전 흰둥이 맥북은 이제는 쓰기 싫구요… 돈도 넉넉하지않죠=_=;;;
일단 수리를 알아 보겠지만, 맥북수리 소문이 좋은건 아니군요=_=;

일련의 사건들이 딱 뭔가 맞아 떨어지는 느낌을 지울수가 없습니다. 까마귀날자 배떨어진다고…

결론은 하드교체하실때 잘안들어가면 뭔가 잘못된거에요. 밀어넣지마세요=_=;;

Table 태그

언제나 그렇듯이 보통때는 남의 말에 신경을 잘안쓰다가도 내가 관심있는 부분에는 신경이 쓰이기 마련입니다.
요즘 웹 사이트 최적화에 신경을 많이 쓰고 있어서는 그런지 몰라도 최적화에 관련된 업무메일이나 등등이 많이 나오곤 하는데요…

CSS layout이 어느정도 보편화가 되어서 그런걸까요?  어떤 사람들로 부터 테이블 태그를 이용하면 사이트가 느려지니까 사용하지 마라 였습니다.

일단 제가 생각하는 마크업 방식에 있어서의 웹 표준의 정의를 한번 말씀드려보면

각각의 HTML(XHTML) 태그에는 그에 맞는 사용법과 의미가 담겨져 있다. 그 사용법에 맞게 태그를 구성하는것을 Semantic markup 이라고 할수있다.

리스트는 ul, ol, li로 문장은 p 제목은 h1~h6  으로 각태그의 역할에 맞게 사용하자는거겠죠? 뭐 어렵지 않습니다.

이런 측면에서 봤을때 Table도 분명히 자기 자신의 역할이 있겠죠? Table 의 역할을 알아 봅시다. (http://dev.w3.org/html5/spec/Overview.html#the-table-element)

The

<a href="http://dev.w3.org/html5/spec/Overview.html#the-table-element">table</a>

element represents data with more than one dimension, in the form of a table.

HTML5 에서의 table의 역할을 기술한것인데요. 대충보면 Table 앨리먼트는 표 양식에서의 하나 이상의 데이터 구성을 보여주기 위한것이다. 이다 정도 되려나요?
이문장에서도 알 수 있다시피 테이블 태그는 사용되면 안되는 태그는 아닌것 같아요. 사용되는 안되면 태그라면 사라졌겠죠 🙂

제가 섯불리 예상하자면, “table layout을 사용 하지 말자”를 오해한게 아닌가 싶기도 하네요..

물론 table layout 에대해서도 언급이 되어있습니다.

Tables must not be used as layout aids. Historically, some Web authors have misused tables in HTML as a way to control their page layout. This usage is non-conforming, because tools attempting to extract tabular data from such documents would obtain very confusing results. In particular, users of accessibility tools like screen readers are likely to find it very difficult to navigate pages with tables used for layout.

테이블 레이아웃을 사용하면 툴(컴퓨터겠죠?) 표로 인식 하고 테이터를 추출 하기 때문에 혼란스럽고 스크린리더 같은 접근성도구에서 페이지를 이동하기가 어려워진다 뭐 이런 얘기 같은데요.. (자 영어 공부합시다.)

뭐  암튼 table layout 은 사용하면 안된다는것이 명확하게 써있네요..

근데 저는 왜 그런 얘기를 들었을까요…

table 은 일단 브라우저에서 랜더링 해주기 위해 다른 태그에 비해  좀 더 로직이 추가 되게 됩니다. 각 셀의 넓이를 알맞게 맞춰 주기 위한 노력을 한다고 하면 이해가 쉬울려나요? 이 부분은 table-layout 을 정의해주고 각 셀의 크기를 적절하게 미리 계산해 정의하는 방법으로 해결 할 수 있습니다.

또한 table 안에 table 을 중첩 사용하면 랜더링이 느려진다는 얘기도 들었는데 요즘 같은 컴퓨터에서 사실 얼마나 차이나겠어요 =_=; 관련자료 알려주심감사…
차이가 있다해도 표를위한 table 사용에서는 table 중첩 사용은 거의 하지 않죠…

저같으면 표는 물론이고 달력이나, 게시판의 리스트나 정보 등에서 사용될 수 있지 않을까 싶어요…
table 사용한다고 무작정 머라하지 마세요~ 열라고민해서 태그 짠 Markup개발자 상처 받아요.

닥치고 웹 표준