인터넷 강국의 부모님들도 웹을 즐긴다

웹은 변화 하고 있습니다. 다들 너무나도 잘 알고 있는 사실 이죠. 웹2.0의 이야기도 모자라서 황당하긴해도 웹 3.0의 이야기가 돌고 있는 상황에 웹의 변화는 몸으로 느낄 정도로 순식간에 변화되고 있습니다.

현재 우리가 살고 있는 웹2.0이라는 문화, 시대, 풍조에 관한 이야기는 태우님이나 다른 멋진 블로거 분들이 해박한 지식으로 자세히 설명을 하고 계시지만, 저는 이 웹2.0 일부인 웹사이트, 더 들어가서 웹 디자인에 국한하여 변화되는 부분을 나누려고 합니다. 웹의 어플리케이션, 사용자층, 하드웨어등은 급속히 변화되는것에 비해 웹사이트의 변화는, 특히나 Usability, 사용성에 관한한 아직 그 속도에 이르지 못하는게 아닐까 하는 느낌을 충분히 받았습니다. 오랜만의 글이라 제가 머리속으로 그리는것을 제대로 전달할수 있을지 걱정이 되는군요

하드웨어의 변화에 따른 유저빌리티 (중편) - 미정

어플리케이션의 변화에 따른 유저빌리티 (하편) - 미정

인터넷 강국의 부모님들도 웹을 즐긴다

웹2.0은 더 많은 더 깊은 층의 웹 유저들을 바라보고 있습니다. 어린아이부터, 게임, 게시판, 인터넷 동호회, 싸이월드, 블로그에 열심인 청소년들, 인터넷의 시작부터 함께한 중년층(추억의 너구리...), 컴맹이라 불리웠던 부모님과 연세가 지극히 드신 할아버지 할머님들까지 점점 다양하고 여러 분류의 유저들이 생겨나고 있는건 다들 아는 사실 입니다. 하지만 이러한 다양한 유저들이 생기는 반면 웹사이트는 얼마만큼 준비를 하며 변화 하고 있을까 라는 질문을 던진다면 그리 긍정적인 답이 나오는거 같진 않습니다. 극단적이지만, 과연 일모리네를 방문 하시는 분들중, 자신의 부모님께 간단한 세미나나 교육을 드림으로 웹서핑을 꽤나 괜찮게 하실것이다 라는데에 확신을 가지신분이 얼마나 많을지 질문을 던진다면 약간의 이해에 도움이 될런지요

고령층과의 교류

최근 386 이전 세대의 분들께 컴퓨터를 가르쳐 드릴 기회가 종종 생깁니다. 그리고 종종 듣는 말중의 하나는, “이런 깨알같은 글자를 어떻게 봐?” 입니다. 이상하지만 괜시리 죄송하다는 말이 나오게 되더군요. 해상도를 최소화해서 글자를 가장 크게 해 드립니다만, 그렇다고 보통 그 분들이 사용하시려는 모니터가 크지 않아서 800x600 해상도로 내려가야 글자가 그나마 읽을만 해지고 더러는 600x480 정도도 내려갑니다. 글씨가 읽을만 해지셨으니 이제 웹을 알려드려야 하는데 참 막막한 경우가 한둘이 아니더군요.

웹서핑 . . . 보통 한국 사이트의 규격은 1024를 맞추어 되어 있습니다. 고로 스크롤바는 상하조정뿐만이 아니라 좌우 조정까지 출현하게 되고, 생전 처음 보시는 스크롤바 라는것을 위 아래도 힘드신데 좌우까지 해야 한다고 말씀드리면 상당한 어려움이 다가옵니다. 마우스도 잘 못움직이시는데 스크롤바를 잡고 드래그를 하시자니 여간 쉽지 않습니다. 거기에다 ‘즐겨찾기’ 를 켜 놓아 드리면 웹서핑은 스타크래프트의 용어를 빌리자면 gg 라고 할수 있겠네요.

