deute의 모든 글

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개발자 상처 받아요.

와우 이제야 만렙…

오픈베타부터 시작해서 꾸준히 하는 게임이 있습니다.
쉽게 와우라고 불리우는 World of Warcraft 랍니다. 꾸준히 하기는 하지만 게임센스가 뛰어난 편이 아니라 남들보다 항상 늦게 렙업을 하죠..

이번에 리치왕의 분노가 업데이트 되면서 렙제가 80으로 상향 조정 되었고; 70부터 80까지를 초천재님과 항상 함께 했습니다.
제가 이런 저런 일이 많은 관계로 초천재님은 남는시간에 다른 캐릭터를 키워서 만렙을 이미 몇 달전에 찍은 상태였죠 ㅠ_ㅠ

암튼 어제 밤에 만렙찍었습니다. 초천재님과 동시에 만렙이 되어서 더 기쁩니다. ㅎㅎ

와우 스크린샷 첫 80 만렙
와우 스크린샷 첫 80 만렙

ㅎㅎㅎ 와우는 항상 만렙부터 게임시작이라는데 저는 막막합니다. 회사형들과 같이하는데 다들 상위던전다니고 그러거든요=_=; 저는 언제나 따라 갈라나요;
렙업 도중 재미있는 스샷을 발견해서 올려봅니다. 아시는 분은 아시는 박부르군의스샷!

와우 스크린샷 박 부르군의 죽음
와우 스크린샷 박 부르군의 죽음

여러분들은 어떤 게임을 즐기세요?

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

처음에 블로그를 만들때는 수정블로그를 사용했는데.. 스팸이 너무 많아서 닫았습니다. 그래서 두번째는 지윤님의 추천을 받아 택스트패턴을 사용을 했고 약 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 의 행사도 이곳에서 진행할 수 있었으면 좋을것 같아요.

세번째 웹 표준의 날

2009년 2월 7일 한국 정보 문화 진흥원에서는 세번재 웹 표준의 날이 진행 되었습니다.
약 110여명의 분들이 황금같은 토요일에 그 먼 곳까지 찾아 오셔서 행사를 참석해 주시는것을 보고 정말 감동했습니다.

저도 운좋게 한 세션을 맡아 CDK에서 진행하는 웹 표준 경진대회와 CSS놀이터에 관해 얘기하게 되었습니다. 사실 그렇게 공익적인 얘기도 하니고, 도움되는 얘기는 아니었지만, 즐겁게 들어주셔서 감사했습니다. (발표문서 다운로드)
웹 표준 경진대회와 CSS놀이터 모두 여러분이 만들어가는 서비스인것을 알리고 싶었습니다.

이번 행사에서는 발표자분들의 노고가 정말 크다고 볼수 있었습니다. 기획부터 모두 참여해 주셔서 발제도 스스로 내어 주시고.. 행사에 대한 의견도 계속 내어주시고 또 행사장에 오셔서도 굳은일을 마다하지 않고 열심히 임해 주셨거든요. 자기발표가 아닐때는 자리도 없어서 쪼그리고 앉아서 있는모습을 볼때면 정말 죄송했습니다. 이런 대접을 받아야 할분들이 아닌데 말이죠.. 다음에는 좀더 훌륭한 환경으로 모시겠습니다. 캬캬캬캬캬캬

이번에는 clearboth분들께서 자원봉사를 진행해 주셨습니다. 좀더 잘 준비된 모임이 되는데는 자원봉사분들의 노력이 컷다고 생각합니다. 세션도 듣게 해주고 그랬어야 했는데 너무 막 부려먹기만해서 죄송합니다; 복받을꺼에요 ㅎㅎㅎㅎ

이번 행사에는 참가 가능인원이 100명이었습니다. 사실 자리가 많이 비좁으셨을걸로 생각됩니다만조금 답답하더래도 옹기종기 모여서 하는 모임이 좀더 재미있거든요. 라고 위안 삼기를 추천 드립니다. 이번에 등록하신분들중 34분정도가 사전에 알리지않고 불참을 하셨습니다. (그렇다고 66분만오신건아닙니다^^) 각자의 사정은 누구에게나 있을수 있습니다. 하지만 다른사람의 기회를 빼앗은것도 사실이지요. 다음 모임에는 이번 모임의 불참자는 패널티가 부여됩니다. 패널티의 방법은 생각해 보지 않았습니다.

“선배에게 질문하세요” 세션이 생각보다 호응이 좋아서 놀랐습니다. 예전에는 뻘쭘하게 한마디도 거의 없었거든요. 다음모임에는 진짜 발제를 가지고 토론을 진행해도 되겠던데요? 많은 분들의 좋은 의견, 제안 주신분들의 하나 하나의 목소리를 모두 기억하고 있습니다.

달콤한 칭찬도, 쓴 압박도 있었습니다. 항상 느끼는것 이지만 제가 너무 부족해서 능력이 안되나봅니다. 능력이 안되는만큼 좀더 몸으로 뛰겠습니다. 올해는 핑계 대지 않는 CDK가 될 수 있도록 열심히 노력하겠습니다.

다음 행사는 5월1일 웹 표준 경진대회입니다. 많은성원부탁드립니다.
다음부터는 썰렁하지 않은 진행을 하거나 다른분에게 맡기겠습니다. 저란 인간이 막사는 인간이다 보니 좀 그렇습니다. 돌 던지지는 말아주세요..