웹[기술|표준|접근]/작은 팁2007/08/01 12:05

[font series 2]폰트사이즈만 상대적으로 하면 된다?

많은 분들이 폰트사이즈만 상대적으로 생각하시는데..
저는 폰트만 상대크기면 반쪽짜리라고 생각합니다.

만약 폰트만 상대크기로 했을경우 줌브라우징하면 글자만 커졌다 작아졌다 하게 된죠. 그렇게 되면 한줄에 10글자씩 보이던게 한줄에 2글자만 보이게 되는 상황이 연출될 수 도 있는데, 이렇게 되면 글자 하나 읽을때마다 엄청난 스크롤의 압박을 견뎌내야 합니다.

그리고 레이아웃도 깨져서 섹션별로 구분하기가 힘들어 집니다.
예를들어, 다음의 메일함 좌측 메뉴에서 글자크기를 크게 해버리면 그리드가 넘어가버리게 됩니다.
다음의 메일함 좌측 메뉴

이런식으로 정보가 섹션단위로 나뉘어져 있을때, 글자를 크게 해버리면 이 정보가 어느 섹션인지 알 수 없게 되버리는 거죠.
"난 상대크기줘서 글자 켜졌다 작아졌다 하게 해 줫으니깐 책임없어" 라구요?
너무 무책임하시진 않으신가요?

"이렇게 된 사이트가 어딨는데~?" 냐구요?
왜 없겠습니까. 대표적인 예시 사이트가 있습니다. 바로 yahoo.com 이지요.
yahoo.com에 가서 글자크기조절 한번 해보세요. 진정한 줌브라우징에 깜짝(?) 놀라실겁니다. ㅎㅎ

크리에이티브 커먼즈 라이선스
Creative Commons License

'웹[기술|표준|접근] > 작은 팁' 카테고리의 다른 글

[JS] 정규식을 이용하여 ltrim, rtrim, trim 구현하기  (1) 2007/08/31
[JS] timestamp 를 date 형식으로 보여주기(as like php date())  (0) 2007/08/08
[font series 2]폰트사이즈만 상대적으로 하면 된다?  (2) 2007/08/01
[font series 1]웹에서 Font Size 문제..  (2) 2007/08/01
[JS] HTML Attribute Parser  (0) 2007/07/13
[JS] OS 알아내기 (with js & jQuery)  (0) 2007/07/10
Posted by Johan Kim hiphapis
TAG Font size, yahoo.com, 상대크기, 상대폰트, 웹접근성
Trackback 0 Comment 2

TRACKBACK http://hiphapis.net/trackback/59 관련글 쓰기

댓글을 달아 주세요

  1. Favicon of http://hyeonseok.com BlogIcon 신현석

    줌레이아웃은 화면이 작을 경우 가로 스크롤이 생기기 때문에 오히려 더 불편할 수도 있습니다. 줌레이아웃을 사용하되 가로 스크롤이 생기지 않게 하는게 좋죠. 이러한 개념을 가진 레이아웃 소개입니다. http://hyeonseok.com/soojung/contents/upload/barcampseoul-hyeonseok.pdf

    2007/08/01 17:15 [ ADDR : EDIT/ DEL : REPLY ]
    • Favicon of http://hiphapis.net BlogIcon 기다림

      아하, 그런 문제점도 있군요!

      PDF에 있는것 처럼 줌브라우징이 된다면 섹션을 벗어나는 일 도 없고 가로 스크롤도 안생기고 잘 볼 수 있겠군요.

      가로세로 양방향 스크롤의 압박보단, 세로스크롤의 압박만 있는게 더 편하겠네요 ㅎㅎ
      (불편하긴 매한가지일려나?)

      좋은자료 감사합니다 :)
      (barcamp때 발표하셨던 자료인가 봐요?)

      2007/08/01 20:19 [ ADDR : EDIT/ DEL ]

웹[기술|표준|접근]/작은 팁2007/08/01 11:41

[font series 1]웹에서 Font Size 문제..

스마트에디터오픈하면서 font size 논쟁을 지켜보다가, 과거 제가 겪었던 고민을 공유해보자 글을 써 내려 갑니다.(모두가 한번쯤 생각해볼만한 문제)

폰트 크기를 상대크기로 하면 줌 브라우징을 지원하니 접근성이 향상이 됩니다.
하지만 막상 상대크기로 하고 나면 예상치 못한 문제점들이 발생합니다.

