2012년에 작성했던 자료로 크로스 브라우저 테스트에 대한 개념부터 목표 수준의 정의, 자동화/매뉴얼 수행 시 차이점, 실제 테스트 수행 시 고려할 점 등을 설명한 자료입니다.

1. 크로스(멀티) 브라우저 테스트
수행 가이드
2012.08 by JungGun
home: genycho.blog.me
※ 상업적 이용 및 출처를 밝히지 않은 무단 사용을 금합니다

2. What…
크로스 브라우저 테스트가 무엇인지 올바르게 인지하고
테스트 이슈에 효과적이고 효율적인 방법으로 접근하기 위해…
사례를 포함하여 소개
2012년 자료…(오래 됨, 지금은 없어진 사파리 브라우저까지..)

3. - 목차 -
개요
수행절차
정리
별첨. 테스트계획서 내용 일부

4. 크로스(멀티) 브라우저 테스트란?
. 다양한 웹 브라우저에서 대상 어플리케이션이 정상 동작하는지 확인하는
테스트
. 모든(다양한) 웹 브라우저 사용자가 방문했을 때 정보로서의 소외감을 느끼지
않도록 하는 방법론적 가이드 (한국소프트웨어진흥원)
※ 크로스 브라우저 vs 멀티 브라우저?
보통 크로스 브라우저와 멀티 브라우저를 혼용해서 사용하는데 멀티 브라우저는
다양한 브라우저에서 동일하게 동작하는 것을 의미하고, 크로스 브라우저는
다양한 브라우저 + 브라우저 버전까지를 포함하여 동작하는 것을 의미한다.
특히 IE(인터넷 익스플로어)의 경우 버전 별로 상이한 동작을 하는 경우가 많아
브라우저 버전을 포함한 테스트 커버리지 전략을 수립하는 것이 필요하다
(http://en.wikipedia.org/wiki/Cross-browser)
“The term cross-browser is often confused with multi-browser. Multi-browser means
something works with several web browsers. Cross-browser means something works
with all versions of all browsers to have existed since the web began.”

5. ※ 크로스(멀티) 브라우저 테스트의 목표 수준은?
Multi browsing이든 Cross browsing이든 모든 웹브라우저에서 동일한
웹페이지의 모든 디자인과 엘리먼트가 동일하게 보여야만 하는가?
테스트팀은 디자인 요소의 픽셀 일치도와 document element의 세밀한
차이까지 지적하여 결함으로 등록하여야 하는가?
브라우저마다 독자적으로 Html을 렌더링하기 때문에 모든 브라우저에서
완벽하게 일치된 UI를 목표로 테스트를 진행하는 것은 불가능 할 것이며
테스트의 목적은 UI의 완전한 일치를 목적으로 하는 것이 아니라 ‘사용자에게
동일한 정보를 제공해 줄 수 있는가’ 라는 측면에서 접근해야 옳을 것이다.

6. 들여쓰기가 다른 사항, 결함일까? 아닐까?
만약 메뉴 클릭이 모두 가능했다면 그래도 결함일까?
사파리 브라우저에서만 들여쓰기가 상이함
기능에 문제가 없다면 결함인가? 아닌가?
크로스 브라우징에 대한 오해 :
OS가 다르고 글꼴이 다르며, HTML을 렌더링
(Rendering)하는 엔진이 다르기 때문에
모든 웹브라우저에서 100% 똑같이 보이게 하
는 것은 가능하지 않다. Cross Browsing이란
적어도 표준 웹기술을 채용하여 다른 기종 혹은
플랫폼에 따라 달리 구현되는 기술을 비슷하게
만듦과 동시에 어느 한쪽에 최적화되어 치우지
지 않도록 공통 요소를 사용하여 웹페이지를 제
작하는 기법을 말하는 것
(출처 : 한국소프트웨어진흥원 공개SW지원센터
“Cross-Browsing 가이드”)

7. 테스트 수행 프로세스에 따른 접근
테스트 전략테스트 전략
테스트
종료
테스트
종료
테스트
수행
테스트
수행
테스트 전략
. 목표 수준 정의
. 사전 체크리스트
확인
테스트
설계
테스트
설계
테스트 계획테스트 계획
테스트 계획
. 수행 방법 결정
. 수행 대상 선정
. 수행 환경 구성
. 수행 일정/인력 구성
테스트 설계
. 기능 테스트 설계
. (향후) 멀티
브라우저 테스트
체크리스트 확인
테스트 수행
. 각 브라우저별
결함에 대한 식별
테스트 종료
. 결과 보고
일정/인력
구성
일정/인력
구성
환경구성환경구성대상 선정대상 선정

8. [각 단계별 상세 내용]
1. 목표 수준의 정의
2. 사전 확인사항
3. 수행 방법 결정
4. 수행 대상 선정
5. 수행 환경 점검
6. 테스트 설계
7. 수행 및 결과 정리

9. 1. 목표 수준의 정의
모든 이해관계자와 멀티 브라우저 테스트의 목적과 요건을 확인한다
고려사항 권고사항
어느 정도까지 확인해야 하는가?
각 브라우저별 세세한 UI변경사항을 비교하기 보다는 모든 브라우저에서
동일 기능을 제공하는지 수준으로 확인한다
멀티 브라우저 vs 크로스 브라우
저 테스트?
각 브라우저의 버전 별로도 테스트 수행해야 하는지 확인하며, 대상 어플리
케이션이 지원하는 버전을 명시하고 테스트하도록 한다
브라우저 종류는?
크게 5개 브라우저가 있는데 테스트 목적과 가용한 자원에 따라 타겟 브라
우저 제한이 필요하다
멀티 OS에 대한 테스트도 포함하
는가?
웹 어플리케이션의 경우 각 브라우저들이 자체적으로 html을 렌더링하여 보
여주기 때문에 다양한 OS에서의 테스트는 큰 의미가 없을 수 있다. 테스트
자원이 제한적인 경우 멀티 OS 테스트는 수행하지 않는다
원하는 결과는 결함 발견 및 조치
수준인가, 수준 평가인가?
결함을 찾고 조치하는게 목적이라면 별도의 브라우저별 테스트 결과는 필요
없을 수 있다
멀티브라우저 테스트 대상을 축소
할 수 있는가?
결함을 찾고 조치하는게 목적이라면 별도의 브라우저별 테스트 결과는 필요
없을 수 있다
테스트 환경, 장비는 제공하는가?
멀티 브라우저는 하나의 PC에 설치가능하지만, 멀티 OS나 같은 브라우저
에 여러 버전의 브라우저는 설치가 불가능 하므로 테스트 장비나 별도의 환
경이 제공되는지 확인이 필요하다
[[[[ 목표목표목표목표 수준수준수준수준 정의를정의를정의를정의를 위한위한위한위한 고려사항고려사항고려사항고려사항 ]]]]

10. (참고) 브라우저 점유율
http://gs.statcounter.com/
국내현황국내현황국내현황국내현황((((모바일모바일모바일모바일 제외제외제외제외))))
2015~20162015~20162015~20162015~2016
전세계현황전세계현황전세계현황전세계현황((((모바일모바일모바일모바일 제외제외제외제외))))
2015~20162015~20162015~20162015~2016
국내현황국내현황국내현황국내현황,,,, 버전포함버전포함버전포함버전포함,,,, 모바일모바일모바일모바일 포함포함포함포함
2015~20162015~20162015~20162015~2016

11. (참고) 각 브라우저 설명
자료 출처 : 한국 인터넷 진흥원
IE는 트라이던트, 크롬과 사파리는 웹킷, 오페라는 프레스토, 불여우는 게코라는 레이아웃 엔진 - 또는 렌더링 엔진 - 을 사용

12. 2. 사전 확인사항 (UI개발 형태, ActiveX 사용여부)
아예 멀티브라우저가 지원되지 않는 UI솔루션을 사용하거나 ActiveX같이
IE에서만 구동되는 기능이 이미 적용된 경우가 있으므로 사전에 확인
체크 항목 상세 내용
사용한 UI 개발 방식,
솔루션 확인
멀티브라우저 지원을 위해서는 일반적으로 JSP로 화면을 구성하도록 가이드하고 있으며, 일
부 국내 UI솔루션의 경우 아예 멀티브라우저가 지원되지 않는 경우가 있음. 해당 솔루션별로
멀티브라우저 지원 여부 및 제약사항 확인 필요
1) HTML, JSP
2) Flex, SilverLight
3) MiPlatform, Xplatform
4) Exria, NCRM 등등등
ActiveX 사용 실태 확인
국내에서 많이 사용하는 ActiveX 기술은 IE에서만 지원되는 것으로 해당 기술을 사용한 부분
이 있는지 확인한다
1) 공인 인증서를 이용한 전자서명
2) 개인방화벽
3) 키보드 보안
4) 통신 데이터 암호화
5) 보안 이메일
6) 다중 파일 업로드/ 다운로드
7) 그래픽/차트 표현
8) 동영상, 음악 재생
KISA_ActiveX대
체기술가이드.pdf
http://koreahtml5.kr/download/activex.pdf

