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

2. 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종 세트
목차

4. 1-1
자고 일어나면 출시되는 단말기
• OS와 브라우저는 Android와 iOS 어느정도 시장이 양분
• 단말기별 OS버전, 해상도, 글꼴등의 차이

5. 1-2
NHN의 OS 버전, 단말기별 테스트
• HTML, CSS, HTML5, CSS3 지원 여부 테스트
• 단말기 해상도 테스트
• 글꼴 지원 여부 테스트등

6. 1-2
테스트 시연

7. 1-3
OS 버전, 단말기별 테스트 결과 모으기
• 기본적인 엘리먼트의 UI, 작동 방식, 속성등의 지원여부등을 테스트하고 취합한다.
• 추가로 웹에서 자주 사용하는 마크업 관련 기술들을 테스트하고 취합한다.
• 테스트 결과를 엑셀로 정리하여 내부에 공유한다.
• 새로운 단말기가 출시예정이면 같은 방법으로 테스트한 후 문서에 업데이트한다.
• 마크업 구현 시 발생하는 이슈는 사내 개발자 카페에 게시한다.

8. 1-4
OS 버전, 단말기별 모든 이슈를 해결할 수는 없다.
• 서비스 설계 단계에서 서비스 성격과 특징에 맞게 지원 범위를 정하고
마크업 개발 단계에서 구현이 어렵거나 다른 방법으로 구현해야 하는 부분에 대한
공유가 필요하다.

10. 2-1
• 글자 중간에 display속성값이 inline이나 inline-block인 엘리먼트를 사용한 경우
글자사이에 공백이 발생한다.
• OS와 글꼴 문제이기 때문에 해결하지 않는다.
재현 환경 : iOS3, iOS4, Android 2.1, 2.2, 2.3, 3.1 (해결하지 않음)
글자 중간에 원인모를 여백이 생겨요~
Android 2.3

11. 2-1
글자 중간에 원인모를 여백이 생겨요~
iOS 4

12. 2-1
글자 중간에 원인모를 여백이 생겨요~
• iOS5,와 Android 4.0에서는 문제가 발생하지 않는다.
iOS 5

13. 2-2
• 일반적으로 CSS 의 말줄임 속성(text-overflow)를 사용하면 모바일 브라우저는 가로,세로 화면에
맞게 자동으로 말줄임 처리한다.
• Fieldset 안에 있는 엘리먼트에 말줄임을 하는 경우 width 혹은 max-width값을 정수로 지정하지
않으면 말줄임 되지 않는다. (PC IE를 제외한 모든 브라우저)
재현 환경 : iOS All, Android All (일부 해결)
말줄임 처리가 안되요~

14. 2-3
자음이 반복되서 나와요
• Textarea 엘리먼트에 work-break:break-all 속성
이 있을때
• 글자를 입력하다가 입력영역 제일 우측에서 빈칸을
넣고 다시 글자를 입력하면 입력한 글자의 자음이
반복됩니다.
• 버그로 해당 속성을 사용하지 못합니다.
• 상속받은 경우 normal값으로 초기화 시킵니다.
• 2.3버전부터는 버그 픽스되었습니다.
재현 환경 : Android 2.1, 2.2 (해결 가능)

15. 2-4
placeholder가 이상해요 #1
• Placeholder는 입력폼에 포커싱되지 않았을때 사용자가 입력할 수 있는 값을 안내하는 문자를 지정할
수 있는 attribute이다.
• HTML5 DTD에서 표준으로 추가되어 input, textarea에 placeholder를 사용할 수 있습니다.
재현 환경 : Android 2.1 (해결 불가)
• Android 2.1 에서는 input은 지원하는데 textarea는
placeholder를 지원하지 않습니다.

16. 2-4
placeholder가 이상해요 #2
재현 환경 : Android 3.x, 4, iOS5 (일부 해결)
• Placeholder 값의 정렬,색상등을 스타일을 변경할 경우 아래와 같이 OS와 버전별로
차이가 있습니다.
• 정렬
text-align : center 등으로 속성을 지정하면 정렬을 변경할 수 있습니다.
단, 사용자가 입력한 값도 동일한 정렬이 됩니다.
• 색상
color:red 등으로 속성을 지정하면 색상을 변경할 수 없습니다.
사용자가 입력한 값만 색상이 변경됩니다.
또한, 안드로이드의 경우 textarea에 color값만 지정한 경우 테두리 색상도 함
께 변경됩니다.
• 정렬, 색상 한번에 바꾸기
::-webkit-input-placeholder 가상선택자를 사용해 스타일을 변경할 수 있습
니다.

