좌충우돌 웹퍼블리셔 일기

 <div id="text1"></div>

    <script type="text/javascript">
      var now =new Date();
      var time = now.getHours();

      msg = (time > 8 && time <= 10) ? "이벤트가 시작되었습니다.: "이벤트 시간이 아닙니다.";

      document.getElementById("text1").innerText = msg;
    </script>

<화면 1> 세계 최초의 브라우저 월드와이드웹

첫 번째 브라우저 전쟁에서 승리한 마이크로소프트도 마찬가지였다. 2001년 IE6을 출시한 이후 2006년까지 새로운 브라우저가 나오지 않았고 경쟁상대도, 웹의 혁신도 없었다. 하지만 2006년 11월 파이어폭스와 IE7이 동시에 출시되면서 두 번째 웹브라우저 전쟁이 시작되었고 더 이상 웹은 누구의 소유도 될 수 없었다. 오페라 소프트웨어에서 출시된 오페라는 IE보다 조금 먼저 선보였지만 10여 년간 시장에서 주목을 받지 못하다가 오페라 9이 나오면서 비로소 경쟁력을 갖게 되었지만 여전히 데스크톱 브라우저보다는 모바일 디바이스와 게임 디바이스에서 오페라 미니가 더욱 주목받고 있다. 애플의 사파리 역시 윈도우 시장보다는 맥OS를 중심으로 어느 정도의 규모만 가져가면서 IE7과 파이어폭스 양자의 대결 구도가 꽤 오랜 기간 이어졌다.

얼마 전 공개된 ‘웹브라우저의 역사‘라는 인포그래픽은 1994년부터 시작된 브라우저의 역사 중 시장에 대한 영향력을 한눈에 볼 수 있도록 정보가 재구성돼 있다. 스케이프와 IE의 점유율이 변해가는 모습과 파이어폭스, 크롬의 등장을 극적으로 표현하고 있으며 2011년에 멈추어 있는 제품 라인이 내년 이맘때쯤에는 어떤 모습으로 변할지를 궁금하게 만든다. 해당 도표에서는 1994년부터 표기하고 있지만 브라우저의 역사를 보면 이보다 좀 더 앞선 시점으로 들어가야 한다. 최초의 웹브라우저는 팀 버너스리가 NeXT 컴퓨터 시스템에서 만든 월드와이드웹(World WideWeb)이며 1991년 소개됐다. 월드와이드웹은 세계 최초의 웹브라우저이면서 위지웍 기능을 가진 HTML 편집 소프트웨어였다. 이후에 우리가 알고 있는 월드 와이드 웹(WWW)과 이름이 겹치는 문제가 발생해 넥서스라고 개명했다. 애플 진영에서는 사파리 이전에 나왔던 브라우저로 옴니웹이 있다. 사파리가 출시되고 나서도 초기 버전에 몇몇 버그가 있어 옴니웹을 사용하는 사용자층은 꽤 두터웠다. 다른 브라우저가 대부분 무료로 배포되는데 반해 옴니웹은 2009년까지 유료로 판매되었음에도 다른 브라우저와 차별화된 성능과 특화된 기능으로 마니아층을 형성하고 있었다. 하지만 시간이 지나면서 다른 브라우저와의 차이가 점점 희미해지면서 더 이상 유료를 고집할 수 없게 됐다.

