인터넷익스플로러가 7 버전 까지 나왔을 때, 파이어폭스는 한창 강세를 보이고 있었다. 파이어폭스의 점유율을 의식하여 부랴부랴 7 버전을 내 놓았으니 말이다.

언제부터인가 IE6를 버리고 파이어폭스를 쓰기 시작했는데, 그 때가 아마 본격적으로 웹개발을 시작하고 얼마 안돼서였을거다. 당시 파이어폭스의 확장기능에 한창 매료 되어서 헤어나올 수가 없었다. 그중 단연 최고는 파이어버그 라는 개발자도구 였다.

원하는 곳의 DOM 구조를 바로 파악할 수 있고, 파일을 변경할 필요 없이 실시간으로 수정하며 적용된 모습을 볼 수 있었다. CSS 수정, 적용이 바로바로 가능했고, 페이지 로딩속도 및 HTTP status 코드는 물론이고, 자바스크립트 디버깅까지 지원하여 이게 없으면 개발이 불가능할 정도였다.

파이어폭스가 버전업데이트가 되어서 파이어버그가 동작하지 않으면 파이어폭스 업데이트를 미룰 정도였다. (나말고도 많은 사람들이 그랬을거다) 1.4 버전인지 1.5 버전까지 사용하고, 요즘엔 잘 사용하지 않고 있어서 어떻게 발전 하였는지 잘 모르겠다. 

파이어폭스에서는 제대로 개발을 할 수 없는 환경으로 터전을 옮기고 나서 IE 에서 돌아가는 여러가지 개발자도구를 찾아서 사용해보았다. 파이어버그에 비하면 턱없이 부족한 툴 들이었지만, 어쩔 수 없이 불편함을 감수하고 사용했다.

그러다가 IE8 버전이 나오고, 새로이 추가된 개발자 도구 라는 것을 보고 커다란 발전에 기쁨의 눈물을 흘렸었다.

Dom 셀렉터, CSS 선택수정, 중단점을 삽입할 수 있는 자바스크립트 디버깅, 콘솔창 추가로 개발환경이 무척이나 편리해졌다. 이는 IE9으로 오면서 더욱 강력해 졌는데, 이에 대해서 소개를 해볼까 한다. (자바스크립트와 콘솔 위주로 감)


콘솔창

인터넷익스플로러를 실행하고 F12 를 누르면 아래와 같은 개발자 도구가 열린다.

2011:04:10 15:10:12


왼쪽 탭에는 HTML, CSS, 콘솔, 스크립트 등등이 있고, 이 선택에 따라서 오른쪽 탭 영역의 UI가 변경된다. 콘솔탭을 선택하면 빈 화면이 덩그러니 나타나는데, 맨 하단에 보면 뭔가를 입력할 수 있는 입력창이 존재한다.

2011:04:10 15:15:54


여긴 자바스크립트나 기타 DOM객체를 직접 입력하여 확인해 볼 수 있는 공간이다. 실제로 사이트가 전부 로드된 상태에서 콘솔창에 관련 객체 이름을 써 넣기만 하면 그에 따른 정보가 출력된다.

2011:04:10 15:18:16


테스트 페이지로 만든 곳의 this 객체 정보를 호출해봤다. 단지 this 라고만 입력했을 뿐인데, 현재 document의 this객체에 대한 정보가 나타난다.

테스트 페이지에 아래와 같은 HTML 태그를 추가했다.
2011:04:10 15:23:53
그리고 콘솔창에서 위 엘리먼트에 대한 객체 정보를 호출해보았다.


표준 HTML DOM method인 getElementById() 를 사용하여 객체를 호출하거나, 그냥 ID 값만을 입력하여 객체에 대한 정보를 확인할 수 있다.

이 콘솔창에서는 다른 콘솔창과 마찬가지로 페이지에 설정된 자바스크립트를 실행시킬 수 있는데, 방법은 매우 간단하다.

2011:04:10 15:36:01

 
위와 같은 자바스크립트 코드를 추가하고, 콘솔창에 함수 이름을 입력하면 바로 실행이 된다.

