이 글에서는 웹 페이지를 여러 버젼의 인터넷 익스플로러에서 테스트 할 수 있는 IETester를 소개해 보겠습니다.

IETester

웹 사이트를 디자인할 경우 디자인 된 페이지가 잘 표시되는지를 여러 브라우저에서 확인해 보아야 합니다. 웹 사이트 접속자들은 다양한 브라우저를 사용하고 이 브라우저들의 엔진이 모두 정확히 같지는 않기 때문입니다. 그래서 얼마 전 여러 브라우저에서 웹 페이지가 어떻게 표시되는지를 스크린 샷을 통해 확인할 수 있는 방법을 소개했습니다.
[Blogging] - 브라우저 별 웹 페이지 미리보기

하지만 위의 방법으로는 실제 웹 탐색이 불가능해 여러가지 제약이 존재합다. 예를 들면 화면에서 절대 위치를 가진 일명 플로팅 개체의 작동 여부는 확인할 수 없죠. 하지만 IETester를 이용한다면 인터넷 익스플로러 5.5, 6, 7, 8, 9 그리고 10 버젼에서 실제로 웹 페이지를 탐색할 수 있습니다. 즉 각각의 인터넷 익스플로러를 자유롭게 구동할 수 있다는 것입니다. 물론 ActiveX 등 약간의 제약은 존재합니다.

IETester는 아래에서 다운로드 하실 수 있습니다.
http://www.my-debugbar.com/wiki/IETester/HomePage

설치 중에 설치 언어를 선택할 수 있는데 특별한 경우가 아닌 이상 기본으로 지정된 영어와 한국어만 설치하시면 됩니다.

IETester입니다. 상단에서 테스트 할 브라우저 선택이 가능합니다.

한번에 여러 버젼의 IE 열기 기능을 사용하면 좀 더 간단한 테스트가 가능합니다.

저는 제 블로그 메인 페이지를 테스트해 보았습니다. 
 

인터넷 익스플로러는 파이어폭스, 크롬과 달리 버젼 별 차이가 꽤 있습니다. 특히 CSS의 정상적인 작동 여부와 위치 기준점 등의 차이가 있습니다. 때문에 웹 사이트 디자인 후 반드시 테스트하셔야 할 것입니다. 

신고
이 글에서는 각 브라우저 별로 CSS 스타일을 다르게 적용하는 방법을 설명해 보겠습니다.

브라우저 별 CSS 다르게 적용하기

현재 우리나라에서 웹 사이트를 디자인할 때 고려해야 할 브라우저는 3가지 정도입니다. 점유율이 어느 정도 이상인 인터넷 익스플로러와 구글 크롬, 그리고 파이어폭스 정도까지는 고려해서 디자인을 해야 합니다. 물론 최근 스마트 폰이 급격히 보급되면서 스마트 폰 환경에 최적화된 모바일 스킨도 필요합니다.

그런데 문제는 같은 내용의 HTML 및 CSS 소스로 디자인 된 페이지도 브라우저에 따라 다르게 보일 수가 있다는 점입니다. 특히 CSS 스타일 부분에서는 각 브라우저 별로 위치 지정시의 기준점이 다르다는 점 등 고려해야 할 점이 많습니다. 이 문제의 해결을 위해서 CSS 소스 내에서 각 브라우저마다 적용할 부분에 차이를 둘 수도 있겠지만 여기서는 아예 브라우저별로 CSS 소스 전체, 즉 CSS 파일 자체를 다르게 적용하는 방법을 설명해 보려고 합니다.

먼저 이 방법은 CSS가 아닌 HTML 소스를 수정하는 방법입니다. 일반적으로 웹 페이지의 개체 및 전체적인 디자인은 HTML에 의해 만들어집니다. 그리고 필요한 경우 HTML 소스에 CSS 스타일을 사용한다는 내용을 추가해 좀 더 세부적인 디자인을 편리하게 할 수 있습니다. 즉 HTML 소스에서 각 브라우저 별로 다른 CSS 파일을 불러오게 하면 됩니다.

<link rel="stylesheet" media="screen" type="text/css" href="./style.css" />

위 소스는 티스토리에서 CSS 소스를 불러오는 소스입니다. 여기서는 계속해서 티스토리의 경우를 예를 들어 설명하게습니다. 주위에 아무런 조건이 없으므로 모든 브라우저에서 같은 CSS 소스를 불러오게 되죠.

그런데 위 소스 주위에 다른 조건을 붙여 주면 이야기가 달라집니다.

