카테고리 보관물: Web Standards

웹 페이지의 내실을 다져야 할때

예전에 웹 사이트를 만들때 사람들이 흔히 하던 얘기가 “한국은 네트워크 속도가 빠르니, 페이지 용량은 그렇게 신경쓰지않아도 괜찮아!” 라는 것이었습니다. 그래서 사람들은 퀄리티 좋고 화려한 사이트를 만들기 시작했죠. 플래시도 사용하고, 큰 이미지도 쓰고 해서 화려한 사이트를 만들기 시작 했는데;….

갑자기 스마트폰이니 아이폰이니 하는 상대적으로 느린 네트워크를 이용하고 작은 화면을 사용하는 환경이 추가가 되었습니다. 그래서 사람들은 작은 화면과 느린 네트워크에 최적화를 시킨 모바일 전용 사이트를 만들기 시작 했습니다. 작은 화면에 맞추려다보니 콘텐츠가 빈약해지기도 했습니다. 그래도 많은 모바일 전용 사이트가 생겨서 그냥 그런데로 사용을 했죠. 그런데 이제는 아이패드나 갤럭시탭 같은 화면은 크지만 이동하면서 사용하는 환경이 추가 되었습니다. 이제 웹 사이트를 만드는 사람은 어떻게 대응할까요? 또 아이패드 전용, 갤러시탭 전용 페이지를 만드시겠습니까?

물론 환경이 되고 돈이 가능하고 그렇다면 각 환경에 맞는 웹 페이지를 따로 만드는것이 가장 좋은 방법일지 모릅니다. 각 환경별 사이트를 만드는데 곱절의 시간이 들고 그 사이트들을 관리하는데 또 곱절의 시간과 인력이 투입 되어야 합니다. 그냥 원래 페이지를 내용에 충실한, 그리고 어떤기기에서도 무리없이 이용할 수 있게 만들수 있지 않을까요?

제가 보기에 모바일 사이트들을 보면 구멍난 곳을 계속 그때 그때 땜빵하는 처리 방식으로 밖에 안보입니다. 앞으로 얼마나 다양한 환경에서 웹페이지를 보게 될지는 아무도 모릅니다. TV에서도 보고 냉장고에서도 볼지 모릅니다. 손목시계만한 곳에서 웹 페이지를 볼지도 모릅니다. 그럴때마다 전용 페이지를 만들 수는 없죠. 현재는 타겟 기기가 얼마 안되지만 이제는 몇몇 기기만 대응해서 웹 페이지를 만들어서는 안될것입니다. 그래서 One Web 이 중요합니다.

이미 CSS3의 미디어 쿼리등의 기술이 많이 소개 되었고 많은 곳에서도 적용이 되고 있습니다. 하나의 페이지를 만들어서 다양한 환경에서 웹을 볼수 있게 해주는 방법은 얼마든지 있습니다. 또한 특정기기에 종속적인 기술은 웹 페이지에서는 더 이상 사용해서는 안될지도 모릅니다. 아님 사용하더라도 그러한기술들이 표현되지 않을때의 대안을 준비해야 할것입니다. 이렇게 만든 페이지는 어떤 환경에서도 웹 페이지로서의 역할을 충실히 해낼것 입니다. 저는 그런 웹 페이지가 많이 생기길 바라고 있습니다.

img에 onerror이벤트를 tag의 속성이 아닌 자바스크립트로 등록하기

img가 로드가 안될때 기본이미지를 보여주고 싶을때 onerror를 사용합니다.


<img src="기본이미지.png"  alt="대체텍스트" onerror="this.src='대체이미지.png';" />

이런식으로 사용을 하는데;  문제는 validator 에서 onerror은 에러로 뱉어내버리죠…
그냥 안쓰거나 밸리데이터 따위 무시해주면 되겠지만 onerror도 사용하고 밸리데이터도 통과해야하는 경우가 얼마든지 있을수있죠.
그래서 그냥 이벤트를 자바스크립트로 등록하는것을 만들어봤습니다.

핵심은 IE와 IE외의 브라우저가 이벤트 등록하는것이 다르다는것입니다.
IE의경우에는 attachEvent 를 이용해서 onerror를 등록하고  일어난이벤트의 srcElement의 src값을 변경해주면 됩니다.


"이미지DOM".attachEvent("onerror",function(e) { e.srcElement.src ="images/pic_noimg.gif"})

그외 Opera, FF, safari, chrome 에서는


"이미지DOM".onerror = function(e) { e.target.src = "images/pic_noimg.gif";};

이렇게 해주니 되더라구요. 사실 addEventListener를 사용해볼까 했었는데 귀찮아서 패스=_=
그럼 이만(제목에 비해 겁네 포스팅이 허접하군요=_=/ )