웹브라우저가 수행하는 근본적인 역할은 20년이 지나도 변하지 않았다. 위키백과의 정의처럼 ‘웹서버에서 쌍방향 통신하는 HTML 문서나 파일과 연동하고 출력하는 응용 소프트웨어‘로 그 역할을 수행하고 있다. 초기 브라우저에서 단순한 HTML 기능을 지원하던 것이 다양한 사용자 요구와 비표준 확장으로 웹 호환성에 심각한 문제가 생겨나기 시작했다. 특히 통신 인프라가 빠른 속도로 성장한 국내에서는 과도하게 사용된 액티브X의 문제뿐만 아니라 기본이 되어야 할 HTML 코드 자체에 수많은 문제점을 안고 있는 상태이다. IE9 출시를 준비하면서 한국마이크로소프트에서 가장 난감해 했던 부분 중 하나가 수많은 오류에 대한 부분을 어디까지 지원할 것인가에 대한 고민이었다. 1년여 기간 동안 호환성을 해결하려 노력했지만 여전히 부족한 부분이 있음을 이야기했으며 개발자 커뮤니티에서도 지금까지 나타나지 않았던 문제들이 서서히 나타날 것이라고 이야기하고 있다. 이런 호환성 문제는 개발자들이 관심을 가지지 않기보다는 기존의 인력만으로 새로운 이슈를 같이 대응하기에 어려움이 있고 의사결정권자 역시 당장 문제가 되지 않은(IE9 사용자가 많지 않으니) 부분을 끄집어내기 꺼려하기 때문이라고 한다.


웹의 아름다움을 다시 만나는 IE9
IE9을 처음 만난 것은 1년 전으로 거슬러 올라간다. MIX10 행사를 집에서 시청하면서 플랫폼 프리뷰 버전을 설치했다. 현장의 분위기에 직접 동참하지 못한 것이 아쉽긴 했지만 자막까지 제공되는 동영상 서비스와 함께 방 안에서 공개된 최신 자료를 바로 찾아보고 새롭게 출시된 제품을 설치해볼 수 있는 것은 흥미로운 경험이었다. 개발자를 위한 테스트 버전이라 일반 사이트를 이용하는 것에는 조금 어려움이 있었지만 이전 버전과 확실한 달라진 모습에 만족했다. HTML5와 CSS3와 관련된 대중적인 이슈를 모두 대응할 준비를 갖추고 비로소 다른 브라우저들과 제대로 붙어볼 준비가 된 것이다. 그로부터 1년이 지나고 이제 정식으로 제품이 출시됐다.

IE9은 4가지 특징을 내세우고 있다. 첫 번째는 빠른 속도와 놀라운 성능이다. 웹브라우저를 통한 다양한 멀티미디어를 경험하게 되면서 사용자는 데스크톱 애플리케이션에서와 동일한 수준의 경험을 기대하게 됐다. 특히 윈도우7에서 제공하는 강력한 그래픽 기능을 웹에서도 적극적으로 활용할 수 있게 되면서 최고의 웹 경험을 할 수 있게 됐다. 어도비에서도 일찍부터 IE9의 하드웨어 가속 렌더링을 지원하는 기능을 플래시 플레이어 10.2의 대표적인 기능으로 홍보해왔다. 그래픽 관련 요소가 많은 화면이나 비디오를 렌더링하는 과정에서 PC의 자원을 많이 사용하는 문제점이 있었는데 이런 부분도 어느 정도 해소될 것으로 보인다. 플래시 플레이어 10.2는 지난달 윈도우, 맥, 리눅스 용으로 공개되었고 3월 18일 구글 안드로이드용 플래시 플레이어 10.2가 공개될 예정이다.

두 번째는 심플해진 인터페이스 디자인이다. 새 탭 페이지나 즐겨찾는 사이트 관리는 이미 크롬에서 제공하는 스냅샷에 익숙한 사용자라면 오히려 만족스럽지 못할 수도 있다. 이전 IE 브라우저만을 사용해보았고 다양한 툴바 사용에 익숙한 사용자라면 심플한 인터페이스가 당황스러울 수도 있다. 당장 즐겨찾기는 어디서 보아야 하는 것인지 혼란스러워할 수 있다. 대부분의 학교나 학원에서 사용하는 교재에서 설명하는 내용과 인터넷을 사용하는 프로세스가 달라진다면 이를 쉽게 설명하기는 어려울 것이다(물론 IE9에서도 메뉴바를 노출시킬 수 있는 옵션을 제공하고 있다). 또한 IE9은 비스타 이상의 환경에서만 설치가 가능하기 때문에 아직은 XP가 주로 사용하는 브라우저인 환경에서 당분간은 어려움을 느끼지 않을까 싶다(지극히 IT적인 필자의 블로그 통계만 보더라도 아직까지 XP 사용자가 52%, 윈도우7 사용자가 41%이며 브라우저 사용 통계는 IE가 70%, 크롬이 20%, 파이어폭스가 5%로 집계된다. 일반적인 국내 통계에서는 IE가 94%, XP 사용자가 72%를 차지하고 있다 - statcounter 기준).