많은 사람들이 브라우져의 글자크기 조절하는 법을 모릅니다.
브라우져 텍스트크기가 보통이 아닌 다른 글자크기로 정의되어 있는데 사이트가 상대크기라면
글자가 갑자기 크게 나오거나, 혹은 작게 나오거나 하겠죠. 이런 상황을 일반적인 사용자가 맞닥뜨리면 기겁을 하며(특히 IE 6) 해킹당한건 아닌지, 바이러스 걸린건 아닌지, 컴퓨터가 고장난건 아닌지 하는 겁이 덜컥 듭니다. 너무 극단적인 예인가요?
하지만 컴퓨터를 조금 아시는 분이라도 당황하기는 마찬가지 입니다.

사용자가 많을 수 록 이러한 문제의 비율은 극격히 높아질 것 이고, 고객센터에 엄청난 질문과 항의가 올라올 것 입니다.(때때론 전화가 올 수 있구요..ㅎㅎ;)
FAQ에 올려 있다고 하더라도, 이걸 보는 사용자가 얼마나 될까요..?

대다수의 고객들이 절대크기를 경험에 의한 학습으로 사용해 왔고, 사용하고 있습니다.
회사 입장에서는 모험을 하기보다는, 안정적인 운영을 위해 절대크기로 갈것입니다. (안정적인 운영은 곧 수익창출을 할 수 있는 기반이니깐요)

그럼 결국 줌브라우징이 필요한 소수의 사용자들은 또 배척되는 딜레마 상황이 되어버리죠..
양쪽 모두를 아우를 수 있는 방법은 없는 걸까요?

IE 6 이 패치되는 방법은 어떨까요? (IE 7 부터는 줌브라우징이 지원됩니다)
패치됬을때 불러올 혼란을 생각하면 끔찍하지만, 가장 확실한 방법이죠.
하지만 MS가 그 무리수를 감당하려 할까요?
애시당초 IE 6 이 줌브라우징을 지원했었더라면..(덤으로 표준도 준수했더라면;;)


고니님과 대화를 하면서 외국계 회사들은 상대크기를 많이 쓰는거에 대해 얘기를 하게 되었는데
고니님은 그 이유를 서체에 있다고 보셨습니다. 영어는 줌브라우징으로 작게해도 알아볼 수 있는 마지막단계가 한글보다 높다는 의견이었는데,
즉 무슨말인고 하니(숫자가 작을수록 글씨크기는 작아진다면) 영어로 사이즈를 2으로 하면 더 이상 알아보기 힘들다고 한다면 한글은 5로 하면 더 이상 알아보기 힘든 사이즈가 되는 것이죠.



상대폰트 쓰면 좋은데, 막상 쓰고나면 이러저러한 문제점들이 생기니...



ps > 이것 말고도 많은 고민들과 문제점이 있을 수 있습니다.
그런것들을 서로 공유를 하면 좋겠습니다. (트랙백 혹은 코멘트로)
이러한 고민들을 서로 공유해 나가는것이 해결책을 찾아 나가는 길이니깐요.
크리에이티브 커먼즈 라이선스
Creative Commons License

'웹[기술|표준|접근] > 작은 팁' 카테고리의 다른 글

[JS] timestamp 를 date 형식으로 보여주기(as like php date())  (0) 2007/08/08
[font series 2]폰트사이즈만 상대적으로 하면 된다?  (2) 2007/08/01
[font series 1]웹에서 Font Size 문제..  (2) 2007/08/01
[JS] HTML Attribute Parser  (0) 2007/07/13
[JS] OS 알아내기 (with js & jQuery)  (0) 2007/07/10
[js] FireFox, Safari 에서도 16진수 컬러코드 사용하기.  (1) 2007/04/18
Posted by Johan Kim hiphapis
TAG Font size, 상대크기, 상대폰트, 웹접근성
Trackback 1 Comment 2

