본문 바로가기

전체 글17

브레드 크럼 | Bread Crumbs 들어가며 이번 아티클에서 다룰 주제는 바로 브레드 크럼 입니다! 유래가 귀여워서 처음 이름을 알았을 때 기분이 좋았던 UI입니다. 브레드 크럼은 존재를 의식하지 않았을 경우 '이런게 있었나?'라고 생각이 들 만큼 화면상에서 차지하는 비중이 큰 UI는 아니지만, 사이트의 계층과 유저의 탐색 경로를 한 번에 보여주는 의미있는 UI라고 할 수 있습니다! 목차 🍞 브레드 크럼의 정의 🥐 브레드 크럼의 역할 🥨 브레드 크럼을 쓰지 말아야 할 경우 🥖 브레드 크럼의 종류 🍞 브레드 크럼의 구성방법 브레드 크럼의 정의 헨젤과 그레텔 이야기에서 헨젤과 그레텔은 집으로 돌아오는 길을 알기 위해서 빵가루를 하나씩 떨어뜨렸던 것을 기억하시나요? 브레드 크럼(Bread Crumbs)은 영어로 빵가루 라는 뜻으로, 헨젤과 그레.. 2023. 8. 2.
FNB(=Footer)에 들어가야 할 정보 들어가며 며칠 전 웹사이트 네비게이션을 정리하면서 간단하게 FNB(푸터)에 대해서 다뤘습니다. 그런데 생각해보니 푸터에 들어갈 내용이 사이트 특성마다 다르기 때문에 처음 푸터에 들어갈 정보를 갈무리 할 때, 조금 헤맸던 기억이 떠올랐습니다. 너무 당연하다보니 막상 콘텐츠를 구성할 때 오히려 생각이 안나는 경우라고 해야할까요? 🙉 그래서 이번 아티클에서는 푸터에 들어가야 할 콘텐츠에 대해 정리해 보려고 합니다. 목차 🐾 푸터의 정의 🐾 푸터의 구성요소 🐾 푸터의 정의 푸터(FNB, Footer Navigation Bar)는 웹사이트나 앱의 하단에 위치하여 모든 페이지에서 동일한 정보를 제공하는 공간을 말합니다. 이 공간은 사용자가 찾기 어려운 콘텐츠를 마지막으로 제공하는 역할을 하며, 패밀리 사이트나 소셜.. 2023. 8. 1.
웹사이트 Navigation Bar의 종류 (GNB, SNB, LNB, FNB) 들어가며 이번 아티클은 모바일보다는 웹에서 많이 사용하는 UI로, 흔히 메뉴바 혹은 상단바라고 불리는 UI에 대한 설명이다. 개인적으로 보통 웹과 앱 형식 모두를 제공하는 프로덕트일 경우, 웹을 먼저 작업하는 편인데, 아무래도 웹은 모바일이 주는 작은 화면이 주는 압박감이 덜하다 보니 주요 기능과 이에 맞는 UX를 고려하기 수월하기 때문이다. 조금 더 화면을 자유롭게 사용할 수 있는 웹에서 기능의 중요도 및 정보 계층을 정리한 다음에 모바일로 넘어가는 것이 작업 효율이 좋았던 것 같다. 😉 처음 입사해서 웹 기획할 때에도 레퍼런스 서치 단어가 막막했던 기억이 난다. 다행히 당시에 GNB라는 단어는 알아서 이걸 키워드로 꼬리에 꼬리를 물어 레퍼런스를 찾긴 했으나, 역시 서치에 오랜 시간이 걸렸었던 기억이 .. 2023. 7. 31.
네비게이션 드로어 | Navigation Drawer 들어가며 햄버거 버튼과 메뉴 아이콘을 사용하면서 전반적인 메뉴 UI에 대한 정리도 해보면 좋겠다는 생각이 들었다. 단순히 메뉴/메뉴창이라고 불리는 Navigation Drawer는 앱과 웹이라는 플랫폼을 가리지 않고 널리 쓰이고 있는 UI인데, 오늘 아티클을 통해 개념과 어떻게 구성되어 있는지 정리해 보고자 한다. 목차 🧭 Navigation Drawer? 🧭 Navigation Drawer는 어떤 상황에서 선택해야 할까? 🧭 Navigation Drawer 인터렉션 🧭 Navigation Drawer 사용 시 체크해야할 점 🧭 Navigation Drawer? Navigation Drawer은 소위 '메뉴창'이라고 불리는 UI로, 앱이나 웹 사이트에서 주요 기능이나 정보를 리스트 형식으로 보여주는 형태.. 2023. 7. 26.
햄버거 버튼 외 다양한 메뉴 아이콘 목차 🍔 햄버거 버튼과 친구들 🍔 햄버거 메뉴 아이콘 | Hamburger Menu Icon 🍔 미트볼 메뉴 아이콘 | Meatball Menu Icon 🍔 케밥 메뉴 아이콘 | Kebab Menu Icon 🍔 되너 메뉴 아이콘 | Döner Menu Icon 🍔 벤또 메뉴 아이콘 / 초콜렛 메뉴 아이콘 | Bento Menu Icon / Chocolate Menu Icon 같이 보면 좋은 아티클 🔗 네비게이션 드로어 | Navigation Drawer 🍔 햄버거 버튼과 친구들 햄버거 버튼에서 눈치 챘을 지도 모르겠지만, 오늘 포스팅할 주제는 메뉴 UI와 관련한 아이콘이다. 흔히 우리가 '땡땡땡 아이콘'이나 '작대기 3개' 등 추상적인 별명으로 부르는 아이콘들이다. 메뉴 UI 역할에 대해 잠시 짚고 가자.. 2023. 7. 25.