2011:04:10 15:37:11


여기 콘솔창에서 사용할 수 있는 여러가지 내장함수들이 존재 하는데, 이는 IE8은 물론이고 웹킷, 모질라계열에서도 비슷한 동작을 한다.

 window.console.log  console.log("로깅용 메시지")  로그 : 로깅용 메시지
 window.console.error  console.error("에러 메시지")  
 : 에러 메시지
 window.console.info  console.info("정보 메시지")  
 : 정보 메시지
 window.console.warn  console.warn("경고 메시지")  
 : 경고 메시지
 window.console.dir  console.dir(오브젝트)  오브젝트 내용이 출력
 window.console.assert  console.assert(식, "메시지")  식이 틀릴 경우 메시지가 출력
 window.console.clear  console.clear()  콘솔창의 내용을 모두 삭제함

콘솔창에서 사용할 수 있는 내장함수는 위와 같고, 각각 실행 하였을 때 나타나는 메시지 이다. 실제로 아래와 같은 코드를 작성하여 테스트를 해봤다.

2011:04:10 15:48:00


2011:04:10 15:49:43


결과창을 보면, 우리가 예상한 결과와 동일하게 출력된 모습을 볼 수 있다. console, 또는 window.console 이라고 입력하면 console에 포함된 메소드들이 출력되니 직접 입력해서 확인 해보자.

** 참고로 console.dir 은 IE9 에서 지원하는 신규메소드로 IE8에서 동작하지 않는다. console.dir(object); 로 실행 하며, 객체의 내용을 좀 더 상세하기 표현해 준다.

기존에 alert 과 document.write, iframe 등으로 디버깅을 하던 불편함은 콘솔창을 사용하면 말끔히 해결된다. 초반엔 익숙하지 않기 때문에 어색하겠지만 지속적으로 사용해보면 예전으로 다시 돌아가기 힘들어질 것이다. 

사용하지 않고 있던 사람들이라면 이번 기회에 한번 사용해보자. 이러한 콘솔창은 IE8 이상, 크롬, 사파리, 파이어폭스 에서 기본적으로 지원하고 있다.


2부. IE9으로 디버깅 하기 (2) - 자바스크립트 디버깅

신고
Posted by onionmen

댓글을 달아 주세요


마이크로소프트에서 IE 새버전인 IE9의 미리보기 3번째 버전을 공개하였습니다. 두달에 한번씩 새버전에 업데이트 되고 있는데, 벌써 3번째 프리뷰 버전입니다. 

업데이트 될 때마다 점점 성능이 좋아지고 있는데요. 이 상태로라면 정식버전이 정말 기대됩니다. MS는 제품을 출시할 때, 첫번째 제품은 말아먹고, 두번째 제품은 좀 괜찮고, 세번째 제품은 시장을 장악했죠. 그리고 운영체제와 브라우저는 한번 실패하면 한번 성공했죠.(일반적으로 실패라고 할만한 것은 아니지만)

개인적으로 IE8은 성공했고, IE7은 실패했다고 봅니다. 물론 IE6는 (이유야 어떻든) 성공했구요. 이런식이라면 IE9는 실패해야 하는데, 지금까지의 프리뷰를 보면 이번 IE는 실패할 것 같지 않네요.

  • 상호운용성 가능한 HTML 마크업
  • GPU를 사용한 렌더링
  • 그 외 성능향상

IE9에서 중점적으로 광고하고 있는 기능입니다. 요약하면 빠르면서도 표준을 준수하는 웹브라우저 인듯 한데요, 실제로 사용해보아도 상당한 체감성능의 향상을 느낄 수 있습니다. (이 부분은 직접 사용해 보셔아 느낄수 있겠네요)

ReMIX10 에서 발표된 내용과 난장세미나에서 발표된 내용을 토대로 간략하게 작성해보앗습니다.


  • 상호운용성
ACID 테스트가 프리뷰2 에서는 68점에 불과했는데(100점만점) 프리뷰3에서는 83점까지 상승.
DOM level2의 완벽한 지원, DOM level3의 지원
getElementsByClassName API를 지원 (기존까지 지원하지 않았다는 것이 놀랍네요.)


  • 속도
