web standard/script2010. 11. 17. 09:23

<style type="text/css">
label.on{color:blue;font-weight:bold}
</style>
<script type="text/javascript">
function Set_Faq(obj){
 var Faq_dtList = document.getElementById("radioFom").getElementsByTagName("label");
 for (i=0;i<Faq_dtList.length;i++) {
  if(obj==Faq_dtList[i]){
  Faq_dtList[i].className = (Faq_dtList[i].className = "on" ? "on" : "")  
  } else {
  Faq_dtList[i].className = ""
  }
 }
}
</script>

 

<form id="radioFom" method="post" action="">
 <label for="aa" onclick="Set_Faq(this)" class="on"><input type="radio" id="aa" name="rdo" checked="check" />하하</label><br />
 <label for="bb" onclick="Set_Faq(this)"><input type="radio" id="bb" name="rdo" />하하</label><br />
 <label for="cc" onclick="Set_Faq(this)"><input type="radio" id="cc" name="rdo" />하하</label><br />
 <label for="dd" onclick="Set_Faq(this)"><input type="radio" id="dd" name="rdo" />하하</label><br />
</form>


Posted by 수라
web standard/layout2010. 11. 10. 15:49
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
* {
    margin: 0;
}
html, body {
    height: 100%;
    overflow: auto;
}
.wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: auto;
}
.box {
    position: fixed;
    left: 50%;
    bottom:0;
    margin: 0 0 0 -370px;
    background:none repeat scroll 0 0 #FFEEEE;
    border:1px solid #AAAAAA;
    font-size:0.9em;
    padding:1em 0 0;
    width:178px;
}
* html .box {
    position: absolute;
}

/*

Fixed Positioning in IE6
http://ryanfait.com/

*/
</style>

</head>

<body>
<div class="wrapper">
내용
</div>
<div class="box">
</div>
</body>
</html>

'web standard > layout' 카테고리의 다른 글

이미지 자동슬라이드  (0) 2011.12.30
레이아웃에 사용되는 두가지 속성 position 과 float  (0) 2008.07.29
layout (블로그형)  (0) 2008.07.29
layout  (0) 2008.07.29
Posted by 수라
life/etc2010. 11. 10. 13:40

'life > etc' 카테고리의 다른 글

거제합창대회_남자의자격  (0) 2010.09.06
'인셉션' 요약본  (3) 2010.07.23
아이폰 OS4 업데이트  (1) 2010.06.09
Posted by 수라
web standard/mobile2010. 10. 26. 14:33
출처 : http://trend21c.tistory.com/946

1. 해상도를 고려한 레이아웃


모바일 웹사이트 제작은 일반 웹사이트 제작과 있어서 가장 큰 차이점은 해상도 차이에 따른 레이아웃입니다.

모바일 기기가 넷북이나, 노트북, 데스크탑 보다도 디스플레이의 크기가 작기 때문에

이점을 고려한 웹사이트 기획 및 디자인, 퍼블리싱이 필요합니다.

게다가 모바일 기기마다 해상도가 제각각이라는 점도 참 난감한 요소지요.


국내에서 보통 모바일 웹사이트 제작은 전 해상도를 고려하기 보다는

최근 출시된 스마트폰을 기준으로 해서 기획, 개발 및 검수 되는 사례가 많습니다.(아이폰, 갤럭시S)

그래서 요즘에는 이들 스마트폰 환경에 최적화된 모바일 웹사이트가 늘어나고 있습니다.




※ 국내 출시된 주요 모바일 기기 해상도

iPhone 320 * 480
iPhone4 960 * 640
모토로이 해상도 854 * 480
HTC 디자이어(넥서스원) 800 * 480
옵티머스Q 800 * 480
갤럭시A 800 * 480
갤럭시S 800 * 480
시리우스 800 * 480
베가 800 * 480



다음과 네이버의 경우는 width를 가변폭으로 지정해놓아 해상도가 다른 모바일 기기에서 유동적인 대처를 하고 있습니다.





이러한 가로 길이 가변폭의 레이아웃은 기획, 개발, 디자인 모든 영역에서 함께 고려가 되어야 합니다.

기획적인 측면에서도 가로사이즈가 가변이고 사용자마다 조금씩 차이가 있다는 UX를 인지하여야 하고