13. 3. 수행 방법 결정
테스트 전략 단계에서 정의한 목표 수준, 가용한 테스트 자원 등에 따라
테스트 수행 방법을 결정한다
테스트 자동화 툴
적용성
매뉴얼 테스트매뉴얼 테스트
UI Record&Play
자동화 테스트
UI Record&Play
자동화 테스트
IE 중심의
브라우저 구성
IE 중심의
브라우저 구성
대상 브라우저의
구성
각 브라우저별 구성각 브라우저별 구성
테스터 배정
브라우저 별
테스터 구성
브라우저 별
테스터 구성
업무별
테스터 구성
업무별
테스터 구성
기본 기능
테스트
기본 기능
테스트
테스트 Depth
차별화
전체 기능
테스트
전체 기능
테스트
[ 1) 테스트 자동화 툴 적용 여부 ] [ 2) 대상 브라우저별 수행 방법 ]
[ 4) 테스트 케이스 선별 ][ 3) 테스터 구성 및 결과지표 ]

14. 3.1 수행방법결정
. UI 테스트 자동화 툴을 이용한 접근 : Selenium과 같은 UI테스트 자동화 툴을 이용하여
테스트 스크립트를 작성하고, 이 스크립트를 다양한 브라우저 상에서 재수행
. 매뉴얼 테스트를 이용한 접근 : 사람이 직접 각각의 브라우저, 버전 상에서 테스트를 수행
UI 테스트 자동화 툴 매뉴얼 테스트
장점
. 테스트 스크립트를 한 번 작성하면 다
양한 브라우저 상에서 여러 번 수행 가능
. 실제 사용자 관점에서 테스트 가능
단점
. 프로젝트 초기에 도입 필요
. 스크립트 작성 공수
. 스크립트 작성이 안 되는 부분은
테스트 불가
. 브라우저별로 스크립트를 다시
작성해야 하는 경우 발생
. 실제 사람만 식별할 수 있는 영역
(디자인 영역 등)에 대해 확인 불가
. 테스트 자원이 제한적
. 테스터의 눈으로 확인 불가한 사항이
있을 수 있다 (상세 픽셀 차이와 같은)

