버번홀릭 Web2009. 1. 13. 16:44

전 세계에서 서비스되는 웹 사이트의 수는 얼마나 될까요?
정확한 정량적 수치를 알 수 없지만 대략 수십억개 이상이며 그 중에서도 대한민국에서 서비스되는 사이트만
수억개가 된다고 합니다. 여러분은 이처럼 수 많은 웹 사이트 중 하나 또는 그 이상을 서비스 받고있는 것입니다.

그렇다면 가상의 공간상에서 서비스되는 웹 서비스를 여러분은 어떤 방법으로 사용하고 계신가요?
어떻게 원하는 컨텐츠를 찾고, 어떻게 이동을 하시나요?

우리가 사용하는 웹 서비스에서 이동, 탐색을 위한 도구를 제공하고 있기 때문에 가능한 것입니다.
검색, 입력, 출력, 이동, 삭제, 등록 따위의 도구 입니다. 그 중에서도 가장 원초적이며 어느 웹 사이트를 막론하고
반드시 있어야하는 이동 기능은 수 많은 웹 사이트를 쉽게 이용할 수 있도록 해주는 고마운 도구 입니다.
우리가 흔히 말하는 '네비게이션'이 바로 그 이동의 도구입니다.

항법 [航法, navigation]
항공기 또는 선박을 어느 한 지점으로부터 일정의 다른 지점으로 소정의 시간에 도달할 수 있게 유도하는 방법.

본래 네비게이션의 의미는 항법이라는 단어로 비행기나 선박 등 광할한 지역을 탐색해 원하는 목적지로 쉽게 찾아갈 수 있도록
도와주는 기계장치를 뜻 하는 말입니다. 항공기와 선박이 이동하는 현실의 공간보다 무한한 공간을 갖고있는 가상 공간에서도
네비게이션이 사용되며 의미도 다르지 않습니다. 그렇기 때문에 웹 서핑을 위해서는 반드시 필요한 도구입니다.

그렇다면 여러분은 얼마나 많은 네비게이션을 보셨고 또 어떤 네비게이션을 선호하시나요?

웹 사이트를 제공하는 사업자가 각기 다르고 서비스를 만드는 사람이 모두 다른 것처럼 네비게이션도 서비스의 특징에 따라
모두 다르게 제공되고 있지만 큰 줄기는 몇가지로 나눌 수 있습니다.
아래에 대표적인 네비게이션 형태를 보여드릴테니 선호하는 네비게이션을 골라보세요.


사용자 삽입 이미지
사용자 삽입 이미지

1. 단일 버튼 형태의 퀵링크 네비게이션

웹 사이트가 만들어지기 시작하면서 제공된 가장 원초적인 네비게이션입니다.
원초적이지만 가장 직관적이고 심플하고 공간도 적게 사용하고 있다는 장정이 있지만 노출되어있는
버튼 외에는 어떤 서비스가 제공되고 있는지 모른다는 단점도 있습니다.



사용자 삽입 이미지

2. 2Depth 가로 배치형 네비게이션
웹 서비스가 발전되면서 네비게이션의 기능도 발전해 만들어진 네비게이션으로
특히 대한민국에서 서비스되는 웹 사이트들은 대부분 사용했을 정도로 보편화된 네비게이션의 형태입니다.
퀵링크 형태보다는 어떤 서비스를 제공하고 있는지 조금 더 자세히 알 수 있다는 장점이 있지만
2Depth를 선택하기 위해서는 마우스를 이동해 원하는 곳을 클릭해야한다는 단점이 있습니다.
특히 마우스 컨트롤이 익숙하지 않은 사용자에겐 쉽지 않은 일이죠.



사용자 삽입 이미지

3. 2Depth 세로 배치형 네비게이션
위의 가로형 네비게이션을 보완하는 형태로 만들어진 네비게이션입니다.
마우스를 상하좌우 이동이 아닌 상하이동만으로도 선택할 수 있도록 설계된 네비게이션이죠.



사용자 삽입 이미지

4. 전체 메뉴가 펼쳐지는 가로 풀 다운 네비게이션
하나의 메뉴에서 한가지의 2Depth가 펼쳐지는 점과 가로형의 경우 선택하기가 쉽지 않은 점을
개선해 설계된 네비게이션입니다. 어느 지점을 클릭 또는 롤오버하더라도 모든 메뉴가 펼쳐져
전체 서비스를 탐색하고 쉽게 이동할 수있는 장점을 갖고있지만 공간을 많이 차지한다는 단점이 있습니다.
최근들어 많은 웹 사이트들이 이 네비게이션을 사용하고 있는 추세입니다.



사용자 삽입 이미지

5. 외국에선 많이 사용되는 탭 네비게이션
한국에서는 많이 사용하지 않는 네비게이션이지만 외국에선 네비게이션을 간소화한 탭 형태의
네비게이션을 많이 사용하고 있습니다. 외국에선 탭 인터페이스가 많이 사용되고 있어 선호하는 경향이
있는 것 같습니다. (외국 사이트는 플래시를 지양해 화려한 네비게이션이 별로 없죠.)