브라우저 속도 면에서는 파이어폭스보다 빠르고, 사파리와는 비슷하고, 크롬5 보다는 약간 느린 수준.
새로운 자바스크립트 엔진 챠크라를 사용하는데, 이 챠크라가 멀티코어 CPU를 사용하기 때문에 엔진의 성능이 대폭 향상시되었다고함.
자바스크립트 실행 및 각종 렌더링을 GPU의 도움을 받아서 수행함.
엔진의 코드 최적화를 통해 보다 높은 수준의 성능향상을 기대할 수 있다.


  • 향상된 개발자도구
IE8에 내장된 유용한 개발자 도구의 성능이 향상됨.
- 네트워크 모니터링 기능이 새로 추가되었습니다. 간단하게 사용할 때 유용할 듯 하네요. 회사에서는 httpwatch 를 사용하고 있는데, 이게 상용이라서 다른 기획자나 디자이너 컴퓨터에서 디버깅을 할 때는 fiddler 를 설치해서 썼습니다. 이제 IE9가 설치되어 있으면 따로 뭐 설치할 필요 없을 듯 하네요.


  • 멀티미디어
H.264 코덱 외에 webM 코덱 사용 (올레)
음성코덱으로 MP3, AAC 사용
SVG 사용가능


  • 그 외
CSS3 사용가능
알파채널을 지원하고, 플래시에서만 구현 가능했던 벡터그래픽의 처리를 SVG 를 지원함에 따라서 해결 가능하게 됨.


이 외에도 많은 기능들이 추가되었다. 좀 더 자세한 내용을 알고 싶으면 아래 링크 참조하세요.



신고
Posted by onionmen

댓글을 달아 주세요

그제 구글 크롬 주소창에서 바로 검색하기 포스팅을 올렸는데요, 리퍼러를 보니 검색어 유입이 좀 있어서 또 하나 릴레이 포스팅을 할까 합니다.

크롬 주소창에서 검색을 활용하여 미투데이의 글들을 바로 검색할 수 있는 기능입니다.


미투데이의 검색 URL을 알아내기 위해서 검색을 해보면 아래와 같은 URL을 보여줍니다. 
http://me2day.net/search?search_at=all&query=검색어


이제 URL을 알았으니, 옵션을 수정해볼까요.






이름에 미투데이, 키워드는 본인이 편한대로 설정하시고, URL은 http://me2day.net/search?search_at=all&query=%s 이렇게 입력하세요.


그리고 확인->닫기->닫기


이제 주소창에서 "미 desire" 를 입력하고 엔터를 치면 자동으로 미투데이에서 검색을 해줍니다.


이를 응용해서 여러가지 검색을 할 수 있죠.
검색 URL 리스트를 알려드릴게요.

네이버 : http://search.naver.com/search.naver?ie={inputEncoding}&query=%s
야후 : http://kr.search.yahoo.com/search?ei={inputEncoding}&fr=crmas&p=%s
다음 : http://search.daum.net/search?q=%s
구글 : http://www.google.co.kr/search?complete=1&hl=ko&q=%s&lr=&aq=f
스팸번호 검색 : http://www.missed-call.com/?q=%s
레뷰 : http://www.revu.co.kr/Search/RevU/%s
PHP  : http://kr.php.net/manual-lookup.php?pattern=%s&src={referrer:source?}
torrent : http://torrent-finder.com/show.php?q=%s
운좋은 예감 : http://www.google.co.kr/search?btnI&q=%s
Yes24 : http://www.yes24.com/SearchCenter/SearchResult.aspx?query=%s
미투데이 : http://me2day.net/search?search_at=all&query=%s

그리고 또 한가지 팁으로, 네이버는 검색어 입력시 좀 더 편리한 검색을 할 수 있도록 명령어를 지원합니다.

검색어.사전 , 검색어.이미지, 검색어.블로그 와 같이 검색어 다음에 점을 찍고 검색할 위치를 쓰면 자동으로 그 범위에서 검색을 해주죠.

