NARADESIGN

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


사용자 경험의 조삼모사.

본문 건너 뛰기

‘조삼모사[朝三暮四]’라는 말이 있습니다. 사전에서는 이를 "눈앞에 보이는 차이만 알고 결과가 같은 것을 모르는 것을 비유 하거나 남을 농락하여 자기의 사기나 협잡술 속에 빠뜨리는 행위를 이르는 말."이라고 해설하고 있습니다.

춘추전국시대에 송나라의 저공(狙公)이란 사람이 원숭이를 많이 기르고 있었는데 먹이가 부족하게 되자 저공은 원숭이들에게 말하기를 "앞으로 너희들에게 주는 도토리를 아침에 3개, 저녁에 4개로 제한하겠다"고 말하자 원숭이들은 화를 내며 아침에 3개를 먹고는 배가 고파 못견딘다고 하였다. 그러자 저공은 "그렇다면 아침에 4개를 주고 저녁에 3개를 주겠다"고 하자 그들은 좋아하였다는 일화가 있다.

두산백과사전

저는 오늘 이 사건을 조금 다르게 해석해 보고자 합니다. 주인은 원숭이를 농락하지 않았으며 원숭이가 결코 멍청하지 않다는 주장 입니다. 주인과 원숭이가 협상을 벌이는 과정에서 주인은 한정된 자원을 가지고 있었기 때문에 도토리의 양을 어쩔 수 없이 줄여야만 했고 원숭이는 자신들의 요구를 관철 시키는데 성공한 잘 된 협상이라는 겁니다. 원숭이 입장에서 생각컨데 비록 도토리의 양은 줄었지만 활동량이 적은 저녁에는 조금 덜 먹어도 되고 활동량이 많은 오전에 4개를 취한 것은 매우 적절한 판단이었으며 만약 주인에게 화를 내지 않았다면 주인은 다음달에 도토리 배급량을 더 줄이려고 했을지도 모를 일입니다. 오늘날에 이르러 ‘조삼모사’란 양쪽 모두가 만족스러운 협상을 했다는 뜻으로 다시 해석할 수 도 있다고 생각합니다.

입력 양식 조삼모사

여기 똑같은 양식의 글쓰기 인터페이스가 준비되어 있습니다. 좌측의 형태는 댓글을 작성하기 이전에 필수 항목인 이름과 이메일 주소를 먼저 작성하도록 유도하는 패턴이며 우측의 형태는 본문을 먼저 작성한 다음 필수 항목을 나중에 작성하도록 개선된 패턴 입니다.

글쓰기 양식 예제 : 이름과 이메일 주소를 작성한 다음 본문을 작성하는 형태    글쓰기 양식 예제 : 본문을 작성한 다음 이름과 이메일 주소를 작성하는 형태

양쪽 모두 댓글을 작성하기 위하여 반드시 입력해야 하는 항목은 ‘이름, 이메일, 본문’으로써 같습니다. 하지만 저는 작년 가을 무렵부터 여러분들이 댓글을 작성하실 때 ‘이름과 이메일 주소를 나중에 작성하도록’ 술수를 부렸습니다. 왜 그랬을까요?

제 글을 보시고 소중한 댓글 주시는 분들을 농락하려고 한 것이 아닙니다. 어차피 3개의 항목을 반드시 작성해야 한다면 되도록 글을 작성하는 독자의 생각의 흐름을 깨지 않으면서 댓글 쓰기를 쉽게 느낄 수 있도록 배려한 것입니다.

"발표 잘 들었습니다. 앞으로도 좋은 자료 많이 부탁드려요." 라는 말씀을 하고 싶으신 분들께 제가 사람인지 로봇인지 확인해야 하니 "이름과 이메일 주소를 먼저 적어주시죠" 라고 말한다면 기분 나쁘실껍니다. 저는 일단 여러분들의 "머리속에 있는 글을 재빠르게 타이핑 해서 옮겨 놓는 것"이 가장 중요하다고 생각했고 그점 때문에 본문 입력양식을 먼저 등장하도록 배치 했습니다. 그다지 편한 느낌을 받지 못했다고 생각하실런지는 모르겠지만 스스로 생각하건데 저 양식의 변화는 제 블로그에 댓글을 쓸까 말까 망설이던 독자들을 더욱 쉽게 제 블로그에 다가오도록 만들었다고 생각합니다. 여러분들이 인지 했는지 못했는지의 여부와 관계 없이 말입니다.