15. 참고. 멀티브라우저 테스트 툴 구분
디자인 관점에서 이미지,
각 요소들의 크기, 위치
등을 비교해 주는 툴
웹 요소 비교 툴 자동 수행 툴 IE 버전 지원 툴 웹 표준 준수체크 툴
설명
테스트 스크립트를 작성
한 후 브라우저를 바꿔가
면서 테스트를 자동 수행
하는 형태
하나의 PC에 브라우
저별 다양한 버전을
설치할 수 없기 때문
에 이를 지원하는 툴
또는 사이트
정적으로 화면 개발 소
스가 웹 개발 표준을
준수하고 있는지를
확인하는 툴 또는 사
이트
수행
방법
. QTP - 별도의 툴을 사
용하면 멀티브라우저가
가능하다고 말함)
. Test Complete
. RFT(IBM) – 스크립트를
다양한 브라우저에서 수
행가능(Safari 안 됨)
. Selenium/Sauce lab –
IE에서는 잘 실행이 안
됨
. SuperPreview -
SuperPreview는 마
이크로소프트에서
제공하는 자사 브라
우저를 테스트하기
위한 서비스이다.
트라이얼 버전으로
60일동안 사용
. Lunascape 6 -
Lunasacpe는 윈도우
용 트리플 엔진 브라
우저
. IETester
- 하략 -
. HTML Validator –
FireFox 플러그인
. W3C HTML & CSS
Validator