디자인적으로도 가변폭에 유의하여 요소들을 배치하여야 합니다.

개발에서도 가변적으로 변하게끔 코딩에 잘 신경써줘야겠죠? ^^




2. 사용자를 편하게, 터치 오류를 줄여라


사용자가 터치하는 영역은 44px*44px를 기준으로 하세요.

손가락으로 터치하는 면적이 최소 이정도는 확보되어야 오터치를 줄일수 있습니다.

너무 작은 경우 링크 영역 주변에 다른 링크요소가 없으면 크게 상관이 없을수도 있겠지만

다른 링크요소들과 함께 44*44 이내에 다닥다닥 붙어있다면

원하는 것을 터치하지 못할 확률이 높아집니다.




3. 화면 확대비율 고정


<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no" />


이 meta태그는 화면 확대비율을 기기 사이즈 가로에 맞게 조정합니다.

viewport가 가장 잘 적용되는 것은 아이폰이고 기기마다 조금씩 차이가 있습니다.


body {
    -webkit-text-size-adjust: none;
}


그리고 이 css는 webkit 기반의 브라우저에서 텍스트사이즈가 들쑥날쑥 하지 않게 조절합니다.

상황에 맞게 사용하세요.




4. 사이트 아이콘 제공


아이폰3g, 아이폰3gs
<link rel="apple-touch-icon-precomposed" media="screen and (resolution: 163dpi)" href="/iOS-57.png" />

아이패드
<link rel="apple-touch-icon-precomposed" media="screen and (resolution: 132dpi)" href="/iOS-72.png" />

아이폰4
<link rel="apple-touch-icon-precomposed" media="screen and (resolution: 326dpi)" href="/iOS-114.png" />


아이폰에서는 웹사이트 바로가기 아이콘은 홈화면에 넣을 수 있습니다.

이때 홈화면 아이콘으로 저장될 아이콘을 만들어둘 수 있습니다.



5. css3를 활용하여 절감


css3를 잘만 활용하면 그라디언트 효과나, 그림자 효과, 라운드코너 효과를 만들어낼수 있습니다.

이로 인해서 불필요한 이미지를 사용하지 않아도 되어 로딩속도의 절감효과를 볼 수 있습니다.

css3를 잘 활용해보세요.

물론 css3가 미지원되는 모바일기기가 더 많으니 이점도 염두해주세요!



6. javascript는 최소화


모바일 웹으로 얼마나 멋진 사이트를 만들기에 그렇게 많은 자바스크립트 코드가 필요한가요?

여러분들도 잘 알고 있는 훌륭한 자바스크립트 프레임워크인 jquery 역시

모바일기기에서는 부담스러울수도 있습니다.

자바스크립트 프레임워크를 사용하면 물론 생산성 향상에 도움이 되겠지만

사실 모바일 웹페이지는 그렇게 많은 자바스크립트 액션을 필요로 하지 않습니다.

javascript을 사용을 최소로 줄이고 순수한 DOM 조작으로 사이트를 만들어봅시다!



7. over 이벤트는 소용이 없습니다.


터치폰은 마우스커서를 조작하는 것이 아니기 때문에

우리가 흔히 데스크탑을 통해 인터넷을 사용할때 이용가능한

:hover 선택자나

onmouseover와 같은 이벤트를 사용할수 없습니다.

이점 알아두세요.



8. 페이지내에 또 다른 스크롤바는 넣을 수 없어요.


우리는 참 그 작은 공간에 많은 콘텐츠를 꾹꾹 넣고자합니다.

일반 웹 환경에서는 overflow:auto; 또는 overflow:scroll의 값을 사용하여

특정 영역에 많은 콘텐츠를 넣고 스크롤바를 넣을 수 있지만

모바일 웹환경에서는 페이지 내에 또 다른 스크롤바 넣기가 불가능합니다.



전혀 안되는 것은 아닙니다.

모바일네이버의 실시간검색을 살펴보면

자바스크립트로 스크롤바 비스무레한 것이 구현되어 있습니다.



그런데 제 개인적인 소견으로는 사실 모바일 웹페이지 안에 스크롤바를 넣는다는 것이

그닥 좋은 UX라고 생각하지는 않습니다.

스크롤바라는 것이 스크롤이 되는 형태의 UX가 굳어진 것이고

