NULI Blog

네이버의 나눔체 웹폰트와 미리보기 툴

2010-02-10T16:04:09P

웹폰트를 아시나요?
웹 서비스 제작에 관여되신 분들이라면 적어도 한번은 들어봤을 만한 웹폰트.

특정 글꼴을 별도로 설치하지 않아도, 보고 쓸 수 있도록 해주는 것인데요. 아직은 IE에서만 동작하고 있습니다. 하지만 다른 브라우저도 차츰 적용하고 있으니, 보편화 될 날도 기대해 봅니다

네이버의 경우 자체적으로 만든 네이버 나눔체라는 폰트가 있고,
이것을 IE용 웹폰트로 변환하여, 네이버캐스트와 미투데이 서비스에 적용 중이기 때문에,
IE로 보시면 별도의 글꼴 설치 없이 나눔체로 보이는 것을 확인하실 수 있습니다.

개인적으로는 웹페이지가 아닌 인쇄물 같은 잡지를 보는 느낌이 나서, 나눔체에 대한 만족도가 큰데요.

반면에, 제작자 입장에서 나눔웹폰트를 적용 하는 것은 쉽지 않았습니다.
웹폰트를 실 서비스에 적용해본 전례가 없어 기술적 시행착오가 많았고, 무엇보다 글꼴의 상이함에서 오는 크로스브라우징 문제에 가장 어려움이 따랐습니다.

IE에서만 나눔체가 적용되도록 했기 때문에, 타 브라우저에서는 기본글꼴이 나오게 되는데, 이 경우 글꼴의 서로 다른 자간, 행간 값의 영향으로 같은 페이지임에도, 브라우저에 따라 레이아웃이 변하게 되는 현상이 많았습니다.

이를 최소화 하기 위해서, 하나 하나 고쳐가며, 확인 작업을 일일이 하였는데, 공수가 너무 많이 들었고, 결국 작업 속도는 떨어지게 됩니다.
게다가 디자인 퀄리티를 위해 웹디자이너의 감(?)이 중요했는데, 웹디자이너가 손수 HTML을 수정하며, 확인하기에는 무리가 있었구요.
그래서 작업리소스를 줄일수 있고, 웹디자이너가 직접 조절해가며 확인이 가능한 시뮬레이션툴을 활용 중입니다.

디자인 산출물인 PSD의 경우 직접 웹페이지로 변환하여 보면 또 그 느낌과 미세한 폰트 차이가 있는데, 본 툴을 활용하면 폰트의 사이즈, 행간, 자간, 색, 캐릭터셋을 테스트 할 수 있고, 서로 다른 폰트를 같이 동시에 비교해 볼 수도 있습니다.

시뮬레이션이 가능한 폰트 범위는 아래와 같습니다.

돋움
굴림
바탕
맑은 고딕
나눔고딕 설치형
나눔고딕 웹폰트
arial
verdana
tahoma
simsun

HTML이 어려운 웹디자이너 분들과, 일일이 손수 만들어 비교해야 하는 마크업 개발자 분들은 한번쯤 활용해보셔도 좋을것 같습니다.
또, 나눔체 글꼴의 경우 개발자분들을 위한 활용방법도 있으니, 참고하시기 바랍니다 :)

마크업 개발 참고용 CheatSheet를 공유합니다

2010-02-08T10:17:12P

(본 게시물 2월 5일 등록되었으나 삭제되어, 같은 내용으로 다시 올립니다.)
안녕하세요 기타도리 입니다. 오랜만에 글을 올리는 것 같습니다.

작년 하반기에는 조직변화가 있었습니다. UIT센터 직속으로 있던 웹표준화팀이 웹표준1팀과 웹표준2팀으로 나뉘어 지고, 이를 묶는 UI기술랩이 탄생하였습니다.

팀이 랩으로 재편되면서, 마크업 개발을 좀 더 발전 시켜야 하는 구체적 미션이 생겨나, 관련 활동이 진행되고 있고, 그 중 하나로 사내 마크업 개발을 위한 마크업 코딩 컨벤션을 제작하여 사용 중인데, 컨벤션 내용이 방대하여 요약본이 필요하게 되었고 이를 위해 별도의 CheatSheet을 만들었습니다.

마크업 개발 가이드나, 관련 작업은 표준(Standard), 최적화(Optimization), 유지보수(Maintenance) 측면에서 고려되고 있고, 각 항목의 약자를 딴 S.O.M(솜)명명하여, 전반적인 내용에 일관성을 유지하고 있습니다.

마크업 코딩 CheatSheet의 세부 내용은 다음과 같습니다

ü HTML 어트리뷰트 선언 순서

ü HTML 기본템플릿 구조 및 영역의 id name

ü HTML 코딩 규칙

ü 공통 네이밍 예약어

ü CSS 코딩 규칙

ü CSS 속성 선언 순서

ü CSS 속성값 축약 규칙

ü 주석 설정 방법

ü 크로스브라우징을 위한 CSS핵 table

CheatSheet의 내용들은 특별한 것 없이 일반적인 내용들이 대부분이지만, 기억이 안나 자료를 찾아야 하는 수고를 덜기 위해, 자주 찾아보는 내용위주로 다뤄 코딩 시 도움을 주고자 합니다.

자체적으로는 인쇄물 형태로 사용할 예정이고, 추가로 편의를 위해 윈도우 바탕화면용 PNG(1920*1200)이미지 파일을 별도로 제작하여 이를 공유하니, 필요하신 분들은 참고하시면 되겠습니다.
l 바탕화면용 다운로드 : http://html.nhncorp.com/convention/SOM_monitor.png

인쇄용을 요청하시는 분이 계서 흰바탕으로 된 인쇄용버전도 첨부합니다.
http://html.nhncorp.com/convention/SOM_A3_CMYK.pdf (용지 사이즈는 A3에 맞게 되어 있습니다.)

사내 개발 가이드 이므로, 일부 양식은 범용적이지 않습니다.
다만, 전반적인 내용이 웹표준을 근간으로 하였고, 코드 용량을 줄이기 위한 CSS속성값 축약표나, CSS hack 테이블 등이 포함되어 있어, 일반적인 마크업 개발시에도 도움이 될 수 있을 것 같아 공유해 봅니다. :)

투명 PNG 배경이미지 Repeat 버그

2009-11-17T13:56:06P

안녕하세요. 웹표준2팀 한혜진입니다.
알고 계신 분이 더 많으시겠지만 혹시 모르시는 분들을 위해 공유 드립니다.

버그 내용
투명 PNG배경 이미지를 반복 시킬 경우,
만약 이미지의 크기가 1x1 이라면 그라데이션 효과가 발생합니다. (멋있긴 합니다만, 의도한 바는 아니죠 ^^;;)

발생 브라우저
IE 7 이상

해결방법
투명 PNG 배경 이미지를 반복시켜야할 경우에는
반드시 이미지의 크기가 2x2 이상이어야 합니다.

감사합니다.

구글이 ie6지원을 단계적(?)으로 중단한다고 하는군요.

2009-07-20T12:07:14P

안녕하세요? 웹표준화팀 노찬현입니다.

구글이 결국 internet explorer 6 에 대한 지원을 단계적으로 중단하겠다고 선언했습니다.
현재 IE6으로 유튜브에 접속하면 다음과 같은 문구를 출력하는 걸 확인할 수 있습니다.

MS에서 윈도 XP 를 너무 잘 만들어서 그런건지, 아니면 후속으로 출시된 윈도 vista가 너무 매력이 없어서 그런건지...
윈도 XP의 점유율이 좀처럼 떨어지지 않고 있고, 덩달아 윈도 XP 의 기본 브라우저인 IE6 도 좀처럼 점유율이 떨어지지 않고 있지요.

이 현상은 세계적으로 공통적인 현상이지만, 우리나라의 경우 특히 심하답니다.
아직까지도 네이버의 IE6 접속 점유율은 전체의 90% 가까이 나타나고 있는 것이 현실이지요.
기본 웹브라우저를 업그레이드하지 않고 사용하는 것도 원인 중 하나겠지만, internet explorer 에만 맞춰서 UI를 개발하고 ActiveX를 남용하는 국내 웹사이트의 문제 때문에 다른 웹브라우저를 마음놓고 쓸 수 없는 것도 이유 중 하나일 거라고 생각합니다.

이런 상황에서 구글이 먼저 "총대를 메고" IE6 에 대한 지원을 단계적으로 축소하겠다고 선언한 것은 UI개발자로선 매우 환영할 일입니다.
우리나라 네티즌 여러분도 IE6가 몹쓸 웹브라우저라는 것을 인식하고 있고, 인터넷을 조금 한다는 네티즌이라면 거의 모두 이러한 인식에 동의하실 거에요 ^^
인터넷 사용에 대해 조금이라도 관심있는 분이라면 firefox 등에 대한 소문은 들어봤을 것이고, 최근에는 구글에서 크롬이라는 웹브라우저를 발표한 것을 우리나라 언론에서도 기사로 많이 썼기 때문에 다양한 웹브라우저에 대한 인식은 하고 계실 거라 생각합니다.

