안드로이드 크롬 브라우저 디버깅

안드로이드 웹개발 시 안드로이드 크롬 페이지를 PC에 설치되어 있는 크롬으로 디버깅하는 것은 잘 알려진 기술이다.

https://developer.chrome.com/devtools/docs/remote-debugging

하지만, 이 디버깅이 때때로 먹통이 될 때가 있는데, 이 때는 아래와 같은 방법으로 처리하면 간단하다.

  1. Download the Android SDK
  2. Locate ADB.exe, found in the platform-tools folder.
  3. Open the file using command prompt

    cd c:\path\to\platform-tools\adb.exe

  4. Make sure your phone is disconnected from USB
  5. Type the following commands

    adb devices

    adb kill-server

    adb start-server

  6. Reconnect your phone, authorise your PC and enjoy the USB debugging
  • stack overflow에서 발췌

안드로이드 브라우저 구분하기

가급적 브라우저를 구분하는 핵은 쓰지 않는 게 좋다.

모든 브라우저에 호환될 수 있는 코드를 엄격하게 사용하는 것이 향후 브라우저 업데이트에서 발생하는 문제를 줄일 수 있는 수단이다.

하지만, ‘인터넷’이라고 알려진 안드로이드 stock브라우저에 대응하려다 보면 부득이하게 이 브라우저를 구별해 낼 필요가 생기곤 한다.

그럴 때 아래와 같은 코드로 쉽게 구별해 낼 수 있다.

var nua = navigator.userAgent;
var is_android = (nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1);

이미 크롬이 안드로이드의 기본 브라우저로 사용되고 있지만, 크롬이 아닌 다른 브라우저를 모두 찾아내는 방법은 아래와 같다.

var nua = navigator.userAgent;
var is_android = ((nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1) && !(nua.indexOf('Chrome') > -1));

대소문자 구분을 방지하려면 아래와 같이 사용하면 된다.

var nua = navigator.userAgent.toLowerCase();
var is_android = ((nua.indexOf('mozilla/5.0') > -1 && nua.indexOf('android ') > -1 && nua.indexOf('applewebkit') > -1) && !(nua.indexOf('chrome') > -1));

[웹접근성]아코디언 위젯의 웹접근성 고려

주제와 텍스트가 광범위하게 많을때, 각 주제마다 접었다 폈다를 반복하는 아코디언 위젯을 쓰곤 한다.
하지만, 이런 방식의 메뉴는 흔히 jquery에서 css(‘display’,’none’)이나 show()/hide(), 또는 slideUp()/slideDown()을 써서 작업한다.
하지만, 이러한 방식은 display:none 속성을 근본으로 한다. display:none은 많은 스크린리더 보조기구가 의도적으로 무시하게 설계돼, 접근성 문제를 일으킨다.

접근성을 고려한 아코디언 위젯 제작에 대해 잘 정리된 글이라 자료 삼아 남겨둔다.

아래 링크 참조
http://tranbot.net/ALA/now-you-see-me/

[Responsible web] 반응형 웹에서 Image Sprite 사용하기

Image Sprite 기능은 이미지 서버 요청 횟수를 줄임으로써, 사이트 성능을 높이는 데 유용하다.

현재는 대부분의 웹에 이  Image Sprite를 쓰고 있다. 하지만, 반응형 웹처럼 이미지의 크기가 유동적으로 변하는 웹사이트에서

Image Sprite를 쓰는 건 상당히 난감해 보인다. 물론, 수십 개의 아이콘을 죽 늘어놓고 쓰기에는 사실 난감하기도 하다.

 

이미지 스프라이트

Image Sprite는 아래와 같은 방식으로 작동한다.

.imageSprite {
    background-image: url(images/sprite.png);
    background-position: -50px -200px;
}

문제는, px 단위는 반응형 웹에 쓸 수 없다. 반응형 웹은 %로 환산해야 한다.

