네비바 UI/UX, 얼마나 생각하고 디자인하세요?
내비바? 네비바?
네비바. 얘가 절대 그냥 툭 치면 탁 하고 튀어나오는 게 아니라는 것... 포폴 웹사이트의 초 심플한 네비바가 어떻게 탄생(..) 하게 되었는지에 대한 이야기를, 기억이 마모되기 전에 빠르게 적어놓고 싶어서 브런치를 켰습니다.
투명 배경이므로 파란색 아웃라인을 적용했습니다(데스크탑과 모바일이 같습니다)
제 포트폴리오 웹사이트에 들어가는 네비바는 심플하기 짝이 없습니다(..) 포트폴리오 홈페이지를 구성한다고 가정했을 때, 기본적으로 들어가는 구성 요소들이 있을 수 있겠습니다. 뭐 예를 들면
Logo 홈(페이지)
About 자기소개
Work 포트폴리오
Contact 연락처
정도가 가장 기본적일 것이고, 모바일로 이동하게 되면
Logo 홈(페이지)
= 버거 메뉴 -----> 오픈할 경우 가려진 세 개의 메뉴가 주루룩 나오는 구성
일 텐데요. 분명 그러한데... 아니 어쩌다 이렇게 심플한 네비바가 나왔을까요? 험험
제가 네비바를 구성하기 전에 고려했던 요소들은 아래와 같습니다.
1) 이 네비바에서 내가 유저들에게 기대하는 액션
2) 어디에, 얼만큼 노출이 되고 그 부분에서 네비바에 기대하는 역할
조금 더 풀어 보자면:
1) 이 네비바에서 내가 유저들에게 기대하는 액션은 무엇인지
→ 모든 유저들이 최소 한번은 네비바를 클릭한다면, 그 액션은 무엇일까요?
2) 어디에, 얼만큼 노출이 되고 그 부분에서 네비바에 기대하는 역할은 무엇인지
→ 메인페이지에만? 상세페이지에도 마찬가지로? 모든 페이지에? 같은 네비바, 다른 네비바?
모든 유저들이 최소 한번은 네비바를 클릭한다면, 그 액션은 무엇일까요?
Logo 홈(페이지)
About 자기소개
Work 포트폴리오
Contact 연락처
위의 네 가지 요소 중 중요도를 체크한다면 단연코 Logo 와 Work 의 승입니다. 나머지는 사실 뭐... 그 사람이 궁금하기도 하겠고, 어디로 연락을 하면 좋을지에 대해서도 궁금해하기는 하겠지만, 그 요소만으로 페이지를 따로 구성하기에는 클릭이 아깝지 않은가. 라는 생각을 했습니다.
Logo 홈(페이지)
About 자기소개
Work 포트폴리오
Contact 연락처
Work 이야 이 페이지의 메인 요소이자 없어서는 안 될 콘텐츠를 담은 페이지이니, 이 웹사이트를 만드는 디자이너가 유저에게 가장 우선적으로 보여주고자 하는 부분이죠.
(실제로 유저들이 그 페이지를 가장 궁금해할지는 모르는 일입니다만(..) 뭐 쿠팡에 접속했다면 쇼핑하러 갔겠거니 생각하고요.. 해가 어느쪽에서 뜨는지와 같은 건 구지 유저테스트 같은 걸 진행하고 검증하지 않아도 된다고 생각합니다 네...)
Logo 홈은, 네비게이션 자체의 역할로만 보았을 때에는 그저 최상단의 홈페이지로 돌아가게끔 만들어 주는 버튼입니다. 실제로 그 홈페이지에 어떤 구성요소가 있던지간에, 유저는 어느 정도 깊숙한 단계에 진입을 했을 수 있고, in-app browser 의 뒤로가기 버튼을 누를 수도 있고, swipe 액션으로 뒤로 갈 수 있음에도 불구하고 홈을 눌렀다는 것은 다 필요없고 최상단으로 날 되돌려보내 달라는 요청사항이죠. (혹은 그냥 페이지가 버벅여서 리프레시를 하고 싶을 수도 있고..^^;)
그러한 이유로 Logo 는 철저히 네비게이션을 위한 버튼 이고, Work 은 포트폴리오 웹사이트에서 필수로 제공해야 하는 콘텐츠입니다.
그럼 여기에서 또 궁금해지죠. 이게 최소한으로 줄일 수 있는 한계일까요?
Logo 홈(페이지)
Work 포트폴리오
↓
Logo 홈 (Work 페이지)
홈(페이지) 의 구성은 어떻게 이루어질까요? 포트폴리오 웹사이트에 들어오시는 분들이 가장 먼저 기대하는 것은 무엇일까요? 내 얼굴 사진?(^^;)은 아닐 것이고 네 포트폴리오가 아닐까 싶습니다.... 그렇다면 한 번의 클릭을 친절하게 줄여서...네.. 포트폴리오 페이지를 홈페이지로 만들어 버리면 되지 않은가 싶습니다. 물론 About 의 구성요소를 간단하게 줄여서, 난 누구고 뭘 합니다. 이 정도의 간단한 소개 섹션을 먼저 배치해도 되겠죠?
메인페이지에만? 상세페이지에도 마찬가지로? 모든 페이지에? 같은 네비바, 다른 네비바? ㅠㅠ?
상세페이지에는 홈페이지와는 다른 네비바가 들어갈 수 있습니다. 예를 들면 홈버튼 부분에 뒤로가기 버튼을 배치한다던지, 그렇지 않다면 화면 상단 고정이었던 네비바가 스크롤을 내리면 보이지 않게 된다던지, 네비바가 없어질 수도 있겠죠. 상세페이지에서 네비바에 요구되는 사항이 무엇인가에 따라 달라질 수 있습니다.
깊이가 깊지 않은 (저의) 포트폴리오 웹사이트의 경우에는 필수 네비게이션(e.g. 뒤로가기... 홈페이지 가기..) 외에 사실 요구되는 사항은 크게 없습니다. 현재 Work 이 Logo(홈) 에 위치해 있으므로 클릭 한 번으로 상세페이지로 이동하고, 뒤로가기 혹은 홈페이지 버튼으로 홈으로 이동이 가능합니다. 하지만 제가 상세페이지에 들어와 있는 유저들에게 보여주고 싶은 것은 명확하게 존재합니다.
누구의 웹사이트에 들어와 있는지 (그래서 다른 로고 없이 그냥 Hyuna 입니다) 그리고 유저가 그 어느 페이지에 있던, 마음이 동했을 때, 늘 화면에 위치해 있어, 클릭할 수 있는 그것
제 클래스명을 잘 보시면..쿨럭그것은 바로... '이력서'입니다(두둥)
포트폴리오 웹사이트에서 가장 중요한 것은 물론 포트폴리오 그 자체이겠지만, 포트폴리오와 늘 밀접하게 연결되어 있는 구성 요소는 바로 이력서이고요.
이력서와 포트폴리오 링크를 함께 보았다 → 포트폴리오 웹사이트를 보았다 → 끝
가 될 수도 있지만,
포트폴리오 웹사이트를 보았다 → 이력서를 찾는다 → 찾지 못한다 (세컨더리 옵션들이 있겠죠. 연락처를 찾아서 연락한다, 링크드인을 찾아서 연락한다 등)
의 순서가 될 수도 있겠다는 생각을 했고, 두 가지의 시나리오를 만족할 수 있는 방법은 바로 CV를 홈페이지에서도 찾을 수 있게끔 구성하는 것이었습니다.
그렇다면 이 CV는, 어디에 위치하는 것이 가장 좋을까요?
늘 화면에 위치해 있어, 언제든지 클릭할 수 있는 바로 그 곳
홈페이지이건, 상세페이지이건, 글을 다 읽었던 이제 시작하던 상관없이 화면 상단에 늘 고정되어 있는 네비바입니다. CV라고 표기하지 않고 로켓 이모지를 사용한 이유는 쿠팡에 들어가려고 하는 게 절대 아니고 무엇인지를 예측할 수 없도록 만듦으로서, 약간의 흥미를 유발하기 위함입니다. 네비바에 위치했다면 뭔가 굉장히 중요한 요소일 텐데 대체 뭘까. 클릭하면 짠 pdf 파일로 이동하는 마..마법..ㅎ..
그렇게 저의 홈페이지의 네비바는 불필요한 요소를 모두 제거함과 동시에 필요한 요소를 모두 충족시키는 가장 완벽한 (to date..) 네비바로 자리잡았습니다. 점심 먹어야징~~
이 글은 2편에서 이어집니다.
https://brunch.co.kr/@leeiseverywhere/70