<화면 2> IE6 장례식

세 번째는 세상에서 가장 안전한 브라우저이다. 보안과 관련된 문제가 터질 때마다 액티브X는 모든 문제의 원인으로 지목되어 왔고 MS에서 적극적으로 나서서 보안 취약점을 갖는 IE6의 업그레이드하게 독려하고 있다. 액티브X 기술 자체가 문제는 아니지만 이미 암세포처럼 모든 사이트에 퍼져버린 상황에서는 더 이상 치료만으로는 막을 수 없다는 결론이 아닌가 싶다. 액티브X 필터링 기능은 IE8에서도 제공되었지만 여전히 많은 사이트를 이용하려면 액티브X를 설치해야 하고 너무 많은 경고 메시지는 메시지 자체를 둔감해지게 만들었다. 정부에서 나서서 대체적인 수단을 만든다고는 하지만 사용자의 눈높이와의 격차를 얼마나 좁힐 수 있을지가 의문이다. 얼마 전 연말정산자료를 IE가 아닌 다른 브라우저에서 인쇄하려는데 생소한 용어(보안이 적용된 PDF가 사용됐는데 절차가 상당히 복잡했다)와 절차로 후회했던 경험이 있다. 기능 구현 자체가 급한 것이 아니라 쉽게 이전처럼 사용할 수 있게끔 하는 간격(gulf)에 대한 조정이 필요할 것이다.

네 번째는 최신 웹표준에 대한 이야기이다. 최신 HTML5와 CSS3를 사용하는 것까지는 좋지만 ‘본 페이지는 Internet Explorer 9에서 최적화 되었습니다’와 같은 메시지를 보는 것은 그렇게 유쾌한 일은 아니다. 기능을 테스트하는 특별한 용도가 아니라면 적절한 스크립트를 사용해 대체 가능한 콘텐츠를 제공하는 것이 당연할 것이다. modernizr와 같은 도구는 개발자가 이런 요구사항을 충족하는 감지 기능을 쉽게 적용할 수 있도록 제공하고 있다. 그 외 일반적인 라이브러리에서도 유사한 기능을 제공하고 있기 때문에 사이트 구현 시 체크해 보아야 하는 기능이다. 위에서 언급한 것처럼 XP 사용자가 상당히 많은 국내 실정에서 새로운 기술의 적극적 수용은 IE9으로서는 다른 브라우저로 사용자를 빼앗길 빌미를 제공하는 것일 수도 있지만 주사위는 던져졌고, 사용자의 선택을 기다릴 뿐이다.

최고를 노리는 파이어폭스 4
마이크로소프트가 IE9까지 오게 된 데 파이어폭스의 영향이 가장 크다고 볼 수 있다. 파이어폭스는 2004년 11월 첫 번째 버전을 선보였고 2006년과 2008년 새로운 버전을 선보이며 2008년에는 전체 시장에서 점유율 20%를 돌파했다. 파이어폭스가 독점적인 IE의 아성을 깨뜨릴 수 있었던 배경에는 탭 브라우징, 검색, 라이브 북마크, 다운로드 관리자 등 다양한 기능도 있지만 2억 개 이상의 부가기능을 추가할 수 있어 순정 브라우저를 넘어 강력한 도구로 재탄생시킬 수 있다는 점에 매력이 있다. 물론 IE에서도 이런 부가기능이 없었던 것은 아니지만 파이어폭스만큼 개방적이지 못했고 특히 파이어버그와 같은 개발자 도구의 지원은 IE와 차별화된 개발자를 위한 브라우저라는 인식까지 심어주었다.