<!--[if IE]>
<link rel="stylesheet" media="screen" type="text/css" href="./style.css" /> 
<![endif]-->

위와 같은 상황에서는 인터넷 익스플로러에서만 CSS 소스를 불어오게 됩니다.  즉 if 조건을 이용해 브라우저 별로 다른 CSS 파일을 불러오게 하는 것입니다. 세부적인 if 명령어는 간단한 검색으로도 찾으실 수 있습니다. 간단하죠?

마지막으로 한 가지 예를 들어보겠습니다.

<!--[if IE]>
<link rel="stylesheet" media="screen" type="text/css" href="./style.css" /> 
<![endif]-->
<!--[if !IE]>
<link rel="stylesheet" media="screen" type="text/css" href="./images/style2nd.css" /> 
<![endif]--> 

위 소스는 인터넷 익스플로러 환경에서는 기본적인 style.css 파일을 불러오고 인터넷 익스플로러 외의 브라우저에서는 images 폴더에 업로드 된 style2nd.css 파일을 불러온다는 소스입니다.

굉장히 유용하게 쓰일 수 있는 방법인 것 같아 소개해 보았습니다. 
신고
  1. 2015.10.16 15:55

    비밀댓글입니다

이 글에서는 지난 글에 이어 북한에서 개발한 운영체제인 붉은별 OS를 살펴보겠습니다.

붉은별 OS를 설치하며 정말 신기한 북한 컴퓨터 용어를 볼 수 있습니다. 학교에서 배웠던 북한말과 우리나라 말의 차이는 컴퓨터 용어의 차이에 비하면 아무 것도 아는 것 같았습니다. 또한 윈도우 XP의 설치 형식과 윈도우 7의 로그인 화면 등을 보며 리눅스를 기반으로 만들었으면서도 윈도우와 같이 보이려고 노력했음을 알 수 있었습니다.

이제 붉은별 OS의 기본적인 기능들을 살펴보겠습니다.

붉은별 OS 북한의 운영체제-기본 기능편

먼저 붉은별 OS는 예상 외로 완성도가 높고 일반적인 운영체제의 기능은 대부분 포함하고 있기 때문에 붉은별 OS의 모든 기능을 다 살펴보지 못하고 그 일부만 살펴보는 것임을 밝힘니다.

각 기능을 세세하게 소개하기 전에 먼저 전체적인 느낌부터 정리해 보겠습니다. 일단 붉은별 OS가 리눅스 기반 운영체제라는 것이 느껴지지 않을 정도로 윈도우의 인터페이스와 기본 구조를 채택하고 있습니다. 다만 기본 구조는 리눅스이기 때문에 2.8Ghz의 코어 1개와 512MB RAM의 가상 머신 환경에서도 꽤 매끄럽게 작동했습니다. 전체적인 느낌은 윈도우 XP보다 가벼웠습니다.

지금부터 차례 차례 주요 기능들을 살펴보죠.

