설치형 블로그나 홈페이지 제작을 하시면서 웹표준을 얼마나 지키시나요?
스킨을 제작할 때, 자신이 사용하고 있는 브라우저만 테스트하고 있지는 않나요?
가령 자신이 Internet Explorer 8을 사용하고 있다고 하여 IE6, IE7, 파이어폭스(firefox), 크롬(chrome), 사파리(safari) 사용자들을 염두에 두지 않을 수는 없습니다. 손쉽게 여러 브라우저를 테스트할 수 있는 도구가 여기 있습니다. 어도브 브라우저랩(Adobe browserlab)을 소개합니다.
스킨을 제작할 때, 자신이 사용하고 있는 브라우저만 테스트하고 있지는 않나요?
가령 자신이 Internet Explorer 8을 사용하고 있다고 하여 IE6, IE7, 파이어폭스(firefox), 크롬(chrome), 사파리(safari) 사용자들을 염두에 두지 않을 수는 없습니다. 손쉽게 여러 브라우저를 테스트할 수 있는 도구가 여기 있습니다. 어도브 브라우저랩(Adobe browserlab)을 소개합니다.
브라우저 테스트 (Browser Test) 왜 필요한가?
브라우저 테스트는 웹개발자들에게는 필수적인 코스입니다. 가령 웹 상에서 많이 사용되고 있는 IE8에만 초점을 맞추어 블로그나 홈페이지를 제작하였다고 하더라도, 아직까지도 IE6에서 벗어나지 않은 많은 분들을 배제할 수는 없는 노릇입니다.
아직까지는 전세계적으로 윈도우의 IE 브라우저를 사용하는 사용자들이 많지만, 꾸준히 파폭이나 크롬, 애플 사용자가 늘면서 사파리 브라우져 사용자가 증가하는 추세입니다. 이러한 추세에 맞추어, 내 블로그를 다른 종류의 브라우저에서 같은 모습과 같은 동작으로 제공했으면 하는 부분이 웹 표준을 지키고자 하는 개발자들의 바람일 겁니다.
저같은 경우에는 취미삼아 HTML과 CSS를 공부하여 블로그 스킨을 제작했는데요. 수많은 시행착오를 거쳐서 조금씩 깨달았고 현재도 알아가고 있는 중입니다. 하지만, 블로그 스킨을 짜던 초창기에 제가 염두에 두지 못했던게 있었습니다. 바로 이 포스트에서 거론하고 있는 브라우저 테스트와 관련된 문제입니다.
초창기 블로그의 스킨을 수정하고 있던 당시에 발생했던 문제입니다. 저는 IE8에서 작업했기 때문에, 다른 브라우저에서 내 블로그가 이렇게 보인다고는 생각지도 못했습니다. 어느날 친구의 PC를 통해 내 블로그가 이렇게 나온다는 것을 알게 되어 크게 충격받았었죠. 그 때 당시에는 웹표준이 무엇인지, 브라우저간의 호환이 무엇인지 전혀 신경도 안쓰고 있었던게 문제였습니다.
IE6뿐 아니라 다른 브라우저에서도 상당히 깨진다는 것을 알게되고 난 후, 스킨 제작을 처음부터 다시 하게 되었습니다. 브라우저 테스트의 중요성을 몸소 각인시키게 된 계기였죠. 지금도 완벽하게 웹표준을 지키지는 못했지만 조금씩 수정해가고는 있습니다.
브라우저 테스트 도구로서, 많은 사이트와 도구들을 사용해보았습니다. 제 개인적인 소견으로는 그 중에서 가장 매치가 잘되고 사용하기 쉬운 도구가 바로 어도브 브라우저랩(Adobe BrowserLab)입니다.
어도브 브라우저랩에서는 자신이 제작하고 있는 블로그나 홈페이지등 페이지의 모습을 여러 브라우저에서의 화면을 캡쳐하여 하나의 페이지에서 보여주는 서비스입니다.
다시 말하면, 이 서비스는 유명 브라우저 버전 테스트 하고 있는 페이지의 모습을 스크린 샷으로 찍어주고 각각의 스크린 샷을 겹쳐보기 기능으로 레이아웃과 디자인을 비교해 주는 기능을 가지고 있습니다.
많은 브라우저 테스트 도구들이 있지만, 특히 어도브 브라우저랩에서는 유명한 브라우저들을 간추려서 사용에 용이하며, 겹쳐보기 기능으로 인하여 차이점을 명확하게 비교할 수 있습니다. 무엇보다 테스트 결과를 짧은 시간 안에 보여준다는 장점이 있습니다.
- https://browserlab.adobe.com/ 에 접속합니다.
- 서비스를 사용하기 위해서는 Adobe 사의 ID와 비밀번호가 필요합니다.
- 아이디가 없으신 분은 가입하시고, 로그인 합니다.
- 상단 왼쪽을 보시면, 위와 같은 메뉴가 있습니다. Browser Sets 를 클릭합니다.
- View 를 클릭하면 1 up view, 2 up view, onion skin 세 종류가 있습니다.
- 1up view는 한 화면에 하나의 브라우저를 보여줍니다.
- 2up view는 위 그림과 같이 한 화면에 두개의 브라우저를 보여줍니다.
- View 기능 중에 onion skin 을 클릭하시면 두 종류의 브라우저를 겹쳐볼 수 있습니다.
- 제 블로그의 경우, 사파리와 IE8 간에 차이가 조금 존재하군요.
- 가운데에 있는 슬라이드 바는 각 브라우저의 투명도(%) 를 나타냅니다.
아직까지는 전세계적으로 윈도우의 IE 브라우저를 사용하는 사용자들이 많지만, 꾸준히 파폭이나 크롬, 애플 사용자가 늘면서 사파리 브라우져 사용자가 증가하는 추세입니다. 이러한 추세에 맞추어, 내 블로그를 다른 종류의 브라우저에서 같은 모습과 같은 동작으로 제공했으면 하는 부분이 웹 표준을 지키고자 하는 개발자들의 바람일 겁니다.
저같은 경우에는 취미삼아 HTML과 CSS를 공부하여 블로그 스킨을 제작했는데요. 수많은 시행착오를 거쳐서 조금씩 깨달았고 현재도 알아가고 있는 중입니다. 하지만, 블로그 스킨을 짜던 초창기에 제가 염두에 두지 못했던게 있었습니다. 바로 이 포스트에서 거론하고 있는 브라우저 테스트와 관련된 문제입니다.
| 같은 블로그를 Explorer 6 에서 실행한 화면 |
 |