16. 3.2 매뉴얼 수행 방법 상세
- 수행 방법에는 다음과 같은 수행 방법이 있다
1) IE를 먼저 테스트하고 나중에 타브라우저를 테스트하는 방법
2) IE와 타브라우저를 동시에 테스트하는 방법
3) 미리 선정한 테스트 기능을 각 브라우저별로 테스트해보는 방법
4) IE에서 전체 기능을 테스트하고 선정한 기능을 각 브라우저별로 테스트
. 전체에 대한 기능 적합율 산정 필요
. 테스트 공수 부족
(모든 브라우저에서 모든 기능 테스트를
수행할 공수 부족)
전체 기능
선정 기능

17. 3.3 테스트 수행 및 결과 측정 방법 결정
다음 3가지 방법을 검토하여 테스터, 테스트 케이스 셋을 구성하여 테스트를
진행한다
1111번번번번 방법방법방법방법 2222번번번번 방법방법방법방법 3333번번번번 방법방법방법방법
수행
방법
1) IE에서 전체 대상 테스트 수
행
2) 멀티브라우저를 테스트할 대
상 선정
3) 테스터와 TC를 각 브라우저
별로 구성
4) 선정한 대상에 대해 각 브라우
저별로 TC 셋으로 구성하여 동일
기능으로 테스트 수행
1) 테스트 대상(범위)를 선정
2) 각 테스터는 담당 부분을 IE
와 각 브라우저별로 각각 수
행
3) 테스트 결과는 하나의 TC 셋
으로관리
1) 테스트 대상을 전체로 선정
2) 테스터를 담당 부분별로 구
성
3) 테스터는 IE와 각 브라우저
별로 테스트를 수행
장 점
. IE 버전의 전체 기능 적합율 산
출이 가능
. IE의 결과와 비교하며 테스트
가능(브라우저
. 가장 테스트 공수가 적게 소요
됨
. 빠른 시간에 브라우저 호환성
정도를 체크하는데 적합
. 전체 대상에 대해 멀티 브라우
저 테스트 가능
단 점
. 동일 기능에 대해 각 브라우저
(테스터) 수만큼 중복 테스트
. 선정한 대상 외의 부분은 테스
트가 안 됨
. 테스트 공수가 많이 소요되며
각 브라우저 수만큼 중복 테스
트

18. 3.4 테스트 케이스 수행 방법 결정
한정된 테스트 자원으로 효과적인 테스트를 수행하기 위해서,
각 브라우저 별 테스트 수행 시 테스트 케이스를 선별적으로 수행하는
방법도 고려할 수 있다
IE에서 전체 TC,
각 브라우저에서는 기본 TC만
각 브라우저별로 전체 TC
수행
방법
. IE에서는 수행할 수 있는 모든 테스트 케이
스를 수행한다
. 각 브라우저에서는 해당화면이 제공하는 기
본적인 기능만 검증하고 기본 기능 검증 시 UI
차이 식별하는 방법
. 각 브라우저 별로 수행 가능한 모든 테스
트 케이스를 수행한다
장 점
. IE 버전의 전체 기능 적합율 산출이 가능하다
. 테스트 공수가 상대적으로 적게 소요되거나
더 많은 화면을 테스트할 수 있다
. 브라우저별로 상이한 결함이 존재할 것으로
예측되는 영역에 테스트 자원을 집중할 수 있
다
. 브라우저별로 모든(동일한) 테스트 케이스
검증 가능
단 점
. 검증하지 않은 부분의 결함이 발견 되지 않
음
. 테스트 공수가 많이 소요 됨

19. 4. 수행 대상의 선정
테스트 수행 대상을 제한할 수 있다
1) 대상 어플리케이션의 유형으로 대상을 선정
각 업무(개발팀)별로 다음의 내용을 감안하여 대상 선정
. 목록조회 > 신규 등록 > 상세조회 > 수정 > 삭제와 같이 많이 사용되는 패턴 선정
. 검색 팝업, 달력, 알림 메시지 창 등 팝업 화면과의 연결
. 엑셀 Export, 인쇄, 파일 업로드/다운로드 등 공통 기능 호출
. 자주 사용하는 UI 컴포넌트를 포함하는 화면
> 전체 선택/해제 체크박스, 그리드 정렬 이벤트, 콤보박스, 라디오, 체크 선택 등
2) 자주 발생하는 결함 유형에 따른 대상 선정
. 각 UI컴포넌트 동작이 상이한 경우(TextInput, Radio, Check, ComboBox(Select)
. 마우스 이벤트(스크롤, 드래그, 오른쪽 버튼 등), 키보드 단축키 등의 동작이 상이한 경우
. 커서 포커스가 상이한 경우
. SSO 로그인, Adobe Air, Flash Player, 파일 업로드/다운로드 등의 Plugin
. Frame, 그리드 폭 유지, 듀얼 모니터에서의 초기 화면 위치 등
. 한글 폰트 지원
. 브라우저 버튼(이전 페이지, 홈페이지 이동 등)

20. 5. 수행 환경 점검
- 테스트 목적에 따라 크로스 브라우저, 멀티 OS 등 별도의 테스트 장비가
필요한 경우 테스트 수행을 위한 수행 환경을 구성한다
- 가상의 OS 환경, 브라우저별 버전을 지원해 주는 툴(싸이트)을 사전에
확인하여 장비 이슈를 어느정도 완화할 수 있다
멀티 OS X 멀티브랑저 X 브라우저 버전 = 필요한 테스트 환경? ……
……

21. 6. 테스트 설계
기존 기능 테스트 내용에 대해 멀티 브라우저 환경에서 동일하게
동작하는지 확인한다
영역 테스트 내용 IE 파이어폭스 크롬 사파리
UI 사용성
해당 화면의 UI 컴포넌트 이상 유무를 확인한
다
O X X X
UI 신뢰성
각 데이터 값들에 대한 신뢰성 항목을 확인한
다
O O O O
조회
화면내에 존재하는 조회 기능에 대해 기능이
정상 수행되는지 확인한다
O
X O O
등록
화면내에 존재하는 등록 기능에 대해 기능이
정상 수행되는지 확인한다
O - O O
수정
화면내에 존재하는 수정 기능에 대해 기능이
정상 수행되는지 확인한다
O - O O
삭제
화면내에 존재하는 삭제 기능에 대해 기능이
정상 수행되는지 확인한다
O - O O
인쇄, 엑셀
화면내에 존재하는 인쇄, 엑셀 기능에 대해 기
능이 정상 수행되는지 확인한다
O - X X
[ 예: 특별한 테스트 케이스가 정의되지 않은 경우의 수행 표 ]

22. 7. 수행 및 결과 정리
멀티 브라우저 테스트 수행 시 결함이 발생하면
해당 결함이 발생한 타겟 브라우저를 반드시 명시하도록 한다
1번 방법 2번 방법 3번 방법
수행 방법
1) IE에서 전체 대상 테스트 수
행
2) 멀티브라우저를 테스트할 대
상 선정
3) 테스터와 검사시트를 각 브라
우저별로 구성
4) 선정한 대상에 대해 각 브라우
저별로 검사시트를 구성하여 동
일 기능으로 테스트 수행
1) 테스트 대상(범위)를 선정
2) 각 테스터는 담당 부분을 IE
와 각 브라우저별로 각각 수
행
3) 테스트 결과는 하나의 검사
시트에 관리
1) 테스트 대상을 전체로 선정
2) 테스터를 담당 부분별로 구
성
3) 테스터는 IE와 각 브라우저
별로 테스트를 수행
결과지표
. 전체에 대한 IE의 기능 적합율
. 선정한 기능에 대한 파이어폭
스 기능 적합율
. 선정한 기능에 대한 크롬 기능
적합율
. 선정한 기능에 대한 사파리 기
능 적합율
. 선정한 기능에 대한 오페라 기
능 적합율
. 선정한 기능에 대한 멀티브
라우저 테스트를 포함한 기능
적합율
. 전체에 대한 멀티브라우저
테스트를 포함한 기능 적합율

