deute의 모든 글

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

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

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

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

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

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

중국출장

중국 북경 출장을 1주일간 다녀왔습니다. 해외를 안가본것은 아니었지만 중국은 처음이었고 갑자기 일정이 잡혀서 사전에 정보를 전혀 알아보지 않고 갔습니다. 북경에 대한 일차적인 소감은

  1. 사람들이 머리를 잘 안감는다(아침에 머리 떡져서 출근하는 사람들이 많습니다.)
  2. 냄새가 좀난다.(한국사람의 마늘냄새와는 다른 약간 )
  3. 생각보다는 도시가 잘 정비되어있다.
  4. 지하철이 싸다.
  5. 공기가 상당히 안좋다.
  6. 교통신호를 잘지키지 않는다.(뭔가 암묵적인 시스템이 있어보이나 1주일 만에 마스터 하기란…)
  7. 차가 겁네 많다 한국 차도 많다
  8. 영어쓰기는 쉽지않다; 중국어 모르면 힘들다;

입니다.

주말에는 천안문 광장과 자금성을 갔는데 흠 모랄까  크기는 엄청 큰데… 보존이 잘 안된 느낌도 들고 암튼 저는 우리나라의 경복궁이 훨신 좋더라구요 🙂

역시 썰렁하여 사진 몇장 올립니다.

중국산 맥주들;자금성 앞에서 또라이 듀트자금성 옆길천안문후

밤 12시의 자금성LED 천장북경의 지하

먹은 음식들은 나중에;;;

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방부터 찾았는데 이제는 그럴 필요가 없습니다.

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

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