웹서핑 어려움의 문제는 여기서 끝나지 않습니다. 웹 용어의 문제, 메뉴 위치의 문제 등등이 그 다음 숙제로 다가옵니다. 일단 웹의 설명을 마치고 한 사이트를 같이 서핑 하며 여러 부분들을 가르쳐 드리는 중에 어려운 부분은 ‘과연 어떤것이 상위 메뉴 이며 하위 메뉴인 것인가’ 하는 문제입니다. 웹에 푹 빠져 사는 많은 젊은 세대와 386 세대 분들도 사이트를 접속하면 Home(홈으로) 등과 같이 나열되어 있는 링크들은 소위 말하는 상위 메뉴로 사이트의 큼직한 링크들을 담당하고 있다는걸 생각지 않아도 이해되고 골라 클릭을 하는 능력이 있지요. 하지만 메뉴 라는 것의 개념이 없으신 분들에게 알려드리는 것은 쉽지 않습니다. 상위 메뉴는 사이트에서 큼직 큼직 하게 다루니 찾기 쉽다고 해도 하위 메뉴나, 서브 메뉴들을 알려드리는것은 상당한 고통이 따르죠. 특히 영어로 되어 있다면. . .

어린이는?

물론 어린이들도 인터넷을 즐깁니다. 어릴때부터 컴퓨터를 즐기며 인터넷을 사용한다면 과연 자신의 아이를 위해서 뭘 개선해 줄수 있을까요? 글자 크기? 눈이 최대한 피로하지 않도록 크고 여백도 있는 곳이 좋겠죠. 올바른 용어? 당연합니다. 복잡한 메뉴구성 보다는 간단 명료하지만 잘 알아볼수 있는 네비게이션. 위의 컴퓨터와 친하지 않으신 고령층과 비슷한 목록들이 나오게 됩니다.

더 나아질수 있는 방법들?

이러한 부분에 있어서 접근성으로 더 촛점을 맞추어 여러 법안들이 나오긴 하였습니다만, 사용성으로 시각을 맞추어 어떻게 하면 웹사이트 방문시에 문제없이 기능들을 잘 활용할까 를 보고 싶습니다.

유저의 변화에 따른, 또한 특히나 이러한 부분에 있어서 민감한 웹사이트의 웹메스터들께서 하실수 있는 개선 방법등을 나누어 보겠습니다. 간단히 네비게이션, 폰트 크기, 레이아웃의 변화 등을 보고자 합니다. 이러한 부분의 개선이 있다면 충분한 웹2.0에 맞춰가는 사이트라고 할수 있겠죠. 어떻게 보면 기본기에 충실하면서 그 안에서 창의성으로 아름답게 표현되는 사이트가 되는것이라고 할수 있겠습니다.

*주의: 목적에 맞게 디자인되고 표출되어야 합니다. 어른분들이나 아이들이 전혀 방문할 가능성이 거의 없는 일모리네집에 메뉴가 영어로 되어있다고 크기가 작다고 머라 하신다면

네비게이션

alistapart.com 의 Derek Powazek 은 웹사이트의 네비게이션이 잘 되어 있는지를 저울질 하는 3가지의 질문을 제시합니다.

1. 내가 지금 어디있는지 아는가? 2. 내가 다음 갈곳이 어디인지 아는가? 3. 내가 그 전에 갔던 곳들이 어디인가?

이 3가지의 질문에 무난히 답할수 있다면 네비게이션이 충분히 그 일을 감당하고 있다고 할수 있겠네요.