| 같은 블로그를 Explorer 8 에서 실행한 화면 |
 |
초창기 블로그의 스킨을 수정하고 있던 당시에 발생했던 문제입니다. 저는 IE8에서 작업했기 때문에, 다른 브라우저에서 내 블로그가 이렇게 보인다고는 생각지도 못했습니다. 어느날 친구의 PC를 통해 내 블로그가 이렇게 나온다는 것을 알게 되어 크게 충격받았었죠. 그 때 당시에는 웹표준이 무엇인지, 브라우저간의 호환이 무엇인지 전혀 신경도 안쓰고 있었던게 문제였습니다.
IE6뿐 아니라 다른 브라우저에서도 상당히 깨진다는 것을 알게되고 난 후, 스킨 제작을 처음부터 다시 하게 되었습니다. 브라우저 테스트의 중요성을 몸소 각인시키게 된 계기였죠. 지금도 완벽하게 웹표준을 지키지는 못했지만 조금씩 수정해가고는 있습니다.
브라우저 테스트 도구로서, 많은 사이트와 도구들을 사용해보았습니다. 제 개인적인 소견으로는 그 중에서 가장 매치가 잘되고 사용하기 쉬운 도구가 바로 어도브 브라우저랩(Adobe BrowserLab)입니다.
어도브 브라우저랩 (ADOBE BrowserLab) 이란?
어도브 브라우저랩 사이트
어도브 브라우저랩에서는 자신이 제작하고 있는 블로그나 홈페이지등 페이지의 모습을 여러 브라우저에서의 화면을 캡쳐하여 하나의 페이지에서 보여주는 서비스입니다.
다시 말하면, 이 서비스는 유명 브라우저 버전 테스트 하고 있는 페이지의 모습을 스크린 샷으로 찍어주고 각각의 스크린 샷을 겹쳐보기 기능으로 레이아웃과 디자인을 비교해 주는 기능을 가지고 있습니다.
많은 브라우저 테스트 도구들이 있지만, 특히 어도브 브라우저랩에서는 유명한 브라우저들을 간추려서 사용에 용이하며, 겹쳐보기 기능으로 인하여 차이점을 명확하게 비교할 수 있습니다. 무엇보다 테스트 결과를 짧은 시간 안에 보여준다는 장점이 있습니다.
그렇다면 어떻게 사용하나?
앞서 말씀드렸다시피, 어도브 브라우저랩은 홈페이지나 블로그의 페이지 모습을 여러 브라우저에서의 화면을 캡쳐하여 하나의 페이지에서 보여주는 서비스입니다. 그렇다면 이제부터는 이러한 어도브 브라우저랩을 어떻게 가입하고, 어떤 기능이 있는지 차근차근 알아보도록 하겠습니다.
| 사이트 가입하기 |
- https://browserlab.adobe.com/ 에 접속합니다.
- 서비스를 사용하기 위해서는 Adobe 사의 ID와 비밀번호가 필요합니다.
- 아이디가 없으신 분은 가입하시고, 로그인 합니다.
| 비교하고 싶은 브라우저 세팅하기 |
- 상단 왼쪽을 보시면, 위와 같은 메뉴가 있습니다. Browser Sets 를 클릭합니다.
- Add New Browser Set 버튼을 클릭하여 새로운 사용자 환경을 만듭니다.
- 자신이 테스팅하고자 하는 브라우저를 선택합니다.
- 테스팅할 브라우저의 우선순위를 정합니다.
- 자신이 테스팅하고자 하는 브라우저를 선택합니다.
- 테스팅할 브라우저의 우선순위를 정합니다.
| 브라우저 테스트하기 |
- 상단의 메뉴에서 Test 를 클릭한 후, 페이지의 URL을 입력합니다.
- 브라우저 3개의 테스트를 기준으로 10초 정도 소요됩니다.
- 브라우저 3개의 테스트를 기준으로 10초 정도 소요됩니다.
| 브라우져간 화면 비교하기 |
- View 를 클릭하면 1 up view, 2 up view, onion skin 세 종류가 있습니다.
- 1up view는 한 화면에 하나의 브라우저를 보여줍니다.
- 2up view는 위 그림과 같이 한 화면에 두개의 브라우저를 보여줍니다.
| 겹쳐보기 기능 |
- View 기능 중에 onion skin 을 클릭하시면 두 종류의 브라우저를 겹쳐볼 수 있습니다.
- 제 블로그의 경우, 사파리와 IE8 간에 차이가 조금 존재하군요.
- 가운데에 있는 슬라이드 바는 각 브라우저의 투명도(%) 를 나타냅니다.
웹 표준화의 길은 아직도 저 멀리...
웹표준은 정말 멀고도 험한 길인 것만 같습니다. 웹표준을 철저히 파악하기 위해서는 HTML부터 시작해서 웹에 관련된 많은 지식을 습득해야만 하겠죠. IE9에 많은 기대를 걸어보고는 있지만, 모든 사용자들이 IE9 로 옮겨탈일은 절대 없을테니 결국엔 계속해서 공부해 갈 수 밖에 없는 노릇입니다.
지금 현재 제 블로그의 경우, IE6에서는 레이아웃이 흐트러져 있는 상태이고, 크롬과 파이어폭스에서는 카테고리의 액션이 실행되지 않는 등 아직 문제가 많습니다. 현재 수정 중에 있으나 단번에 수정하는게 쉽지는 않더군요. 그저 제 바람은 더이상 IE6를 사용하지 않았으면 하는 바램뿐입니다.
참고로, Adobe BrowserLab 이외에 http://spoon.net/browsers 도 비슷한 기능을 제공하고 있으니 비교해보셔서 자신에게 맞는 도구를 선택하셔도 될 듯합니다. 특히 http://browsershots.org/ 는 많은 분들이 애용하고 계시는 줄로 압니다만, 저에겐 그닥 맞지 않더군요.
저같이 수많은 시행착오를 거쳐가며 익혀가시는 분들은 아직도 웹표준이 저 멀리 있는 것처럼 느껴지실 겁니다. 전문가가 아닌 이상에는 결국엔 브라우저 테스팅을 한번씩 해가며 확인할 수 밖에 없습니다. 많은 분들이 브라우저 테스팅을 하고 있는 줄로는 압니다만 테스팅을 하는데 더 좋은 도구가 있다면, 제게도 소개해주시길 바랍니다. 이번 포스팅 내용이 블로그 스킨을 짜시거나 홈페이지 제작을 하시는 분들께는 조금이나마 도움이 되셨길 바라면서 이만 글을 줄이도록 하겠습니다.
지금 현재 제 블로그의 경우, IE6에서는 레이아웃이 흐트러져 있는 상태이고, 크롬과 파이어폭스에서는 카테고리의 액션이 실행되지 않는 등 아직 문제가 많습니다. 현재 수정 중에 있으나 단번에 수정하는게 쉽지는 않더군요. 그저 제 바람은 더이상 IE6를 사용하지 않았으면 하는 바램뿐입니다.
참고로, Adobe BrowserLab 이외에 http://spoon.net/browsers 도 비슷한 기능을 제공하고 있으니 비교해보셔서 자신에게 맞는 도구를 선택하셔도 될 듯합니다. 특히 http://browsershots.org/ 는 많은 분들이 애용하고 계시는 줄로 압니다만, 저에겐 그닥 맞지 않더군요.
저같이 수많은 시행착오를 거쳐가며 익혀가시는 분들은 아직도 웹표준이 저 멀리 있는 것처럼 느껴지실 겁니다. 전문가가 아닌 이상에는 결국엔 브라우저 테스팅을 한번씩 해가며 확인할 수 밖에 없습니다. 많은 분들이 브라우저 테스팅을 하고 있는 줄로는 압니다만 테스팅을 하는데 더 좋은 도구가 있다면, 제게도 소개해주시길 바랍니다. 이번 포스팅 내용이 블로그 스킨을 짜시거나 홈페이지 제작을 하시는 분들께는 조금이나마 도움이 되셨길 바라면서 이만 글을 줄이도록 하겠습니다.