23. 멀티 브라우저 테스트 사례 (1/3) – 2010년…
- 수행 OS : 윈도우
- 수행 브라우저 : 5개 브라우저(IE, FireFox, Safari, Opera, Chrome)
- 수행 방법 : 사전에 선정한 특정 기능에 대해 멀티 브라우저 동작 확인
순번 브라우저 IE Firefox Safari Opera Chrome
1
TextInput에 한글
입력
아래에 text
input 창이 생김
아래에 text
input 창이 생김
입력창에 자동으
로 한글입력을
기본으로 세팅할
수 없음 (영어 입
력이 기본)
2
브라우저 html
text input 에서의
한글지원
IE 이외의 브라우
저에서는 자소의
순서가 제대로
인식되지 않는
문제
IE 이외의 브라우
저에서는 자소의
순서가 제대로
인식되지 않는
문제
IE 이외의 브라우
저에서는 자소의
순서가 제대로
인식되지 않는
문제
IE 이외의 브라우
저에서는 자소의
순서가 제대로
인식되지 않는
문제
3 SSO 로그인
Opera 10.5 최
신 버전에서
Applet을 사용할
수 없어 로그인
이 안됨
4
마우스 우측버튼
클릭 기능 (Rclick)
마우스 우측클릭
을 지원안함