제가 보통 저희 어머님께서 웹서핑을 하실때, “어머니 인터넷 주소를 치고 들어가셔서 나오는게 큰 잡지라고 생각을 하시구요, 가장 맨 위에 나오는 메뉴들은 큼직 큼직한 토픽이고 그걸 클릭해서 들어가시면 왼쪽에 보이는 메뉴들이 바로 세부토픽이고, 이제 중간에 나오는 여러가지 글들이 바로 보시고자 하는 잡지 내용이에요” 라고 말씀을 드립니다. 아무리 사이트가 복잡해 보여도 (특히 한국 방송을 시청하시기 위해 MBC, SBS, KBS를 들락 날락 거리시는 어머님께) 그것만 기억 하세요 라고 말씀드리면 어느정도 이해하시고 서핑을 하십니다. 하지만 그 패턴을 벗어나서 메뉴들이 여기저기 퍼져 있거나 너무 복잡하게 움직이는 메뉴는 서핑을 참 힘들게 하는 요소가 됩니다. 자유스러움을 좋지만 개인 포트폴리오가 아닌 정보전달 사이트라면 조금은 자제 하는게 첫번째가 될수 있겠습니다.

특히 현재의 위치를 잘 알려주는 방식의 메뉴 구성, 예를들어 탭 방식의 구성은 인터넷 초보 유저뿐만이 아닌 여러 유저들에게도 도움이 되는 방식이라고 할수 있겠네요. NAVER의 블로그 페이지가 한 예가 되겠네요.

참고글: 탭 방식으로 html에 옷을 입혀주는 css

폰트사이즈의 변화를 잘 고려하자

폰트 크기의 중요성은 정말 그 필요를 느껴 보신 분들만이 아시는거 같습니다. 개발자나 디자이너의 입장에서 충분히 case study, 즉 임의의 상황들을 실험해봄으로써 가장 알맞는 폰트를 제공하며 옵션들을 제공하면 그만큼 편리하고 방문객이 편안해 할수 있는 사이트가 되겠죠. 예를들어 CSS와 JS 를 사용하여 방문객들에게 직접 폰트 크기를 조절할수 있게 한다던지, 방문객이 고령층이 꽤 된다면 폰트 크기 자체를 13PX 이상으로 조정하는것도 고려해볼만 합니다. 폰트 크기 변화를 브라우저에 맡길수도 있겠지만, 브라우저의 세부 메뉴까지 보실만한 능력이 안되시는 분들께는 유용 하겠죠. VISTA의 맑은고딕체가 나오긴 했지만 앞으로 백터 폰트들이 더 많이 개발되어 나오게 되면 12px 9pt 사이즈의 정해진 사이즈 보다 필요에 따라 디자인도 살리며 폰트 크기도 커지는 효과를 누릴수 있을 것입니다. 기대되네요

한가지 예를 들고 간다면, 정보 전달의 최선의 방법중의 하나인 블로그 라는 툴에서 소위 말하는 파워블로거들을 잘 보면, 디자인이나 참신한 아이디어 라기 보다는, 글씨 크기나 정보전달을 위한 깔끔하고 방문자를 배려하는 디자인을 갖고 있습니다. 그리고 그들은 꾸준히 고민합니다. “내 블로그의 글씨가 작아서 정보전달에 혹시나 걸림돌이 될까?” “글간격이 너무 작으니 넓혀볼까?” 이러한 고민들을 하는 이유는, 그만큼 그 중요성을 잘 인식하고 있기 때문입니다. 이쁜디자인 vs 유용한 디자인. 그 결과는 너무나도 뚜렷합니다.

유동적인 레이아웃

창크기의 변화에 따라서 사이트의 크기가 변화한다는것, 상당히 애매하고 어려운 부분입니다. 아마 이 부분은 하드웨어의 변화에 따른 유저빌리티 부분에서 더 자세히 다룰듯 한데요, 중요한것은 아직도 800px X 600px의 해상도를 쓰시는 분들이 많다는 것입니다. 통계적으로 보면 상당히 미묘할수 있지만, 어른들께는 꽤나 큰 부분이라는걸 염두 하시고, 정보 전달시에 1024에 맞추어 디자인을 하더래도 정보가 분산되어 나오기 보다는 일정한 부분에서 출력이 되어서 좌우스크롤바를 고정시키고 서핑이 가능할수 있도록 해 주시는것도 좋은 디자인이 될꺼라고 생각합니다.