사용자 삽입 이미지

6. 종합 쇼핑몰에서 많이 사용되는 세로 풀 다운 네비게이션
위의 가로 풀 다운 네비게이션과 유사하지만 종합 쇼핑몰인 만큰 수많은 2Depth를 노출해야 하는 점과
상품의 노출이 우선이 되어야하는 하는 점이 맞물려 변형되어 설계된 네비게이션입니다.
지마켓이나 옥션은 가로 풀다운 네비게이션을 사용하고 있네요.



사용자 삽입 이미지
사용자 삽입 이미지

7. 2번과 4번이 동시에 지원되는 복합 네비게이션
2번의 장점과 4번의 장점을 지원하기 위해 설계된 네비게이션입니다.
유저의 취향에 맞게 원하는 네비게이션을 지원하고 있습니다.



사용자 삽입 이미지

8. 그 밖에 네비게이션
현재 대한민국에서 서비스되는 WOW의 네비게이션 입니다.
롤 오버를 하게되면 2Depth가 펼쳐지면서 해당 서비스를 간략하게 보여주고 있는 형태입니다.
어떤 서비스인지 조금 더 구체적으로 보여줄 수 있는 장점이 있지만
공간을 많이 차지한다는 단점도 갖고 있습니다.


이 밖에도 수 많은 종류의 네비게이션이 제공되지만 위의 7가지 (8번 제외)의 네비게이션이
거의 대부분일 것 입니다. 여러분은 위의 7가지 중 어떤 네비게이션의 이용이 편한가요?
어떤 네비게이션을 선호하시나요?

Posted by 버번홀릭

댓글을 달아 주세요

버번홀릭 Web2007. 3. 8. 12:55

사용자 삽입 이미지


프로젝트를 진행하다보면 디자이너, 기획자 간의 디자인, UI, UX에 대한 충돌이 일어나곤 한다.

(콘텐츠가 중요하다는 건 너무나 당연하기 때문에 충돌이 일어나지는 않는다.)

디자인이 먼저냐, UI가 먼저냐, UX가 먼저냐.

디자이너 입장에선 디자이너가 우선...

기획자 입장에선 User Interface, User Experience가...

또는 그 반대의 경우도 생길 수 있고

서로 협의를 통해 합일점을 찾다보면 짬뽕되다보니 이도저도 아닌 결과물이 나오기도 하고

뭔가 특이하고, 새롭고 신선한 디자인을 하다보면 UI, UX가 고려되지 않은 디자인이 나오는

경우도 있고, UI, UX만 내세우다보면 디자인이 평범해지고

디자인이 먼저일까? UI,UX가 먼저일까?

지속적인 방문을 하는 사용자는 콘텐츠를 제외하면 디자인과 UI,UX 중 어떤걸 중시할까?


P


Posted by 버번홀릭