물론 네이버의 UI개발자로선 웹브라우저의 종류가 늘어나게 되면 QA를 진행해야 하는 브라우저가 많아지기 때문에 업무 과중 문제가 있긴 합니다만 (사실 개인적으로는 firefox만 남고 다 없어졌으면 좋겠습니다 )
웹표준을 통해 다양한 웹브라우저를 사용할 수 있는 사용성을 보장해주는 것이 더 효율적이고, 사실 다른 웹표준 브라우저들을 모두 맞추는 것보다 IE6을 다른 브라우저에 맞추는 게 더 번거롭답니다.

이러한 캠페인을 우리나라에서도 시작하게 된다면, 역시 네이버나 다음에서 "총대를 메게" 될 텐데요... 어떤 반응들이 나타날지 예측이 안됩니다.
당장 주변에도, 잘되는 브라우저를 왜 바꾸냐고 하시는 분들도 많고, 심지어는 오히려 반감을 가지고 "난 전혀 바꿀 생각이 없다, 잘쓰고 있는데 네가 왜 참견이냐" 라는 반응을 보이는 분들도 계셨지요.

과연 네이버에서 이러한 캠페인을 한다면 많은 분들이 참여를 해 주실까요?
어찌되었건 빨리 IE6 이 QA목록에서 사라져 줬으면 하는 소망이 언제쯤 이루어질지 살짝 기대도 된답니다~ ^^

모바일 마크업을 위한 즐겨찾기

2009-07-09T00:04:35P

안녕하세요. 웹표준화팀 박상혁입니다.

모바일 관련 HTML/CSS 마크업 정보를 찾기란 하늘에 별따기 입니다.
구글링으로도 원하는 자료를 찾기가 힘든 걸 보면 관련 자료가 턱없이 부족한 것으로 예상됩니다.
결국 맨땅에 헤딩 해야 합니다. 그나마 검색된 결과는 아래 처럼 영문이 대다수이며 한글 번역 자료나 국내 환경에 맞는 테스트 자료는 전무합니다.
또한 자료가 여기 저기 흩어져 있어 다양한 키워드로 구글링 러쉬를 해야합니다.

그래서 관련 자료를 찾으시는 분들에게 조금이나마 도움이 되고자 그간 정리해둔 즐겨찾기를 공유합니다.
위에서 말씀드린 데로 영문자료가 대부분입니다.

Spec

아직 XHTML Mobile Profile이 정식 릴리즈 되지 않았습니다.
HTML4, XHTML 1.1 을 기초로 만들었기 때문에 여러분이 알고 계시는 것과 큰 차이는 없습니다. 모바일의 화면/해상도등의 한계에 맞춰 확장된 버전입니다.

Mobile Browser & Reference

국내·외 출시된 브라우저와 브라우저 관련 레퍼런스입니다.

Mobile Browser DEV

국내·외 출시된 브라우저/OS 제조사의 개발자 공유센터 입니다. 오페라가 단연 방대한 자료를 가지고 있더군요.
참고로 인프라웨어는 국내 시장 점유율과는 정반대로 자료가 전무합니다. (공유좀 부탁 드립니다~^^)

Browser Emulator(Simulator)

국내·외 출시된 브라우저 에뮬레이터(시뮬레이터)입니다. 직접 파일을 업로드 하거나 URL 입력,로컬에서 확인 가능합니다.
하지만 가장 정확한 디버깅은 단말기로 해야합니다. (동일 모델이더라도 브라우저 버전이 다를 수 있습니다.)

Mobile UI & UX

Validator

Blog

국내·외 모바일 관련 블로그 입니다.

Mobile Service

PC에서는 접근이 되지 않거나 PC 용 화면으로 리다이렉트, 화면 틀어짐 등이 있을 수 있습니다.
user agent 를 변경해 페이지를 확인 할 수는 있습니다. (단말기 브라우저와 렌더링이 다름)

etc

해외 모바일 관련 자료와 국내 모바일 동향,정책을 확인 하실 수 있습니다.
또한 해외 관련 자료를 번역해 제공합니다.

여러분들도 Favorite 폴더에 가지고 계신 모바일 관련 북마크나 관련 정보도 공유해주셔서 포털 검색결과에 중복 내용이 넘쳐나는 날이 빨리 왔으면 좋겠습니다. (제발~)
그런 의미에서 2009년 하반기중에 NHN 웹표준화팀은 얼마전 오픈한 네이버 모바일서비스 마크업 개발 결과를 토대로 단말/브라우저별 마크업가이드를 공유할 예정입니다. 많은 관심 부탁 드립니다.

센스리더 최신버전(v2.5) 업데이트 내용 리뷰

2009-06-13T18:21:53P

안녕하세요. 웹표준화팀 한혜진입니다.

2008년 7월쯤 국내 스크린리더기인 센스리더 최신버전v1.5 에 대해서 리뷰를 쓴적이 있습니다.

센스리더 최신버전 v1.5 리뷰 보기

그때 이후로도 계속 업데이트되어 현재는 2.5.0.6 버전입니다.
기존에는 웹표준에 맞춰 마크업을 진행해도 센스리더에서 읽어주지 않거나 잘못 읽어줬던 사항들이 종종 있었습니다.
이번 업데이트에서는 그런 부분들이 개선이 되었고, 센스리더 사용자가 좀 더 편리하고 풍부한 콘텐츠를 경험할 수 있도록 개선되었습니다.

어떤 부분들이 업데이트되었는지 몇가지만 살펴보겠습니다.

센스리더 v1.5 배포 이후 업데이트된 내용

1.<a>링크에서 target을 blank로 설정하면 '새 창'이라고 음성 출력함.

기존에는 새창으로 뜨는 경우도, 그냥 링크라고 읽어주어 갑작스런 새창의 등장에 혼란스러웠는데
이제는 target="blank"로 되어 있으면 '새창'이라고 읽어줍니다.

예제	코드	음성출력
네이버	<a href="http://www.naver.com" target="_blank">네이버</a>	기존 :네이버 링크 현재 : 네이버 새창 링크

2. 폼콘트롤에서 title 속성이 없이 <label>만 있을 때 읽어주지 않던 문제 수정

기존에는 폼콘트롤(input, select 등) 에 title 속성이 없으면 <label>을 읽어 주지 않는 버그가 있었습니다.
지금은 폼콘트롤에 title이 없어도 <label>을 잘 읽어주고 있습니다.

예제	코드	음성출력
ID	<label for="id1" title="아이디">ID</label> <input type="text" id="id1" value="" />	ID(이드)편집창
PW	<label for="pw1" title="비밀번호">PW</label> <input type="text" id="pw1" title="한글 영문 혼용 12자" />	PW(피더블유)편집창
비밀번호	<label for="pw2">비밀번호</label> <input type="text" id="pw2" title="한글 영문 혼용 12자" />	비밀번호편집창
비밀번호	<label for="pw3">비밀번호</label> <input type="text" id="pw3" />	비밀번호편집창
비밀번호	<label for="pw4">비밀번호</label> <input type="text" id="pw4" title="" />	비밀번호편집창
비밀번호저장	<input type="checkbox" id="pw5" /><label for="pw5">비밀번호저장</label>	해제 비밀번호저장 체크상자
예	<input type="radio" id="pw6" /><label for="pw6">예</label>	해제 예 라디오버튼
이메일선택	<label for="pw7">이메일선택</label> <select name="sl" id="pw7"> <option value="1">naver</option> </select	이메일선택 네이버 콤보상자

3. title 속성을 < label>, <legend>, <span>, <div>, <p>, <form>, <fieldset> 태그 등에서도 읽도록 수정함.

title을 <label>,< legend>, <span>, <div>, <p>, <form>, <fieldset> 등에 사용하는 경우는 거의 없지만,
어떻게 읽어주는 지는 알아두면 좋을 것 같습니다.

3-1. <span>, <div>, <p>에 title 이 있을 경우
(해당 태그의 영역 확인을 위해 노란색으로 배경을 주었음)

예제	코드	음성출력
011	<span title="번호이동">011</span>	번호이동 영일일
SK	<div title="기기변동">SK</div>	기기변동 에스케이
이 문서는 핸드폰에 대한 설명입니다	<p title="문서설명">이 문서는 핸드폰에 대한 설명입니다</p>	문서설명 이문서는 핸드폰에 대한 설명입니다.

3-2. form과 fieldset에 title이 있을 경우

기본 설정상태 에서는 <form>과 <fieldset>의 title을 읽어주지 않습니다.
하지만 아래 처럼 설정을 바꿔주면 읽을 수 있습니다.

설정방법
스크린리더 → 설정 (Crtl+Shift+F9) → 가상커서설정→ 에서 아래와 같이 '폼시작, 끝읽기' 와 '필드셋 시작, 끝읽기'를 '선택' 으로 바꿔줍니다.
(스페이스 바를 눌러서 '해제'를 '선택' 으로 바꿀 수 있습니다. )

실제로 스크린리더 사용자가 이렇게 설정을 바꿔서 사용하는 경우는 거의 없다고 하니,
<form>,<fielset>에 title을 사용해서 뭔가를 제공하려고 하는 것은 불필요한 작업일 수 있습니다.
그래도 <form>과 <fieldset>의 title을 읽어주도록 설정 한 후에는 어떻게 읽어주는지 궁금하니 알아보도록 하겠습니다.

3-2-1. <form>에 title 이 있을 경우