어느정도의 유동성을 감안하여 디자인을 하겠다면 thinkvitamin.com 같은 사이트를 참고 하셔도 되고, js 를 사용하여 접속자의 해상도를 읽어들인후에 800 이하의 해상도에 맞는 디자인을 출력해도 좋은 방법이 될것입니다. 또한 Max-width, min-width 와 % 의 상대 스케일도 잘 이해 하시면 큰 도움이 됩니다

새창띄우기를 자제하자

간단히 ‘이 외’ 의 부분으로 한줄 넣으려 하다가 조금이라도 짚고 넘어가면 좋을듯 하여 넣었습니다. 이 부분에 대해선 예전에 나눈적이 있지만(열띈 토론 너무 아름다웠습니다) 그당시의 여러 이유와는 약간은 다르게 새창이 띄워짐으로써 갑작스런 변화에 당황 하시는 분들의 관점에서 말씀을 드리는 부분입니다 . 현재 보고 있는 창에서 새로운 창으로의 이동이 어른분들께는 꽤나 부담으로 다가옵니다. 정말 외부링크를 새창으로 띄워야만 하겠다면 어쩔수 없겠지만, 최대한 새창띄우기를 줄여서 한 페이지에서 링크도 클릭하고 ‘뒤로가기’ 기능도 잘 쓸수 있도록 배려해주는것이 생각외로 중요한 부분으로 보고 있습니다.

이 외에도 자세히 언급은 하지 않지만, 풀다운 방식보다는 리스트 형식으로 메뉴를 구성해준다던지, 폼 입력박스등의 폰트 크기를 약간 크게 하여 타입시에 잘 보이도록 한다던지, 아직도 토론되고 있는 뜨거운 감자인 Active X 사용을 줄이며 링크의 명확한 표시등도 어른과 아이들의 서핑을 위한 큰 도움이 된다고 볼수 있겠습니다.

마지막 마무리

이런 긴 글은 참 오랜만에 써보는거 같습니다. 하지만 그만큼 저에겐 중요한 부분으로 다가 왔었다고나 할까요. 웹2.0은 이미 우리의 삶에 발을 들여 놓았습니다. 인터넷 뱅킹부터 하여 TV 도 보고, 대학 원서도 넣고, 세금도 내고 말이죠. 하지만 그만큼 유저도 다양해 지고, 특히 어른들의 웹에 대한 관심도 상당히 높아 졌습니다. 단순히 이메일을 쓰는데에서 그치지 않고 웹으로 동영상도 보시며 신문도 읽게 되십니다. 물론 누군가는 '과연 소수의 집단을 위해 이정도의 배려를 해야하나?' 라는 질문을 던질지 모르지만, 그것이 바로 웹2.0의 시대에 고려해 볼만한 부분이 될수 있다는 것을 인지하면 좋겠다 라는 것이죠. 언제 어디서 어른들께 즐겁고 재미나고 흥미로운 사이트가 폭팔하여 그들이 웹에 한층 가까워 질지 모릅니다. 우리의 웹 뿐만이 아닌 어른들, 아이들의 웹도 가꾸어 줄수 있다면 그 사이트는 참 멋진 사이트가 되지 않을까요. 더 나아가서 웹의 지식이라 불리우는 블로그 라는곳에 어른들의 귀중하고 수준높은 경험과 가치를 담을수 있다면 얼마나 우리의 웹이 더 발전되고 가치를 갖게 될까요.

* 최근 '어머니와 컴퓨터' 에 관한 글들을 여기저기서 읽으면서 대부분의 분들이 부모님께서 컴퓨터를 배우시면서 정말 기초적인 부분에 대해 질문할때에 첨에는 괜찮았는데 같은 질문을 하시고 쉬운부분을 물으시고 하실때 '귀찮다' 라는 반응을 보이시는거 같더군요. 혹시나 이런 아주머니, 아저씨들께서 모여서 쉽게쉽게 질문도 하시고, 토론도 하시고 기초적인 부분에 대한 동영상 강좌나 음성 강좌등이 있는 (물론 즐거운 채팅의 기능도