24. Firefox 3.5 이
하에서만 화면
이 검은색으로
일시적으로 보
임
마우스 드래그
로 텍스트 영역
선택
7
마우스로 스크
롤을 드래깅하
여 움직일 때
스크롤 영역을
벗어나 드래깅
하면 마우스
포인터를 잃어
서 이후 클릭
을 안하고 스
크롤 영역으로
가져가도 스크
롤이 드래깅
되는 문제
마우스로 스크
롤을 드래깅하
여 움직일 때
스크롤 영역을
벗어나 드래깅
하면 마우스
포인터를 잃어
서 이후 클릭
을 안하고 스
크롤 영역으로
가져가도 스크
롤이 드래깅
되는 문제
마우스로 스크
롤을 드래깅하
여 움직일 때
스크롤 영역을
벗어나 드래깅
하면 마우스
포인터를 잃어
서 이후 클릭
을 안하고 스
크롤 영역으로
가져가도 스크
롤이 드래깅
되는 문제
마우스로 스크
롤을 드래깅하
여 움직일 때
스크롤 영역을
벗어나 드래깅
하면 마우스
포인터를 잃어
서 이후 클릭
을 안하고 스
크롤 영역으로
가져가도 스크
롤이 드래깅
되는 문제
마우스로 스크
롤을 드래깅
6
Flash player
에서 제공하는
기본 메뉴가
나옴
Flash player
에서 제공하는
기본 메뉴가
나옴
Flash player
에서 제공하는
기본 메뉴가
나옴
Flash player
에서 제공하는
기본 메뉴가
나옴
Flash player
에서 제공하는
기본 메뉴가
나옴
마우스 우측버
튼 더블클릭
5

25. 순번 브라우저 IE Firefox Safari Opera Chrome
8
HTTP Multipart
Form 업로드
Flash player 9
이하에서는 지원
하지 않음
Flash player 9이
하에서는 지원하
지 않음
Flash player 9
이하에서는 지원
하지 않음
Flash player 9
이하에서는 지원
하지 않음
9
Flash player 업
그레이드 방법
크롬에서는
Flash Player
10.0 으로 업그
레이드를 해도
이전 버전인 9 로
인식하는 브라우
저 버그
10
Window Close
문제
Window.close()
나 self.close()를
지원하지 않음,
즉 스크립트로
브라우저를 닫을
수 없음
(window.open(_
self).close 로 임
시 조치)