TRACKBACK http://hiphapis.net/trackback/58 관련글 쓰기

  1. 유니버설 디자인에 대한 단상: 글자 크기  삭제

    2007/08/01 14:51TRACKBACK FROM Feel the Freeism: To Be 2.0

    유니버설 디자인이라는 개념이 있습니다. 웹 접근성을 논하면서 자주 나오는 개념이라고 할 수 있겠습니다(방법론은 아닙니다..) 간단히 설명을 드리면... 유니버설 디자인(Universal Design)은 별도로 개조하거나 특별히 설계하지 않아도 모든 사람들이 최대한 사용하기 쉽게 만들어진 제품과 환경에 대한 디자인을 의미한다.유니버설 디자인의 철학은 그 대상을 모든 사람들(all people) 또는 가능한 많은 사람들(as many people as..

댓글을 달아 주세요

  1. Favicon of http://ismvisualstudio.net/blog/freeism BlogIcon freeism

    안녕하세요~ 트랙백 타고 왔습니다. ^^

    요즘 저도 사이트를 만들면서 5개의 브라우저로 랜더링 테스트를 하면서 작업을 합니다.
    IE7, IE6, FF, Opera, Safari...;;;

    근데 가만히 생각해보면(기다림님의 글에서 처럼), 표준을 지키지 않는 브라우저 때문에 개발자들이 싸워야 되는 상황이 우습기도 하고 화도 납니다. ㅠ _-) 오페라가 웹 표준을 준수하는 브라우저라고 하지만, 정작 중요한 것은 IE7, IE6 유저가 70%인 상황인거죠.

    위의 폰트 크기도 그래서 이래저래 말이 많은거 아닌가 싶습니다.
    (단, 한글이냐 영문이냐의 차이로 인한 문제는 별개로 하고 말씀드립니다. ^^;;; )
    웹 표준을 지키면 지킨다고 뭐라뭐라~ 어쩔 수 없이 안 지켜도 안 지킨다도 부라부라~
    완전 털썩입니다. ^^;
    영화에서나 나올법한 말이지만 '정의는 없다' 라고나 할까요? ㅋㅋ

    그래서 저는 그냥 핵(CSS hack)을 써서 브라우저 별로 글자크기를 다르게 지정해 버립니다. 기본은 상대 크기로 하지만, 여차 싶어서 아니다 싶으면 그냥 망설임없이 절대 크리고 지정을 해 버리죠(아. 이게 또 상대크기가 옳다는 이야긴 아닙니다. 그냥 제가 그렇다는 겁니다. ^^;; ). 근데 이렇게 또 핵을 쓰면 '핵은 되도록 사용하지 마세요. 표준도 아니고 나중에 문제 생깁니다'라는 의견이 주르륵...;;;;;;;

    아하하~ 어쩌란 거지요~ ^ -^);;
    아무튼 현 상황은 개인적인 경험과 대세[?!]를 따라서 가장 불편함이 없는 방법을 취하는 수 밖에 없을 것 같습니다. 어쩌면 앞으로도 영원히 말이죠. ㅠㅠ

    p.s. 저도 트랙백 드립니다~ ^^

    2007/08/01 14:51 [ ADDR : EDIT/ DEL : REPLY ]
    • Favicon of http://hiphapis.net BlogIcon 기다림

      안녕하세요 ;)
      제가 트랙백 드릴려고 했는데, 트랙백을 안쓰시더라구요.
      그래서 못드렸는데 이렇게 연결이 되니 다행이네요 :)

      누가 옳고 누가 그른지는 판단하기가 애매합니다.
      이쪽 입장을 생각하면 이 말이 맞고
      저쪽 입장을 생각하면 저 말이 맞죠.

      저도 처음에는 무조건 폰트크기를 상대폰트로 하는걸 강경해 왔는데, 정작 그렇게 하니 예상치 못했던 문제점들이 생기더군요.(블로그에 쓴 문제)

      뭔가 탁~! 해결되는 느낌이 들어야 하는데 쩝..
      브라우져들이 좀 일관성을 가지고 똑똑해지면 잘 해결될텐데..ㅠ,.ㅠ

      CSS핵은, "오남용 금지"라는게 제 입장입니다 ㅎㅎ
      멍청한 브라우져들때문에 어쩔 수 없죠..ㅎㅎ

      2007/08/01 15:03 [ ADDR : EDIT/ DEL ]

웹[기술|표준|접근]/작은 팁2007/02/06 18:43

font-size: em을 처음쓰시는 분들을 위한 간단한 팁

font-size정의시 px을 쓰지말고 em을 쓰기를 권고하고 있죠..
근데, 임마가 참으로 성가시게 굴때가 있습니다.