국내 금융권이나 정부기관 사이트 등을 이용하려면 인증이나 보안 등의 이유로 IE만 사용가능한 환경을 제공하고 있어 파이어폭스 사용자들에게 가장 인기 있는 플러그인은 IE Tab이다. 특정 사이트만 목록에 추가하고 IE 환경에서 사용할 수 있으며 웹사이트 로딩 중에 렌더링 엔진을 바꿀 수 있는 옵션을 제공하기 때문에 파이어폭스에서 기본기능처럼 사용됐다.

파이어폭스는 브라우저의 이름처럼 캐릭터를 가지고 있다. 기본 로고에 표현된 동물은 너구리팬더(Red panda)라고 한다. 이 너구리팬더의 다른 이름이 파이어폭스이고 국내에서는 불여우라고 단어에 따른 해석으로 들어오게 됐다(국어사전상에서 불여우는 붉은 여우를 의미한다고 한다). 동물을 캐릭터로 가지고 있다 보니 지역별로 특색에 맞게 캐릭터가 만들어지기도 한다. 특히 2006년 파이어폭스 개발자 행사에서 처음 소개된 Kit는 어린 불여우를 주인공으로 웹표준을 지키자는 메시지를 담고 있으며 오랫동안 사랑받는 캐릭터가 됐다.

<화면 3> 파이어폭스 캐릭터 중 하나인 Kit

파이어폭스가 다른 브라우저와 가장 큰 차이점은 커뮤니티를 기반으로 만들어지고 있다는 것이다. 브라우저 개발뿐만 아니라 도움말을 만들고 번역하는 일도 커뮤니티에서 진행하는 일이다. 국내에서도 몇몇 자발적인 참여자가 커뮤니티에 참여하며 한국어와 관련된 이슈를 처리하고 브라우저의 한국어 버전 개발에 참여하고 있다. 제품의 개발 프로세스와는 별도로 사용자들이 자주 겪는 문제점에 대응하는 도움말 문서를 만드는 커뮤니티로 SUMO라는 프로젝트가 있다. 

SUMO는 지원사이트 url인 SUpport.Mozilla.com에서 따온 이름으로 전 세계적인 자원봉사자에 의해 만들어지는 커뮤니티다. 일부 업체에서도 포인트와 같은 보상 제도를 두고 제품의 도움말이나 팁을 제공하는 자발적인 참여를 유도하고 있지만 모질라 재단은 순수한 참여를 전제로 하고 있어 색다른 경험을 할 수 있을 것이다.

바이러스 걱정 없이 컴퓨터를 쓰는 세상
아무리 최신 컴퓨터를 구입하더라도 컴퓨터를 전원에 연결하고 나서 해야 할 일들이 적지 않다. 일단 바이러스 감염 예방을 위해 백신을 최신 버전으로 업데이트해야 하고 운영체제의 서비스팩이 설치되지 않았다면 몇 차례 재부팅을 통해 운영체제 업데이트를 해야 한다. 문서편집에 필요한 프로그램을 설치했다면 역시 관련된 업데이트를 설치해 주어야 하는 작업에서 꽤 많은 시간이 소요된다. 지난달 DDoS 공격이 이슈가 되었을 때 포털 사이트 첫 화면 대신 전용 백신 다운로드 페이지가 열리는 해프닝이 있었을 때는 정말 누군가 이 모든 것을 알아서 해 주었으면 하는 생각이 들기도 했다.