[##_http://grwings.com/script/powerEditor/pages/1C%7Ccfile9.uf@161682414F0969323A88D7.png%7Cwidth=%22620%22%20height=%22465%22%20alt=%22%22%20filename=%22%EC%9C%88%EB%8F%84%EC%9A%B0,%20%EC%BB%A8%ED%8A%B8%EB%A1%A4%205.png%22%20filemime=%22image/jpeg%22%7C_##]먼저 북은별 OS 소개입니다. 2009년에 제작되었음을 알 수 있습니다. 당시 윈도우 7 개발 빌드들이 유출될 무렵이었죠. 개발 단계에서 개발자들이 윈도우 7의 마일스톤 및 베타 버젼을 접할 수 있었을 것으로 보아 윈도우 7의 영향도 받은 것 같습니다.

[##_http://grwings.com/script/powerEditor/pages/1C%7Ccfile27.uf@191682414F09692F3184E5.png%7Cwidth=%22326%22%20height=%22156%22%20alt=%22%22%20filename=%22%EC%82%AC%EC%9A%A9%EC%9E%90%20%EC%A7%80%EC%A0%95%201.png%22%20filemime=%22image/jpeg%22%7C_##]시작 차림표라는 이름의 윈도우 버튼입니다. 

[##_http://grwings.com/script/powerEditor/pages/1C%7Ccfile1.uf@191682414F096930325D55.png%7Cwidth=%22282%22%20height=%22476%22%20alt=%22%22%20filename=%22%EC%82%AC%EC%9A%A9%EC%9E%90%20%EC%A7%80%EC%A0%95%202.png%22%20filemime=%22image/jpeg%22%7C_##]

이곳에서 윈도우와 같이 프로그램 트리와 기본 기능들로 접근할 수 있습니다.
 

[##_http://grwings.com/script/powerEditor/pages/1C%7Ccfile2.uf@201682414F09693033B806.png%7Cwidth=%22374%22%20height=%22159%22%20alt=%22%22%20filename=%22%EC%82%AC%EC%9A%A9%EC%9E%90%20%EC%A7%80%EC%A0%95%203.png%22%20filemime=%22image/jpeg%22%7C_##]

아래 작업 표시줄의 모습입니다. 역시 윈도우와 매우 유사한 구조입니다. 빠른 실행을 대신하는 기능까지 있습니다. 다만 실행중인 프로그램은 윈도우와 조금 다르게 2줄로 표시됩니다.

[##_http://grwings.com/script/powerEditor/pages/1C%7Ccfile3.uf@111682414F09693034D420.png%7Cwidth="526"_##]

참고로 윈도우 XP의 그것과 완전히 동일한 지뢰찾기 게임도 포함되어 있습니다.

[##_http://grwings.com/script/powerEditor/pages/1C%7Ccfile22.uf@141682414F09693136EAFD.png%7Cwidth=%22620%22%20height=%22465%22%20alt=%22%22%20filename=%22%EC%9C%88%EB%8F%84%EC%9A%B0,%20%EC%BB%A8%ED%8A%B8%EB%A1%A4%2010.png%22%20filemime=%22image/jpeg%22%7C_##]

가상 머신에서 나와 스크린 샷을 찍으려고 하며 프로그램 트리가 닫히는 문제를 해결하기 위해서는 플로그인 설치파 필요해 보조 프로그램 폴더를 열어 스크린 샷을 찍어 보았습니다.

가상 CD 프로그램, 계산기, 압축 프로그램 등이 탑재되어 있습니다. 가상 머신 환경의 제약 때문인지 3D 효과는 작동하지 않더군요. 조금 아쉬웠습니다.

[##_http://grwings.com/script/powerEditor/pages/1C%7Ccfile3.uf@121682414F096930352A39.png%7Cwidth=%22620%22%20height=%22465%22%20alt=%22%22%20filename=%22%EC%9C%88%EB%8F%84%EC%9A%B0,%20%EC%BB%A8%ED%8A%B8%EB%A1%A4%201.png%22%20filemime=%22image/jpeg%22%7C_##]

윈도우 탐색기를 대신하는 파일 열람기입니다. 윈도우와 매우 유사한 구조를 갖추고 있습니다.

[##_http://grwings.com/script/powerEditor/pages/1C%7Ccfile4.uf@151682414F09693137ADBC.png%7Cwidth=%22620%22%20height=%22465%22%20alt=%22%22%20filename=%22%EC%9C%88%EB%8F%84%EC%9A%B0,%20%EC%BB%A8%ED%8A%B8%EB%A1%A4%202.png%22%20filemime=%22image/jpeg%22%7C_##]

나의 음악 폴더에는 북한의 노래들이 기본적으로 포함되어 있습니다.
 

[##_http://grwings.com/script/powerEditor/pages/1C%7Ccfile2.uf@161682414F0969313840A1.png%7Cwidth=%22620%22%20height=%22465%22%20alt=%22%22%20filename=%22%EC%9C%88%EB%8F%84%EC%9A%B0,%20%EC%BB%A8%ED%8A%B8%EB%A1%A4%203.png%22%20filemime=%22image/jpeg%22%7C_##]

아쉽게도 재생은 불가능했습니다.

또 한 가지 재미있는 점은 북한은 오류를 오유!로 표시하는 것 같습니다. 북한 언어 구조 자체가 오류를 오유로 표시하는지 감탄사 오유를 사용하는 것인지 궁굼하네요. 


[##_http://grwings.com/script/powerEditor/pages/1C%7Ccfile1.uf@171682414F0969323B5F41.png%7Cwidth=%22620%22%20height=%22465%22%20alt=%22%22%20filename=%22%EC%9C%88%EB%8F%84%EC%9A%B0,%20%EC%BB%A8%ED%8A%B8%EB%A1%A4%206.png%22%20filemime=%22image/jpeg%22%7C_##]

제어판입니다.
 

[##_http://grwings.com/script/powerEditor/pages/1C%7Ccfile27.uf@181682414F0969323C4554.png%7Cwidth=%22620%22%20height=%22465%22%20alt=%22%22%20filename=%22%EC%9C%88%EB%8F%84%EC%9A%B0,%20%EC%BB%A8%ED%8A%B8%EB%A1%A4%207.png%22%20filemime=%22image/jpeg%22%7C_##]

웹 브라우저도 실행해 보았습니다. 기본 홈페이지는 우리나라 정부에서 맊아 놓아 접속이 되지 않는 것으로 보입니다.
 

[##_http://grwings.com/script/powerEditor/pages/1C%7Ccfile23.uf@201682414F0969333D29EE.png%7Cwidth=%22620%22%20height=%22465%22%20alt=%22%22%20filename=%22%EC%9C%88%EB%8F%84%EC%9A%B0,%20%EC%BB%A8%ED%8A%B8%EB%A1%A4%208.png%22%20filemime=%22image/jpeg%22%7C_##]

제 블로그도 정상적으로 접속할 수 있었습니다.


분명히 파이어폭스나 크롬 기반으로 보입니다만 프로그램 정보에서는 자체 개발 프로그램으로 소개하고 있습니다. 앞에서 언급했던 지뢰 찾기의 경우도 그랬죠.

북한의 특성상 다른 나라의 프로그램 개발사들이 시비를 걸을 수 없어서인지 프로그램 소스의 저작권을 무시하는 것 같습니다.

지금까지 붉은별 OS의 기본 기능들을 살펴보았습니다. 다음 글에서는 운영체제와 함께 유출되었던 프로그램 패키지를 살펴보겠습니다.
신고
이 글에서는 다양한 브라우저에서 웹 페이지, 웹 사이트를 미리보는 방법에 대해 설명해 보겠습니다.

다양한 브라우저 별 웹 페이지 미리보기의 필요성

티스토리 등의 블로그나 제로보드 등으로 웹 사이트를 운영하면 HTML 코드를 통해 스킨을 수정해야 하는 일이 자주 있습니다. 그런데 모두가 HTML에 정통할 수는 없으므로 HTML 수정 후 표시되는 스킨에 문제가 있을 수 있죠. 중요한 점은 자신의 브라우저로 어떤 웹 페이지를 볼 때와 다른 브라우저로 같은 페이지를 볼 때가 서로 다를 수 있다는 점입니다.

구글의 크롬, 모질라의 파이어폭스 등 비교적 브라우저 엔진이 웹 표준을 준수하는 경우에는 거의 차이가 없지만 인터넷 익스플로러와 같은 경우에는 웹은 HTML 코드로 이루어진 웹 페이지라 해도 실제 표시하는 모습은 다를 수가 있습니다. 제 블로그만 해도 인터넷 익스플로러 8, 9의 경우 애드센스 광고가 본문을 가리지만 다른 브라우저에서는 정상적으로 표시되지요.

그래서 HTML 코드 수정 후에는 반드시 다양한 브라우저에서 해당 웹 페이지가 어떻게 표시되는지 점검해 봐야 합니다.

BrowserShots

여러 브라우저에서의 미리보기 기능을 제공하는 사이트는 의외로 다양합니다. 하지만 다양한 브라우저를 지원하면서도 계정 생성 없이 무료로 사용할 수 있는 곳은 드물죠. 저는 그 중 BrowserShorts라는 사이트를 추천해 드리고 싶습니다. 주소는 아래에 있습니다.
http://browsershots.org/

BrowserShot의 메인 페이지입니다.

중앙에 미리보기를 원하는 웹 주소를 입력하고 그 아래에서 테스트 할 브라우저를 선택하시면 됩니다.

사실 기본값만큼 많은 브라우저에서 모두 테스트할 필요는 없습니다. 그렇게 되면 너무 많은 시간이 걸립니다. select 영역에서 없음을 선택하시면 모든 항목이 비활성화됩니다. 개인적으로는 위와 같은 브라우저만 선택하시면 될 것 같습니다.
물론 각 사이트 방문자 비율에 따라 설정하지는 것이 가장 좋겠죠. 방문자가 사용하는 브라우저 비율은 구글 애널리틱스를 통해 확인하실 수 있습니다.

이제 웹 주소를 입력하시고 Submit 버튼을 클릭하세요.


그럼 천천히 각 브라우저에서 표시되는 해당 웹 페이지의 스크린 샷이 나타납니다.
시간은 현재 BrowserShot 사용자 수에 따라 다릅니다. 여유있게 기다리시는 것이 좋을 것 같습니다.
신고

+ Recent posts