그 이유는, 상대적이기 때문이죠..
px같은 절대적인 값이라면, 솔직히 코더(Coder)들이 코딩(Coding)하기엔 더욱 쉽습니다.(저만 그런걸지도)
하지만, 줌브라우징 기능때문에 em을 권고하죠.
(물런, 이것외에도 여러가지가 있지만 줌브라우징은 그 이유중 하나입니다. http://www.mondaybynoon.com/2006/03/13/effective-style-with-em/)

자, 그럼 무엇이 성가시게, 골때리게 구냐..
이 녀석들은 폰트크기..즉 위에서 선언된 font-size와 모종의 뒷거래(?)가 있다는 것입니다.
예를들어,

<style type="text/css">
body { font-size:1em; }
.Mother {font-size:1em;}
.Child01 {font-size:0.5em;}
.Child02 {font-size:2em;}
.Child03 {font-size:2em;}
.Baby01  {font-size:2em;}
</style>


<div class="Mother">Mother
    <div class="Child01">
        <div class="Baby01">Child01(Baby01)</div>
    </div>
    <div class="Child02">Child02</div>
    <div class="Child03">Child03</div>
</div>


가 있다고 가정을 할경우, Baby01 과 Child02~03은 코드결과적으로 보면 font-size:2em입니다.
하지만, 실제로 돌려보면, 틀리게 나옵니다.

그 이유를 확인하신다면..

body { font-size:5em; }


으로 수정해보세요, 그럼 제가 한말을 바로 이해하실 수 있을 겁니다.

"상대적" 이기 때문이죠.



그리고, 다른부분은..
위의 상황과 연관된 경우인데..만약 같은 class를 폼 컨트롤러(input, textarea.....)와 함께 사용한다고 가정을 할경우..
눈에 보이는것(위의 div)과 같지 않은 출력이 나올 수 있다는 것이지요..

예를들어, Baby01 class를 같이 쓴다고 가정을 하고..
div에서는 대략 13~4px정도의 크기로 출력이 되죠
하지만, 이걸보고 폼 컨트롤러에 적용을 시킬경우, 13~4px정도의 글자크기가 출력되는게 아니라.
순수하게 2em 즉 200% 글자가 출력이 됩니다

<textarea class="Baby01">Baby01</textarea>

이 부분은 상속을 받지 않기때문에, "모종의 뒷거래"가 일어나지 않게 되는 것이지요~
이해하시겠죠..?

그리고
font-family를 정의하지 않은 textarea같은 경우, font-family가 기본과 틀립니다.(IE, FF에서 확인했습니다)

<textarea class="Mother">Mother</textarea><br />
<textarea class="Baby01">Baby01</textarea><br />

<input type="text" class="Mother" value="Mother"><br />
<input type="text" class="Baby01" value="Baby01"><br />
<input type="button" class="Mother" value="Mother"><br />
<input type="button" class="Baby01" value="Baby01"><br />


즉, form control에는 상속이 되지 않는거죠.
그래서 공용선택자 * 에 폰트크기나 서체등을 정의하는 방법으로 해결 할 수 있답니다.

왜냐면, 공용선택자는 모든 마크업을 일괄 재정의 하는 것이니깐요~!!!

크리에이티브 커먼즈 라이선스
Creative Commons License

'웹[기술|표준|접근] > 작은 팁' 카테고리의 다른 글

CSS Selector에 대해 알아봅시다~ [응용편 #1]  (2) 2007/02/09
CSS Selector에 대해 알아봅시다~ [초급편]  (6) 2007/02/07
font-size: em을 처음쓰시는 분들을 위한 간단한 팁  (12) 2007/02/06
EditPlus v2.30 눈에 확띄는 업데이트 8가지  (4) 2007/01/26
FireFox 2.x 에서 Alt+S 즉, AccessKey가 안되는것 수정하기  (0) 2007/01/22
사용하는 FireFox Plug-in  (0) 2007/01/22
Posted by Johan Kim hiphapis
TAG CSS, EM, Font size, 웹표준
Trackback 1 Comment 12

TRACKBACK http://hiphapis.net/trackback/16 관련글 쓰기

  1. 웹표준과 폰트 크기 - 접근성  삭제

    2007/02/09 12:00TRACKBACK FROM 일모리와 웹표준

    폰트 하면 떠오르는 단어가 바로 12px 혹은 9pt 입니다. 그만큼 당연시 여겨지는 폰트 크기이며 맑은고딕이 퍼지기 전 까지는 그 누구도 도전할수 없는 부동의 자리이죠. 기본폰트의 문제도 그...

댓글을 달아 주세요

  1. Favicon of http://naradesign.net/ BlogIcon 정찬명

    예제와 함께 좋은 팁을 소개해 주셨네요. 첨언하면, 상대적인 단위는 바로 부모의 값을 1em 또는 100% 으로 인식하게 됩니다. 따라서 body에 75%의 서체크기를 적용하면 body는 75%의 서체크기를 갖지만 p는 body에 적용된 서체크기를 기준으로 다시 75%를 계산하기 때문에 body 보다 75% 더 작아지게 됩니다. 결국 75%의 75%가 되는거죠. 더 헷갈리지 않았나 모르겠네요 ㅜㅜ;

    2007/02/06 19:35 [ ADDR : EDIT/ DEL : REPLY ]
    • Favicon of http://hiphapis.net BlogIcon 기다림

      헉, 제가 포스팅한 내용이 찬명님이 적으신 코멘트인데;
      저렇게 긴 문장을, 이렇게 짧게 표현하시다니..
      역시 ㅠ,.ㅠ)=b

      (예~전에 CDK에 올렸던것을 살짝 수정해서 포스팅한거에요 ㅎㅎ)

      2007/02/09 12:30 [ ADDR : EDIT/ DEL ]
    • 빽짱구

      찬명님 그럼 예를들어 body에 0.75em 을 줬을 경우 그안에 있는 h4 클래스에 폰트가 0.75로 보일려면 1em을 줘야 한다는 말씀이신가요? 좀 햇갈리는 부분이 있어서요.

      2007/11/03 22:10 [ ADDR : EDIT/ DEL ]
    • Favicon of http://hiphapis.net BlogIcon 기다림

      넵 맞습니다.

      상대적인 단위이기때문에 그대로 상속을 받게되죠..
      그렇게 되다보니..
      상속받은것의 x% 이렇게 됩니다.

      2007/11/05 16:49 [ ADDR : EDIT/ DEL ]
  2. Favicon of http://naradesign.net/ BlogIcon 정찬명

    어쨌거나 WCAG 1.0 > 체크포인트 3.4에서 권장하고 있으며 중요도2[되도록 지켜야 할] 에 해당하는 필수 팁! ^^a

    2007/02/07 13:13 [ ADDR : EDIT/ DEL : REPLY ]
  3. Favicon of http://ilmol.com BlogIcon 일모리

    정찬명님도 좋은 설명곁들여 주시고 좋은 글이네요.

    한가지 더 보태자면 보통 쓰는 9pt, 혹은 12px 이 0.75em 입니다. 여기서 0.75를 인식을 못하는 브라우저가 있으니 0.76em 을 보통 쓰게 됩니다. 0.01 의 비밀이죠 ^^
    물론 현실적으로 과연 얼마나 되는곳에서 em 을 쓰게 될런지 말입니다... 일단 백터폰트가 많이 퍼지면 혹 많아지게 될수 있긴 하겠죠. :)

    2007/02/09 11:55 [ ADDR : EDIT/ DEL : REPLY ]
    • Favicon of http://hiphapis.net BlogIcon 기다림

      헛, 그렇군요..0.01이 세상을 바꾸는군요(?)
      ㅎㅎ

      제 블로그에선 처음 뵙죠~?
      무지 반갑습니다..ㅎㅎ

      2007/02/09 12:29 [ ADDR : EDIT/ DEL ]
    • Favicon of http://ilmol.com BlogIcon 일모리

      아 그러고 보니 인사 남긴다고 하고는 그냥 'save a comment' 를 눌러버렸네요 ^^
      블로그 넘 좋아요 그냥 계속 이렇게 꾸준히 적어주세요 저처럼 들쑥날쑥하면 미움받아요 ^^;;;

      2007/02/09 13:32 [ ADDR : EDIT/ DEL ]
    • Favicon of http://hiphapis.net BlogIcon 기다림

      아...저는 일모리님이나 찬명님처럼 인기블로거가 아니라,
      어느 누구 하나 관심가져주지 않는 블로거라..ㅠ,.ㅠ

      미워할 사람도 없어요..

      부럽죠..??
      (그런데 왜 제 마음은 ㅠ,.ㅠ)

      2007/02/09 16:13 [ ADDR : EDIT/ DEL ]
  4. Favicon of http://naradesign.net/ BlogIcon 정찬명

    일모리님, 미움도 곧 인기와 비례해서 그래요 ㅋㅋㅋ
    기다림님, 인기블로거라고 띄워줘서 쑥쓰럽!

    2007/02/10 23:03 [ ADDR : EDIT/ DEL : REPLY ]
  5. Favicon of http://www.mastersdissertation.co.uk/ BlogIcon Dissertation Writing

    Thank you for sharing this information. The information was very helpful and saved a lot of my time.

    2011/10/27 16:40 [ ADDR : EDIT/ DEL : REPLY ]