반응형 스킨, 웹에 창 크기에 따라 변하는 반응형 유튜브 넣기

   고해상도의 대형 모니터나 다양한 화면 크기의 스마트폰이 배급되면서 사용자의 웹사이트/블로그 사용 환경이 과거보다 훨씬 다채로워졌습니다. 이에 웹 개발자들은 창의 크기에 따라 레이아웃이 자동으로 반응해 변하도록 반응형 레이아웃/스킨을 개발해 방문자의 기기에 맞는 최적화된 서비스를 제공할 수 있도록 노력하고 있습니다.

   이에 발맞춰 웹사이트나 블로그를 운영하는 관리자/블로거 역시 방문자에게 최적의 사용 환경을 제공할 수 있도록 이와 관련된 새로운 뉴스나 지식 공부에 힘써야 합니다. 만약 이를 게을리한다면 당장엔 별문제가 없는 것처럼 보이겠지만, 시간이 지날수록 타 사이트/블로그보다 올드한 느낌에 관리하지 않는 곳이라는 생각을 갖게 할 가능성이 크고 무엇보다도 이용하는 데 불편해 자주 찾지 않는 곳이 되어버릴 가능성이 있습니다.

   반응형 스킨이나 레이아웃을 사용하고 있을 때 기본 공유 코드로 유튜브 동영상을 삽입하면 창의 크기가 변함에 따라 영상의 양 끝이 잘리거나 사이드바까지 영상이 넘어가 버리는 등 레이아웃을 해치는 현상이 발생합니다. 어느 정도 코딩 경험이 있는 사람이라면 'width: 100%'이 가장 먼저 떠오르겠지만, 'height: auto;'를 적용할 경우 동영상의 높이가 비이상적으로 작아지는 현상이 나타납니다. 이 경우 높이에 고정값을 대입하면 해결할 수는 있지만, 가장 작은 값의 가로 길이와 가장 큰 값의 가로 길이를 가정한 뒤 모두 충족할만한 값으로 높이를 설정해야 하므로 뭔가 2% 부족한 느낌이 듭니다.

   만약 html만 수정할 수 있는 권한이 있다면 유튜브 동영상 삽입 코드에서 가로와 세로(높이) 길이를 'width: 100%', 'height: 300px;'로 수정하는 방법을 사용하는 것이 가장 최선이겠지만, CSS도 수정할 수 있는 권한을 가지고 있다면, 몇 가지 코드를 추가해 창 크기에 따라 최적의 크기로 변하는 반응형 유튜브 동영상을 삽입할 수 있습니다.

1. CSS 편집 창에 아래 코드를 추가한 뒤 저장합니다.

'youtubeResize'는 사용 환경에 맞게 수정 가능합니다. 

/* 창 크기에 따라 최적화되는 유튜브 CSS 코드 시작 */
.youtubeResize {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
}
.youtubeResize iframe {
  position: absolute;
  width: 100%;
  height: 100%;
}
/* 창 크기에 따라 최적화되는 유튜브 CSS 코드 끝 */

2. 위 사진처럼 <div class="youtubeResize"> ... </div> 코드를 이용해 유튜브를 삽입할 때 CSS에 추가했던 코드로 감싸줍니다.

만약 CSS에 코드를 추가할 때 'youtubeResize'를 수정했다면 이곳에도 수정한 것과 같은 'class id'를 입력해주어야 합니다.

3. '미리 보기' 모드에서 창의 크기를 변경해보며 변하는 창 크기에 따라 유튜브 동영상의 크기도 변하는지 실험해보았습니다.

모든 창 크기에서 유튜브가 최적의 크기로 반응해 자동으로 변하는 것을 확인할 수 있습니다.

---

 "반응형 스킨, 웹에 창 크기에 따라 변하는 반응형 유튜브 넣기" 포스팅을 마치며

- 모뎀을 사용하던 시절부터 컴퓨터를 쓰기 시작했는데, 그때는 지금과 같은 컴퓨터 환경은 상상도 못 했습니다. 인터넷이 보편화 되면서 관련 산업의 발전 속도가 따라잡을 수 없을 정도로 빨라진 요즘은 따로 시간을 내 공부하지 않으면 트렌드에 뒤처져 버리기에 십상입니다.

   특히 사용자의 편리성에 초점을 맞춘 개발이 이루어지다 보니 과거에는 사용자의 반응이 '이런 기능도 있었으면 좋겠다.'하고 그치던 데에 비해 지금은 '이런 기능 좀 추가해 주세요.'하고 요구하는 상황이 되었습니다.

   이번에 포스팅한 '반응형 유튜브 삽입'도 불과 몇 년 전만 해도 사용자가 불편을 겪으면 '원래 그런 것이다.' 혹은 '네가 사용하는 기기가 문제다.'라는 반응이 먼저였지만, 이제는 그 책임이 관리자/블로거에게로 돌아가게 되었습니다.

   그러므로 계속해서 웹사이트/블로그를 운영하고 더불어 방문자도 꾸준히 유치하기 위해선 변하는 트렌드에 관심을 두고 배울 점이 있다면 공부하는 자세가 필요할 것입니다.