박상혁 | 웹표준개발2팀 / UIT센터 | 2012.02

1-1 다르고 안되고 미치겠고

1-2 단말기 테스트

1-3 테스트 결과 모으기

1-4 지원범위 정하기

1 모바일도 크로스 브라우징을?

2 OS, 단말기 이슈&해결 사례

2-1 글자 중간에 원인모를 공백이 생겨요!

2-2 말줄임 처리가 안되요!

2-3 자음이 반복되서 나와요!

2-4 placeholder가 이상해요

2-5 링크영역을 크게하기 위해 Block속성을 줬더니 이상해요!

2-6 Media Query orientation 이 이상해요!

2-7 탭영역이 표시가 안되요!

2-8 border-radius가 깨져 보여요!

2-9 아이폰 오토 3종 세트

목차

1-1

자고 일어나면 출시되는 단말기

• OS와 브라우저는 Android와 iOS 어느정도 시장이 양분

• 단말기별 OS버전, 해상도, 글꼴등의 차이

1-2

NHN의 OS 버전, 단말기별 테스트

• HTML, CSS, HTML5, CSS3 지원 여부 테스트

• 단말기 해상도 테스트

• 글꼴 지원 여부 테스트등

1-2

테스트 시연

1-3

OS 버전, 단말기별 테스트 결과 모으기

• 기본적인 엘리먼트의 UI, 작동 방식, 속성등의 지원여부등을 테스트하고 취합한다.

• 추가로 웹에서 자주 사용하는 마크업 관련 기술들을 테스트하고 취합한다.

• 테스트 결과를 엑셀로 정리하여 내부에 공유한다.

• 새로운 단말기가 출시예정이면 같은 방법으로 테스트한 후 문서에 업데이트한다.

• 마크업 구현 시 발생하는 이슈는 사내 개발자 카페에 게시한다.

1-4

OS 버전, 단말기별 모든 이슈를 해결할 수는 없다.

• 서비스 설계 단계에서 서비스 성격과 특징에 맞게 지원 범위를 정하고

마크업 개발 단계에서 구현이 어렵거나 다른 방법으로 구현해야 하는 부분에 대한

공유가 필요하다.

2-1

• 글자 중간에 display속성값이 inline이나 inline-block인 엘리먼트를 사용한 경우

글자사이에 공백이 발생한다.

• OS와 글꼴 문제이기 때문에 해결하지 않는다.

재현 환경 : iOS3, iOS4, Android 2.1, 2.2, 2.3, 3.1 (해결하지 않음)

글자 중간에 원인모를 여백이 생겨요~

Android 2.3

2-1

글자 중간에 원인모를 여백이 생겨요~

iOS 4

2-1

글자 중간에 원인모를 여백이 생겨요~

• iOS5,와 Android 4.0에서는 문제가 발생하지 않는다.

iOS 5

2-2

• 일반적으로 CSS 의 말줄임 속성(text-overflow)를 사용하면 모바일 브라우저는 가로,세로 화면에

맞게 자동으로 말줄임 처리한다.

• Fieldset 안에 있는 엘리먼트에 말줄임을 하는 경우 width 혹은 max-width값을 정수로 지정하지

않으면 말줄임 되지 않는다. (PC IE를 제외한 모든 브라우저)

재현 환경 : iOS All, Android All (일부 해결)

말줄임 처리가 안되요~

2-3

자음이 반복되서 나와요

• Textarea 엘리먼트에 work-break:break-all 속성

이 있을때

• 글자를 입력하다가 입력영역 제일 우측에서 빈칸을

넣고 다시 글자를 입력하면 입력한 글자의 자음이

반복됩니다.

• 버그로 해당 속성을 사용하지 못합니다.

• 상속받은 경우 normal값으로 초기화 시킵니다.

• 2.3버전부터는 버그 픽스되었습니다.

재현 환경 : Android 2.1, 2.2 (해결 가능)

2-4

placeholder가 이상해요 #1

• Placeholder는 입력폼에 포커싱되지 않았을때 사용자가 입력할 수 있는 값을 안내하는 문자를 지정할

수 있는 attribute이다.

• HTML5 DTD에서 표준으로 추가되어 input, textarea에 placeholder를 사용할 수 있습니다.

재현 환경 : Android 2.1 (해결 불가)

• Android 2.1 에서는 input은 지원하는데 textarea는

placeholder를 지원하지 않습니다.

2-4

placeholder가 이상해요 #2

재현 환경 : Android 3.x, 4, iOS5 (일부 해결)

• Placeholder 값의 정렬,색상등을 스타일을 변경할 경우 아래와 같이 OS와 버전별로

차이가 있습니다.

• 정렬

text-align : center 등으로 속성을 지정하면 정렬을 변경할 수 있습니다.

단, 사용자가 입력한 값도 동일한 정렬이 됩니다.

• 색상

color:red 등으로 속성을 지정하면 색상을 변경할 수 없습니다.

사용자가 입력한 값만 색상이 변경됩니다.