댓글을 달아 주세요

  1. 지나가는 과객의 생각은....
    안좋은 UI는 좋은 디자인이라 볼 수 없다고 생각합니다.

    2007.03.08 13:04 신고 [ ADDR : EDIT/ DEL : REPLY ]
    • 요즘 번져나는 소호 쇼핑몰들을 보면
      UI는 완전히 무시된 디자인이 많이 생겨나더군요.
      그런 현상을 보면서 다시 한번 생각하게 됬습니다. ^^

      2007.03.08 17:13 신고 [ ADDR : EDIT/ DEL ]
  2. UI, UX도 디자인이라 생각합니다.
    예쁘고 참신하게 만드는 것만이 디자인이다 라고 하는 사람들에겐 할말이 없지요..

    2007.03.08 14:43 [ ADDR : EDIT/ DEL : REPLY ]
  3. 국내엔 UI 기획자라고 하지만
    외국에서는 UI 디자이너라고 하지요.

    기본적인 사항임에도 불구하고
    요즘들어 다시 생각해보게 되네요..^^

    2007.03.08 14:47 신고 [ ADDR : EDIT/ DEL : REPLY ]
  4. UI,UX도 디자인 영역에도 역시 속한다고 봐야지.
    개인적으로 UX는 모든걸 포괄하는 좀 더 넓은 개념이라고 생각함.
    UI를 디자인과 동일선상의 별개로 보는건 아니라고 봄

    2007.03.08 15:46 신고 [ ADDR : EDIT/ DEL : REPLY ]
    • 언젠가 한번 의문을 띄어본적이 있는 내용인데
      유저에 의해 Interface가 형성되는건지
      새롭게 만들어진 Interface에 유저가 따르게 되는건지
      에 대한 답이 있다면 디자인과 UI,UX의 체계가
      정확히 잡히지 않을까 생각해요.

      단지, 그런 의문에 정확한 해답을 얻을 수 없을 뿐이었죠

      2007.03.08 17:33 신고 [ ADDR : EDIT/ DEL ]
  5. UI와 UX의 용어설명을 곁들여 준다면, 글이 더 빛을 발 할것 같아 보입니다.
    굳이 어느 쪽을 중시하기 보다는 동일선상에서 하모니를 이루도록 협의하는것이 가장 현명한 방법이라고 생각이 됩니다.

    2007.03.08 16:27 신고 [ ADDR : EDIT/ DEL : REPLY ]
    • 이런 고민을 하게 된 이유도 '하모니'를 위해서죠.
      궁극적으로는 하모니에서 그치는게 아닌 좋은 음악이 되는게 고민의 궁극적인 목적이구요...^^

      2007.03.08 17:28 신고 [ ADDR : EDIT/ DEL ]
  6. 윗분들하고 반대 생각인데 화면 디자인이 UX의 하위 개념아닌가요? 색을 노랗게 하느냐 빨갛게 하느냐도 사용자 체감의 일부인데요.

    2007.03.08 17:18 [ ADDR : EDIT/ DEL : REPLY ]
    • 색 뿐이 아니라 웹 사이트의 모든 구조적 위치도
      유저의 경험에 영향을 준다고 생각하기에
      UI,UX,디자인의 우선순위가 어딘지 정확히 모르겠네요.^^

      2007.03.08 17:35 신고 [ ADDR : EDIT/ DEL ]
  7. 블랑

    최근 제가 경험하고 있는 고민입니다.
    전 기획자구요.. 사실 디자인은 크게 신경쓰지 않습니다.
    (기획하기 전 웹디자인 4년 했습니다.)
    국내 상위 사이트를 보면 비주얼이 화려한 UI를 쓰는 곳은 많지 않습니다. 물론 최소한의 깔끔함은 갖춰야지요.

    고민이라하면 UI냐, UX냐인데
    이걸 같이 놓고 보면 상위 하위 등을 따질 수도 있지만
    사실 기획자 입장에선 무척이나 민감한 차이입니다.

    UI중심적 사고는
    "이렇게 이렇게 하는게 예전보다 훨씬 편하고
    보기도 좋고 정보전달력이 빠르다."

    UX중심적 사고는
    "하지만 사용자는 새로운 인터페이스에 거부감을
    느끼고 복잡하다 느낄 수도 있다."

    고정관념과의 싸움이지요.
    뭐 아무튼 그렇다는 거구요, 요즘 머리가 아픕니다 ㅎㅎ

    2007.03.08 18:35 [ ADDR : EDIT/ DEL : REPLY ]
  8. 블랑

    굳이 제가 써놓고 너무 성의가 없어보여서 덧붙입니다. ㅎㅎ
    제 생각엔 UI>UX>비주얼(디자인보다는 이 단어가 어울리는것 같군요.)

    아주 당연한 이야기이지만 3가지 모두 중요합니다.

    하지만 비주얼을 가장 중요하게 생각하다보면
    사용자들을 불편하게 만들 가능성이 그만큼 높다는 거구요,

    UX를 중요하게 생각한다는 것은 마인드가 매우 현실적이라는 겁니다.
    하지만 더 편리하고 더 좋은 것을 창조해야하는 기획자라면
    판에 박은듯이 구조가 똑같은 사이트들을 로고만 바꿔서 만들어선 안되지요.

    그래서 UI가 가장 중요한 듯합니다.
    더 좋은 것, 아무도 예상 못했지만 편리한 것,
    그런 걸 사용자들에게 제공해줘야하는 거죠.

    다만 반발만 앞서가는 정도의 시도가 적절하다고 생각되는군요.
    세계제일의 편리성을 고려한 UI라도 사용자에게
    익숙치 않으면 무용지물이라는 사실.
    진보에 초점을 두고 적당히 MIX하는것이 상책인 듯합니다.

    2007.03.08 18:45 [ ADDR : EDIT/ DEL : REPLY ]
  9. 좋은 말씀 감사합니다. ^^
    위의 마루님이 말씀하신것 처럼 '하모니'라는게
    필요합니다. 하지만 하모니를 좋은 음악으로
    승화시켜야 한다는 입장에서 이런 고민의 생긴거죠.

    참 어려운 문제죠. 어찌보면 사람과 사람의 문제구요 ^^

    2007.03.08 18:52 신고 [ ADDR : EDIT/ DEL : REPLY ]
  10. 전 우선적으로 UI를 먼저 고민합니다. UI와UX속에 디자인을 녹이는 작업에 항상 중점을 두는 편입니다. 하지만, 사람들이 늘 말을 안듣죠! >_<

    2007.03.08 20:45 신고 [ ADDR : EDIT/ DEL : REPLY ]
  11. 어떤 디자인이든 UI나 UX가 바로서지 않으면 단발성에 그치기 마련이죠. 어렵네요 디자인-_ㅜ

    2007.03.10 04:13 [ ADDR : EDIT/ DEL : REPLY ]