구글이 웹브라우저를 만들겠다고 했을 때 많은 이들이 성공 여부에 의문을 가졌다. 하지만 2008년 첫 번째 버전을 내놓은 지 2년도 지나지 않아 IE, 파이어폭스에 이어 세 번째 점유율을 가진 브라우저가 됐고 특정 사이트(필자의 블로그같은)경우에는 오히려 파이어폭스보다 점유율이 높기도 하다. 구글 문서 도구 기능이 상당부분 개선되고 기업 내 사용자를 위한 도구로서 사용이 확대되면서 해당 도구와 최적의 성능을 보여주는 크롬 브라우저가 인기다. 또한 타 브라우저에 비해 가볍고 빠른 속도 역시 추종자들을 늘리는데 기여했다.

브라우저에서 더 나아가 크롬 OS에 대한 소문이 현실로 밝혀지면서 구글은 세계 정복의 음모가 있는 게 아닌가 하는 이야기가 떠돌기도 했지만 크롬 OS는 여전히 진행 중이다. 다만 크롬 OS는 사용자가 시스템 자체를 제어하는 것이 아니라 구글이 중앙에서 제어하게 구성되어 있다는 점에서 수많은 업데이트와 오류, 선택해야 하는 부담에 힘들어하는 사용자에게 만족스러운 선택이 될 수 있다. 물론 테스트 중인 넷북이 좋은 평가만을 받고 있지는 못하지만 교육이나 개인 사용자를 대상으로 하는 시장에서는 상당한 가능성을 보여준다. 브라우저를 플랫폼으로 보는 시각은 크롬뿐 아니라 IE9에서도 브라우저를 액자에 비유해 사용자가 브라우저에 신경 쓰지 않고 웹 콘텐츠에 집중할 수 있게 하려고 노력했다는 이야기를 들으면서 다음 버전의 브라우저는 어떤 모습일지 기대가 된다.

모바일 브라우저
스마트폰이 나오기 전 모바일 환경은 데스크톱과 비교해서 상당히 열악했다. 지금은 듀얼코어 이야기가 나오면서 오히려 구형 데스크톱보다 훨씬 강력한 시스템을 갖춘 디바이스가 등장하기도 하지만 불과 얼마 전까지만 해도 모바일 상에서 동일한 웹을 본다는 것이 큰 이슈였다. 데스크톱 브라우저의 대표주자는 아니지만 오페라소프트웨어의 오페라 미니는 모바일 시장에서는 전 세계 1억 명이 넘는 사용자를 가지고 있다. 일반적인 브라우저와 달리 통신망 속도가 느리거나 사양이 낮은 휴대폰에서도 웹 페이지를 부담 없이 구동할 수 있도록 데이터를 서버에 압축해 놓고 휴대폰으로 전송하는 방식을 택했기 때문. 아이팟 터치를 제외한 시장을 놓고 보면 오페라 미니가 세계 시장에서 점유율 1위인 셈이다. 그 뒤를 노키아와 블랙베리가 따라오고 있고 그 다음이 안드로이드 기반의 브라우저가 차지하고 있는 상황이다. 하지만 한국 시장을 보면 전혀 다른 양상을 보이고 있다. 안드로이드 기반의 브라우저가 전체 시장의 75%를 차지하고 있으며 노키아나 오페라는 2% 정도에 불과할 뿐이다. 물론 각 국가별로 비교해 보면 명확한 차이가 난다.

여러 통계 자료를 보면 2011년을 기점으로 스마트폰에서 웹을 탐색하는 사용자가 PC를 추월할 것으로 예상되고 있다. 우리 일상을 돌아보자. 실시간 검색어 중 많은 건이 TV 시청을 하면서 관련된 검색어로 올라오는 것이다. ‘지금 나오는 저 배우의 나이는 몇 살이지?’라는 질문을 PC를 켜서 웹을 찾는 것이 아니라 주머니에 있는 스마트폰을 꺼내서 검색하고 간단하게 답을 얻고 있으며 이러한 양상은 다양한 분야로 확대되고 있다.