그래서 네이버 사전을 쓰려면 
[ http://search.naver.com/search.naver?ie={inputEncoding}&query=%s.사전 ] 
이렇게 입력해 놓으면 됩니다.

물론 
[ http://dic.search.naver.com/search.naver?where=dic&sm=top_pat&query=%s ]
이렇게 입력해도 됩니다.

크롬을 쓰면서 좀 더 편리한 검색을 해보세요~!
신고
Posted by onionmen

댓글을 달아 주세요

  1. Favicon of http://coolmoo.net BlogIcon 나비오 2010.05.09 22:24 신고  댓글주소  수정/삭제  댓글쓰기

    릴레이 포스팅 계속해서 기대됩니다.
    그럼 즐거운 하루 되세요 ^^

    양파는 몸에 너무너무 좋은 식품이죠^^

  2. 2010.05.09 23:14  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

  3. 2013.05.22 15:17  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

익스프롤러가 버전 6에서 버전 7로 업데이트 되었을 때, 외관상 변한것이 하나 있었습니다.  주소창 옆에 붙어있는 검색창 이었죠.

스샷은 IE8


빨간 박스로 쳐놓은, 안에 google 이라고 써있는 창 입니다. 저기에 검색 키워드를 입력하면 google에 직접 접속하지 않아도 자동으로 접속하여 검색이 가능했죠.

IE6일 때에는 주소창으로 가서 -> 검색사이트 주소를 입력하고 -> 검색창에 검색어 입력 -> 결과확인 과 같은 단계를 거쳤습니다. 주소창으로 가는 단축키가 Alt + D 로 매우 편리했기 때문에 서핑중 마우스를 사용하는 불편함 없이 사용했죠.

검색창에 직접 검색어를 입력하게 되면 검색창으로 가서 (Ctlr + E) -> 검색어 입력 -> 결과 확인 의 단계를 거치게 되면서 단계를 하나 줄일 수 있습니다. 여기에서 검색사이트가 모두 로딩될 때 까지를 기다리지 않아도 되고, 몇몇 사이트에선 검색창에 포커스를 가져갈 필요가 없기 때문에 실제 검색결과가 나타나기 까지의 체감 속도는 훨씬 빨랐습니다.

하지만 저도 IE7이 처음 나오고 얼마간은 기존에 쓰던 방식으로 계속 검색을 했죠. 주소창에 google,com 이나 naver.com 등을 쳐서 검색창에 검색어를 입력하는 방식으로요.

큰 필요성을 느끼지 못했거든요. 단축키도 헷갈리고, 잘 안쓰게 되니까 까먹고, 게다가 검색엔진을 변경하려면 마우스 액션을 한번 취해야 했기 때문에 잘 안쓰게 되었던것 같습니다.

이러한 UI는 IE8이 나와도 동일하게 유지 되었습니다. 파이어폭스도 당시 동일한 UI였던 것으로 기억하구요.

그런데 구글에서 출시한 크롬 이라는 브라우저 에서는 이러한 UI를 채택하지 않고, 정말 심플하게 주소창 하나만 달랑 박아 놨습니다. IE6처럼 말이죠.

이게 무슨 시대역행적 UI인가 하고 사용했었는데, 알고보니 크롬에서는 주소창과 검색창을 통합했더군요. 주소를 치면 주소로 이동하고, 도메인 주소가 아니라고 판단되는 뭔가를 입력하면 구글검색으로 바로 이어집니다.

사실 입력창을 두개로 나눠놓은 것보다는 이러한 방식이 사용자들에겐 더욱 편리하게 다가옵니다. 두가지를 기억할 필요가 없기 때문이죠. 

여기에 문제는 모든 기본 검색이 google로 되고 있다는 점 입니다. 난 google 검색결과가 맘에 안든다 하는 유저가 분명히 있을거란 말이죠.

그래서 이러한 기본 검색엔진을 변경할 수 있게 해 놓았습니다. 


크롬에 보면 스패너 모양의 아이콘을 클릭하여 크롬 옵션창을 엽니다.


별거 없어보이는 옵션창이 열립니다. 여기 중간 하단에 기본 검색엔진 이라는 타이틀이 보이고, google이 기본으로 되어 있습니다. 여기서 설정을 누르면 검색엔진을 변경할 수 있습니다.


검색엔진을 새로 추가할 수도 있고, 변경, 삭제도 가능합니다. 그리고 이런 검색엔진들에 키워드를 입력할 수 있습니다. 

이 키워드는 검색에 매우 편리하게 사용할 수 있는 일종의 단축키입니다.

크롬 주소창에 그냥 일반 검색어만 입력할 경우 사용자가 기본검색엔진으로 설정한 곳에서만 검색이 됩니다. 그런데 키워드를 사용하면 여러분야에서 좀 더 쉽게 검색이 가능하죠.

주목해야 할 부분은 키워드에 써진 글자들 입니다. 저는 주로 검색하는 부분을 등록해 두었는데요, 책, 영상, 쇼핑, 스팸 등이 그것 입니다.


크롬 검색창이 입력을 기다리고 있습니다.


여기에 아까 등록해둔 키워드 중 하나인 스팸을 입력하면 빨간박스에 쳐진것 처럼 Tab을 누를 수 있다는 표시로 아이콘이 나타나고 있습니다.

하단에는 자동완성으로 스팸 - google 검색 missed-call.com 에서 <검색어 입력> 검색이 나타납니다.
여기서 다른건 신경쓸 필요 없이 Tab을 누르면 검색창이 바뀝니다.

  
Tab을 누르게 되면 주소 입력창이 바뀌고, 하단에 자동완성 되어 있던 부분의 순서가 바뀌었습니다. 이 상태에서 어떤 검색어를 입력하면 바로 missed_call.com 에서의 검색결과를 보여줍니다.


검색어를 입력하고 엔터를 치게 되면 검색결과를 보여줍니다.



매우 편리할것 같지 않은가요? 여러 검색엔진 키워드를 등록하여 쉽게 검색해보세요.
저작자 표시 비영리 변경 금지
신고
Posted by onionmen

댓글을 달아 주세요

  1. 2010.04.25 17:11  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

    • Favicon of http://onionmen.kr BlogIcon onionmen 2010.04.25 22:48 신고  댓글주소  수정/삭제

      안녕하세요.

      missed call 유용하게 잘 사용하고 있습니다.
      IE, FF에서 사용할 수 있는 검색창 검색에서도 매우 잘 활용하고 있습니다.

      좋은 플랫폼 만들어주셔서 감사합니다. ^^

  2. rudovico 2010.10.25 19:23 신고  댓글주소  수정/삭제  댓글쓰기

    제가 네이버를 기본검색엔진으로 쓰고싶어서 그러는데, url에 http://search.naver.com/search.naver?sm=tab_hty&where=nexearch&query= 을 입력했는데도, 기타검색엔진으로는 되는데 기본검색엔진으로는 설정이안되네요. 혹시 어떻게해야하는지아시나요?ㅠㅠ

    • Favicon of http://onionmen.kr BlogIcon onionmen 2010.10.25 20:48 신고  댓글주소  수정/삭제

      안녕하세요. URL 등록하는 부분에 보시면 "기본 검색엔진으로" 라는 버튼이 있습니다. 네이버를 선택하시고, 기본 검색 엔진으로 버튼을 누르시면 되요.

      잘 안되시면 다시 물어보세요

  3. ㅇㅇ 2011.01.21 19:55 신고  댓글주소  수정/삭제  댓글쓰기

    구글크롬은 익스처럼 한번 주소 입력하면 주소목록이 쫙 나오게 할 수 없나요?

    • Favicon of http://onionmen.kr BlogIcon onionmen 2011.01.22 02:47 신고  댓글주소  수정/삭제

      흠, 익스와는 좀 다른 방식이지만 크롬이 주소 기억하는 방식은 더 똑똑합니다.

      익스와 비슷하게 보고 싶으시다면 한 글자만 누르시고 아래 화살표를 한번 눌러보세요

  4. 망가 2011.07.16 23:49 신고  댓글주소  수정/삭제  댓글쓰기

    이상하네요 제크롬에서는 검색창에 탭그림이 뜨지 않아요...구글옵션들어가는데도 님그림하고 달라요...검색엔진 추가,삭제 버튼도 안보이고...크롬이 기본브라우져로 설정된상태는 아니에요
    그래서 그런가요?.

    • Favicon of http://onionmen.kr BlogIcon onionmen 2011.07.18 16:40 신고  댓글주소  수정/삭제

      안녕하세요. 크롬이 계속 업데이트가 되면서 환경설정창이 바뀐 듯 합니다. 저건 예전에 8인가 9버전일 때 환경성정 창이라서 차이가 좀 있을 것 같아요.

      그래도 기본적인 기능설정은 동일 합니다.

      옵션 창 들어가서 제일 처음에 보이는 화면 중에 검색엔진 관리 라고 있습니다. (옵션 -> 기본설정 탭에 메뉴중 밑에서 두번째 메뉴)

      그 메뉴에서 수정해주시면 됩니다. ^^

개발자, 그러니까 정확하게 이야기 하자면 웹브라우져에서 보여지는 것들을 만드는 사람들을 살려달라고 하는 캠페인 배너를 달았습니다.

정확하게 이야기 하자면 인터넷 익스플로러(IE) 6버전 이하를 사용중인 사람에게 IE7 이상의 버전으로 업그레이드를 해달라고 부탁 하는 캠페인 입니다.


제 블로그의 방문객 중 절반을 훨씬 넘는 분들이 IE6를 사용하고 있습니다. 그럼에도 요즘은 스킨을 수정 할 때 IE6를 전혀 고려하지 않고 있습니다. 테스트 환경도 마땅찮고 IE6까지 고려하려면 손이 너무나도 많이 가기 때문이죠. 아 물론, 요즘 브라우저 통계를 보고는 이런 생각을 고쳐먹게 되었지만 말입니다.

사실 저희 회사에서도 개발자 중에 IE6를 사용하는 분들이 조금 있습니다. IE7 버전으로 업그레이드를 권하고는 있지만 그래도 강요할 수는 없는 노릇이고, 또 가끔 빠르게 테스트를 해야 할 때 유용하기 때문에 적극적으로 권고하고 있지는 않습니다.

어쨋든 IE6 버전에 가볍기는 합니다만, 보안도 그만큼 가볍습니다.

뭐 개발자를 살려달라고 자신의 시스템에 억지로 어떠한 소프트웨어를 설치하라는 말은 아니지만, IE6를 사용하다보면 본인이 원치않는 더욱 많은 소프트웨어가 본인도 모르게 설치될지 모르는 일이니 조심하세요. 라고 말하는것은 조금 협박같이 들리기 때문에 저는 그냥 저희좀 도와달라고 이렇게 말하겠습니다.

평소에 오십가닥씩 빠지던 머리카락이 요즘은 이백삼십가닥씩 빠지는 느낌입니다. 장가만 갈 수 있게 도와주세요.
신고

'Day by day' 카테고리의 다른 글

함께살기 with XNOTE  (7) 2009.01.18
올해의 컨셉.  (2) 2009.01.03
"개발자 좀 살려주세요." 배너를 달았습니다.  (2) 2008.12.04
무기력하지만, 기쁨충만한.  (2) 2008.10.29
반갑다. New Tistory.  (4) 2008.06.18
2008년 6월까지.  (2) 2008.06.12
Posted by onionmen

댓글을 달아 주세요

  1. 섹시녀 2008.12.07 13:19 신고  댓글주소  수정/삭제  댓글쓰기

    어머~
    저도 이거 깔아봐야겠어요~ 머리빠지면 안되잖아요~!!
    (안까먹으면~!!)

이전버튼 1 이전버튼

블로그 이미지
손을 따뜻하게 만들어 주고 싶은 애인이 있습니다.
onionmen

달력

 « |  » 2017.12
          1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31            
DNS Powered by DNSEver.com

최근에 올라온 글

Yesterday135
Today57
Total1,624,981

티스토리 툴바