또한, 안드로이드의 경우 textarea에 color값만 지정한 경우 테두리 색상도 함

께 변경됩니다.

• 정렬, 색상 한번에 바꾸기

::-webkit-input-placeholder 가상선택자를 사용해 스타일을 변경할 수 있습

니다.

2-4

placeholder가 이상해요 #2 (해결 방법)

input::-webkit-input-placeholder{text-align:center;color:red}

• OS, 버전별로 적용 여부가 다릅니다.

• 안드로이드 2.1~2.3, iOS 4 : 초기 입력값만 정렬,색상등 지정한 스타일이 적용된다.

2-4

placeholder가 이상해요 #2 (해결 방법)

• 안드로이드 3.x, 4, iOS 5 : 초기 입력값의 색상만 변경이 가능하고 정렬은 변경이

안됩니다.

2-5

• A 엘리먼트에 display:block 속성값을 선언하면 링크영역은 브라우저 가로사이즈

만큼 넓어진다.

• 엘리먼트안에 텍스트나 이미지노드가 없는 빈 영역을 탭하면 탭이 되지 않거나 주

변 링크가 탭 된다.

재현 환경 : Android 2.2, 2.3 (해결 가능)

링크 영역을 크게하기 위해 Block 속성을 줬더니 이상해요~

2-5

링크 영역을 크게하기 위해 Block 속성을 줬더니 이상해요~ (해결방법)

• A 엘리먼트안에 block 엘리먼트를 넣는다.

• a 엘리먼트 안에 block 엘리먼트를 넣는것은 HTML5 DTD에서만 허용한다.

• block 엘리먼트중에서도 div 엘리먼트만 가능하다.

• 빈칸(&nbsp)으로 빈 영역을 채워줘도 되지만 말줄임을 하면 빈칸도 글자로 인식해 우

측에 말줄임이나 밑줄이 표시된다.

2-6

Media query orientation 이상해요~

• CSS의 media Query의 orientation은 디바이스의 가로,세로비를 계산하여 가로화면, 세로

화면일 때 각각 다른 속성을 선언할 수 있다. Landscape, portrait 속성값이 있다.

• 가로, 세로 화면일 때 각각 글자의 색상을 다르게 나타나도록 한 화면이다.

• 그런데 키패드가 표시되면 Android의 경우 지정한 색상이 반대로 표시된다.

• 즉, Android 의 가로,세로비의 계산은 native 해상도나 브라우저 해상도가 아닌

브라우저에서 실제 보이는 영역(viewport)를 기준으로 계산한다.

재현 환경 : Android All (해결 불가)

2-7

탭 영역이 표시가 안되요~!!

• 손가락으로 터치 시 탭 영역은 OS마다 다르게 표시합니다.

• iOS는 검은색 음영, Android는 테두리,음영등으로 표시합니다.

• 그런데 아래와 같은 조건이면 탭 영역을 표시하지 않습니다.

• 링크 영역이 320px(세로)보다 크고

• White-space:nowrap 속성을 적용한 경우

재현 환경 : iOS4, iOS5 (해결 불가)

• iOS3에서는 발생하지 않습니다

• 단, 가로화면일때는 viewport

가로값이 480px이므로

480px 보다 클 경우만 발생합

니다.

2-8

Border-radius가 이상하게 보여요~!

• Border-radius 값이 9px~12px 정도면 상단 양쪽 테두리가 끊어져 보입니다.

• Border-radius 값에 상관없이 곡선처리가 부드럽지 못합니다.

재현 환경 : Android 2.1,2.2,2.3 (해결 불가)

2-8

Border-radius가 이상하게 보여요~!

• border-top의 색상도 올바르게 적용이 되지 않습니다.

• 배경색이 다른 경우 박스안의 테두리 부분 배경처리도 부드럽지 못합니다.

재현 환경 : Android 2.1,2.2,2.3 (해결 불가)

2-9

iOS auto 3종 세트

• Input 에 값을 입력할때 동작하는 iOS의 기능이다.

• 사용자가 일반 > 설정 > 키보드에서 기능을 키고 끌 수 있다.

• 첫글자를 자동으로 대문자로 변경

• 처음 몇글자를 입력시 자동 완성 제공

• 영문 철자를 검사

재현 환경 : iOS All (해결 가능)

2-9

iOS auto 3종 세트 (해결 방법)

• 자동 대문자는 키패드의 한글이 초기에 쌍자음으로 표시되고 자동 수정의 경우도 자동 완성등의 기

능을 제공하는 입력창의 경우 기능이 겹치기 때문에 사용자 설정과 관계없이 비활성화 시켜야 할 경

우가 있다.

• 다만, 사용자의 설정에 관계없이 기능을 사용하지 못하도록 하는것은 충분히 검토후에 적용한다.

• 참고로 Autocomplete 애트리뷰트만 HTML5 스펙에 명시된 표준이다.

<input type="text" name="t1” placeholder=“입력해보시던가”

autocapitalize="off” autocomplete=“off” autocorrct=“off”>