브라우저 밖의 브라우저
웹브라우저는 다양한 웹 콘텐츠를 담아야 한다는 태생적 한계 때문에 여러 가지 제약에 묶인다. 특히 보안과 관련된 다양한 이슈는 버전이 올라갈수록 사용자가 좀 더 안전한 웹 콘텐츠를 사용할 수 있도록 여러 장치들을 제공한다. 일반 사용자에게는 당연한 일이지만 기업이나 공공장소와 같은 곳에서는 각 사용자별로 제어 가능한 환경은 관리하기가 어려워진다. 사용자가 자바스크립트 기능을 꺼버리고 나서 특정 사이트에 접근이 안 된다고 하거나 플러그인을 동작하지 않게 해 놓고 플래시로 만든 화면이 보이지 않는다고 문의할 수도 있다.

2008년 뉴스 기사를 찾아보면 안랩에서 금융거래를 위한 별도의 브라우저를 개발했다는 소식을 찾을 수 있다. 그리고 최근 ‘안랩 온라인 시큐리티 2.0(AOS 2.0)이라는 이름으로 패키지 제품으로 업데이트되어 시중 은행에는 적용된 상태이며 해외 시장 진출의 동력으로 삼는다는 내용이다. 그리고 투비소프트의 엑스플랫폼 제품의 경우에는 전용 브라우저 내에서 서비스를 제공하는 기능 구현이 가능하다. 기존 웹브라우저에서 동작하는 방식과 달리 각 화면별 세션처리나 옵션 관리를 사용자가 아닌 중앙에서 관리자가 제어할 수 있어 기업 시스템 사용 시 오류를 최소화할 수 있고 업무 맥락에 따라 최적화된 사용자 경험을 제공할 수도 있다. 또한 위젯 형식의 애플리케이션은 일상적인 업무 관리에 있어서 효율적인 활용이 가능하며 기존 자원을 가지고 얼마나 빨리 구현할 수 있는지에 따라 기업 내에서 쉽게 활용할 수 있을 것이다.

<화면 4> 엑스플랫폼 위젯

어도비 에어는 모바일 디바이스까지 확장했다. 브라우저라고 표현하기에는 애매하지만 데스크톱 환경을 생각해 보면 최근 버전에서 USB나 카메라, 웹캡과 같은 외부 장치를 인식하고 연동하는 부분을 지원한다. HTML5에서도 디바이스 API 표준화를 진행하고 있어 기존 브라우저 기능이 확장될 가능성을 보여주고 있지만 아직 상용으로 활용하기에는 제약이 있기 때문에 브라우저 밖의 브라우저 기능은 여전히 흥미로운 주제다.

브라우저에 대한 다양한 이야기를 담고자 하면서 여러 자료를 찾아보니 너무 많은 변화가 일어나고 있다는 것을 느낄 수 있었다. 지금 하고 있는 일을 제대로 하지 못하고 트렌드만 따라가는 것은 어리석은 일이지만 다가올 미래를 준비하지 않는다면 어느 순간 흐름에 휩쓸려갈지 모를 일이다.

참고자료
1. 한국 브라우저 사용 통계
http://gs.statcounter.com/#browser-KR-monthly-201002-201102-bar
2. HTML5 지원 여부 감지 도구
http://www.modernizr.com/
3. 파이어폭스 애드온
https://addons.mozilla.org/en-US/firefox/?browse=featured
4. SUMO에 참여해 주세요
http://channy.creation.net/blog/846
5. Browser wars
http://en.wikipedia.org/wiki/Browser_wars
6. 웹브라우저의 역사
http://www.testking.com/techking/infographics/browser-evolution-the-history-of-web-browsers-infographic/
7. His name is Kit … Developer Kit.
https://developer.mozilla.org/devnews/index.php/2007/03/22/his-name-is-kit-developer-kit/
8. Device APIs and Policy Working Group
http://www.w3.org/2009/dap/
9. 참조이미지 http://www.flickr.com/photos/csodaszar/2312211279/in/photostream/
http://www.flickr.com/photos/amster/418602656/in/photostream/


출처: http://www.imaso.co.kr/?doc=bbs/gnuboard.php&bo_table=article&wr_id=37041