예제	글쓰기 폼
코드	<form title="글쓰기 폼입니다." action="" name=""> 글쓰기 폼 </form>
음성출력	기본 설정 상태 : 글쓰기 폼 title을 읽도록 설정한 경우 : 글쓰기폼입니다. 폼시작 글쓰기 폼 폼끝

3-2-2. <fieldset>, <legend>에 title 이 있을 경우

예제	로그인
코드	<fieldset title="로그인영역"> <legend title="이곳은 로그인하는 영역입니다.">로그인</legend> </fieldset>
음성출력	기본 설정 상태에서는 <legend>의 title은 읽어주고, <fieldset>의 title은 읽어주지 않음. 기본설정상태 : 이곳은 로그인하는 영역입니다. 로그인 title을 읽도록 설정한 경우: 로그인 영역 필드셋 시작 이곳은 로그인하는 영역입니다. 로그인 필드셋 끝

4. 링크, 이미지맵링크, 이미지버튼, 이미지에서 title을 읽을 수 없던 문제를
툴팁 읽기 기능을 이용해서 확인할 수 있도록 수정.

이미지맵 링크, 이미지버튼, 이미지 등에는 거의 대부분 alt만을 씁니다.
<a>링크에도 title을 사용할 경우가 거의 없습니다.
하지만 title을 꼭 써야만 하는 특별한 경우에 title을 읽어줄 수 있도록 개선되었습니다.
다만, 아래와 같이 '툴팁 읽기' 설정을 '선택' 으로 바꾼 후에 읽어주는 것이 가능합니다.

툴팁 읽기 설정 방법
스크린리더 → 설정 (Crtl+Shift+F9) → 가상커서설정→ 툴팁 읽기 를 '선택' 으로 바꿔줍니다.
(스페이스 바를 눌러서 '해제'를 '선택' 으로 바꿀 수 있음. )
※ 툴팁 읽기 기능은 '해제' 상태가 기본 설정 상태이며 ,스크린리더 사용자가 기본 설정을 바꿔 사용하는 경우는 거의 없다고 합니다.

'기본 설정'상태와 '툴팁 읽기 선택' 상태에서 음성 출력에 대한 비교
예제	코드	음성출력
	<img src="img_sam_01.gif" alt="석양" width="100" height="75" />	기본 설정 상태: 석양 이미지 툴팁 읽기 선택 상태: 석양 이미지
	<img src="img_sam_01.gif" alt="석양" title="빨간 석양이 바다를 아름답게 비춥니다" width="100" height="75" />	기본 설정 상태: 석양 이미지 툴팁 읽기 선택 상태 : 석양 이미지 툴팁 빨간 석양이 바다를 아름답게 비춥니다.
	<input type="image" alt="확인" title="클릭하세요" src="confirm.gif" />	기본 설정 상태: 클릭하세요 이미지버튼 툴팁 읽기 선택 상태 : 클릭하세요 이미지버튼 툴팁 클릭하세요 이미지버튼 툴팁 읽기 선택 상태에서 title이 있는 경우 title이 우선순위가 높아져 alt를 읽어주지 않음.
네이버	<a href="http://www.naver.com" title="클릭하세요">네이버</a>	기본 설정 상태: 네이버 링크 툴팁 읽기 선택 상태 : 네이버 툴팁 클릭하세요.

5.테이블 제목을 읽어주지 않던 문제 수정.

caption을 읽어줄 때 기존에는 해당 내용만 읽어주어 정확하게 무엇을 읽어주는 것인지 알기 어려웠으나,
지금은 '테이블 제목' 이라고 먼저 읽어주어 무엇을 읽어주는 지 명확해 졌습니다.

예제

코드

음성출력

최신영화
제목	13구역

기존 :
테이블 1행 2열 최신영화
제목
13구역

현재 :
테이블 1행 2열 테이블 제목 최신영화
제목
13구역

6.입력 가능한 프레임을 만났을 경우 '멀티라인 편집창'이라고 읽어주며, Enter 키를 누른 후 입력 가능.

네이버 메일의 경우 기존에는 글쓰기 창이 어디 인지 알기가 어렵고 가상커서를 해지해야만 글을 쓸 수 있었는데,
이제는 Ctrl+Tab, Ctrl+Shift+Tab 으로 프레임간 이동을 할 수 있어 글편집창으로 빠르게 이동 가능해졌고,
"프레임 시작 ~ 멀티라인 편집창" 이라고 읽어줄 때 엔터를 치면 바로 글을 쓸 수 있어 편리해 졌습니다.
( 물결(~) 표시는 페이지내 프레임 갯수인데 생략 표시 했습니다)

네이버에서 메일 쓰기
예제	음성출력
	Ctrl+Tab을 누르면 프레임이 여러개 있지만, 그중에서 멀티라인 편집창 이라고 읽어주는 곳이 글쓰기창입니다. 프레임시작 ~ 멀티라인 편집창 이라고 읽어주며 엔터를 친후에 글을 쓸 수 있음

위의 내용 외에도 많은 부분이 업데이트되었지만, 이 정도가 인터넷관련 부분에서 업데이트된 내용입니다.

오래전에 만들어진, 웹표준에 맞춰 작업되지 않은, 수많은 사이트들때문에 스크린리더 사용자가 웹을 자유롭고 빠르게 사용하긴 아직은 어렵습니다.
하지만, 센스리더 측에서 센스리더를 사용해서 인터넷을 이용할때 불편한 점들을 알려주시면 저희는 개선 방법을 모색하고,
반대로 저희가 센스리더에서 개선되었으면 하는 사항들이나 버그들을 센스리더 측에 제안하면, 적극 수용해서 반영해주고 계십니다.

이렇게 양방향으로 노력하고 있으니, 웹표준만 잘지켜서 마크업하면
모든 사람들이 동일하게 보고, 들을 수 있는 시대가 멀지 않아 보이죠? ^^

앞으로도 업데이트되는 사항을 모아서 지속적으로 업데이트할 예정입니다.
궁금한 점이 있으시면 hyejin.han앳nhn.com 으로 문의주세요.

행복한 하루되세요~

windows firefox3 1px 버그

2009-06-09T16:02:19P

안녕하세요. 윤좌진 입니다.

플래시를 페이지에 보여주기 위해 javascript를 이용하거나 object나 embed태그를 이용해서 표현을 합니다.
그러나 z-index 때문에 혹은 다른 개발 사정으로 인해 iframe을 이용해서 표현 할 경우가 있는데 이럴때 firefox3에서는 일부 경우에 따라 플래시 좌측 1px을 표현하지 못하는 버그가 발생합니다.
이 버그의 공통된 원인은 플래시를 감싸는 박스가 margin:0 auto;의 속성으로 가운데 정렬이 된 경우 발생하며, 박스의 width 값이 홀 수이거나 짝수 일 경우 발생하게 됩니다.
여기서 width값이 홀 수 이거나 짝수일 경우라는 것은 브라우저의 세로 스크롤 때문입니다.(어쩌면 브라우저의 가로사이즈가 홀수이냐 짝수이냐의 문제일 수도 있습니다.)
감싸는 박스란 플래시에서 바깥의 어떤 박스든 플래시가 포함되어 있다면 어느 박스이던지 해당되며, 플래시와 가장 가까운 박스가 플래시에게 최종적인 영향을 가할 수 있습니다.
아래 그림으로 다시 확인 해 보자면..

위 그림을 보면 D를 제외한 A,B,C,F 박스에 어떤 박스이던지 margin:0 auto; 속성이 들어갈 경우 발생하게 됩니다.
문제는 박스의 가로 사이즈가 홀수, 짝수 모두 발생할 수 있기 때문인데 세로 스크롤이 항상 있는 경우라면 가로 사이즈는 홀수로 설정되어야 하고 세로 스크롤이 항상 없는 경우라면 짝수로 설정되어도 됩니다..
하지만 이럴 경우는 거의 없습니다.
그리고 window XP의 테마가 고전이냐 XP테마 이냐에 따라서도 홀수, 짝수 기준이 달라지고 브라우저의 전체 가로사이즈가 홀수 이냐 짝수 이냐에 따라서도 달라지게 됩니다.

이 문제를 해결하기 위해서 현재까지 해결 방법으로는 플래시의 wmode를 window로 설정하는 것이 유일한 대안이지만 wmode의 window는 기본값이고 성능이 가장 좋다고는 하지만 플래시위에 레이어를 띄울 수도 없고, 아래쪽의 배경이나 요소가 보여지지도 않기 때문에 상황에 따라서는 해결방법으로 적합하지 않을 수 도 있을 것입니다.

지금까지 왠만한 가운데 정렬되는 사이트에서 사용중인 iframe을 이용한 플래시가 눈으로 봤을 때 1px이 보이지 않는 불편함이 느껴지지 않았다고 생각되어, 특별한 경우가 아니라면 수정하지 않아도 문제는 없겠지만 분명한 것은 Firefox3 브라우저의 버그이기 때문에 이후 버전에서나 현재 버전 업데이트를 통해 수정 되었으면 하는 바람입니다.

wmode=opaque 예제는 ex1_opaque.html uif_opaque.html 다운로드
wmode=window 예제는 ex2_window.html uif_window.html 다운로드

IE8 fieldset/legend bug

2009-06-02T10:20:00P

