NARADESIGN

웹표준, 웹접근성, 유니버설디자인, HTML, CSS, UI, UX, UD


서식 제어 요소의 디자인은 제한되어야 한다.

본문 건너 뛰기

서식 제어 요소란 사용자의 선택 또는 입력을 위하여 웹 브라우저가 제공하는 사용자 인터페이스를 말합니다. HTML 요소 가운데 서식 제어요소들은 input, textarea, select, option, button 이며 본문의 예제들과 같은 형태로 출력이 되는데 CSS/Javascript 기교를 이용하여 이것의 디자인을 바꾸는 사례가 많습니다. 하지만 일부 서식 제어 요소는 스타일 변경을 허용하지 않아야 합니다. 스타일 변경을 허용하지 않는 이유는

  1. 해당 요소들에 대한 스타일 변경을 대부분의 웹 브라우저가 지원하지 않기 때문이며,
  2. 이를 극복하기 위하여 사용되는 트릭이 키보드 접근에 치명적이고 화면 표시 속도를 떨어뜨리기 때문입니다.

스타일 변경이 자유로운 요소들은 CSS를 이용하여 ‘border, background, width, height, image replace’ 기법 적용이 가능하나, 스타일 변경이 제한된 요소들은 width, height 만 지정이 가능합니다.

스타일 변경이 자유로운 서식 제어 요소들
HTML Markup View
CSS를 이용하여 border, background, width, height, image replace 기법의 적용이 가능하다.
input type="text"
input type="password"
input type="submit"
input type="reset"
input type="image"
input type="button"
textarea
button
스타일 변경이 제한된 서식 제어 요소들
HTML Markup View
CSS를 이용하여 width, height 만 제어할 수 있다.
input type="checkbox"
input type="radio"
input type="file"
input type="hidden" 화면 출력 안됨
select, option

스타일 변경이 제한된 서식 제어 요소들의 디자인을 변경하는 것이 기술적으로 불가능 한 것은 아닙니다. 그러나 보통의 경우 키보드 접근이 되지 않거나 표현만을 위한 가짜 마크업으로 하여금 시각장애인을 혼란스럽게 만듭니다. 키보드가 접근되지 않는다는 것은 시각장애인이 이용할 수 없다는 것을 의미하며 이것은 ‘장애인차별금지 및 권리구제 등에 관한 법률‘에서 정한 ‘차별행위’에 해당되어 소송의 빌미가 될 수 있으므로 주의하여야 합니다. 되도록 웹 브라우저가 제공하는 고유한 인터페이스를 그대로 사용하는 것이 웹 접근성을 훼손하지 않는 방법 입니다.

분류: 웹 접근성 | 2008년 10월 11일, 7:05 | 정찬명 | 댓글: 54개 |
트랙백URI - http://naradesign.net/wp/2008/10/11/159/trackback/