로그인 조삼모사

네이버의 초기화면 2009년 1월부터 로그인 양식이 우측으로 옮겨졌다얼마전 네이버 블로그와 네이버 초기화면이 개편 되면서 ‘로그인’창의 위치가 좌측에서 우측으로 변경되는 큰 변화가 있었습니다. 로그인 양식의 좌우 배치에 관한 사용성이 어떤지의 여부를 논하기에 앞서 사용자들은 익숙하던 구조가 변경되었기 때문에 적지 않은 불만을 제기했던 것으로 압니다.

제가 생각하기에 사용성이 나쁜 인터페이스라도 사람이 어떤 패턴에 익숙해져 있게 되면 그 패턴을 편하다고 생각하게 되는 경향이 있는것 같습니다. 따라서 이론적 기틀로 사용성을 아무리 좋게 개선하더라도 불만이 나올 수 있는 것입니다. 그렇다면 다시 본론으로 돌아와서 로그인 창은 어느쪽에 있어야 하는지를 생각하건데 좌측에서 우측 방향으로 글을 쓰는 문화권에서는 당연히 오른쪽에 있어야 한다고 생각합니다.

왜냐하면 네이버 초기화면의 콘텐츠는 모두 로그인이 필요 없이 가볍게 읽을 수 있는 콘텐츠들 인데요. 초기화면을 이용하도록 하기 위하여 로그인을 하도록 할 아무런 이유가 없고 좌측부터 우측으로 글을 읽어나가는 문화권에서 웹 페이지의 좌측 상단은 가장 먼저 그리고 오랜시간 시선이 머무는 곳으로써 매우 비싼 댓가를 지불해야 하는 영역이기 때문입니다. 로그인 양식은 네이버를 이용하는데 중요한 요소이긴 하지만 초기화면의 다른 콘텐츠에 비하여 비싸다고 생각하지 않습니다.

아마도 오래 전에는 되도록 네이버에 로그인 하도록 유도하는 것이 중요하다고 판단 했을지 모르나 최근에 와서는 그것보다 사용자가 핵심 콘텐츠를 이용하는데 방해를 받지 않도록 고려했기 때문에 이런 결정이 내려진 것이 아닐까 추측해 봅니다. 제가 비록 NHN 직원이긴 하나 로그인 창의 위치가 바뀐 것에 대하여 그 근거를 잘 알지는 못하므로 이 의견은 회사의 의견과 무관한 개인적인 의견 입니다.

덧붙여 모바일 브라우징 장치에서 웹 페이지의 CSS를 일부 걷어내는 형식으로 페이지를 탐색하는 경우에도 이 순서가 적절하다고 생각합니다. 저 금싸라기 땅의 배너야 이윤창출을 위해 어쩔 수 없다손 치더라도 로그인 양식이 초기화면 콘텐츠보다 먼저 등장하는 것은 아무래도 아니라고 생각 됩니다.

로그인 배치의 변화에 대하여 혹자는 배너의 크기와 위치를 조정함으로써 이윤을 극대화 하기 위한 조치라고 평가할 수 있겠으나 사용자 경험을 향상시키기 위한 전략의 일환으로써도 해석할 수 있으며 그 두 가지 관점이 적절하게 합의점을 찾아서 지금에 이르게 된 것은 아닐까 조심스레 추측해 봅니다.

분류: 웹 기획,웹 접근성 | 2009년 2월 10일, 0:42 | 정찬명 | 댓글: 26개 |
트랙백URI - http://naradesign.net/wp/2009/02/10/612/trackback/