26. Flash Player
가 IME 모드
(한글, 중국어,
일본어등)일
때는 특수문자
이벤트만 받을
수 있음. 그 이
외는 255
keycode로 동
일하여 구분할
수 없음
Flash Player
가 IME 모드
(한글, 중국어,
일본어등)일
때는 특수문자
이벤트만 받을
수 있음. 그 이
외는 255
keycode로 동
일하여 구분할
수 없음
Flash Player
가 IME 모드
(한글, 중국어,
일본어등)일
때는 특수문자
이벤트만 받을
수 있음. 그 이
외는 255
keycode로 동
일하여 구분할
수 없음
Flash Player
가 IME 모드
(한글, 중국어,
일본어등)일
때는 특수문자
이벤트만 받을
수 있음. 그 이
외는 255
keycode로 동
일하여 구분할
수 없음
Flash Player
가 IME 모드
(한글, 중국어,
일본어등)일
때는 특수문자
이벤트만 받을
수 있음. 그 이
외는 255
keycode로 동
일하여 구분할
수 없음
키이벤트 핸들
링 (단축키)
13
처음 화면에서
자동으로 포커
스 지정이 안
되어 클릭을
한 번 한 후에
만 키이벤트
핸들링이 가능
처음 화면에서
자동으로 포커
스 지정이 안
되어 클릭을
한 번 한 후에
만 키이벤트
핸들링이 가능
처음 화면에서
자동으로 포커
스 지정이 안
되어 클릭을
한 번 한 후에
만 키이벤트
핸들링이 가능
키이벤트 핸들
링 (단축키)
12
화면이 최초
오픈되었을 때
스크립트를 이
용하여 자동으
로 포커스 세
팅을 지원하지
않음
화면이 최초
오픈되었을 때
스크립트를 이
용하여 자동으
로 포커스 세
팅을 지원하지
않음
화면이 최초
오픈되었을 때
스크립트를 이
용하여 자동으
로 포커스 세
팅을 지원하지
않음
팝업창에서만
초기 포커스
세팅 지원하지
않음
Focus 자동지
정 (Flash
Player)
11

27. 순번 브라우저 IE Firefox Safari Opera Chrome
14
Air Runtime과
Air 프로그램 설치
여부 체크
(통합설치화면에
서 Air Runtime과
EpFTP 설치 체크
시)
어도비에서 제공
하는
AirInstaller.exe
를 이용하여 설
치여부를 판단하
는데 마이싱글
외의 다른 사이
트에서도 동시에
이용하면 설치여
부로직에 에러가
발생
어도비에서 제공
하는
AirInstaller.exe
를 이용하여 설
치여부를 판단하
는데 마이싱글
외의 다른 사이
트에서도 동시에
이용하면 설치여
부로직에 에러가
발생
어도비에서 제공
하는
AirInstaller.exe
를 이용하여 설
치여부를 판단하
는데 마이싱글
외의 다른 사이
트에서도 동시에
이용하면 설치여
부로직에 에러가
발생
어도비에서 제공
하는
AirInstaller.exe
를 이용하여 설
치여부를 판단하
는데 마이싱글
외의 다른 사이
트에서도 동시에
이용하면 설치여
부로직에 에러가
발생
어도비에서 제공
하는
AirInstaller.exe
를 이용하여 설
치여부를 판단하
는데 마이싱글
외의 다른 사이
트에서도 동시에
이용하면 설치여
부로직에 에러가
발생
15
Air 프로그램에서
파일찾기 선택창
이나 기타 다른 프
로그램을 띄울 때
윈도우 위치
다른 Air 프로그
램이 실행되고
있으면 다음에
뜨는 창은 무조
건 Air 위에만 뜸.
Air 프로그램 위
에 브라우저 윈
도우가 있으면
Air 프로그램과
브라우저 사이에
떠서 최상으로
올라오지 않음
다른 Air 프로그
램이 실행되고
있으면 다음에
뜨는 창은 무조
건 Air 위에만 뜸.
Air 프로그램 위
에 브라우저 윈
도우가 있으면
Air 프로그램과
브라우저 사이에
떠서 최상으로
올라오지 않음
다른 Air 프로그
램이 실행되고
있으면 다음에
뜨는 창은 무조
건 Air 위에만 뜸.
Air 프로그램 위
에 브라우저 윈
도우가 있으면
Air 프로그램과
브라우저 사이에
떠서 최상으로
올라오지 않음
다른 Air 프로그
램이 실행되고
있으면 다음에
뜨는 창은 무조
건 Air 위에만 뜸.
Air 프로그램 위
에 브라우저 윈
도우가 있으면
Air 프로그램과
브라우저 사이에
떠서 최상으로
올라오지 않음
다른 Air 프로그
램이 실행되고
있으면 다음에
뜨는 창은 무조
건 Air 위에만 뜸.
Air 프로그램 위
에 브라우저 윈
도우가 있으면
Air 프로그램과
브라우저 사이에
떠서 최상으로
올라오지 않음