이거....문제점이 많구나...-_-;ㅋ

ie에서 htc만 넣어주면 당연히 나올줄 알았는데.....orz....

분명 테스트에선 제대로 나오던게 html5 코딩 안에만 들어가면 ie 에서 백그라운드가 사라져 버려 뭘 잘못한줄 알았다.  

ie를 위해 html5 태그를 블록시켜준 display:block; 이 문제 였다. 이걸빼면 htc는 먹는데 이걸 안넣고는 레이아웃이 만들어질 수가 없으니 결국 라운드박스는 사용에 제한이 생겨버렸다. 게다가 코너를 선택해서 굴리는 css도 먹질 않았다.


ie 에서 htc 사용시

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

border-radius : O
border-bottom-left-radius:  X  (내가 받은 htc가 업데이트가 덜 된게 아닐까....? 이건 좀 더 찾아볼 필요가 있겠다.)




<!doctype html>

radius : X   (백그라운드가 나오지 않는다. display:block;을 빼면 레이아웃이 틀어짐)




결국 지금 만들고 있는 샘플은 이미지로 대체해야될듯.....후....
HTML5로 코딩하는데 CSS3를 못쓰고 이미지로 대체해야된다니 이거 참.......ㅡ,.ㅡㅋ

갤러리: http://spaceforaname.com/galleryview-3.0/tutorial_e.html
http://www.kyrielles.net/sliderkit/

jQuery 이미지 갤러리 만들기 데모네요~

1. Fullsize
간단한 제품이미지, 썸네일 이미지 보기에 사용하기엔 좋음
http://www.addfullsize.com/

2. Galleria
이미지 갤러리로 다양한 기술이 녹아 있음
http://galleria.aino.se/

3. Galleriffic
다양한 종류의 이미지 갤러리를 만들 수 있음
http://www.twospy.com/galleriffic/index.html

4. jquery-imagetool
큰 이미지를 이용하여 이미지 스크롤 기능을 이용시 괜찮음
http://code.google.com/p/jquery-imagetool/

5. GalleryView
http://spaceforaname.com/galleryview

6. CrossSlide
오버랩, 줌인 등의 이미지뷰어에 적합
http://tobia.github.com/CrossSlide/

<제이쿼리 플러그 인 모음>
http://blog.naver.com/sjrmwlq1/130075931807

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

타툼시티와 비슷한 효과

jquery-lightbox-0.5.zip

• marginwidth, marginheight :  아이프레임 내 불려지는 페이지의 <body> 태그에 margin:0를 주면 해결됩니다.
• scrolling : 아이프레임 내 불려지는 페이지의 <body> 영역이 아이프레임의 크기를 넘지 않거나, <body>에 overflow:hidden을 주면 해결됩니다.
• frameborder : IE를 제외한 나머지 브라우저에서 border:none을 주면 해결됩니다.

역시 IE가 문제인지도 모르겠습니다. IE8에서는 border:none을 주더라도 아래 그림과 같이 못생긴 테두리가 표시됩니다. 이 테두리를 없앨 수 있는 방법은 오로지 frameborder="0"를 선언하는 것 말고는 없습니다.
(더 신기한 것은 IE6,7은 frameborder가 선언되어 있지 않으면 테두리 자체를 표현하지 않습니다.)

이렇게 스타일으로 해결할 수 없는 속성들은 사실 HTML5에서 새롭게 생겨난 아이프레임의 속성 "seamless"로 해결할 수가 있습니다. 이 속성은 아이프레임이 일반 콘텐츠처럼 표시되게 하여 스크롤이나 테두리를 발생시키지 않습니다. 지금으로서는 이 속성을 지원하는 브라우저가 없으니, 아이프레임을 사용할 때는 HTML5 스펙에 어긋나지만 frameborder 속성을 사용해주는 수 밖에 없을 듯 합니다.

출처 : NHN NULI
http://html.nhndesign.com/blog/22882