26개의 댓글이 있습니다.

  1. 정찬명의 생각…

    사용자 경험의 조삼모사. 오늘에 이르러 조삼모사는 잘 된 협상을 뜻하는 말로 재 해석 해야 하지 않을까요?…

  2. 사용성? 아니면??…

    음….지금까지 네이버 로그인 우측으로 이동관련 논란을 일순간(?)에 잠재울수 있는 글이군요~~ 네이버가 개편이 되면서 로그인영역이 우측으로 이동함에 따라 그에 따른 논란(?)의 글을 많이…

  3. miriya 댓글:

    최고입니다. 조삼모사라는 말로 좀 쉽게 들릴 수 있지만 결코 무시당할만큼은 아니죠.
    네이버 로그인창 / 배너 위치도 동의합니다.

    … 근데 내용 입력 후 탭키를 누르니 글 등록으로 바로 이동하네요 ㅠㅠ
    이름 먼저 입력할 수 있게 바꿔줘야한다 봅니다. 위치만 바꾸셨나보네요 ㅎㅎ

  4. Gloridea 댓글:

    덧글 입력 영역이 먼저 나오는 거, 간단하지만 의미있는 전환이네요 :-)

  5. 정찬명 댓글:

    역시 miriya님!

    miriya님 아니었다면 이런 중요한 버그를 여전히 모르고 있을 뻔 했습니다. 제가 항상 관리자로 로그인 해서 글을 작성하다 보니 로그인 하지 않은 환경에서 글을 쓰시는 분들께 그런 문제가 있는지 몰랐던 겁니다. 부끄러운 일입니다. ㅡㅡ; 이래서 아는것과 행하는 것이 다르다고 하는가 봅니다.

    다른 사람이었으면 그냥 지나치고 말았을 일을 이렇게 말씀해 주셔서 정말 감사합니다. ^^;
    고쳐 놨습니다.

    PS :
    스킨에 tabindex 속성이 잘못 사용되고 있었습니다. tabindex 속성을 모두 지워서 해결 했습니다.

  6. 정찬명 댓글:

    Gloridea님 우리 앞으로 이거 좀 써먹죠? ㅎㅎ

  7. 나에 댓글:

    이름 / 이메일 / 웹사이트 이 3가지 필드에 대해서
    어떤 순서로 정해야하는 지도 중요할 것 같습니다. 의외로;;

  8. 정찬명 댓글:

    네, 어떤 순서로 두는것이 좋은지 제게도 알려주세요. ^^

  9. 용우 댓글:

    제가 디자인을 잘 몰라서 그런지 후자 방식(글 등록이 위로 있는 방식)이 좀 레이아웃이 불안해 보이긴 하네요.

  10. 정찬명 댓글:

    아마도 형태가 역삼각형에 가깝다 보니 그렇게 보일 수 있는것 같습니다. ^^

  11. 나에 댓글:

    이름은 자기 자신이 누구인지 필명 등을 알려주는 거니까 1)
    이메일은 필수니까 필수가 아닌 웹사이트나 블로그 주소보다는 먼저 2)
    맨 마지막으로 웹사이트… 이 순서가 제가 생각할 때는 가장 최적화된 탭위치인 것 같은데
    찬명님 블로그는 딱 그 UI로 되어 있어서 불편함이 없는 것 같아요. =)

    근데 탭인덱스가 없이도 불편함이 없는데
    있고, 없고의 차이가 이용하는데 차잇점이 있을까요?
    (순서대로 나열했을 경우에)

  12. 정찬명 댓글:

    제 블로그의 경우 가장 먼저 탭이 머물러야 하는 곳은 아무래도 검색창이라고 생각 됩니다.

    CSS를 제거해 보시면 헤더 다음에 바로 검색이 나오도록 마크업이 되어 있거든요. 그런데 제가 했던 실수는 댓글 입력 양식 중 이름 부분에 tabindex=”1″ 이 적용되어 있는 기본스킨의 마크업을 세심하게 확인하지 않아서 사용자 커서의 첫 순서가 댓글의 이름 인풋으로부터 시작되는 문제가 있었습니다. 논리적인 순서 또는 사용자의 기대에 따르면 검색 인풋이 첫 번째 커서를 가져가야 하는게 맞는데 말이죠.

    이렇게 부주의하게 tabindex를 사용하게 되면 제 경우처럼 키보드 접근 순서가 꼬이는 경우가 심심치 않게 발생하기 때문에 사실상 권장하지 않고 있습니다. 제대로만 쓴다면 문제가 없지만 실수가 발생할 확률이 높기 때문에 tabindex는 자제하고 되도록 HTML 마크업의 논리적인 순서에 의존하는 방법이 좋다는 의견 입니다. ^^ 감사합니다.

  13. 의리 댓글:

    그런 생각도 해볼 수 있겠군요.
    그나저나 습관이라는 것은 무서운 것 같습니다. 익숙함이 경제성이나 합리성을 꺾는 경우도 보이니까요.

  14. 정찬명 댓글:

    네, 습관이라는 것이 사용성 이론과 실제 현실 사이의 갭을 형성하고 있는데 이런 현상도 고려 대상에 포함되면 좋겠다는 생각이 듭니다.

  15. 나에 댓글:

    조금 논외의 이야기지만,
    한국 사람들 손이 대부분 오른손잡이인 이유도 그렇고
    왼쪽에서 오른쪽으로 눈이 움직이는 이유도 그렇고 해서
    블로그 스킨 제작시, LNB를 왼쪽이 아닌 오른쪽으로 넣어서 UI를 짰었는데
    사람들이 길들여져 있어서 그런건지, 아니면 과학적 이유가 있어서 그런지는 몰라도
    대부분 사이트들이 LNB 위치를 왼쪽에 넣드라구요.

    개인적으로는 왼쪽에 내용, 오른쪽에 LNB 있는게 편합니다.
    찬명님은 어떻게 생각하시는지? ^^

  16. 정찬명 댓글:

    네, 저도 나에님과 완전히 같은 의견입니다. LNB가 먼저 등장해야 한다고 생각했던 것은 초창기 한국 웹 저작자들의 공통된 착오 아니었나 생각됩니다. 그게 이미 익숙해진 사람들은 LNB가 우측에 등장하면 잘못된 것이라고 생각하죠.

    언젠가 HCI 이론에서 화면의 우측 하단이 마우스가 접근하기 가장 좋기 때문에 메뉴 등의 위치를 고려할 때 참고할 수 있다는 이야기를 본적이 있는데 나중에 다시 찾아봐야겠네요.

  17. iHWAN 댓글:

    이메일, 이름 쓰다가 댓글 안단적 진짜 많았습니다. ^^

    완전 공감갑니다. :)

  18. 정찬명 댓글:

    공감하기 버튼이 없어서 아쉬운 순간이군요. ^^; 감사합니다.

  19. 황규연 댓글:

    회사분이 HCI개론책을 권유(?)해서 사서 잠깐 보다 말았는데 거기서 언급된건지 LNB위치에 대하여 우측이 좋다는게 언뜻 기억나는데 정확하지는 않네요..–
    HCI관련책이 유일하게 한권뿐이라 좀 아쉽긴하네요..실무적인 부분에 대해서 아무래도 미흡한 부분이 많은것 같습니다…

  20. 유명훈 댓글:

    오호 이러한 입력양식에 대해 한번더 생각하고 또 배워가는게 기분이 좋군요~.~

    확실히 본문후에 이름등이 나오는것이 글을 적기위한 부담을 덜어주는군요. 한창 공부해 나가는 중인데 잘 참고하도록 하겠습니다.

  21. 섹시고니 댓글:

    항상 멋진 인사이트 잘 배우고 있습니다.

    댓글을 남기기는 처음인 것 같네요. ㅎ

  22. 정찬명 댓글:

    체계가 없이 단편적인 지식들이라서 부족한점이 많습니다. 비판적인 관점에서도 봐주시고 다른 의견도 언제든지 추가해 주세요. 감사합니다.

  23. www.jumperli.de 댓글:

    CALIFORNIAWINDOWSREBATES

  24. artificial grass turfs

댓글 쓰기

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

필수 아님

필수 아님