Opera 11

Opera Desktop 11 이 출시 되었습니다.

더이상 브라우저에 추가될 기능들이 있을까 싶었는데 사람의 아이디어는 끝이 없는것 같습니다. 피싱에 걸리지 않게 하기위해 주소를 강조하는것에  머물지않고 좀더 명확한 구분을위해 파라미터는 숨겨버린다는기능이 인상적이긴 한데, 좀 익숙해져 봐야겠습니다.

또한 저한테 가장 반가운 소식은 Opera desktop 11 on linux 버전에서 이제서야 한글을 제대로 쓸 수 있다는 점입니다. 그동안  리눅스용 오페라에서는 한글을 쓰는것이 버그가 있어서 약간 불편 했는데 이제는 다른 브라우저를 사용할 일이 없어질 것 같습니다. 히히

그외의 새로운 기능이나 달라진점들은 Opera.com 이나 신현석님의 블로그에서 참고하시면 좋을것 같습니다.

오페라 정말 좋아요 //ㅁ///
지금 이글을 보는 사람은 바로 opera.com 가서 설치하고 사용하시길 안하면 지상렬!! (응?)

세상이 참 좋아졌다는 생각

제가 처음 노트북을 사용했던 시기는 20살때 였습니다. 당시 센스 노트북(펜티엄 100)이었는데 사실 들고 다니기는 무리가 있을 정도 였죠. 핸드폰도 없었구요.

많은 시간이 흘러 12년이 지났습니다. 이번에 회사에서 팀빌딩 이벤트를 위해 우리회사의 모든 분들은 경주로 향하는 KTX를 탑승하게 되었지요. 그런데 경주를 가는것이 2시간도 채 안걸린다는것 입니다. 예전에 친척집인 안동을 가기위해 4시간 30분을 가던적도 있었는데 말이죠… 말이 시속 300Km 이지 10분에 50km 를 가는거라 생각하니까 정말 빠른게 느껴지더라구요. 동대구역에서 신경주까지 채 20분도 안걸리는걸 보고는 정말 놀랬습니다.

예전에 기차여행을 하는것은 참으로 고역이었습니다. 그 좋은 대한민국의 경치도 20~30분 보면 질리고 책을 보면 머리아프고 자도 자도 끝없던것이 기차여행이었죠.

그런데 이제는 KTX내에서 인터넷을 즐길수 있고, 무게가 전혀 부담되지않는 노트북을 가지고 저는 제 아이폰의 인터넷 테터링 기능을 이용해서 메일을 체크하고 웹 서핑을 하고 그렇게 시간을 보낼 수가 있었습니다. 옆자리에 앉았던 신책임님은 그자리에서 강의자료를 뚝딱 만들어버리더군요.

시속 300km의 열차안에서 우리는 약간 느리긴 하지만 불편함없이 웹을 즐길 수 있었습니다. 불과 몇 년전만 해도 워크샵에가서 회사에 일이터지면 pc방부터 찾았는데 이제는 그럴 필요가 없습니다.

세상은 얼마나 더 좋아질까요? 제가 그 변혁의 순간들을 잘 적응하면서 살아갈 수 있을까요? 기술의 발전은 나에게 얼마나 큰기쁨을 줄 수 있을지 생각하면서 저희는 팀빌딩을 즐겼습니다.

(팀빌딩다녀왔다. 맥북에어 좋다. 라고 자랑하려고 쓰는글이에요 ㅋㅋㅋ)

닥치고 One web party

제가 음주가무를 한계를 뛰어 넘을 정도로 좋아한다는 것은 저를 아는 사람이면 대부분 아는 사실이죠 🙂

예전에 웹 표준의날이나 기타등등의 세미나 같은것이 없었을때는 대부분 벙개나 술자리에서 많은 기술 또는 토론이 오갔던것이 사실이었습니다. 저는 밤새 그런이야기에 귀를 기울이며 많은것을 배울 수 있었습니다.

그때의 향수를 잊지 못하고 약간은 허심탄회한 이야기? 또는 즐겁게 모두가 어울려서 놀수있는 분위기를 만들어보기위해서 준비한 자리가 One Web Party 입니다. 이미 신청완료가 되어버린 시점이지만…(사실 이렇게 인기 있을줄 몰랐습니다. 술쟁이들….) 신청하신분들이 모두 와주셔서 즐겁게 하루를 보내며 한해를 마감할 수 있는 자리가 될 수 있으면 좋겠습니다.

또한 저희가 이런 모임을 준비한게 처음이라 많은 부족함이 있을 수 있습니다. 양해 부탁드리며 불만 가지시지 않게 최선을 다하겠습니다.

11일날 봐요~