28. 오페라에서는
Flash Player의
렌더링이 늦거나
정확히 지원되지
않아 화면을 그리
는 동작이 그대로
노출됨
Flash Player
화면 렌더링
19
크롬에서 견명조
및 일부 한글폰트
지원안함.
웹폰트 지원안함.
폰트 지원18
듀얼모니터에서
새창을 띄우거나
alert를 띄울 때
위치 조정이 완벽
하지 않음. 픽셀
단위 조정 불가.
화면단위 조정은
가능
듀얼모니터에서
새창을 띄우거나
alert를 띄울 때
위치 조정이 완벽
하지 않음. 픽셀
단위 조정 불가.
화면단위 조정은
가능
듀얼모니터에서
새창을 띄우거나
alert를 띄울 때
위치 조정이 완벽
하지 않음. 픽셀
단위 조정 불가.
화면단위 조정은
가능
듀얼모니터에서
새창을 띄우거나
alert를 띄울 때
위치 조정이 완벽
하지 않음. 픽셀
단위 조정 불가.
화면단위 조정은
가능
듀얼모니터에서
새창을 띄우거나
alert를 띄울 때
위치 조정이 완벽
하지 않음. 픽셀
단위 조정 불가.
화면단위 조정은
가능
듀얼모니터에
서 새창을 띄
울 때 중앙 위
치
16
Flash Player
는 Browser
back 버튼이
작동하지 않
음
Flash Player
는 Browser
back 버튼이
작동하지 않
음
Flash Player
는 Browser
back 버튼이
작동하지 않
음
Flash Player
는 Browser
back 버튼이
작동하지 않
음
Flash Player
는 Browser
back 버튼이
작동하지 않
음
브라우저
back 버튼으
로 history
back (마우스
우측버튼 메뉴
중 뒤로가기
메뉴)
20

29. 웹 표준 준수 체크
- 웹 개발 표준을 준수하고 있는지 확인해 주는 툴/사이트가 존재
- 웹 개발 표준은 “개발을 이렇게 해야 한다(좋다)”라는 가이드로 실제 멀티
브라우저 테스트의 목적과는 정확하게 일치하지는 않음
- 자바 소스코드에 대해 코드 인스펙션과 동일한 개념
- W3C(World Wide Web Consortium)에서 웹 개발 표준을 정의하고 공표함
http://validator.w3.org/
체크 대상(영역)
- HTML, XHTML
- CSS
- XML
- DOM
- JavaScript

30. (소개) Cross Browsing 가이드
- 출처 : 한국소프트웨어진흥원 공개SW지원센터, 2006년
목목목목 차차차차
1. 들면서
2. Cross Browsing 이란?
2.1 Cross Browsing의 정의
2.2 웹브라우저간 특이성
2.3 W3C 표준과 접근 호환성
3. Cross Browsing 방법론
3.1 HTML
3.2 CSS
3.3 DOM과 Javascript
3.4 Plugin
4. 고급 디버깅 기법
4.1 웹 브라우저 알아내기
4.2 레이아웃 방식의 변경
4.3 비IE 사용자를 위한 가이드
4.4 웹 페이지 디버깅 방법
5. 맺음말
Appendix.
1. 최신 웹브라우저별 기능 비교 차트
2. 브라우저별 HTML 표준 지원 비교표
3. 브라우저별 CSS 표준 지원 비교표

31. 정리
기대 효과
멀티 브라우저 테스트를 이해하고, 동일한 프로세스로 진행할 수 있음
단순한 테스트 활동이 아니라 멀티브라우저 지원 전략으로 프로젝트 초기부터
식별되고 개발에 포함되어 진행될 수 있음
사전에 고려할 사항들을 통해 테스트를 효율적이고 효과적으로 수행할 수 있음
유의사항
멀티 브라우저 테스트를 프로젝트 후반부에 하게 되면 큰 수정 공수가 발생할 수 있음
멀티 브라우저 지원 범위를 빨리 정하고 초기부터 테스트를 진행하여 이슈를 바로바로
확인하고 의사결정을 할 필요가 있음
(예: 멀티브라우저를 지원하지 않거나 중요 이슈가 있는 솔루션 배제 및 대체 등)

32. 감. 사. 합. 니. 다.