최근 제작되는 웹페이지들은 대부분 반응형 웹 기반으로 제작되고 있다. 반응형 웹이란... "이용자의 디스플레이 크기에 따라 보여지는 화면의 크기도 자동으로 최적화 되도록 조절되는 웹페이지" 를 말하는 것으로써, 기존의 웹 이용 환경의 기반이 절대적인 PC 위주의 환경이었던 것에 반해 최근에는 모바일 환경의 비중도 가파르게 높아지고 있기 때문에 이러한 현상은 더욱 가속화될 것으로 보인다.

이러한 이유로 각종 서비스 (네이버, 티스토리 등..) / 설치형 (텍스트큐브, 워드프레스 등...)  블로그에서도 반응형 스킨을 이용 함으로써 이용자 (특히 모바일) 의 편의성을 높이고 있으며, 지금 이 순간에도 수많은 반응형 스킨이 제작되며 공유 되고 있다.

하지만 반응형 스킨의 대부분은 작성된 글 내 이미지의 크기를 화면에 맞추어 자동으로 리사이징 해주고 있어 큰 문제가 없어보이나, 유튜브 소스 코드 등을 통해 삽입된 동영상의 경우는 그렇지가 않아 일부환경 (특히 상대적으로 화면 해상도가 낮은 모바일 환경) 에서는 힘들게 구축해놓은 반응형 웹환경이 무색하게 되는 경우가 종종 있다. (아래의 그림 참조)


이를 해결하기 위한 단순하고 가장 간단한 방법은 바로 영상의 소스 코드를 다음과 같이 약간 수정하는 것이다.


참고로 당연하다면 당연하지만, 위의 팁은 유튜브 소스 코드뿐만 아니라 Synology NAS 의 포토 스테이션에서 제공하는 JW Player 기반 소스 코드에도 잘 적용된다.

* 모바일 웹페이지  테스트 서비스 : 다음 트로이 (링크)

다양한 해상도의 모바일 기기에서 보여지는 화면을 테스트 해 볼수 있다.

다양한 해상도의 모바일 기기에서 보여지는 화면을 테스트 해 볼수 있다.

http://lycons.iptime.org/tc/trackback/175

건전한 댓글 문화를 만들어 주시길 바랍니다.
적절치 못하거나, 불건전한 댓글이 등록되는 경우 관리자의 임의적 판단으로 삭제될 수 있습니다.

비밀글로 등록하기
  1. 2015/04/24 20:17
    이렇게 스킨이 적용된 모습을 보니 신기합니다. ^^ ;;
    제 블로그에서만 사용하던 건데.. ㅎㅎ

    이 스킨에서는 아무 객체에나 class="resizablebox"를 추가하면, 자동으로 반응형 객체가 됩니다.
    한 번 참고해보세요~
    • 홀맨
      홀맨
      2015/04/25 12:39
      스킨 제작자께서 직접 방문까지 해주시다니... 오히려 영광 입니다. ^^; 점차 늘어가는 스킨 사용자를 보시면서 흐믓함과 보람을 느끼시지 않으실까 싶습니다. 감사히 잘 사용하겠습니다.

      최고의 팁도 감사 드립니다. 현재 몇개의 개시물에 테스트를 해 보았으며, 잘 작동함을 확인하였습니다. 정말 심미적인 면은 물론, 편의/기능성 면에서도 너무나 우수한 스킨인 듯 싶습니다.

      혹, Walter.E 님의 블로그를 허접한 제 블로그의 우측 사이드바 링크 목록에 추가하고자 하는데 가능 할려지는지요? 허가 하신다면 꼭 추가하고 싶습니다.
    • 2015/04/25 12:47
      사이드바에 추가해주신다면 오히려 제가 감사하겠습니다. ^^
    • 홀맨
      홀맨
      2015/04/25 21:42
      추가 하였습니다. 알찬 정보 얻으러 종종 방문 하겠습니다. ^^;
1 ... 2 3 4 5 6 7 8 9 10 ... 172
도전하지 않는 자에게 언젠가 라는 날은 없다.
- 홀맨