지난 3월, IE8 정식 버전이 발표되었습니다.
이전 버전에 비하여 웹표준 준수율은 매우 높습니다만, 많은 분들의 반응을 보니 여러 문제를 안고 있는듯 하네요-
그 중에서도 UI개발자에게 다소 치명적(?!)일 수 있는 버그 하나를 소개해드릴까합니다.

다름아닌 fieldset/legend bug입니다.

아래와 같은 디자인은 우리가 쉽게 볼 수 있습니다. (테스트를 위해 임의로 만든 이미지입니다.)

디자인 요소라고 한다면 로그인 영역의 백그라운드 컬러, 1px 보더 정도가 되겠네요.
input type="text" 부분은 중요한 부분이 아니니 디자인을 생략하도록 하겠습니다.

저는 이렇게 마크업을 해 보았습니다. 아마도 가장 기본적인 방법이겠죠?

<style type="text/css">
fieldset {position:relative; width:211px; height:73px; padding:15px 15px 0 15px; border:1px solid #b7cca7; background:#f5f9f2;}
legend {display:none;}
input.input_text {display:block; float:left; width:150px; height:21px; margin-bottom:9px;}
input.btn_login {float:right; margin-top:-33px;}
</style>

<fieldset>
	<legend>로그인</legend>
	<input type="text" class="input_text" title="아이디"/>
	<input type="password" class="input_text" title="비밀번호"/>
	<input type="image" src="img/btn_login.gif" class="btn_login" alt="로그인" />
</fieldset>

그런데 이렇게 마크업을 하게 되면 다른 브라우저는 잘 나오는데 IE8에서는 아래처럼 border가 반밖에 나오지 않습니다.

아니, 도대체, 왜?

원인은 바로 legend에 있었습니다. legend 엘리먼트에 준 display:none 속성 때문이었죠.
그래서 각 브라우저별로 legend의 display 속성값에 따른 렌더링을 살펴보았습니다.

	legend style="display:block"	legend style="display:none"
FF, Opera, Safari
IE6, 7
IE8

결과를 보니 IE가 확실히 기형적인것 같네요...;; 그중에서도 IE8은..뭐...^^;;

외국 자료들을 찾아봐도 이것은 확실히 IE8의 버그임이 확실했고, 한국 MS IE 관련자 분께 해당 문제를 알려드렸습니다.
빨리 수정되었으면 하는 간절한 바램이 있네요~

우스갯소리지만, 어떤 블로그에는 "They'll probably call it IE9." - 이런 댓글도 있더군요. ^^;;

그.렇.지.만-
MS에서 해결해 줄 때 까지 기다릴 수 만은 없죠!!
방법을 찾아야 하는 법!

이 문제를 해결할 수 있는 여러가지 방법이 있을 수 있습니다.

백그라운드로 처리한다. - 박스의 사이즈가 유동적일 때는 문제가 될수 있습니다.
fieldset 밖이나 안에 div를 추가하여 추가된 div에 border를 준다. - 디자인만을 위해서 의미없는 구조를 추가해야 합니다.
legend를 display:none이 아닌 다른 방법(?!)으로 감춘다. - 문제 없으며, 스크린리더에서 읽히는 장점도 있습니다. 완전 강추!

세번째의 다른 방법이라는 것은 스크린리더에서 display:none 속성을 읽어주지 않을 수도 있기 때문에, 팀 내에서 display:none대신 사용하고 있는 다른 style을 적용해보는것입니다.

legend {position:absolute; top:0; left:0; width:0; height:0; overflow:hidden; visibility:hidden; font-size:0; line-height:0;}

이렇게 하니 스크린리더 지원도 되고, IE8의 특이한 렌더링 방식에도 대응할 수 있게 되었습니다. 짝!짝!짝!

여러분도 한번 시도해보세요~

[덧붙이는말]

세번째 방법에 대한 코드를 아래와 같이 변경합니다. padding:0를 추가한 것이구요-
보통 마크업실때 여백 초기화 (* {margin:0; padding:0;})를 하시면 상관이 없습니다만, 그렇지 않을 경우에는 아래와 같이 padding:0를 꼭 선언해주셔야 합니다.

legend {position:absolute; top:0; left:0; width:0; height:0; overflow:hidden; padding:0; visibility:hidden; font-size:0; line-height:0;}

PC에서 모바일 웹사이트 보기

2009-04-30T12:14:40P

안녕하세요. 웹표준화팀 박상혁입니다.

2009년 어느날
"우리도 모바일에 최적화된 모바일 전용 웹 서비스를 제공 하기로 했습니다~!!" 라는 결정이 내려졌다면... 우리 UI개발자들은 어떤 것부터 해야할까요?
서적이나 가이드문서를 옆에두고 참고하면서 진행하려고 하는데 관련 자료를 찾기가 힘들고 책은 더더욱 힘듭니다.
이런 상황에서 가장 먼저 쉽게 할 수 있는 것은 아마도 이미 모바일 서비스 제공중인 곳의 마크업을 살펴보고 코드를 응용해서 작업 하는 방법일 겁니다.
하지만 얼마전 구입한 최신 핸드폰으로 http://pda.naver.com에 접속했으나 모바일 웹 브라우저는 소스보기를 지원하지 않고 PC에서 접속하니 모바일 사이트는 접근 할 수 없습니다.

위와 같은 상황에서 PC 웹 브라우저로 모바일 사이트를 볼 수 있는 방법을 소개하려고 합니다. 물론 소스보기도 가능하구요.

일반적으로 브라우저는 User Agent 혹은 사용자 정보라고 불리우는 브라우저 고유의 정보를 가지고 있습니다. 이것은 사용자가 브라우저에 주소를 입력해 접속 요청을 하면 현재 사용자의 브라우저종류, 버전, OS 등을 서버에 알려주는 역할을 합니다.
이러한 정보를 이용해 특정 브라우저 사용자가 해당 웹사이트 접근을 할 수 없게 하거나 혹은 해당되는 사용자만 사용할 수 있도록 해 놓은 경우가 있습니다. (물론 특정 URL로 PC에서도 별도 설정 변경 없이 확인 가능한 서비스도 있습니다.)
모바일 웹 브라우저도 PC 웹 브라우저와 마찬가지로 User Agent를 웹 서버에 전송합니다. 이것을 이용하여 사용자가 특정 서비스에 접속했을때 User Agent를 확인 해 PC,Mobile 에 최적화된 각각의 서비스로 연결시킵니다.

실제로 전송되는 User Agent 를 테스트 해본 결과 PHP의 $_SERVER['HTTP_USER_AGENT'] 로 아래와 같은 User Agent Strings 을 확인 할 수 있었습니다.

LG 아르고폰(LG텔레콤) - Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0; 800*600;POLARIS 6.0;em1.0;lgtelecom;EB10-200090218-707682823;LG-LH2300;0);


iPod Touch - Mozilla/5.0 (iPod; U; CPU like Mac OS X; ko-kr) AppleWebKit/420.1 (KHTML, like Gecko) Version/3.0 Mobile/4A93 Safari/419.3


옴니아 Opera Mobile - SAMSUNG-SCH-M490/(null)HK4 (compatible; MSIE 6.0; Windows CE; PPC) Opera 9.5


옴니아 IE Mobile - SAMSUNG-SCH-M490/(null)HK4 (compatible; MSIE 6.0; Windows CE; IEMobile 7.11)

Firefox (add-on)

위의 정보를 가지고 아래와 같이 설정하시면 확인 하실 수 있습니다.

User Agent Switcher - Firefox의 User Agent를 모바일 단말의 User Agent 로 설정하면 모바일 단말의 브라우저로 정보를 요청했을때와 같은 응답을 받을 수 있습니다.
1. 설치 후 도구 > User Agent Switcher > options > options 선택
2. 왼쪽의 User Agents > Add 클릭 > 단말기의 User Agent 입력(ex. iPod Touch)
3. 추가된 단말기 User Agent 선택
4. 모바일 웹 서비스 접속
비슷한 기능의 Firefox Add on 으로는 Modify Header 등이 있습니다.
XHTML Mobile Profile - Firefox 가 본래 지원하지 않는 application/vnd.wap.xhtml+xml mime-type을 지원합니다. 모바일 웹 스펙인 XHTML Mobile Profile을 위한 MIME-TYPE인 application/vnd.wap.xhtml+xml의 설정되어 있을 경우 이를 표시 해주는 Add on 입니다. 설치 후 별도 설정은 필요 없습니다.
wmlbrowser - Firefox 에서 WML page 를 보여주는 부가기능입니다. 설치 후 별도 설정은 필요 없습니다.

Safari

Safari 브라우저의 경우 브라우저에 해당 기능을 기본으로 제공하고 있습니다. DevelopMode 를 활성화 시켜 User Agent 를 iPhone 이나 iPod Touch 로 변경해서 동일한 결과를 얻을 수 있습니다. 설정 방법은 아래와 같습니다.

편집 > 기본설정 > 고급 > 개발자용 모드 보기에 체크
개발자용 메뉴 > 사용자 에이전트 > iPhone

iPhoney (Mac OS용) - iPhone을 기본화면으로 하고 있으며 iPhone 화면 크기에 맞게 작업물을 확인 할 수 있습니다. TestiPhone 이나 iPhone Tester 과 비슷하며 추가적으로 확대기능, 그리고 User Agents 를 변경 할 수 있습니다.