17. 2-4
placeholder가 이상해요 #2 (해결 방법)
input::-webkit-input-placeholder{text-align:center;color:red}
• OS, 버전별로 적용 여부가 다릅니다.
• 안드로이드 2.1~2.3, iOS 4 : 초기 입력값만 정렬,색상등 지정한 스타일이 적용된다.

18. 2-4
placeholder가 이상해요 #2 (해결 방법)
• 안드로이드 3.x, 4, iOS 5 : 초기 입력값의 색상만 변경이 가능하고 정렬은 변경이
안됩니다.

19. 2-5
• A 엘리먼트에 display:block 속성값을 선언하면 링크영역은 브라우저 가로사이즈
만큼 넓어진다.
• 엘리먼트안에 텍스트나 이미지노드가 없는 빈 영역을 탭하면 탭이 되지 않거나 주
변 링크가 탭 된다.
재현 환경 : Android 2.2, 2.3 (해결 가능)
링크 영역을 크게하기 위해 Block 속성을 줬더니 이상해요~

20. 2-5
링크 영역을 크게하기 위해 Block 속성을 줬더니 이상해요~ (해결방법)
• A 엘리먼트안에 block 엘리먼트를 넣는다.
• a 엘리먼트 안에 block 엘리먼트를 넣는것은 HTML5 DTD에서만 허용한다.
• block 엘리먼트중에서도 div 엘리먼트만 가능하다.
• 빈칸(&nbsp)으로 빈 영역을 채워줘도 되지만 말줄임을 하면 빈칸도 글자로 인식해 우
측에 말줄임이나 밑줄이 표시된다.

21. 2-6
Media query orientation 이상해요~
• CSS의 media Query의 orientation은 디바이스의 가로,세로비를 계산하여 가로화면, 세로
화면일 때 각각 다른 속성을 선언할 수 있다. Landscape, portrait 속성값이 있다.
• 가로, 세로 화면일 때 각각 글자의 색상을 다르게 나타나도록 한 화면이다.
• 그런데 키패드가 표시되면 Android의 경우 지정한 색상이 반대로 표시된다.
• 즉, Android 의 가로,세로비의 계산은 native 해상도나 브라우저 해상도가 아닌
브라우저에서 실제 보이는 영역(viewport)를 기준으로 계산한다.
재현 환경 : Android All (해결 불가)

22. 2-7
탭 영역이 표시가 안되요~!!
• 손가락으로 터치 시 탭 영역은 OS마다 다르게 표시합니다.
• iOS는 검은색 음영, Android는 테두리,음영등으로 표시합니다.
• 그런데 아래와 같은 조건이면 탭 영역을 표시하지 않습니다.
• 링크 영역이 320px(세로)보다 크고
• White-space:nowrap 속성을 적용한 경우
재현 환경 : iOS4, iOS5 (해결 불가)
• iOS3에서는 발생하지 않습니다
• 단, 가로화면일때는 viewport
가로값이 480px이므로
480px 보다 클 경우만 발생합
니다.

23. 2-8
Border-radius가 이상하게 보여요~!
• Border-radius 값이 9px~12px 정도면 상단 양쪽 테두리가 끊어져 보입니다.
• Border-radius 값에 상관없이 곡선처리가 부드럽지 못합니다.
재현 환경 : Android 2.1,2.2,2.3 (해결 불가)

24. 2-8
Border-radius가 이상하게 보여요~!
• border-top의 색상도 올바르게 적용이 되지 않습니다.
• 배경색이 다른 경우 박스안의 테두리 부분 배경처리도 부드럽지 못합니다.
재현 환경 : Android 2.1,2.2,2.3 (해결 불가)

25. 2-9
iOS auto 3종 세트
• Input 에 값을 입력할때 동작하는 iOS의 기능이다.
• 사용자가 일반 > 설정 > 키보드에서 기능을 키고 끌 수 있다.
• 첫글자를 자동으로 대문자로 변경
• 처음 몇글자를 입력시 자동 완성 제공
• 영문 철자를 검사
재현 환경 : iOS All (해결 가능)

26. 2-9
iOS auto 3종 세트 (해결 방법)
• 자동 대문자는 키패드의 한글이 초기에 쌍자음으로 표시되고 자동 수정의 경우도 자동 완성등의 기
능을 제공하는 입력창의 경우 기능이 겹치기 때문에 사용자 설정과 관계없이 비활성화 시켜야 할 경
우가 있다.
• 다만, 사용자의 설정에 관계없이 기능을 사용하지 못하도록 하는것은 충분히 검토후에 적용한다.
• 참고로 Autocomplete 애트리뷰트만 HTML5 스펙에 명시된 표준이다.
<input type="text" name="t1” placeholder=“입력해보시던가”
autocapitalize="off” autocomplete=“off” autocorrct=“off”>