터치폰에서도 화면을 위아래로 쓸어내리거나 올리는 행위로 스크롤을 한다라는 의미가 담겨있는 UX인데

화면에 있는 스크롤바는 터치로 스크롤되는 것도 아니고 단지 위아래 버튼으로

스크롤바를 조절하는 UX입니다.

차라리 그냥 적당 갯수만 보여주거나

새로고침버튼을 넣어서 해당부분만 ajax로 변경을 하는것이 더 낫지 않았나 싶기도 하네요.




9. 일반 웹사이트로 가기에 대한 옵션을 제공하라.


우리는 모바일을 통해서 웹사이트를 이용할때 꼭 모바일용 웹페이지를 이용하고 싶지 않을때도 많습니다.

일반 웹페이지를 사용하는 경우말이죠.

그런데 몇몇 웹사이트는 사용자의 agent를 가져와서

접속한 환경이 모바일기기면 무조건 모바일 페이지로 이동시키기도 하는데

일반 웹사이트를 이용하고자 하는 사용자도 있기 때문에

일반 웹사이트로 가기에 대한 옵션을 제공해주면 좋습니다.



10. 레티나 디스플레이


.myImage {
    height: 40px;
    width: 100px;
    -webkit-background-size: 100px 40px;
    background: url("images/myImage.jpg");
}

@media screen and (-webkit-device-pixel-ratio: 2) {
    .myImage {
        background: url("images/myImage@2x.jpg");
    }
}


고해상도의 아이폰4가 출시하면서 우리는 고해상도의 이미지를 제공하여

iphone4 사용자의 만족도를 극대화할수 있습니다.

'web standard > mobile' 카테고리의 다른 글

뷰포트(VIEWPORT)  (0) 2010.11.30
css3 media 쿼리 예시(모바일웹)  (0) 2010.11.30
iphone 메타 태그 관련  (0) 2010.10.26
Web App 개발  (0) 2010.09.07
아이폰 웹 개발을 위한 프레임워크 여러가지 안내  (0) 2010.08.23
Posted by 수라
web standard/mobile2010. 10. 26. 14:19

<meta content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width" name="viewport">


viewport 를 지정하지 않으면 980px가 된다.


user-scalable=no/yes : 사용자가 확대 축소를 허가 할지 안할지를 정한다. 


 initial-scale=1.0 : 기본 확대 배율이다. 이것을 이용하여 살짝 큰 이미지의 기본확대배율을 0.75정도로 조절하여 사용할수있음


maximum-scale=1.0 최대 확대 배율이다. 얼마까지 배율을 증가시킬수 있을껀지 결정한다.

 

 minimum-scale=1.0 : 최소 확대 배율이다. 얼마까지 와이드? 시킬껀지를 결정한다



모바일 웹앱 개발자가 알면좋은 43가지 UX , UI
http://www.uxbooth.com/blog/essential-controls-for-web-applications/

Posted by 수라
travel2010. 10. 13. 23:21

출처 : http://cafe.naver.com/ilovebora/1902

1. 동네은행에서 원화를 달러로 환전한다 (인터넷 뱅킹을 이용하면 더 수수료가 저렴함)

    인천공항 환전소가 수수료가 가장 비싸답니다.(인천공항에서는 페소도 환전가능합니다)

    1달러 10장, 5달러 6장,10달러5장 나머진 100달러 짜리로 환전하세요.

 

2. 마닐라 국제공항에 도착한후 100$~200$ 달러를 페소로 환전한다.

    (잔돈이 거의 없고 대부분 500페소짜리로 환전해줌)

    마닐라 국제공항에는 가게도 없고,소액권으로 바꿀만한 곳이 없습니다.

    준비한 소액권 달러로 쿠폰택시를 타고 국내선공항 또는 호텔로 이동합니다.

    (한밤중에도 마닐라 국제공항 환전소는 문을 열고 있습니다)

 

   국내선공항이나 호텔에서 식음료등을 먹고 500페소를 내고 잔돈을 만듭니다..

   보라에 도착해서 기회가 되는대로 페소잔돈을 만들고, 팁은 페소로 지불하면 됩니다.

   (대략 페소*20 = 원화 / 50페소=1000원 이라고 생각하면 됩니다.)

 