하지만, 이미지의 크기를 유동적으로 변화시키는 상황에서 이 %를 어떻게 구할 것인가?

만약, 위와 같은 이미지를 반응형 웹에서 Image Sprite로 쓰려면 너무 복잡해져 버려서 그만 Image Sprite와 같은 유용한 기능을 포기하게 될 것이다.

하지만, 아래와 같은 방법을 쓴다면 조금 단순한  Image Sprite를 활용하면서 멋진 반응형 웹사이트를 만들 수 있다.

아래는 필자가 최근에 작업한 사이트의 한 부분이다.

네비게이션 반응형 웹 예시도

위 이미지의 네비게이션 부분을 Image Sprite로 작업해보자.

먼저, 아래와 같은 이미지를 준비한다.

헤더 예시

그리고, html 부분이 아래와 같이 구성되었다면,

<header id="header">
    <nav>
       <ul class="navigation">
         <li class="st1"><a href="#mobile1" class="selected">Act0를 선점하라!</a></li>
         <li class="st2"><a href="#step2">파이터들을 만나라!</a></li>
         <li class="st4"><a href="#step4">Act0을 알려라!</a></li>
         <li class="st5"><a href="#step5">파티원을 모집하라!</a></li>
         <li class="st3"><a href="#step3">레바 SPECIAL WEBTOON</a></li>
      </ul>
   </nav>
 </header>

 

#header nav li a {
    width: 100%;height: 100%; 
    background: url(images/m_bg_header_off.png) 0 0 no-repeat; 
    -webkit-background-size: 500% 200%; background-size: 500% 200%;
}
#header nav li.st1 a {background-position: 0 0;}
#header nav li.st2 a {background-position: 25% 0;}
#header nav li.st3 a {background-position: 50% 0;}
#header nav li.st4 a {background-position: 75% 0;}
#header nav li.st5 a {background-position: 100% 0;}
#header nav li.st1 a.selected {background-position: 0 100%;}
#header nav li.st2 a.selected {background-position: 25% 100%;}
#header nav li.st3 a.selected {background-position: 50% 100%;}
#header nav li.st4 a.selected {background-position: 75% 100%;}
#header nav li.st5 a.selected {background-position: 100% 100%;}

css 구성은 위와 같다.
먼저, background-size는 아래와 같다.

-webkit-background-size: 500% 200%;

background-size: 500% 200%;

가로로는 이미지 조각이 총 5개이므로, backround의 가로 사이즈는 500%,
세로로는 이미지 조각이 총 2개이므로, backround의 세로 사이즈는 200% 가 된다.

그리고, 각 메뉴별 background-position은 아래의 간단한 공식에 대입만 하면 된다.

background-size: 100/(가로 이미지 조각 개수 -1)+’%’ 100%/(세로 이미지 조각 개수 -1)+’%’

와 같다. 위의 네비게이션에서 두 번째 메뉴인 ‘파이터들을 만나라’ 부분의 backgorund-position은

100/(5-1)+’%’ 100/(2-1)+’%’ 곧,

#header nav li.st2 a {background-position: 25% 0;}

와 같다. 간단하지 않은가?
필자의 설명이 부실하다면 아래 사이트를 참고 바란다.
 

 

참고 사이트

http://blog.brianjohnsondesign.com/responsive-background-image-sprites-css-tutorial/

[Responsible web] 반응형 웹에서 이미지 맵 구현하기

반응형 웹은 이미 광범위하게 사용되고 있다.

하지만, 반응형 웹에서는 까다로운 몇가지 문제들이 있는데, 그 중 하나가 불가피하게 이미지맵(ImageMap)을 사용하게 될 경우다.

여간해서는 이미지맵을 사용하지 않는 필자로서도 피해갈 수 없는 경우가 종종 생기는데, 반응형 웹에서의 이미지맵을 구현하는 훌륭한 경우가 있다. 아래 링크 참조.

https://github.com/stowball/jQuery-rwdImageMaps