Internet Explorer

Internet Explorer 브라우저는 시스템 레지스트리값을 변경하여 확인 할 수 있습니다.

[HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Internet Settings\5.0\User Agent] 의 데이터값을 위의 모바일 단말의 브라우저 User Agent 로 설정

하지만 매번 설정 변경과 원상복구를 해야하는 불편함과 레지스트리값 변경으로 인한 시스템 오류가 있을 수 있으니 권장하지 않습니다.

테스트 가능한 모바일 서비스

아래 서비스는 User Agent String을 체크해 PC와 Mobile 사이트로 각각 이동시켜 줍니다.

아래 서비스는 User Agent String을 체크해 Mobile 단말일때만 서비스 접근을 허용한 서비스 입니다. (주로 PDA용 사이트)

http://pda.naver.com/
http://mini.cyworld.com (옴니아 오페라)

아래 서비스는 User Agent String 값과 관계없이 확인 가능한 모바일 서비스입니다. 주소에서도 알 수 있듯이 특정 브라우저에 최적화된 서비스가 대부분입니다.

http://m.me2day.net
http://m.daum.net/mini (User Agent 체크 후 단말,브라우저별 CSS분기)
http://mini.paran.com
http://p.dreamwiz.com
http://m.digg.com
http://www.walmart.com/iphone/
http://iphone.kmug.co.kr
http://pda.kma.go.kr/pda/main.jsp

마치며

위와 같이 Firefox add-on 및 Safari,IE 설정 변경으로 모바일 관련 서비스를 간단히 둘러보고 소스보기,응용 작업을 할 수 있습니다. (서버 설정에 따라 다른 사용자 정보를 가지고 접근을 제한할 때는 접근하지 못하는 경우도 있습니다. )
하지만 실제 마크업 작업 후 디버깅 시에는 브라우저 뿐만 아니라 다양한 단말의 화면크기에 따라 테스트를 해야 하므로 테스트 기기로 디버깅 하는 것이 정확합니다.

참고자료

http://paininthetech.com/2007/10/03/fake-iPhone-user-agent/

[접수마감] NHN UIT 센터 웹표준화팀에서 특별 채용을 진행합니다.

2009-04-27T11:06:42P

본 게시물의 내용인 채용관련 서류접수는 마감되었습니다.

관심 감사드립니다.

안녕하세요.
웹표준화팀 기타도리입니다 :)

저희 팀에서는 진취적이며 능력있는 분들을 위해, 특별채용을 실시 합니다.
자세한 내용은 아래 참조 바라며, 궁금하신 사항은 덧글로 문의주시면 답하도록 하겠습니다.

모집대상
- 다양하고 풍부한 실무 경험과 발전성을 지닌 마크업 개발자
- 프로젝트 리딩 이나, 일정관리의 경험자 혹은 그에 준하는 관리역할 수행자
- 웹표준 마크업으로 전향했거나 의향이 있는 1년 이상의 웹개발 실무 경력자
- 모집인원 : 정규 4명

주요업무

네이버 서비스의 마크업 유지 보수 및 개편

마크업 기술의 R&D 및 고도화 작업

지원 공통 조건사항

button의 브라우저별 랜더링 비교, 사용방법, 문제점, 해결방법

2009-04-24T11:45:57P

안녕하세요. 웹표준화팀 한혜진입니다.

저는 그동안 <button>엘리먼트는 생소하고, 그 기능도 모호한 것 같아서 잘 사용하지 않았었습니다.
그런데 에디터 관련 프로젝트를 진행하던 중, 글편집기 상단에 도구 모음들을 마크업해야 할 일이 생겼고,
<a>와 <button> 중 어떤 태그로 마크업 하는 것이 더 시멘틱 할까를 고민하게 되었습니다.

<a>와 <button>의 쓰임새를 정리해보자면,
<a>엘리먼트는 앵커(anchor)로써 문서 간의 연결, URI 참조가 주된 목적이고
<button>엘리먼트는 누를 수 있는 단추로써, 누르거나 눌렀다 놓았을 때 이벤트를 발생시키도록 하는게 주된 목적입니다.

그러므로, 이벤트를 발생시켜야 하지만 Submit 할 것은 아닌,
단순히 UI조작(기능 선택, 레이어 보이기, 숨기기, 삭제 등)을 위한 버튼이라면
<button>엘리먼트를 사용하는 것이 시멘틱할 것 같다는 게 저의 생각이었습니다.

또 개발 담당자분께서 말씀하시길,
도구 모음쪽에 <a> 엘리먼트를 사용할 경우, 도구모음을 클릭하고 편집기에서 글을 쓰면 글이 잘 안써지는 버그가 있는데
<button>엘리먼트를 사용하면 그 버그가 발생하지 않는다고 하셨습니다.
그래서 더욱 힘을 얻고 <button> 엘리먼트로 마크업을 하게 되었습니다.

그런데 <button>엘리먼트로 마크업하면서 생각치 못한 여러가지 문제점들이 발생했습니다.
어떤 문제점 들이 있었는지 <button>의 브라우저별 랜더링 비교, 사용 방법, 문제점, 해결 방법 등을 지금부터 공유합니다.

<button>엘리먼트의 브라우저별 랜더링 비교

<button>엘리먼트는 다음과 같이 마크업할 수 있습니다.

<button type="button">글자색</button>

그러면 IE는 다음과 같이 랜더링합니다.

다른 브라우저에서도 IE와 동일하게 랜더링할까요? 바로 비교해보겠습니다.

※ 기본 버튼의 브라우저별 랜더링 비교

다른 form요소도 그러하듯이, <button>엘리먼트도 각 브라우저가 가진 고유의 스타일로 랜더링 합니다.
넓이도, 높이도, 모양도 다르고, 텍스트의 세로 정렬도 다릅니다.
심지어 텍스트를 왼쪽 정렬시켜도, 각 브라우저마다 여백에 많은 차이가 있는 것을 한눈에 알 수 있습니다.
이 녀석을 어떻게 내 입맛에 맞게 구워 삶으면 좋을까요?

<button> 엘리먼트 사용방법

텍스트를 정렬하기 위한 버튼의 조합이 있습니다.

세개 버튼중 왼쪽 정렬 버튼은 다음과 같이 마크업할 수 있습니다.

button {width:21px; height:21px; margin:0; padding:0; border:0; background:none;  font-size:0; line-height:0; cursor:pointer;}

<button type="button"><img src="left.gif" alt="왼쪽정렬" wdith="21" height="21"></button>

▶ img를 사용한 버튼 보기

이렇게 마크업을 하면 버튼 클릭시 움직임이 있습니다.
더 큰 문제는 FF와 Chrome에서는 button이 기본적으로 여백을 가지고 있다는 것입니다. (아래 표 참고)
FF과 Chrome에서도 그 여백에 차이가 있어 CSS hack으로도 완벽히 동일하게는 처리가 어렵습니다.

※ button에 img를 넣었을 때 브라우저별 랜더링 비교

저는 클릭시 움직임이 없으며, 모든 브라우저에서 동일한 버튼을 만들기 위해 아래와 같이 마크업했습니다.