-----------------------------------------------------------------------------

필리핀은 페소라는 화폐단위를 사용합니다.

주로 1,5페소 동전과  20페소, 100페소, 500페소 지폐를 많이 사용합니다.

 

필리핀 화폐사진보기 클릭

=========================  환전에 관한 자주하는 질문들 =========================

 

1. 일반적인 여행경비는 어느정도 필요한가요?

   여행의 형태에 따라 필요한 경비는 달라질 수 있습니다.
   여행사 허니문패키지의 경우 1~2가지의 추가 옵션을 하게되는데 옵션비가 다소 비싸므로
   추가 옵션비로 1인당 300$정도는 예상합니다. (달러로 지불하면됨)
   그리고 잡다한 개인비용으로 10-20만원정도를 페소로 준비하면 됩니다.
   
   알럽보라를 통하여 숙소와 체험거리를 예약하고 결재를 한 경우라면
   식대와 잡비로 커플기준 20-30만원정도 페소로 준비하면 됩니다.

 

   여기에 쇼핑이나 선물등을 하시자면 그 비용을 추가하시면 됩니다.

 

2. 준비한 여행경비중 달러와 페소의 비율은 어떻게 하는게 좋은가요?

   총 경비중 20만원은 페소로, 나머지는 달라로 준비합니다.
   페소는 인천공항에서 환전해도 되고, 달러로 준비했다 마닐라공항에서 페소로 환전하면 됩니다.
   환화를 들고올 경우 환전도 어렵고, 수수료가 비싸므로 꼭 달러나 페소로 준비하세요.

   (한밤중에도 마닐라 국제공항 환전소는 문을 열고 있습니다만 페소를 소액권으로 환전하기 어렵습니다)


 

3. 잔돈이 필요할것 같은데.. 소액권은 어떻게 준비해야 하나요?

   1달러 10장, 5달러 4장,10달러2장 나머진 100달러 짜리로 환전하세요.
   마닐라 국제공항에는 가게도 없고,소액권으로 바꿀만한 곳이 없습니다.
   준비한 소액권 달러로 쿠폰택시를 타고 국내선공항 또는 호텔로 이동합니다.
   국내선공항이나 호텔에서 식음료등을 먹고 500페소를 내고 잔돈을 만듭니다..
   보라에 도착해서 기회가 되는대로 페소잔돈을 만들고, 팁은 페소로 지불하면 됩니다.

 

 

4. 30만원정도를  페소환전시 화폐 종류는 어떻게 하는게 좋나요?

한국에서 30만원을 가지고 다닌다면 구성은 어떻게 하시겠습니까 의 경우와 같습니다.

국내선 공항(=올드도메스틱)에서 환전하실때 종이에 적어서 보여주시면 좋습니다.

15000페소에 해당하는 만큼의 달러를 주면 되겠지요. 정확한 금액은 환율에 따라 달라집니다.

 (1$=45페소라면 15000페소=333$이 됩니다.)

1.000php x   8 => 8.000php

   500php x 10 => 5.000php

   100php x 10 => 1.000php

     50php x 10=>    500php

     20php x 25=>    500php ........total =>15.000php


'travel' 카테고리의 다른 글

보라카이  (0) 2010.10.13
Posted by 수라
travel2010. 10. 13. 23:17

[식사추천]

1. 보라카이 아리아(이태리식당)
http://m.cafe.naver.com/ilovebora/837
- 피자가 정말 맛있다네~ㅋ

2. 보라카이 가스트호프
http://m.cafe.naver.com/ilovebora/1485
- 백립, 칠리크랩

3. 보라카이 마냐냐(멕시칸음식)
http://m.cafe.naver.com/ilovebora/1441
- 타코(대표적인음식,일종의 쌈)
메뉴판 : http://m.cafe.naver.com/ilovebora/3985

'travel' 카테고리의 다른 글