54개의 댓글이 있습니다.

  1. 조소 댓글:

    괴변이삼~
    편집증에 가까운 님의 유니버설 코딩 열정에 경의를 표합니다.
    하지만 너무 과한 것은 쫌 문제인듯합니다.
    법률 조항까지 애기하면 소송에게는 정말 쫌 너무 심하시네요.
    그런식으로 소송되서 유죄면 전세계 모든 웹사이트 운영자는 다 콩밥먹어야져.

    제한된 컨퍼넌트를 강제 디자인하는 일 역시도 그리 쉽진않아요.
    귀찮은 일이지만 디자인측면에서 어렵게라도 변경하는 것입니다.
    웹작업이 코딩만 중요한게 아닙니다. 다 똑같이 중요합니다.
    어떤 것을 더 신경쓸지 선택에 측면이 분명히 있는 것이져.

  2. 익명 댓글:

    서식 제어 요소의 디자인은 제한되어야 한다….

    서식 제어 요소란 사용자의 선택 또는 입력을 위하여 웹 브라우저가 제공하는 사용자 인터페이스를 말합니다. HTML 요소 가운데 서식 제어요소들은 input, textarea, select, option, button 이며 본문의 …

  3. 김진환 댓글:

    고민스러운 부분이군요, 항상 저 요소들은 디자인 변경이 어려움에도 불구하고,
    이쁘게 할 수 없냐는 질문을 항상 받아왔던 요소이기에 …

    정말 별방법 없을땐, ^^; 저부분은 어찌 되지를 않습니다. 하고 설득했었는데..
    어느날 모 사이트에 있는 자바스크립트로 짜여진 셀렉트를 보여주며 이렇게 해달라고 할땐…방법이 없더군요..
    지금도 마찬가지의 요소가 아닐 수 없습니다.

    음…저는 잘 모르는 부분이라 가능,불가능의 여부는 모르겠습니다.
    AJAX 를 이용할 수는 없을까…하는 생각이 문득 스치긴 하는군요..

    후에는 표준웹에 부합되면서도 디자인적인 방법이 생겨나겠지요.^^

  4. 정찬명 댓글:

    굳이 구현하자고 하면 불가능 하지 않지만 그렇게 구현하는 것 자체의 옳고 그름에 대하여 말하지 않았던 현실이 안타까웠습니다. 키보드만으로 어떻게 접근하는지, 스크린리더가 그것을 만나면 어떻게 읽어주는지 그 어려움을 헤아려 보려는 노력이 그동안 너무 없었으니까요.

  5. 엔베이스 댓글:

    조소님은 잊을만하면 튀어나와서 밉상을 떠네요 :(

    체크박스나 라디오버튼에 플래시 얹고 속성 가리고.. 그런식으로 만들어진 폼이 스크린리더기에서 어떻게 출력되는지를 알고 뭐 그런 말씀을 하시는지, 몰라서 그런 말씀을 하시는지, 알면서 상관없다고 생각하는것인지 알 마음이 없는건지..

    그깟 셀렉트박스, 라디오버튼에 이미지 얹어서 이쁘게 꾸미면 조소님 작업하는 사이트가 갑자기 베스트디자인이라도 된답니까? 참 무쟈게 까칠허시네요.

    괴변은 또 뭔지..궤변?

  6. 조소 댓글:

    엔베이스님 이성적으로다가 생각해주세요.

    “셀렉트박스 이쁘게 꾸미면 베스트디자인 된답니까?”
    “스크린리더기 잘 작동하면 베스트사이트 된답니까?”

    위 두 문장이 무엇이 다르단 말입니까?
    셀렉트박스 이쁘다고 디자인에 크게 지장이 없다는 말씀으로 들립니다만…
    결국 같은겁니다.
    디자이너 중에는 디자인을 천직으로 생각하는 사람들도 많습니다.
    라인하나, 픽셀하나 어긋나는 꼴을 못보는 꼼꼼한 디자이너들도 있습니다.
    정찬명님이 접근성 한하나도 놓치고 싶지 않은 마음과 다르지 않타는 것입니다.

    웹프로젝트는 참으로 다양합니다.
    특히나 마켓팅 및 홍보를 최우선 시하는 프로모션류의 웹프로젝트는
    시각장애인들이 오시는 경우 수가 거의 없습니다.
    이런 경우 강제로라도 셀렉트박스 조정해서 디자인컨셉에 마추는 것입니다.

    심지어는 셀렉트박스 조정때문에 디자이너와 개발자와 싸우는경우도 있습니다.
    쫌더 오픈 마인드로 서로를 이해해야 한다고 생각합니다.

  7. 엔베이스 댓글:

    제가 예를 스크린리더기로 들었다고 해서 접근성이 단순히 시각장애인을 위한 것이라고는 생각하시지 않으시겠죠. 크로스 플랫폼도 염두에 두고 있는 것입니다. 물론 개발자가 작업할 때 가장 대중적인 여러 플랫폼에서 작업하면 당장은 문제가 없을 것입니다. 다만 새로이 등장할 플랫폼에서의 원활한 작동은 보증하지 못할 뿐입니다. :(

    (이것조차 프로모션류의 웹프로젝트는 pc 외의 접속은 거의 없다고 말씀하시면 할 말 없지만..)

    디자인 영역을 폄하하는 것은 아닙니다. 접근성과 디자인은 공존해야 한다는 의견에는 동감합니다. 다만 정찬명님이 이 포스트를 통해 경고하고 있는 접근성의 위협수준은 경고가 아니라 치명적결함 수준입니다. 아예 작동을 안하는 수가 있거든요. 가낭 큰 예로는 네이버 인덱스페이지 로그인창을 들 수 있겠네요. (지금은 수정됐으려나 모르겠지만 몇 개월 전만 해도 pc 외 플랫폼에서 그러했죠.)

    뭐 그렇다해도 디자인이 최우선이라면? 정찬명님 말씀대로 깜냥껏 지키면 되는 일입니다.ㅡㅡ; 지키고 싶으면 지키고 지키기 싫으면 말고.. 아무도 조소님께, 이 세상의 수많은 디자이너와 개발자들에게 강요하진 않습니다. 이 포스트의 요지는 오늘부터 느네 이거 다 지켜라가 아닌 것 같네요. 또 법조항을 거론하신 건 결코 오버는 아닌 것 같네요. 장차법때문에 소송 당할 일 없을 거라는 보증. 해 주실 수 있으세요?

  8. 김진환 댓글:

    도저히
    넘어갈 수 없을 것만 같은 경계를
    넘어가면 새로운 세계가 열리게 된다.
    이 말을 돌려서 이야기하면,
    한 번도 경계를 넘어서지 못한 사람은
    자신이 속한 세계와 다른 세계가 존재할 수 있다는
    사실을 결코 납득할 수 없다는 뜻이기도 하다.

    – 김연수의《여행할 권리》중에서 –

    * 세상은 넓습니다.
    자기가 경험한 세상을 뛰어넘는
    전혀 다른 세계가 엄연히 존재합니다.
    자기 울타리를 넘지 않아 모르고 살았을 뿐입니다.
    개인도, 기업도, 국가도 ‘다른 세계’를 보지 못하면
    늘 그 자리에 멈춰 서 있다가 어느샌가
    뒤로 밀려나게 됩니다.

  9. 김진환 댓글:

    스크린리더는 Flash를 어떻게 인식하는지 확인하셨던 분 계시나요?

    전 부터 궁금했던 사항이기도 합니다. ^^

    title=” ” 과 name=” ” 값을 줄 수있긴 하는데 인식한다면 어떤것을 읽어 주는지…

    요즘엔

    스타일 변경이 제한된 서식 제어 요소들이 플래시로 많이 만들어 지고 있지 않습니까?^^
    만일 키보드 제어 및 스크린 리더 동작 가능하다면, 괜찮지 않을까 하는 생각이 들어서 질문 올려봤습니다. ^^

  10. 정찬명 댓글:

    object, embed 엘리먼트에 사용된 title, name 속성을 읽어주는지는 제가 잘 모르겠습니다. title 속성은 읽어줄 수도 있다고 판단되지만 name 속성을 읽어주지는 않을 꺼라고 생각됩니다. 하지만 막상 읽어준다고 하더라도 swf 파일 안에 포함된 모든 텍스트를 읽어주는 것이 아니기 때문에 크게 중요하다고는 생각되지 않습니다.

    직접 테스트 해보지는 못했지만 플래시 파일을 제작 할 때 버튼심볼이나 무비클립 심볼에 name 또는 description 속성의 값(대체 텍스트)을 입력해 주면 읽어 준다고 합니다. 결론적으로 말해서 국산 스크린리더라도 접근성 높게 설계된 플래시 파일을 만나면 읽어 준다는 겁니다.

    플래시에 포함된 텍스트가 스크린 리더를 지원하도록 하려면 일반 텍스트 형태로 존재해서는 안되며 반드시 텍스트 요소들을 ‘버튼심볼’ 또는 ‘무비클립’ 심볼로 만들어 준 다음 해당 심볼에 ‘accessibility’ 속성을 부여하면 됩니다.

    accessibility 속성은 accessibility 패널에 있습니다. 플래시를 다룬지가 오래 되어서 정확히 기억은 나지 않지만 아마도 ‘Window > Accessibility’ 메뉴를 이용하여 해당 패널을 활성화 할 수 있을 껍니다.

    Flash Accessibility Panel

    Name = 짧은 대체 텍스트
    Description= 긴 대체 텍스트
    Shortcut = 접근 키
    Tab index = 탭 접근 순서

    Shortcut은 HTML의 accesskey 속성, Tab index는 HTML의 tabindex 속성과 같은 역할을 하게 됩니다.

  11. 엔베이스 댓글:

    제가 일하는 곳에선 한줄짜리 텍스트 플래시 (주로 asp, php 등의 서버언어와 변수 연동해서 동적으로 텍스트가 바뀌는 문서 상단 제목 플래시) 에만 앵커로 title 을 줍니다. 즉 title 외 별달리 읽어줄 것이 없는 플래시에선 그렇게 합니다.

    메뉴 내비게이션 등의 첨부된 텍스트가 많아 읽어줄 것도 많은 플래시에선 description, tab index 로 구성하네요.. 앵커로 따로 감싸주진 않습니다… 물론 회사마다 작업자마다 조금씩 차이가 있겠지여 ~ ㅋㅋ

  12. 김진환 댓글:

    아..그런방법이 있었군요^^

    상세한 설명 감사드립니다.

    혹 차후에 사용될 상황이 생기면 참고할 수 있을 것 같습니다.

  13. 나무 댓글:

    저도 이곳에서 자주 정보를 얻어가는 1인입니다.
    저는 작성글 뿐만 아니라 댓글도 유심히 보는 편입니다.

    근데 조소님…
    저는 조소님의 의견이 잘못되었다고 생각하지 않습니다.
    하지만 표현에는 분명 문제가 있다고 생각합니다.

    댓글의 시작을 “괴변이삼~” 으로 시작만 안하셨어도 분명 훌륭한 댓글이 되었을겁니다.
    의견이 다르다고 그런식으로 표현하시면 누가 기분이 좋겠습니까?
    그런식의 표현때문에 의견의 옳고 그름을 떠나 다른분들도 발끈하시는거구요^^

    표현만 좀 더 부드럽게 하신다면 좋은 토론이 될 수도 있는 부분이었는데 아쉽네요^^

  14. 이원민 댓글:

    그래도 조소님의 리플 덕분에 많은 부분을 생각하게 되었고, 조소님의 내용 중에 약간 의아한 부분이 있어 구글링 검색을 통해 정보의 정확성을 재확인 하게 되고, 제가 몰랐던 몇가시 사실을 알게되었습니다.

    나무님 말씀처럼 표현만 조금 더 부드러우셨다면 정말 좋았을거에요. 훈훈하고 좋잖아요.^^

  15. 쿨럭.. 댓글:

    지향하는 방향이 다르다고 치죠.
    공공을 위한다면 호환성 좋은쪽을 지향하는 것이 옳은 것입니다.
    미적인 것만 추구하는 사람도있고…
    적절한 조화를 원하는 사람도있고…
    근데 조소님 말씀 듣고있으면 왠지 짜증을 유발한다는…

  16. 이흥섭 댓글:

    많은 디자이너가 간과하고 있지만 사용성이 먼저이고 룩앤필은 그 다음입니다. 디자이너라면 누구라도 조금이나마 더 멋드러지게 만들고 싶어하겠지만 그 욕심이 지나치게 되면 수 많은 사용자의 실수나 불편을 유발할 수 있단 것을 항상 명심해야합니다.

    웹 페이지는 브라우저라는 프레임 안에서 보여집니다. 그리고 브라우저는 특별한 디자인 컨벤션을 제공합니다. 모두가 알고있듯 이미 사람들에게 익숙해져있는 디자인이 있다면 그것을 깨버리지 않고 따를 때 사용성이 보장될 수 있습니다. 따라서 서식 제어 요소를 디자인하지 않는것은 장애인 뿐만 아니라 저와같이 불편함이 없는 사용자에게도 도움이 됩니다. 늘 보던 체크박스가 놓여있을 때 우리는 그것이 체크박스임을 단번에 알 수 있습니다. 라디오버튼도, 셀렉트박스도 모두 마찬가지입니다. Safari 2에서는 몇몇 서식 제어 요소에 기본적인 CSS 규칙도 적용되지 않았습니다. 그 이유가 무엇일지 잘 생각해보면 좋을 것 같습니다. 만들다 만 것은 아니죠.

    이미 브라우저는 서식 제어 요소를 우리에게 어떻게 보여줄지 약속했습니다. 그 약속이 보장될 때 사용성은 높아지게 되어있습니다. 제가 본문 서체를 디자이너 마음대로 정하지 말고 브라우저에 설정해둔 기본서체를 그대로 사용하는 것이 좋다고 주장한 것도 마찬가지 이유에서 였습니다.

    욕심을 버리세요. 우리는 브라우저에서 벗어날 수도, 벗어나서도 안됩니다. 우리에겐 제품을 예쁘게 포장하는 것 이전에 제품을 제대로 쓸 수 있게 만들어야한다는 임무가 주어져있습니다.

  17. 정찬명 댓글:

    I love ‘Heung Sub’ so much!

  18. 조소 댓글:

    어떤 근거로 많은 디자이너들이 간과한다고 하시나요? 주관적으로 디자인계 자체를
    비판하시는건 오바인듯합니다. 일부 디자이너라고 하심이 조을듯하네요.
    오래전에 디자이너명은 기억이 안나지만, 공석에서 디자인의 기능성은 신미성보다
    중요하다 라고 말한적이 있는데, 대부분의 디자이너들이 인정했다죠.
    디자인을 직업으로 하는 사람이라면 누구도 기능성 사용성을 간과하지 않습니다.

    또한 지금 야기되는 셀렉박스 문제는 기능성에 대한 논점도 아닙니다.
    유니버설디자인 이야기를 일반 기능성에 비유하는건 올치 않습니다.

    제가 나라디자인을 지적하고 싶은 부분을 잘 지적하셨네요.
    제가 나라디자인 들어올때면 파폭 쓰다가도 IE로 들어옵니다.
    여기는 기본서체가 맑은고딕체를 사용기 때문에 파폭으로 들어보면 서체가 흐릿해서 눈이 아파서 IE로 들어옵니다. 맑은고딕은 MS에서 만든 서체고 IE에 최적화된 폰트인걸로 알고 있습니다. 다른 브라우저에서 불안정한 서체를 기본으로 사용하는거, 정말 아이러니죠, 댓글 수정삭제도 없고 이거야 말고 사용성이 안습인거져.

    또 하나 의문인것은 왜 이사이트가 나라디자인 인거죠? 솔직히 첨부터 의야했던
    부분입니다. 그냥 도메인 남아서 쓰시는건지. 웹퍼블리싱 업무가 디자인영역이라고 생각하시는지….

  19. 정찬명 댓글:

    하하, 조소님 굉장히 열정적이시네요.

    또한 지금 야기되는 셀렉박스 문제는 기능성에 대한 논점도 아닙니다.
    유니버설디자인 이야기를 일반 기능성에 비유하는건 올치 않습니다.

    셀렉트 박스에 관한 문제는 정확하게 어떤 사람이 이것의 기능을 제어할 수 없는 상황에 관한 문제를 다루고 있습니다. 또한 유니버설디자인에서 기능에 관한 이야기는 거의 전부라고 해도 과언이 아닌데 기능에 비유하는 것이 옳지 않다는 것은 어디서 부터 나온 생각인가요?

    여기는 기본서체가 맑은고딕체를 사용기 때문에 파폭으로 들어보면 서체가 흐릿해서 눈이 아파서 IE로 들어옵니다. 맑은고딕은 MS에서 만든 서체고 IE에 최적화된 폰트인걸로 알고 있습니다. 다른 브라우저에서 불안정한 서체를 기본으로 사용하는거, 정말 아이러니죠,

    정확히 잘못 알고 계신것 같은데요. Firefox라고 해서 맑은 고딕을 다르게 렌더링 하지 않습니다. 서체가 흐릿하게 보이는 문제는 운영체제 또는 클리어타입(운영체제의 디스플레이 등록정보)의 적용 여부에 따라서 차이가 발생할 수 있는 문제이지 브라우저 문제가 아닙니다. 정말 Firefox와 IE가 다르게 보이신다면 화면 캡쳐해서 메일로 보내주십시오. 처음듣는 이야기라서 연구 대상이군요.

    조소님이 운영하고 있는 http://picacube.com/ 웹 사이트도 ‘맑은 고딕’ 사용하시고 아예 공지사항에 ‘맑은 고딕’ 다운로드 받으라고 내려받기 링크까지 걸어두셨던데 평소에 파이어폭스를 사용하시다가 자사 서비스 사용하실 때는 어떻게 하시나요?

    댓글 수정삭제도 없고 이거야 말고 사용성이 안습인거져.

    댓글의 수정과 삭제 문제는 사용성 문제가 아니라 정책적인 문제 입니다. 사용성이란 얼마나 빠르고 쉽게 과업을 달성할 수 있는지를 다루는 ‘효율’의 개념이지 ‘무엇을 할 수 있는가 없는가’를 다루는 문제가 아니라는 뜻입니다.

    댓글 수정 삭제가 필요하면 따로 요청하세요. 참고로 수정이나 삭제 요청은 연 평균 2~3회 정도 밖에 발생하지 않고 있으며 글 작성하시기 전에 충분히 생각하시고 ‘글 등록’ 버튼을 누르시기 바랍니다.

    왜 이사이트가 나라디자인 인거죠? 솔직히 첨부터 의야했던
    부분입니다. 그냥 도메인 남아서 쓰시는건지. 웹퍼블리싱 업무가 디자인영역이라고 생각하시는지….

    ‘디자인’이라는 것은 무언가를 설계한다는 개념입니다. 제 블로그 이름에 ‘디자인’이라는 명칭이 어울리지 않는다고 생각하시나요? 웹 퍼블리싱 업무도 웹의 상호작용을 설계하는 디자인영역 입니다. 디자인이 아니라고 주장하신다면 조소님이 생각하는 디자인이란 무엇입니까?

    PS :
    ‘맑은 고딕’ 서체는 코드 안에서 띄어쓰기 되어야 합니다. {font-family:맑은 고딕,맑은고딕;} 이런식으로 특이하게 쓰고 계시는군요. 맑은 고딕 서체는 붙여쓰기 하면 유효하지 않아요. 또 XHTML 2.0은 아직 표준이 아닙니다. 코드를 보니 XHTML 2.0 DTD를 왜 선언하셨는지 이해가 안되네요. DTD만 XHTML 2.0으로 선언해 놓고 실제로는 XHTML 1.0 코드만 사용하고 계시니까요.

  20. 조소 댓글:

    감사요. 그다지 열정적인 사람은 아닌데…

    여기서 말한 기능은 일반적인 사용성에 따른 기능을 말하는거자나요.
    그렇케 따지면 모든게 다 기능이져. 색상하나에도 다 기능이 있고, 쉐이브하나에도 다 기능이 있습니다. 광범위한 의미의 기능을 얘기하는게 아닙니다.
    애기 자체가 시각장애인을 위한 컨퍼넌트변경을 자제하자는 논점이니.
    소수의 사용자를 배려하자는 측면에서 유니버설이 맞는겁니다.
    일반적인 기능은 대다수의 사용성에 따른 기능을 말하는거구요.

    제가 참여하고 있는 피카큐브는 웹표준을 가능하면 준수하자는 입장이지만,
    유니버설이나 소수의 접근성은 배제하고 운영하는 곳입니다. 실제로 웹표준이나 접근성을 고려해서 제작된 곳도 아니구요.
    시각디자이너들이 모이는 곳이지 아무나 오라고 있는 사이트가 아닙니다.
    그래픽디자인 하는 곳에 시각장애인이 올 이유도 없구요. 장차법에 적용받는 큰 사이트도 아니구요. 그래서 맑은고딕을 쓰는겁니다.
    주 회원들이 맥의 사파리나 윈도우즈 IE 이기 때문에 맑은고딕은 IE나 사파리에서 아주 훌륭하게 렌더링 하기 때문입니다. 눈에 피로감도 덜어주구요.
    파폭 사용자들은 안오셔두 상관없다는 애기입니다.
    개인적으로 피카큐브나 디자인작업 할때는 사파리를 사용합니다.

    정책적인 선택이라고 하시는데 참 할말이 없네요.
    자기글 수정하는데 무슨 관리자의 정책이 필요하고, 삭제하라고 디비까지 삭제하게 해달라는 애기가 아닌데… 정책이라니 더이상 할말이 없습니다.

    디자인을 광범위하게 애기하시면 세상만사가 다 디자인이죠.
    나자신을 꾸미는것도 셀프디자인인데요. 개발자가 디비 짜는것도 디자인이라고 한답니다. 그런 의미해서 디자인을 애기한게 아니잔습니까.
    웹프로젝트에 크게 세가지로 기획, 디자인, 개발 파트가 있습니다.
    마케팅, 화면설계, 메뉴얼 등등 기획업무구요.
    XHTML 의 마지막 L 이 의미하는게 랭기쥐입니다. 컴퓨터 언어라는 애기입니다.
    UI를 CSS HTML로 작업하는데 업무 구분을 하면 개발파트라는 거져.
    왜 이 애기를 꺼냈냐하면 자칫 이런 웹퍼블리싱 싸이트를 보고 초심자들이
    웹퍼블리싱이 웹디자인영역으로 착각하지는 않을까 걱정되서입니다.

    맑은 고딕이 맞는건 알고 있습니다. 혹시나 해서 맑은고딕도 넣어놓은겁니다.
    XHTML2 선언을 왜했냐고 하시는데 그냥 한겁니다.
    다시 말씀드리지만 저희는 웹표준을 대도록준수하자는 입장입니다. 철저히가 아니니구요.
    HTML4.0 이든 XHTML1 이든 2이든 상관없습니다. 다만 2에 관심을 갖고 있다는 정도 알리고 싶을 뿐이죠.

  21. 조소 댓글:

    맑은고딕 브라우져 렌더링은 저역시도 다양하게 테스트한 결과는 아닙니다.
    저만 그렇케 느끼는지는 모르겠지만 제가 생각하고 있는걸 애기하자면…

    IE : 상당히 부드럽고, 눈에 피로도가 적고 이쁘게 보임.
    사파리 : 부드럽지만 강하고 다른 브라우져에 비해 진함. 보기에는 편함.
    FF, 오페라,크롬 : 맑은고딕의 서체는 적용이 되지만 너무 연하게 렌더링이 되어 눈의 피로도가 심함. 계속 보고 있기 힘들정도.

    제가 소유하고 있는 pc의 그래픽등록정보는 다 디폴트랍니다.~

  22. 조소 댓글:

    아. 그리고 실제로도 맑은고딕 렌더링 크로스브라우징 문제 때문에..
    저희도 기존에 쓰던 굴림으로 셋팅할까 고민도 많이 했습니다만.
    굴림이나 돋움쓰면 사파리에서 가독성없이 렌더링이 되기 때문에 맥사용자가 많은 저희 사이트는 맑은고딕으로 셋팅된 것입니다.

  23. 이흥섭 댓글:

    표현에 트집 잡는 토론은 가치가 없습니다. 중요한건 시니피에지 시니피앙이 아니죠. 허접한 토론은 하지 맙시다. 어쨌든 말꼬리 잡으셨으니 조소 님을 포함한 일부 디자이너로 정정하겠습니다. 조소 님을 포함 시키게 된 계기는 다음과 같습니다.

    > 괴변이삼~
    > 리셋, 취소 버튼은 원래 부터 필요없었다. UX 측면에서 활용도가 원래없었다.
    > 근데 왜 주버튼 옆에 항상 셋트 처럼 붙어있었을까.
    > 그건 디자인상 디자이너들이 버튼 한개 떨렁있는 것보다 더욱 안정된 디자인느낌
    > 때문이다.
    > 뽕알이 한개만 있다고 생각해 보라… 우울증이 오지 않을까 싶다.

    솔직히 위 댓글은 좀 웃겼습니다.

  24. 이흥섭 댓글:

    덧 붙여:

    > 굴림이나 돋움쓰면 사파리에서 가독성없이 렌더링이 되기 때문에 맥사용자가 많은 저희 사이트는 맑은고딕으로 셋팅된 것입니다.

    맥에 기본적으로는 굴림이나 돋움이 없습니다. 없어서 Apple Gothic으로 보이는데 안티앨리어싱 아주 잘 먹힙니다. 가독성도 높고요.

  25. 정찬명 댓글:

    조소님, 저와는 많은 부분에서 생각이 다르신것 같은데요. 조소님의 웹 사이트를 통해서 그런 철학이나 생각들을 세상에 공유해 주시는 것이 어떨까요? 제가 볼때는 많은 분들이 찾아주실것 같아서요. ^^;

  26. 이상훈 댓글:

    재료를 이해하지 못하는 작가는 작품을 제대로 만들지 못하죠.

  27. 조소 댓글:

    나라디자인에 자유게시판이나 자유블로그란을 만들어주시면 글을 올릴께요.
    나라디자인 같은 전문 웹퍼블리싱 사이트가 있는데, 저희 피카큐브에 글올려도 많은 분들한테 공유는 안될것 같은데요.
    또 제가 웹퍼블리싱 전문가는 아닙니다. 그냥 코딩을 오래한 사람일뿐이고, 전문적인 웹표준 지식을 가지고 있지는 않아요. 정찬명님 처럼 조은 직장없구요.
    저는 그냥 작업실에서 놀면서 일러스트 쫌 하다가, 돈 떨어지면 단기프로젝트로 코딩 알바하고 그러거든요. 그래서 전문 웹퍼블리셔가 아니에요. 그냥 알바 할때마다 여기저기 기웃거리면서 트랜드 따라서 코딩하고 돈 떨어질 때까지 놀고 ㅋㅋ
    쫌 추접스럽게 코딩을 하고 있어요. 이런 사람이 무슨 철학이 있겠어요.

    소실적에 웹에이젼시 다닐 때 디자인실장이 참 싫었거든요.
    그 실장은 드림위버루 코딩하거나 DIV 태그써서 코딩하면 썅욕을 하던 사람이었어요
    근데 그 사람때문에 하드코딩이 몸에 뵈서 지금까지도 입에 풀칠은 하니 참 고맙다는 생각이 드네요.

  28. 정찬명 댓글:

    자유○○○ 같은 것은 제가 만들어 드릴 계획이 없습니다. 제 글이 마음에 들지 않으시면 피카큐브에 반박글을 작성하시고 트랙백을 거세요. 이렇게 댓글로 도배되는것은 제가 원치 않습니다. 벌써 이 하나의 포스트에 28개의 댓글이 달렸는데 7개의 댓글이 조소님 것입니다. 저라면 그런 정성으로 제 웹사이트나 블로그에 힘있게 단 하나의 반론글만을 작성하고 트랙백을 걸겠습니다. 조소님의 생각에 공감하는 독자들이 많다면 당연히 조소님의 웹사이트에 독자들이 몰리겠죠. 나라디자인에 조소님의 글을 읽으러 오시는 독자분들을 조소님의 웹 사이트로 안내해 주시죠. 조소님과 같은 생각을 가지신 분들이 이곳에서 제 글을 보는것은 서로 원치 않는 일이잖아요.

  29. 나무 댓글:

    개인적으로 스타크래프트라는 게임을 좋아하는데
    조소님을 보고있자니…

    프로게이머에게 덤비는 초딩 베틀넷 유저라는 생각밖에 안드네요..
    이건모….댓글들을 읽으면 읽을수록 형편없네요…

  30. 비오름 댓글:

    조소님.
    왠지 조소님께서는 다른 감정이 있으셔서 애써 찬명님의 글을 반박하려
    노력하는 거처럼 보입니다.
    부디 마음 푸시고 다시 한번 생각을 해보셨으면 합니다.
    가르치려 드는 것은 아닙니다.
    그냥 앞서 가는 사람 주머니에서 지갑 떨어진거 보고 줏어드리는 심정으로
    말씀드립니다.

  31. 꿈트리 댓글:

    ㅋㅋㅋ 여기 오시는 분들은 모두 센스가 넘치시는 분들 같네요
    댓글 하나하나가 재미있네요 ^^
    이런 글을 쓰면 조소님이 화내시려나?ㅋㅋ
    개인 적인 생각으론 조소님은 찬명님을 부러워 하시는거 같아요.^^
    ㅋㅋㅋㅋ

  32. 강영민 댓글:

    정찬명님의 글은 여기 알고서부터 지금까지 많이 읽었습니다. 디자이너로서의 저도 한번씩 움찔 하게 만들 정도로 좋은 글들임에는 분명합니다. 기능성 디자인…. 그리고. .. 아무튼 ^^ 여기오고 나서부터 혼자서 멍하니 모니터를 보는 시간이 많아졌습니다. 그만큼 생각하고요.. 사명감 마저 드는군요…
    저도 댓글을 유심히 보는 편에 속합니다. 이 글에 대해서 여러분은 어떻게 생각하고 있을까. 이 글에 대해서 여러분들은 어떤 눈으로 어떤 생각으로 댓글을 작성하는 걸까 하는 그런 생각이 들었었습니다.(과거형입니다.)
    오늘 처음 나라디자인의 글에 댓글을 달고 있습니다. 지금도 어떤 댓글을 달지 무척 고민하면서 말이죠. 본론으로 들어가서
    위의 어느분처럼 조소님의 글의 의견은 좋다고 생각합니다만. 표현은 정말 잘못되었다고 생각합니다. 그리고 하나 더, 표현 중의 일부 단어에는 맞춤법이 제대로 지켜지지 않은것 같네요. 조금 눈살을 찌뿌렸습니다. 대수롭지 않은 맞춤법이지만 그 글을 보고 내용뿐만 아니고 그 글에 실린 느낌을 보고 평가 되어지고 있다는것을 조소님께서 알아주셨으면 좋겠네요.

  33. 이원민 댓글:

    저도 무시하고 있는데 그냥 무시하세요. 관심만 주면 더 활개 치는 것 같은데요. 제 셩격에는 사람이 착하면 착하게 대하고 돌아이면 돌아이처럼 대하고 나쁘면 나쁘게 대합니다.

    쉽게 말해서 상대방 성격에 맞춰서 대하는 성격이에요.

    조소님 제가 분명히 말해도 아직 모르시는 것 같아서요. 본인은 좀.. 사상이 이상한 사람인거 아시죠? 아시기나 할까요? “뽕알”이라니….. 뽕알 뽑아서 드세요.

  34. 정찬명 댓글:

    모든 환경이나 사람에 대한 다양성을 존중하고 고려하는 것이 유니버설 디자인의 가장 큰 특징이라고 생각합니다. 이곳에 주시는 다양한 의견들도 모두 존중되어야 한다고 생각하구요. 되도록 본문의 논조에 집중하고 비판하되 그런 과정에서 사람이 다치는 일은 없었으면 좋겠습니다. 사람을 향한 일을 하고 있는데 그 과정에서 사람을 다치게 한다면 모순 이겠지요.

  35. 조소 댓글:

    ㅎㅎㅎ~ 분위기가 왜 이런거졍? 큰일이네요. 여기 분들과 저는 코드가 안맞는것 같아요.
    음… 우선 직장 얘기는 정찬명님을 칭찬하려고 쓴 글이고, 부러워서 쓴 글이 아니에요. ^^
    전 회사 백만금을 줘두 취직은 하지 않습니다. 돈이 없어두 제가 하고 싶은 것을 마음것 하고 있는 지금이 행복하답니다. 아무리 조은 회사를 다닌들 월급쟁이는 한계가 있죠.
    지하철노조, 현대자동차 연봉 6천씩 받으면서도 복지 개선해달라고 데모하는 것이 그 예이죠. 회사원은 회사의 부속품이었다는 사실을 나이들어서야 깨닫는다죠.

    혹자는 그럼 당신은 그런 회사나 들어갈 수 있냐고 되묻고 싶은 분 있을 겁니다.
    국내 방문자순으로 20위 안에 드는 사이트 중에 포털을 제외하고 제 손을 안거친
    사이트가 몇 안될겁니다. 믿거나 말거나…

    제가 표현이 좀 천했던 것은 인정하지만, 욕설이나 혐오스런 용어를 쓴건 아니자나요.
    예전에 황정민 아나운서가 라디오에서 모유수유 사건이 있었져.
    아빠랑 함께써야 하는 불편함이~~~ 대다수에 사람들이 배꼽잡고 웃을 때 어떤 사람들은 여성비하, 방송모독 이라고 비판을 하였습니다.
    개인적으로는 그냥 웃고 넘길 수 있는 가벼움도 있다고 생각합니다.
    제가 웃기지도 않았으면 죄송합니다만, 조차나요 저 때문에 나라디자인 열띤 토론장이 되고

    제가 튀고 싶어서 억지로 반박글 올린다고 하신 분도 계신 것 같은데… 그렇치 않아요.
    웹퍼블리셔는 웹에이젼시에서 개발팀 소속이에요. 그러니 나라디자인이란 사이트의 도메인이 좀 어색하다고 질문하는 것이고, 아무튼 억지글 쓰려는 의도가 아니었습니다.

    사람들은 자기의 생각만큼의 앞을 보고 살아간다죠.
    한 3-4년쯤 후에 님들은 아차~ 하면서 땅을 칠겁니다. 조소엉아 말이 맞아꾸나 하면서…
    분명 그때가 올꺼라고 생각해요~
    어째든 많은 분들이 저는 쩝쩝하게 생각하시니 자숙하도록 하겠습니다.
    이곳이 조은 블로그인 것은 확실하니까요~

  36. 크흠 댓글:

    괴변이삼~
    편집증에 경의를 표합니다.

  37. 작업 댓글:

    안녕하세요
    자주 와서 많이 배우고 갑니다^^
    궁금한점이 하나 생겼습니다.
    1. 해당 요소들에 대한 스타일 변경을 대부분의 웹 브라우저가 지원하지 않기 때문이며,
    2. 이를 극복하기 위하여 사용되는 트릭이 키보드 접근에 치명적이고 화면 표시 속도를 떨어뜨리기 때문입니다.

    이 두가지를 말씀해주셨는데요 제가 주워 듣기로는 보안상의 문제도 있다고 하는데
    보안상의 문제는 없는건가요?

  38. 정찬명 댓글:

    작업님, 좋은 질문 주셔서 감사합니다. 웹 브라우저들이 서식 제어 요소들에 대한 디자인을 지원하지 않는 근거에 대하여 추가적인 설명을 곁들일 수 있을 것 같습니다. 하지만 이와 관련하여 근거있는 설명을 찾아내지 못했기 때문에 이것은 어디까지나 저의 추측 입니다.

    첫째, ‘사용성’ 문제로서 위에서 이흥섭 님께서도 댓글을 통하여 이런 말씀을 하셨습니다. “이미 브라우저는 서식 제어 요소를 우리에게 어떻게 보여줄지 약속했습니다. 그 약속이 보장될 때 사용성은 높아지게 되어있습니다.” 라구요. 만약 서식 제어 요소에 대한 스타일을 마음껏 변경할 수 있게 된다면 제작자들은 ‘체크버튼, 라디오버튼, 파일첨부, 셀렉트메뉴’를 어떻게 변경할지 모릅니다. 물론 기존의 UI를 크게 해치지 않는다면 다행이지만 이것이 도를 지나치게 되는 경우 사람들은 더 이상 서식 요소를 신뢰하지 않게 될 것입니다.

    둘째, 작업님께서 말씀주신 ‘보안’ 문제도 매우 적절한 이유가 되고 있다고 생각합니다. 제작자가 ‘악의적’으로 서식 제어 요소에 대한 스타일을 전혀 다른 모습으로 디자인 하는 경우 우리는 충분히 ‘온라인 사기’의 피해자가 될 수도 있다고 생각합니다.

    이와 관련하여 충분히 설명력 있는 글을 발견하시게 된다면 댓글 부탁드립니다. ^^

  39. […] 되기 때문입니다. 디자인 하지 말아야 하는 Form Control 요소는 제 글 ‘서식 제어 요소의 디자인은 제한되어야 한다‘ 라는 글을 참고해 […]

  40. 나들이 댓글:

    조소님에게 하고 싶은 말은 많으나 아끼겠습니다.
    다만, 이것만은 말씀 드리겠습니다. 올바른 맞춤법을 지키지도 않고 무엇보다도 글 자체에서 풍기는 시니컬하고 기분 나쁜 분위기는 스스로도 느끼지 못하시는 모양입니다. 왜 남들이 자신의 글에 그렇게 부정적으로 반응하는지 한번 자문해보시는 게 좋을 듯 싶습니다. 올바른 말이라 하더라도 남에게 전달하는 방법을 고민해보고 적었으면 합니다. 일부 수긍하는 주장은 분명히 있습니다만 적어도 저는 그 태도 때문에 뒷맛이 좋지 않군요.

  41. 지나가다 댓글:

    나들이 님의 말씀에 한표 던집니다.

    “왜 남들이 자신의 글에 그렇게 부정적으로 반응하는지 한번 자문해보시는 게 좋을 듯 싶습니다. 올바른 말이라 하더라도 남에게 전달하는 방법을 고민해보고 적었으면 합니다.”

  42. 나에 댓글:

    일단, 누군가를 반박하기 전에 맞춤법 먼저 좀 지켜주세요.
    읽기 거북합니다. 조소님.

  43. BlueScript 댓글:

    ajax,xsl,asp…

    다운받은날 : 2008/12/10 다운받은곳 : 어느 블러그에서 다운 받았는지 기억이 없네 쓰인곳 : asp로 만든 Ajax 다운로드 : ajax_asp샘플소스.zip 이 글은 스프링노트에서 작성되었습니다….

  44. Hannie 댓글:

    커뮤니케이션도 디.자.인

  45. 정찬명 댓글:

    이렇게 짧아도 충분히 멋진 댓글이 될 수 있군요! ^^

  46. 아놔,,, 댓글:

    “서식 제어 요소의 디자인은 제한되어야 한다. ” 본문을 읽고 감동받았습니다.
    현재 디자인을 하고있는데 기획실장님이 셀렉 박스를 디자인하라고 합니다.
    비주얼에 방해가 된다는 것이 그 이유입니다. 나참…
    이직할까 고민중입니다. 젠장…

  47. 정찬명 댓글:

    아놔,,,님 상황에 충분히 공감이 되면서 저도 갑자기 혈압이 오르는데요. ㅎㅎ. 천리길도 한 걸음부터라고 하는데요. 조금씩 실장님이 공감할 수 있는 이야기로 시작해서 적절한 합의접을 찾도록 일단은 노력해 볼 필요가 있다고 생각합니다. 너무 쉽게 포기하기에는 너무 중요한 문제 잖아요. 저도 제 뜻대로 되는 일보다 안되는 일이 더 많습니다. 직장은 천천히 옮기시고 나중에 옮기실땐 연봉 30% 정도 더 올려서 받으시길. ^^;

  48. KaGuRa 댓글:

    웹개발자인데요…
    참 많은거 배워가네요.
    요즘 여기저기서 들려오는 말이 웹접근성에 장차법… 흠흠…
    작년쯤엔가 웹접근성을 거론하며 열심히 컨텐츠의 구조화를 외치며
    웹디자인하던 디자이너가 생각나네요…
    그때엔 ‘저사람 피곤하게 왜저래… 아놔DIV좀 그만쓰지..’라고 했었는데…
    지금은 부끄럽네요 ㅋㅋㅋ
    암튼 중요한건 많이 배워간다는거…
    웹접근성에 대해서 잘 모르는 디자이너도 종종 있어서 공부 많이 해둬야겠습니다.
    그래야 나중에 모르면 가르쳐주고 그래도 안되면 여기 가보라고 하죠 ^^

    아.. 마지막으로 나들이님의 댓글에 추천한표드리고 갑니다~

    공부는 다른글에서 하고 댓글은 여기에 다는 고쟁이센스!!

  49. 정찬명 댓글:

    @KaGuRa
    저도 처음 div로 레이아웃을 구성해 보라는 제안을 받았을 때 반응이 ‘뭥미?’ 였습니다. ^^ 그런데 지금은 오히려 table 코딩을 잘 못해요. ㅜㅜ; 이곳에 없는 뭔가 새로운걸 배우시면 제게도 살짝 귀뜸 부탁 드립니다. ㅋㅋㅋ.

  50. 이재헌 댓글:

    웹디자이너입니다. 조소님이 왠지 디자이너와 퍼블리셔를 구분해서 개발팀과 디자인팀으로 나누시는 분위기인데요.
    사실 실무에서도 그런 부분이 많죠. 이런저런 고려없이 그저 비쥬얼만 좋은 PSD파일 하나 던져놓고 1px까지 맞춰서 코딩을 하라고 요구하는 디자이너들이요.
    하지만 실제 디자인이 사이트에 적용되기 위해서는 구조와 기능들을 충분히 고려하고 상의해서 최종 결과물은 내놔야 한다고 봅니다.
    자동차 디자인을 디자인너가 마음에 든다고 컨셉디자인 하나 던져놓고 기술자에게 파팅라인 하나까지 완벽하게 만들어 내라고 하는 것과 다르지 않을까요?
    현실은 컨셉디자인이 컨셉카로 완성되지 않을뿐더러 현실적으로 상용차가 되기까지는 수많은 의견 교류와 기술적 한계에 따른 디자인 변경을 필요로 하게 됩니다.
    단지 비쥬얼만 강조하는 디자인이라면 인쇄물에서나 주장할 수 있는 것이죠.
    웹은 비쥬얼만 있는 곳이 아니죠. 구조와 기능을 고려하지 않는 디자이너라면 단지 예쁘게만 만들 줄 아는 디자이너겠죠.
    웹은 정보를 전달해야 하는 곳이고, 그 장소에서 폼의 모양이 과연 정보전달에 얼마만큼의 노이즈로 작용될지는 잘 모르겠군요.

  51. 이영민 댓글:

    올해부터 본격적으로 css코딩으로 전환했는데요, 6개월 남짓 됐지만 이제 table기반은 저도 못할거 같네요. G랄 맞은 크로스브라우징만 빼면 훨씬 효율적이고 매력적입니다. 네이버 검색창 같은 전략적 경우가 아니고서야 굳이 폼요소들 데코레이션할 필요는 없다는 생각입니다. 정작 중요한건 폼요소간의 정렬이나 통일성, 인풋이나 텍스트에어리어 내의 텍스트가 쉽게 읽혀질 수 있도록 충분히 고려된 여백 같은 거겠죠. 그런점에서 셀렉트박스만은 디자이너로서 여러모로 아쉬움이 많은건 사실입니다. css나 브라우저가 버전업 되어감에 따라 나아지리란 기대도 해봅니다.

    아무튼 정찬명님 의견에 전적으로 동의합니다. 조소님과 열띤 토론이 오간거 같은데 다들 느끼시겠지만 내용에서의 깊이가 다르군요. 6개월 공부한 저도 알겠네요. ㅎㅎ

  52. […] 제어 요소(Form Control Element)를 디자인 하는 것은 상황에 따라 접근성을 떨어뜨리는 경우가 있기 때문에 제한되어야 하고 신중하게 사용해야 합니다. 이미 이전에 포스팅을 했지만 다시 한번 […]

  53. chess_cat 댓글:

    셀렉트 박스 등 기본요소들의 디자인과 관련한 내용을 서치하던 중 잘 정리된 글을 발견하고 많이 배워갑니다.
    본문도 재미있게 읽었고, 조소님을 필두로 이루어진 논쟁도 꽤 흥미롭게 읽었습니다.^^

    코딩이나 퍼블리싱보다는 디자인이나 실제 운영과정에서의 마케팅적인 내용을 진행하는 업무를 하다보니 조소님의 의견도 상당히 와닿는 부분이 있고,
    화면낭독기 등의 장애인분들의 이용에 불편함을 주지 않는 한도에서 디자인 수정을 줄 수 있는 방법이 여러모로 아쉬운 감이 있는 것이 사실입니다.

    한편으로 조소님의 디자인변경에 따른 논의가 비장애인을 대상으로 한 기능성에 대한 논점이 아니라고 하신 부분은 디자인변경이라는 것도 결국 기능성을 기반으로 한 것이지 오직 심미성에만 의존하는 것이 아니고 그것은 ‘디자인’이라는 총체적 의미에 포함된 이미 포함된 개념이기에 굳이 깊게 논의할 필요가 없다고 판단하는 것으로 읽었습니다.

    나라마다 신호등이나 우체통의 디자인이 차이는 있지만 그 나라에 처음 방문하는 사람도 그것을 식별할 수 있는 공통된 ‘코드’는 존재하고 있고 그 ‘코드’ 안에서 리디자인 하는 것은 디자인 영역에서도 너무 당연한 것이니까요.

    건물을 지을 때, 장애인들을 위한 설비를 의무화하는 것이 이제는 너무나 당연히 느껴지는 것처럼 사이트를 개설하는 과정에서도 이와 같은 부분들이 충분히 고려되어야 하는 것이 당연한 것 같습니다.
    하지만 그렇기 때문에 더더욱 이와같은 기본적인 접근성을 유지한채로 일정한 ‘룰’ 안에서 변경될 수 있는 방법도 필요할 것이라고 생각합니다.

    저처럼 기본적인 교육없이 주워먹기 식으로 그때그때의 문제를 해결하며 걸어온 사람이 놓치기 쉬운 부분을 속 시원히 긁어주는 내용, 많은 도움받고 갑니다.

댓글 쓰기

전송된 글이 나타나지 않는다면 필터링 된 것입니다. dece24앳gmail.com 으로 메일 주세요.
(X)HTML 코드 사용이 가능하지만 소스 코드 출력을 원하시면 <꺽쇠>는 [괄호]로 변환하여 작성해 주세요.

필수 아님

필수 아님