button {width:21px; height:21px; margin:0; padding:0; border:0; 
background:url(http://html.nhndesign.com/img/blog/hhj/img/align_set.gif) no-repeat;  cursor:pointer; /* button에 배경삽입 */} 
button span {overflow:hidden; position:absolute; top:0; left:0; width:0; height:0; visibility:hidden;/* 대체 텍스트 숨김 처리 */} 

<button type="button" title="왼쪽정렬"><span>왼쪽정렬</span></button>

▶ 클릭시 움직임이 없는 버튼 보기

이미지는 button에 background로 처리했습니다.
<span>왼쪽정렬</span>은 대체 텍스트와 같은 역할을 위해 넣었으며,
title은 툴팁 효과를 내기 위해 넣었습니다.
이 버튼은 모든 브라우저에서 동일하게 보이며, 클릭시 움직이지 않습니다. (단, IE8에서는 클릭시 움직임이 있습니다.)

이렇게 마크업을 하면, CSS가 깨졌을 경우 다음 처럼 랜더링 됩니다.

만약 <span>왼쪽정렬</span> 을 넣지 않으면 CSS가 깨질 경우 다음 처럼 랜더링됩니다.

그렇기 때문에 대체 텍스트 역할을 할 <span>왼쪽정렬</span> 넣어주고, 눈에 보이지 않도록 스타일을 지정합니다.
display:none 처리를 하지 않은 것은 시각장애인이 스크린리더기를 사용해서 읽을 때도 읽을 수 있도록 하기 위함입니다.

잠시 visibility 속성에 대해 짚고 넘어가자면,
현재 국산 스크린리더기인 센스리더는 visibility:hidden을 display:none과 마찬가지로 읽어주지 않고 있는데 이것은 잘못된 것입니다.
http://trio.co.kr/webrefer/css2/propidx.html 에서 보면
visibility 속성은 미디어 타입이 visual일때 지켜야 하는 사항이라고 나와있습니다.
즉 '미디어 타입이 눈으로 볼 수 있는 TV, 스크린, 프린트 등일때 visibility:hidden이라면 보여주지 말아야 한다' 는 건데요.
스크린리더기는 aural 타입이므로 visibility:hidden으로 되어 있어도 읽을 수 있게 해주어야 합니다.
그래서 센스리더 측에 제안을 했고, 다행히도 다음 버전에서 업데이트 해주신다고 합니다.

이렇게 작업을 해주면 모든 브라우저에서 동일하게 보여지고, 클릭시 움직임도 없습니다.
개발을 붙일 때도 용이하며 CSS가 깨졌을 경우에도 콘텐츠 내용을 알 수 있으므로 접근성도 좋아집니다.
하지만 이미지가 로딩이 안될 경우에는 아무것도 안보이게 되는데요. 이럴 경우는 거의 없다라고 생각하고 넘어가겠습니다.

IE8에서 문제점

여기서 한가지 문제가 있습니다.
위에 제시한 대로 마크업을 하면 버튼을 클릭시에도 오페라, 사파리, 크롬, IE7이하, FF에서 모두 움직임이 없고, 여백도 없이 동일하게 보여집니다.
하지만 IE8에서는 button 자체가 움직이기 때문에 이미지를 배경으로 처리해도 움직이게 됩니다.

브라우저단에서는 클릭시에 움직임을 줌으로써 "이 녀석은 누를 수 있는 '버튼'입니다" 라고 명확하게 알려주고,
사용자로 하여금 풍부한 기능을 체험하게 해주고 싶었을 겁니다.
그렇기 때문에 움직이면 움직이는 데로 자연스럽게 두는 것이 풍부한 사용자 경험을 위해서는 더 좋을 수 있습니다.
실제로, 제가 진행하는 프로젝트에서는 버튼이 움직이는 것이 크게 나빠보이지 않는다는 의견이 많아
IE8에서 움직이는 현상을 자연스럽게 그대로 두기로 했습니다.

하지만, 클릭시 움직임이 디자이너의 관점에서는 용납이 안되는 경우가 있을 수도 있기 때문에 그 해결 방법을 제시합니다.
ex) 클릭시 움직임으로 인해 전체 그리드가 깨져보이는 경우

해결 방법

해결방법1

button {width:21px; height:21px; margin:0; padding:0; border:0; background:none; cursor:pointer;}
button span {position:relative; display:block; width:21px; height:21px; margin:0; padding:0; background:url(img/align_set.gif) no-repeat;}
button span span {overflow:hidden; position:absolute; top:0; left:0; width:0; height:0; margin:0; padding:0; visibility:hidden;}
button span, x:-moz-any-link, x:default {margin:-2px 0 0 -3px !important;} /* Mozilla 계열만 인식되는 firefox 핵 */
@media screen and (-webkit-min-device-pixel-ratio:0) {
button span{margin:-1px 0 0 -3px !important;}
} /* Webkit 엔진계열만 인식하는 safari,chrome 핵 */

<button type="button" title="왼쪽정렬"><span><span>왼쪽정렬</span></span></button>

▶ 해결방법1 로 마크업한 버튼 보기

<span>에 배경이미지를 주고 position을 relative로 주었습니다.
이렇게 하면 IE8에서도 움직이지 않게 됩니다.
하지만 여전히 FF과 Chrome에서 여백이 발생하므로 CSS hack을 사용했습니다.
(단, Opera에서는 클릭시에 움직임이 있습니다. -_-; 여렵다 어려워..)

해결 방법2

.left {display:block; width:21px; height:21px; margin:0; padding:0; border:0; font-size:0; 
background:url(http://html.nhndesign.com/img/blog/hhj/img/align_set.gif) 0 0 no-repeat;}
button {width:21px; height:21px; margin:0; padding:0; border:0; background:none; cursor:pointer;}
button span {overflow:hidden; position:absolute; top:0; left:0; width:0; height:0; margin:0; padding:0; visibility:hidden;}

<span class="left"><button type="button" title="왼쪽정렬"><span>왼쪽정렬</span></button></span>

▶ 모든 브라우저에서 동일하게 보여지는 button 보기

<button>을 <span>으로 감싸고, <span>에 이미지를 배경처리 합니다.
이렇게 처리하면 CSS Hack을 쓰지 않아도, IE8에서도 움직이지 않고, 모든 브라우저에서 동일하게 보여집니다.
하지만 불필요한 태그가 생김으로 해서 CSS스타일도 그만큼 늘어나게 되니,
퍼포먼스와 심미성의 경중을 따져서 결정하시면 될 것 같습니다.

참고자료

<button>엘리먼트에 대해서 많은 자세한 내용을 전달하고 싶은 마음에 글이 너무 길어졌네요.
끝까지 읽어주셔서 감사합니다.

궁금한 점이 있으시면 hyejin.han앳nhncorp.com 으로 문의주세요.

행복한 하루되세요~

모바일 웹 접근성 지키기

2009-04-20T19:20:23P

웹을 제작함에 있어 점점 더 중요한 이슈로 떠오르고 있는 웹접근성에 대한 W3C의 정의는 아래와 같습니다.

Web accessibility means that people with disabilities can use the Web.

우리팀이나 저의 경우는 몇가지 단어를 덧붙여 아래와 같은 정의를 내리고 있구요-

Web accessibility means that all people include with disabilities can use the Web.

그렇다면, 이번 포스팅에서 말하고자 하는 모바일 웹 접근성의 정의는 아마도 아래와 같을 수 있겠네요.

Mobile Web accessibility means that all people include with disabilities can use the Web through mobile device.
모바일 웹 접근성은 장애를 가지고 있는 사람을 포함한 모든 사람들이 모바일 기기로 웹을 이용할 수 있는 것을 의미한다.

결국, 모바일 웹에서 접근성을 보장한다는 것은 유선 웹에서 접근성을 보장하는 방법에 모바일 기기의 특수성을 조금만 고려하면 되는 셈이죠.
참 쉽져잉~ (개그우먼 박지선Ver.)

모바일 기기의 특수성을 고려한다는 것이 살짝 어렵게 느껴질 수도 있지만,
모바일 환경에서의 사용자 경험은 장애를 가진 사람들의 사용자 경험과 유사점을 많이 갖고 있으며, 실제로 중복되는 측면이 많습니다.

몇가지 예를 들어볼까요?

출근중인 A, 휴대폰으로 웹에 접속하여 어제 중계된 야구경기의 하이라이트 영상을 봅니다. 사람이 북적거리는 지하철 안은 소음이 굉장히 많네요. 이어폰을 특별히 준비하지 않아 동영상 소리가 들리지 않습니다.
장거리 여행중인 B, 모바일 폰으로 다음에 탈 버스를 예약하려고 하는데요, 키패드로 필요한 정보를 입력하는 것이 쉽지 않습니다.

첫번째 예는 청각이, 두번째는 손에 대한 운동능력이 저하되었을 때 겪는 어려움의 형태와 유사합니다.

결론적으로, 웹 접근성을 잘 보장하면 모바일 웹 접근성도 자연스럽게 제공될 수 있다는 것이죠-

웹 접근성을 보장하기 위한 가이드라인은 WCAG2.0¹⁾, KWCAG1.0²⁾ 등, 이미 많은 자료가 존재하고 있으며,
모바일 웹 제작 가이드인 MWBP1.0³⁾를 참고하면 모바일 웹 접근성을 보장하는 데 더 많은 도움이 될 것입니다.

친절하게도, WAI에서는 위에서 소개한 가이드라인을 토대로 모바일 웹 접근성을 제공하기 위한 방법을 더 간편하게 소개하고 있습니다.
원문보기

모바일 웹에서도 WCAG에서 제시하고 있는 네가지 지침(Perceivable, Operable, Understandable,Robust)은 동일하게 적용되는데요, 그 내용을 간략히 정리해보았습니다.
각 항목은 모바일 웹 접근성을 저해하는 요소와 그 이유를 제시하고 있습니다.
(원문을 제 임의대로 이해하여 정리한 것이니 다른 의견이 있으시면 말씀해주세요.)

Perceivable - 인식의 용이성

색상만으로 정보 전달하기
각 기기마다 동일한 컬러를 표현하지 못할 수도 있으며, 색상 표현 능력이 뛰어난 기기라도 밝은 곳에서는 잘 안보일 수 있다.
큰 페이지, 큰 이미지
모바일 기기의 스크린은 작기 때문에 큰 페이지를 스크롤링 하다 문맥을 혼동하기 쉽고, 너무 큰 이미지는 찌그러져 정보전달이 어렵다.
캡션이 없는 동영상
공공장소에서 매너모드로 설정을 해 놓거나, 시끄러운 곳에서 모바일 기기를 이용해야 할 경우, 음성정보를 놓칠 수 있다.
경고, 에러메시지(얼럿창)를 텍스트가 아닌 음성형태(beep)로만 출력하는 경우
잘못된 인터랙션을 알아차리지 못해 실수를 유발하게 된다.
이미지, 동영상 등의 비문자 콘텐츠에 대체 택스트를 제공하지 않는 경우
사용자의 모바일 인터넷 사용 환경에 따라 비문자 콘텐츠가 올바르게 표현되지 않을 수 있다. 비문자 형태로 꼭 제공되어야 할 경우, 중요한 정보에는 사용을 피해야한다.
비어있는 인풋박스의 사용
숫자만 입력해야 하는 인풋박스에 영문입력이 가능한 경우, 똑같은 과정(입력)을 여러번 반복해야 한다.
테이블이나 CSS를 이용하여 콘텐츠의 순서를 구성하거나 정보를 전달하고자 할 경우
테이블이나 CSS가 바르게 렌더링 되지 못하여 콘텐츠 배치가 올바르지 못할 수 있다.

Operable - 운용의 용이성

마우스 의존적인 인터랙션과 네비게이션
키패드나 터치스크린의 특성을 고려한 인터랙션과 네비게이팅도 가능해야한다.
콘텐츠 이용에 있어 스크립트나 특정 플러그인이 요구될 경우
모바일 기기에서 해당 기능이 꺼져있거나, 지원되지 않을 수 있다.
페이지 타이틀이 빠져있거나 적절하지 않은 경우
작은 스크린에서도 전체 페이지의 개요를 명확하게 이해할 수 있어야 한다.
포커싱이 논리적인 순서대로 움직이지 않을 경우
논리적인 순서대로 구성되어있지 않는 문서를 순차적으로 방문을 하다보면 전체 내용을 이해하는데 어려울 수 있다.
링크에 충분한 설명이 없을 경우
링크의 목적지를 예측하기가 어렵다.

Understandable - 이해의 용이성

긴 단어, 복잡한 문장, 은어의 사용
모바일 기기를 이용하는 환경(주변 잡음, 대화, 움직이는 사물)에 영향을 받아 간단명료하지 않은 표현은 문맥을 놓치게 할 수 있다.
사용자에게 알림없는 화면 전환
모바일 기기는 윈도우가 제한적이므로, 다중 창이 뜰 경우 정보가 제대로 표현되지 않을 수 있다.
깜빡거리고, 움직이고, 자동으로 업데이트 되는 콘텐츠의 사용
밝은곳에서 잘 보이지 않고 스크린이 작은 모바일 기기에서는 콘텐츠 이해가 어려울 수 있으며, 자동으로 새로고침이 될 경우, 사용자의 의지와 관계 없이 데이터 사용요금(다운로드에 대한)이 추가된다.

Robust - 기술의 진보성

표준에 맞지 않는 마크업
모바일 브라우저의 지원을 장담할 수 없어 콘텐츠가 바르게 표시될 수 없는 가능성이 있다.

용어정리

WCAG2.0 Web Contents Accessibility Guidelines2.0. 2008년 W3C에서 발표한 웹접근성 지침.
KWCAG1.0 Korean Web Contents Accessibility Guidelines 1.0. 한국형 웹 콘텐츠 접근성 지침.
MWBP1.0 Mobile Web Best Practices 1.0. 모바일 기기에서의 웹 콘텐츠 전달을 위한 모범 사례.

[모바일 마크업] 모바일 서비스 마크업 및 용량 비교 1

2009-04-15T19:36:26P

안녕하세요? 웹표준화팀 문지애입니다.^^

모바일 사이트들은 어떤 특징을 가지고 있을까요?

풀브라우징이 지원되긴 하지만 PC에서 보는 웹에 비해 화면도 좁고, 브라우저도 다르고, 사용 방법도 다른 모바일 환경.

과연 무엇이 다른지 알아보기 위해, 현재 운영중인 모바일 사이트의 DTD, viewport, 글자 크기, 용량을 조사해 보았습니다.^^

※첨부: mobile_benchmarking.pdf (151.6KB)

폰트 크기는 15px 내외인 것 같고, 국내 사이트는 ‘Polaris(폴라리스)’라는 브라우저에 대응하고 있는 것 같은데…

자세한 얘기는 다음에 다시 만나서 나눠봐요!^^

그럼~ ☆

CSS Mobile Profile 2.0 살펴보기

2009-03-30T14:36:04P

CSS 모바일 프로파일 2.0이란?

모바일이라는 제한된 환경에서 효율적으로 웹 콘텐츠를 표현하는 다양한 기술이 개발되고 있습니다. 이러한 기술의 바탕에는 월드와이드 웹 컨소시엄(이하 W3C)이 제정한 XHTML과 CSS 명세서가 있는데 오늘 소개하려는 CSS 모바일 프로파일(이하 CSS-MP) 2.0 역시 CSS 2.1 명세서를 기반으로 CSS 3의 일부 내용을 추가한 명세서입니다.

모바일 폰 산업의 표준을 만들기 위해 설립된 Open Mobile Alliance(이하 OMA)도 Wireless CSS Specification(이하 WCSS)이라는 모바일 환경에 특화된 CSS 명세서를 제정하고 있습니다. 이 명세서도 마찬가지로 CSS 2.1을 기반으로 하기 때문에 CSS 2.1에 익숙한 분들이라면 잠깐 살펴보는 것으로도 그 내용을 파악하실 수 있을 것입니다.

이 글에서는 먼저 CSS-MP가 어떤 목적으로 만들어졌는지 소개하고, CSS-MP와 Wireless CSS 명세서의 차이를 간단히 알아본 다음 CSS-MP에 실제로 어떤 내용이 담겨 있는지를 알아보겠습니다.

CSS-MP란?

CSS-MP는 제한적인 장치(대표적으로 모바일 폰)에서의 상호 운용성을 제공하기 위해 기본이 되는 CSS를 정의한 것입니다. 보통 CSS 2.1의 부분 집합(subset)이라고 표현하는데 플랫폼의 한계로 전체 CSS를 완벽히 지원하지 못하는 장치와 전체 CSS를 지원하는 장치 모두가 지원할 수 있는 공통 부분을 떼어낸 것이라고도 생각할 수 있습니다.

이렇게 CSS 2.1의 부분 집합이지만 CSS 3 박스 모델의 marquee 관련 속성이 일부 추가되었습니다. 지원해야 하는 속성들은 반드시 지원해야 하는 필수 속성과 더 나은 기능 제공을 위한 선택 속성으로 나뉘는데, 어떤 속성들이 필수고 어떤 속성들이 선택인지는 잠시 후에 알아보겠습니다.

CSS-MP와 WCSS의 차이

W3C 는 CSS-MP와 WCSS가 필수적으로 지원해야 하는 속성을 최대한 공유한다고 밝히고 있고, WCSS 명세서는 WCSS를 지원하는 사용자 에이전트가 유효한(valid) CSS-MP 스타일시트 역시 지원하게 될 것이라고 설명하고 있습니다. 실제로도 일부 속성을 제외하면 기본적으로 큰 차이가 없지만 한 가지 중요한 사항이 있습니다. 바로 한중일(CJK: Chinese, Japanese, and Korean) 문자셋에 대한 고려가 포함되어 있다는 점입니다.

사실 font-variant 같은 CSS 2.1의 일부 속성은 라틴 계열의 언어에서만 제대로 적용됩니다. WCSS에는 이렇게 문자셋에 영향을 받는 속성들의 필수/선택 여부를 따로 정의하고 있습니다. 예를 들어서 웹 페이지가 라틴 계열의 문자셋으로 표현될 때에는 반드시 font-variant 속성을 지원해야 하지만 한중일 문자셋으로 표현될 때에는 필수가 아닌 선택 사항이라고 명시하고 있습니다. 현재는 한중일 문자셋만을 대상으로 하지만 모바일 웹의 국제화(i18n)를 생각했을 때 W3C보다 앞선 방식임에는 분명합니다.

CSS-MP에 정의된 선택자, @ 규칙(At-rules), 속성들

선택자

CSS-MP에는 CSS 2.1의 선택자 대부분이 그대로 사용됩니다.

선택자 유형	예	요구 조건
공용 선택자	`*`	필수
타입(요소) 선택자	`E`	필수
자손 선택자	`E F`	필수
자식 선택자	`E > F`	필수
`link` 가상-클래스	`E:link`, `E:visited`	필수
동적인 가상-클래스	`E:active`, `E:focus`	필수
`class` 선택자	`.warning`	필수
`ID` 선택자	`#myid`	필수
그룹화	`E1, E2, E3 { … }`	필수

CSS 2.1에서 지원되는 선택자 중 :hover, :first-child, :lang 가상(pseudo) class와 속성 선택자, 인접 형제 선택자가 포함되지 않았고 first-line 같은 가상 요소도 제외된 것을 확인할 수 있습니다.

@ 규칙

CSS-MP을 따르는 장치는 @charset, @import 규칙을 처리할 수 있어야 하며, handheld와 all 미디어 타입을 인식할 수 있어야 합니다.

규칙	설명	요구 조건
`@charset`	스타일시트의 문자 인코딩 지정	필수
`@import`	외부 스타일시트 임포트	필수
`@media`	`handheld`, `all` 미디어 지원 필수, 나머지는 선택	필수
`@namespace`	설명 참고	선택

유일하게 선택 사항으로 분류된 @namespace 규칙은 기본 이름공간을 선언하거나 이름공간을 이름공간 접두사에 할당(binding)할 때 사용됩니다. XML은 요소 이름이 같더라도 이름공간만 같지 않으면 한 문서에서 각각의 요소를 구분해서 사용할 수 있습니다. 예를 들어서 동일한 body 요소라도 <xhtml:body>와 <human:body>는 접두사로 구분됩니다. @namespace 규칙을 이용하면 이렇게 서로 다른 이름공간의 요소를 xhtml|body와 human|body 선택자로 각각 선택할 수 있게 되는데 자세한 내용은 CSS3 이름공간 모듈을 참고하시기 바랍니다.

속성들

아래 열거한 속성 중 CSS3 박스 모델의 marquee 관련 속성을 제외하면 모두 CSS 2.1 속성입니다. 지원해야 하는 속성 값이 CSS 2.1과 다를 경우에는 속성 정의 문법에 따라 해당 속성 값을 설명하고 있습니다. 또한, 각각의 속성은 알파벳 순서로 정렬되어 있습니다.

속성	속성 값 형식 (CSS 2.1과 다를 경우에만)	요구 조건
`background-color`		필수
`background-image`		필수
`background-repeat`		필수
`background-attachment`		필수
`background-position`	`top \| center \| bottom \| left \| right \| inherit`	필수
`background`		필수
`border-top-width`		필수
`border-right-width`
`border-bottom-width`
`border-left-width`
`border-width`		필수
`border-top-color`		필수
`border-right-color`
`border-bottom-color`
`border-left-color`
`border-color`		필수
`border-top-style`		필수
`border-right-style`
`border-bottom-style`
`border-left-style`
`border-style`		필수
`border-top`		필수
`border-right`
`border-bottom`
`border-left`
`border`		필수
`bottom`		선택
`clear`		필수
`color`		필수
`display`	`inline \| block \| list-item \| none \| inherit`	필수
`float`		필수
`font-family`		필수
`font-style`		필수
`font-variant`		필수
`font-weight`		필수
`font-size`	`<absolute-size> \| <relative-size> \| inherit`	필수
`font`		필수
`height`		필수
`left`		선택
`list-style-type`	`disc \| circle \| square \| decimal \| lower-roman \| upper-roman \| lower-alpha \| upper-alpha \| none \| inherit`	필수
`list-style-image`		필수
`list-style`		필수
`margin-top`		필수
`margin-right`
`margin-bottom`
`margin-left`
`margin`		필수
`marquee-direction` [CSS3BOX]		필수
`marquee-loop` [CSS3BOX]		필수
`marquee-speed` [CSS3BOX]		필수
`marquee-style` [CSS3BOX]		필수
`max-height`		필수
`max-width`		필수
`min-height`		필수
`min-width`		필수
`outline-color`		선택
`outline-style`	`none \| solid \| dashed \| dotted \| inherit`	선택
`outline-width`		선택
`outline`		선택
`overflow` [CSS3BOX]	`auto`	필수
`overflow-style` [CSS3BOX]	`marquee`	필수
`padding-top`		필수
`padding-right`
`padding-bottom`
`padding-left`
`padding`		필수
`position`		선택
`right`		선택
`text-indent`		필수
`text-align`		필수
`text-decoration`	`none \| blink \|underline \| inherit`	필수
`text-transform`		필수
`top`		선택
`vertical-align`	`top \| middle \| bottom \| baseline \| inherit`	필수
`visibility`		필수
`white-space`		필수
`width`		필수
`z-index`		선택

marquee 관련 속성이 추가된 것을 의아하게 생각하실 분도 있겠지만 제한된 장치, 특히 디스플레이 영역이 좁은 모바일 기기라는 점을 고려하면 납득이 갑니다. marquee라는 방식 자체가 스크롤바를 만들거나 사용하기 어려운 상황을 위해 만들어졌으니까요. CSS 3 Marquee 모듈에 있는 예들 들어보겠습니다.

li {overflow: auto; overflow-style: marquee-line; white-space: nowrap}

즉, 콘텐츠를 다 표현할 수 없을 때 대체 수단으로서 제공된다는 의미입니다. 현실적인 예로 아이팟 터치에서는 장치 특성상 overflow:auto;를 지정해도 스크롤바가 생성되지 않아서 넘치는 콘텐츠를 표현하지 못합니다. 하지만 marquee가 적용된다면 비록 시간이 걸리더라도 사용자가 콘텐츠를 전부 확인할 수 있을 것입니다.

그리고 반드시 지원하지 않아도 무방한 속성의 상당 수가 position과 관련되어 있다는 점도 주목할 필요가 있습니다. CSS-MP 명세서에 명확한 설명은 없지만 아마도 다음과 같은 이유 때문이 아닐까요? 우리가 사용하는 모니터는 모바일 기기의 디스플레이 장치보다 훨씬 더 많은 콘텐츠를 표현할 수 있기 때문에 자유롭게 요소를 배치해도 무리가 없습니다. 하지만 모바일 환경에서는 무엇보다 요소를 배치할 공간이 부족하기 때문에 콘텐츠가 겹치는 문제가 쉽게 발생합니다. 이런 환경에서는 최대한 유동적으로 표현하는 것이 최선이기 때문에 필수가 아닌 선택 사항으로 분류한 것이 아닐까 생각합니다.

마치며

이상으로 간단하게 CSS-MP 명세서를 살펴봤습니다. 아직 이 명세서를 따르는 모바일 장치가 많지는 않지만 최근의 웹 환경에서 “표준”이 얼마나 중요한 위치를 차지하는지를 감안한다면 관심을 갖고 살펴볼만한 가치가 있다고 생각합니다.

브라우저별 border 랜더링 방식 차이점

2009-03-22T14:03:53P

안녕하세요.
웹표준화팀 한혜진입니다.

각 브라우저별 border 랜더링 방식 차이점 공유합니다.

상,하,좌,우 border의 우선순위가 브라우저별로 다릅니다.
FF와 크롬은 보더가 겹치는 부분을 중간색으로 표현하는 점이 흥미롭습니다.
크롬과 사파리는 엔진이 같다고 하더니 어찌된 일인지, border를 랜더링 하는 방식은 다르네요.

디자이너분께서는 아래와 같은 디자인을 원하셨는데, border로 처리할 수 밖에 없는 이슈가 있었고,
브라우저마다 랜더링 방식이 다르다고 설명드리면서 위의 내용을 제시했습니다.

HTML마크업 작업시 디자이너분들과 함께 참고하면 좋을 것 같습니다.

감사합니다.

NULI Blog

네이버의 나눔체 웹폰트와 미리보기 툴

마크업 개발 참고용 CheatSheet를 공유합니다

투명 PNG 배경이미지 Repeat 버그

구글이 ie6지원을 단계적(?)으로 중단한다고 하는군요.

모바일 마크업을 위한 즐겨찾기

Spec

Mobile Browser & Reference

Mobile Browser DEV

Browser Emulator(Simulator)

Mobile UI & UX

Validator

Blog

Mobile Service

관련 단체

etc

센스리더 최신버전(v2.5) 업데이트 내용 리뷰

센스리더 v1.5 배포 이후 업데이트된 내용

1.<a>링크에서 target을 blank로 설정하면 '새 창'이라고 음성 출력함.

2. 폼콘트롤에서 title 속성이 없이 <label>만 있을 때 읽어주지 않던 문제 수정

3. title 속성을 < label>, <legend>, <span>, <div>, <p>, <form>, <fieldset> 태그 등에서도 읽도록 수정함.

3-1. <span>, <div>, <p>에 title 이 있을 경우 (해당 태그의 영역 확인을 위해 노란색으로 배경을 주었음)

3-2. form과 fieldset에 title이 있을 경우

3-2-1. <form>에 title 이 있을 경우

3-2-2. <fieldset>, <legend>에 title 이 있을 경우

4. 링크, 이미지맵링크, 이미지버튼, 이미지에서 title을 읽을 수 없던 문제를 툴팁 읽기 기능을 이용해서 확인할 수 있도록 수정.

5.테이블 제목을 읽어주지 않던 문제 수정.

6.입력 가능한 프레임을 만났을 경우 '멀티라인 편집창'이라고 읽어주며, Enter 키를 누른 후 입력 가능.

windows firefox3 1px 버그

IE8 fieldset/legend bug

PC에서 모바일 웹사이트 보기

Firefox (add-on)

Safari

Internet Explorer

테스트 가능한 모바일 서비스

마치며

참고자료

[접수마감] NHN UIT 센터 웹표준화팀에서 특별 채용을 진행합니다.

button의 브라우저별 랜더링 비교, 사용방법, 문제점, 해결방법

<button>엘리먼트의 브라우저별 랜더링 비교

※ 기본 버튼의 브라우저별 랜더링 비교

<button> 엘리먼트 사용방법

※ button에 img를 넣었을 때 브라우저별 랜더링 비교

IE8에서 문제점

해결 방법

참고자료

모바일 웹 접근성 지키기

Perceivable - 인식의 용이성

Operable - 운용의 용이성

Understandable - 이해의 용이성

Robust - 기술의 진보성

용어정리

[모바일 마크업] 모바일 서비스 마크업 및 용량 비교 1

CSS Mobile Profile 2.0 살펴보기

CSS 모바일 프로파일 2.0이란?

CSS-MP란?

CSS-MP와 WCSS의 차이

CSS-MP에 정의된 선택자, @ 규칙(At-rules), 속성들

선택자

@ 규칙

속성들

마치며

브라우저별 border 랜더링 방식 차이점

3-1. <span>, <div>, <p>에 title 이 있을 경우
(해당 태그의 영역 확인을 위해 노란색으로 배경을 주었음)

4. 링크, 이미지맵링크, 이미지버튼, 이미지에서 title을 읽을 수 없던 문제를
툴팁 읽기 기능을 이용해서 확인할 수 있도록 수정.