환전에 대해  (0) 2010.10.13
Posted by 수라
web standard/jquery2010. 10. 8. 15:01
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>
<script>
/*
        rolling page by hong..
*/
var leftCt = 0;
    $(function(){
        $("#album").attr("top", "0");
        imgStart("R");
    });
    function imgStart(tp){
        clearInterval($("#imgList").attr("timer"));
        if(tp == "R"){ // 오른쪽 이동
            imgRight();
            $("#imgList").attr("timer", setInterval("imgRight()", 3000)); // 멈춰있는 시간
        }else{ // 왼쪽이동
            if(leftCt == 0){
                var leng = $("#imgList div").size();
                $("#imgList").css("left",parseInt($("#imgList div").eq(0).width()*-1));
                $("#imgList>div").eq(parseInt(leng-1)).clone().prependTo($("#imgList"));
                $("#imgList>div").eq(leng).remove();
                leftCt = 1;
            }
            imgLeft();
            $("#imgList").attr("timer", setInterval("imgLeft()", 3000));
        }
    }
    function imgRight(){
        $("#imgList").animate({
            left : parseInt($("#imgList div").eq(0).width() * -1)
        },300,function(){
            $("#imgList").css("left", "0px");
            $("#imgList>div").eq(0).clone().appendTo($("#imgList"));
            $("#imgList>div").eq(0).remove();
        });
    }
    function imgLeft(){
        var leng = $("#imgList div").size();
        $("#imgList").animate({
            left : 0
        },300,function(){
            $("#imgList").css("left", "0px");
            $("#imgList").css("left",parseInt($("#imgList div").eq(0).width()*-1));
            $("#imgList>div").eq(parseInt(leng-1)).clone().prependTo($("#imgList"));
            $("#imgList>div").eq(leng).remove();
        });
    }
</script>
<style>
/*
    이미지 사이즈 맞춰서 수정해주세요... (#viewArea)
*/
#viewArea {position:relative; width:108px; height:78px;overflow:hidden;}
#imgList {position:absolute; width:2000px; left:0px; top:0px;}
#imgList div {float:left; margin:0px; padding:0px;}
</style>
<div id="viewArea">
    <div id="imgList">
        <div><img src='http://icon.daum-img.net/top/cms/news/2010/03/nano15306019099820072.jpeg'></div>
        <div><img src='http://icon.daum-img.net/top/cms/news/2010/03/nano15302571111964072.jpg'></div>
        <div><img src='http://icon.daum-img.net/top/cms/news/2010/03/nano15304347571481072.jpeg'></div>
    </div>
</div>
<div>
    <span onClick="imgStart('L')"><</span>&nbsp&nbsp<span onClick="imgStart('R')">></span>
</div>

'web standard > jquery' 카테고리의 다른 글

가로&세로 슬라이드  (0) 2011.04.04
jquery 예제모음  (0) 2011.03.22
베너 슬라이드&버튼이동  (0) 2011.02.22
[jquery]네임태그이동  (0) 2011.02.22
jquery를 이용한 온오프  (0) 2010.11.23
Posted by 수라
it/etc2010. 9. 16. 17:19
http://acid3.acidtests.org/

해당브라우져에서 위 url로 들어가면 테스트후 점수를 알 수 있다.

참고로 IE8은 20점에서 FAIL뜨면서 멈추고, 파폭3는 94점 오페라,크롬,사파리는 100점이다.

이번에 공개된 IE9는 95점이 나온다고 한다.

'it > etc' 카테고리의 다른 글

IE9 beta1 공개  (0) 2010.09.16
Posted by 수라
it/etc2010. 9. 16. 17:14

한국시간으로 9월16일 새벽 ‘인터넷 익스플로러9 베타1′이 정식 공개됐다. 쉽고, 빠르고, 편리하고, 안전한 웹 경험을 제공한다는 마이크로소프트(MS) 최신 웹브라우저다. 공개된 지 만 하루가 안 지났음에도, 곳곳에서 찬사가 들린다. 새 IE9의 변화에 대한 기대감이 엿보인다. 왜 아니겠는가.

MS 조사에 따르면, PC를 쓰는 시간 가운데 절반이 넘는 57%가 웹브라우징에 쓰인다고 한다. 한국 인터넷 이용자 100명 가운데 96명은 IE로 웹을 즐긴다. 이 IE 이용자 10명 가운데 4명은 아직도 IE6를 쓴다. 태어난 지 10년도 더 된 낡은 웹브라우저로 웹을 소비하다보면 곳곳에서 구멍이 뚫리게 마련이다. 발전하는 기술을 제대로 담아내기도 버거울 뿐더러 보안 빗장도 느슨한 탓이다.

