다음은 디자이너가 레이아웃, 이미지등을 제작할 때, 웹표준/접근성을 고려시 주의해야 할 점에 대한 가이드라인입니다. 코딩과는 상관없이, 실제 이미지 제작등에 주의해야할 가이드라인입니다.
1) 모든 이미지는 흑백변환시에도 이해가능해야 한다.
비슷한 채도 명도를 가지고 있는 색상으로 디자인을 하면 흑백으로 변환했을 경우 이미지에 사용된 색상간의 경계를 파악하기 어렵습니다. 쉽게 말하자면 흑백복사를 해도 알아볼 수 있게 이미지 색상을 잡아야 합니다.
따라서, 이미지를 제작할 때에는 되도록이면 비슷한 채도명도를 인접해서 사용하는 것은 피해야 합니다. 특히 원색계열의 색을 쓰거나 파스텔 계열의 색을 쓸 때 주의해야겠지요. 또 차트같은 것을 그릴 때에도 주의해야 합니다.
이를 피하기 위해서는 색상배열을 다르게 하거나, 인식가능한 백그라운드 패턴을 주거나, 외곽선을 주거나, 외곽선 형태를 다르게 함으로써 해결할 수 있습니다.
이는 전색맹, 부분색맹, 색약자들에 대한 배려일 뿐만 아니라, 흑백 디스플레이, 저성능 디스플레이, 인쇄, 이미지패턴검출기 등을 위해서도 필요한 내용입니다.
2) 고정된 크기의 이미지는 조각내지 않는다.
CSS를 이용한 디자인시에는, 크기가 고정된 이미지라면 굳이 조각낼 필요가 없습니다.
주어진 영역밖을 벗어나 돌출되는 형태의 디자인을 기존의 테이블 작업에서는 튀어나온 부분을 자르고... 하는 방식으로 조각내어
이어붙였습니다만, CSS를 이용할 경우에는 그렇게 할 필요없이 목표하는 이미지 이외부분을 투명하게 놓고 레이아웃을 투명시트지
위에 올린다는 식으로 생각해야 합니다.
당분간은 PNG 알파채널이 IE에서 원활히 사용할 수 없으므로 투명 GIF를 쓰면 됩니다.
조각나지 않은 이미지는 HTML코드를 단순하고 시맨틱하게 유지시켜줍니다.
3) 가변 크기의 이미지는 3분할을 기본으로 한다.
모든 컨텐트는 최소 3단계의 pseudo-structure를 갖는다고 생각하시면 좋습니다. header,body,footer.
대개 가변 크기의 이미지란 컨텐트를 감싸는 "박스"일 경우가 많습니다. 컨텐트의 크기에 따라서 박스의 크기가 가변적으로 변하겠지요.
이럴 경우 가변폭이 어디냐에 따라 "위-가운데-아래" 혹은 "좌-가운데-우"로 이미지를 분할하고, 각각을 컨텐트의 3분할 structure에 대응시키면 됩니다.
(물론 이외에도 wrapper를 이용한 박싱 테크닉 등이 있습니다만...)
4) 9분할 이미지 분할은 필요한 것일까?
디자인 편의성 때문에 박스를 9조각 내놓고 테이블로 3X3 박스를 만드는 기법을 많이 사용합니다. 실제로 CSS 디자인 초보분들이 제일 많이 묻는 방법이기도 합니다.
확실히 조각난 9개의 이미지는 어떤 크기의 박스도 만들 수 있는 만능방법이긴 합니다만, 코드로 보자면 불필요한 코드가 추가되는 원인입니다.
CSS 디자인시 9분할 이미지가 반드시 필요한 경우는 "가로-세로 가변폭 박스"의 경우밖에 없습니다. 문제는, 이러한 박스는
실제 레이아웃 디자인시 거의 안쓰입니다. 대개 "가로세로고정"이거나, "가로고정-세로가변", "세로고정-가로가변"의 경우입니다.
진정으로 "가로세로-가변"폭인 박스 디자인은 고도의 liquid 디자인시에도 거의 쓰이지 않습니다.
반드시 써야겠다면 방법은 있습니다.
header-header, header-body, header-footer, body-header, body-body,
body-footer, footer-header, footer-body, footer-footer의 9단계로 컨텐트
structure를 만들고 각각에 이미지를 대응시키면 되긴 합니다. 추천하지 않습니다. 차라리 다른 레이아웃을 생각하는게 더
바람직하다고 봅니다.
CSS 3에서는 단일 div만으로도 border속성을 이용해서 9분할 이미지박스를 구현할 수 있겠지만, CSS 3의 실제적용은 앞으로도 몇년은 더 기다려야 합니다.
5) 되도록이면 이미지에 텍스트를 포함하지 않는다.
반드시 필요한 경우가 아니라면 이미지에 텍스트를 포함하지 않는 것이 좋습니다. 물론 더 예쁜 폰트로 보이고 싶은 마음도
중요하고, 실제로 기본지원 폰트가 맘에 들지 않는 경우가 많습니다만, 그럼에도 불구하고, 이미지안에 텍스트를 포함하는 것은
지양하는 게 좋습니다.
메뉴의 텍스트폰트를 반드시 "Impact" 혹은 "한양Expo체"를 사용해야만 하겠다면 꼭 그래야만 하는 이유를 제시할 수
있어야 합니다. 실제로 웹폰트를 사용하지 않는 한(그리고 웹폰트는 전혀 바람직하지 않습니다.) 사이트의 기본 텍스트는 기본
폰트만을 사용해서 제작됩니다. BI나 CI정도라면 모를까, 본문은 "돋움"인데 메뉴링크만 "한양Expo"인 경우가 과연 얼마나
사이트 디자인 일관성에 부합할까요.
또 각종 타이틀 등도 디자인상 반드시 필요한 경우가 아니라면 이미지로 만든 타이틀은 자제함이 좋겠습니다. 대체텍스트 기법을 충실히 활용해줄 게 아니라면 말이지요...
접근성등의 이슈와도 연관되기 때문에 되도록이면 이미지와 텍스트는 분리하는 게 좋습니다.
6) 사진은 JPG, 그러나 그외에는 GIF로...
논란의 여지가 있긴 합니다만, 여전히 사용자의 디스플레이의 색상표현력의 한계, 그리고 트래픽등을 고려하면 GIF를 사용하는게
유리합니다. 물론 사진이라면 트루컬러 JPG도 좋겠지요. 그러나 그 외의 이미지는(예를 들어 아이콘 등...) 웹컬러스키마를
이용한 256색 GIF를 쓰는 쪽이 좋습니다.
PNG가 JPG와 GIF에 대한 좋은 대안이긴 합니다만, IE6가 시장에서 퇴출되는 그날까지는 아직 시간이 조금 남아있네요.
7) Animated GIF는 주의깊게.
가장 안좋은 것 중 하나는 번쩍이는 Animated 이미지입니다. 사실, 번쩍이지 않아도, 제맘대로 바뀌고 있는 이미지가 포함된
웹문서를 보고 있는 건 눈에 피로를 줍니다. 반드시 필요한 경우가 아니라면 animated GIF는 자제함이 좋을 듯 합니다.
8) 링크는 본문 및 배경과 구별이 되도록.
이 정도는 기본적으로들 하고 계시긴 합니다만... 주의할 점은, 색상만으로 구별하게 하는 경우 앞서 1)의 문제점이 여기에도 문제가 됩니다.
추천하는 것은 링크에 밑줄로 시각적인 표시를 해주는 것입니다만.... 디자인 상 밑줄을 싫어하는 경우도 많지요.
사실 여러분이 보고계신 제 사이트도 이 문제는 아주 나쁜 편입니다. 왜냐하면 적록색맹이신 분은 제 사이트 본문에서 링크를 찾기 곤란하기 때문입니다.
CSS 2에 :before나 :after 등을 활용하면 좋겠습니다만, 여전히 IE 6가 퇴출될 때까지는 힘들 것 같네요.
링크에 밑줄이 힘들다면 링크임을 표시하는 작은 아이콘등을 추가하는 것도 좋은 방법입니다.
최소한, 흑백변환 혹은 색맹의 경우에도 링크 구별이 가능하도록 색상을 주의깊게 선택하셔야 합니다.
9) 리사이즈는 미리.
원본 이미지를 가지고 HTML 코드상에서 width와 height로 리사이즈하는 경우가 있습니다만 별로 바람직하지 않습니다.
트래픽 면에서 낭비가 심하기 때문입니다. 작은 이미지가 필요하다면 미리 작은 이미지를 만들고(손으로 만들든,
서버사이드프로그램으로 자동으로 만들든) 해당 사이즈에 맞는 리사이즈된 이미지를 표시하는 것이 좋습니다.
10) 사용자의 동선을 생각할 것.
이것은 웹표준, 접근성과 크게 상관은 없을 수도 있습니다만... 어느 정도는 관련도 있고, UX등과도 연계가 됩니다.
처음 사이트에 방문하는 사용자는 메뉴 등도 주의깊게 봅니다. 그러나 자주 방문하는 사용자는 메뉴등은 건너뛰고 컨텐트부터 봅니다.
확실히 좌측 메뉴는 시각적으로 눈에 잘 들어오긴 합니다만, 어느 정도 경험이 쌓인 사용자에게는 건너뜀의 대상이 되기도 합니다.
메뉴의 위상이 컨텐트보다 중요하다면 좌측에 놓는 것이 좋겠지만, 반대의 경우라면 우측에 놓는 것도 사용자 경험상 더 효과적일 수 있습니다.
사용자의 시선은 어느 방향으로 흐르는지, 사용자의 마우스는 어느쪽으로 움직이는지 고려한 레이아웃 디자인을 잡는 게 좋겠지요.
접근성의 측면에서 이러한 배치는 때로는 중요한 문제일 수도 있습니다. 2차원적인 시선의 움직임으로 내용을 능동적으로
파악하는 정상사용자와는 달리, 시각장애인들은 보조기구의 도움을 받아 1차원(linear) 순서로 컨텐트를 수동적으로
전달받습니다. 이러한 경우, 매 페이지에 컨텐트보다 앞에 위치한 상단섹션, 좌단섹션들은 컨텐트보다 중요하지 않음에도 불구하고
선형적인 구성상 앞에 오기 때문에 사용자의 주의력을 흐리게하는 경우도 있습니다.
뭐, 이런 경우에는 링크스킵을 제공하거나, 혹은 컨텐트를 먼저 기술하고 CSS로 레이아웃을 변형하는 해결책도 있기는 합니다만...
레이아웃의 기본은 Beauty보다는 Usability라는 점을 염두에 두고 디자인해야한다는 말이지요. 웹은 아트가 아닌 인포메이션테크놀러지이니까요.
댓글 없음:
댓글 쓰기