그러니 새 IE9를 보노라면 격세지감을 느끼게 된다. 무엇보다 웹표준을 적극 지원하려는 노력이 눈에 띈다. IE9는 차세대 웹표준인 HTML5나 CSS3을 온전히 지원하는 웹브라우저다. 10여년 전만 해도 어땠나. 액티브X 같은 자체 기술이나 비표준 태그로 도배된 웹사이트를 돌아다니며 별다른 불편함을 느끼지 못했다. 그저 IE에서 잘 보이면 그 뿐이었다. 다양한 웹브라우저에서 똑같은 웹 경험을 제공해야 한다는 당연한 사실은 무시됐다.

‘웹표준’이란 개념을 국내에서 인식하게 된 것도 불과 5년 남짓. 그 전까지 ‘가두리 웹’ 주범으로 손꼽히던 MS IE가 이젠 웹표준 지원을 핵심 기치로 내건다. 격세지감을 느끼되, 반가운 일이다.

MS는 2009년 3월 IE8을 내놓을 때부터 웹표준 지원 의지를 공공연히 드러냈다. IE8은 W3C 웹표준 준수 테스트인 ACID2를 통과한 MS 첫 웹브라우저였다. IE9는 더욱 표준에 가깝게 다가섰다. HTML5와 CSS3, SVG와 DOM에 대한 지원을 강화했고 ACID3 테스트에서도 100점 만점에 95점을 받았다.

웹표준을 따르게 되면 개발자는 여러 웹브라우저 환경에 맞게 일일이 따로 웹사이트나 콘텐츠를 개발할 필요가 없다. 한 번 개발하면 서로 다른 OS나 웹브라우저, 다른 기기에서 똑같은 이용자 경험을 제공할 수 있기 때문이다. 이용자도 플러그인을 따로 설치할 필요 없이 웹브라우저 그 자체로 풍부한 웹 콘텐츠 경험을 즐길 수 있게 된다. 누이 좋고 매부 좋은 일이다.

“현재 웹이 아닌, 미래 웹 환경을 담을 수 있어야 개발자와 이용자를 모두 만족시킬 수 있다고 판단하고 그런 웹브라우저를 만들려고 고민하고 주력했다”고 정근욱 한국MS 상무는 IE9 기획 의도를 설명했다.

이 밖에도 IE9에선 크고 작은 변화들이 여럿 보인다. 무엇이 바뀌었을까.

먼저, 이용자 화면(UI)부터 보자. IE9는 매우 단순한 UI를 채택했다. 그 흔한 메뉴 바도 없다. 창 윗쪽엔 검색창과 앞·뒤 버튼, 탭 영역이 자리잡고 있고, 기존 메뉴 바 대신 ‘홈’, ‘즐겨찾기’, ‘설정’ 아이콘만 화면 오른쪽 위에 배치했다. 꼭 필요한 명령 메뉴만 드러내는 대신 웹사이트가 부각되도록 디자인한 모양새다. 플러그인을 설치하거나 각종 경고를 내보내는 알림창도 웹브라우저 화면 아랫쪽에 뜨도록 바꿨다. 화면을 가리거나 웹브라우징 경험을 방해받지 않도록 한 배려다.

화면 윗쪽에 따로 배치돼 있던 검색창은 주소창과 통합됐다. 주소창에서 웹사이트 주소 대신 검색어를 넣으면 미리 지정해둔 기본 검색엔진의 검색 결과로 바로 이동할 수 있다. 굳이 검색 결과 화면으로 이동하지 않아도 미리보기 형태로 곧바로 확인할 수도 있다. IE8부터 제공하던 ‘비주얼 서치’ 기능이 IE9에도 그대로 들어가 있는 덕분이다.

속도도 빨라졌다. IE9는 IE8보다 11배 빠른 새로운 자바스크립트 엔진을 적용했다. PC의 GPU 기능을 활용하는 하드웨어 가속 기능을 제공해 비디오 스트리밍이나 온라인게임처럼 대용량 그래픽 작업이 필요할 때도 PC 하드웨어 자원을 100% 활용할 수 있게 했다.

웹을 돌아다니다보면 자신도 모르게 깔리는 각종 플러그인들은 PC와 웹브라우저를 느리게 만드는 주범 가운데 하나다. IE9에선 이를 막고자 ‘추가기능(Add-on) 성능 관리자’ 기능을 제공한다. 만약 이용자가 툴바 같은 추가기능을 설치했다면 웹브라우저 하단에 경고 메시지가 뜨고, 이를 누르면 해당 추가기능이 어느 정도 웹브라우징 시간을 지연시키는 지 확인할 수 있도록 했다. 이용자는 이를 보고 추가기능 사용 여부를 조절하면서 웹브라우징 속도를 빠른 상태로 유지할 수 있게 된다.

윈도우7 이용자라면 IE9를 보다 쉽고 편리하게 쓸 수 있다. 윈도우7 주요 기능과 유기적으로 결합된 기능들이 여럿 덧붙었기 때문이다. 예컨대 즐겨찾는 웹사이트를 마우스로 끌어다 작업표시줄에 고정해두면 편리하다. 작업표시줄 아이콘만 누르면 곧바로 해당 웹사이트를 띄워 쓸 수 있으며, 웹브라우저 앞·뒤 버튼도 그 웹사이트 색상에 맞춰 바뀐다. 이렇게 작업표시줄에 고정된 웹사이트는 윈도우7 ‘점프목록’ 기능을 이용해 웹사이트 미리보기, 추가 명령어 실행 등을 할 수 있다. 고정된 웹사이트 목록을 마우스로 누른 채로 위로 드래그하면 추가 명령어 목록이 뜬다.

‘탭 분리’ 기능도 윈도우7 기본 기능을 활용한 사례다. 탭 브라우징을 하다 보면 서로 다른 두 개 화면을 나란히 놓고 비교하고플 때가 있다. 이 때 각 탭을 번갈아 오가는 대신, 탭을 마우스로 끌어다 모니터 왼쪽·오른쪽에 붙여보자. 두 개 화면을 나란히 보면서 비교할 수 있다. 윈도우7의 ‘에어로 스냅’ 기능을 IE9 탭 분리 기능과 접목한 셈이다.

보안도 더욱 강화됐다. IE9는 멀웨어 차단 비율을 85%로 높이고 1억6천만건에 이르는 피싱 사이트 데이터베이스를 제공한다. ‘다운로드 매니저’ 기능도 보안을 강화했다. 잘 알려지지 않았거나 문제가 있는 파일을 내려받으면 경고 메시지와 더불어 해당 프로그램을 내려받을 지 삭제할 지 여부를 묻는 창이 따로 뜬다. 의심되는 파일을 한두 단계 더 거쳐 내려받도록 함으로써 보안 위협을 줄인 모양새다.

IE9 베타1은 한국어를 포함해 33개 언어로 제공된다. MS는 IE9 베타1 출시에 발맞춰 이용자가 직접 성능을 체험해볼 수 있는 테스트 페이지를 제공한다. IE9 베타1을 설치하고 테스트 페이지에 접속하면 빨라진 속도나 웹표준 지원 여부를 직접 확인할 수 있다.

이번에 공개된 IE9는 베타1 버전이다. 국내 금융서비스 이용시 아직까지 호환성이 완벽히 확보된 제품이 아니란 뜻이다. 이석현 한국MS 부장은 “내부 테스트 결과로는 전체 웹사이트의 70% 정도는 현재 IE9 베타에서도 이용하는 데 문제 없으며, 시중은행 웹사이트도 절반 정도는 현재 상태로도 이용하는 데 아무 문제가 없는 것으로 파악됐다”라며 “120여곳 금융권 웹사이트를 대상으로 조사를 진행하고 있으며, 정식 버전 출시 때는 문제 없도록 최대한 지원할 예정”이라고 말했다.

IE9는 윈도우 비스타 이상 OS에서 이용할 수 있다. 정식 버전은 내년 봄께 선보일 예정이다.

정근욱 상무는 “앞으로의 웹은 아름답고, 풍부하고, 빠르고, 직관적이고, 안전한 웹으로 탈바꿈할 것”이라며 “한국 이용자가 웹의 아름다움을 충분히 만끽할 수 있도록 IE9 정식버전이 출시될 때까지 최선의 노력을 다하겠다”고 말했다.

'it > etc' 카테고리의 다른 글

ACID3 테스트  (0) 2010.09.16
Posted by 수라