메뉴 UI3 브레드 크럼 | Bread Crumbs 들어가며 이번 아티클에서 다룰 주제는 바로 브레드 크럼 입니다! 유래가 귀여워서 처음 이름을 알았을 때 기분이 좋았던 UI입니다. 브레드 크럼은 존재를 의식하지 않았을 경우 '이런게 있었나?'라고 생각이 들 만큼 화면상에서 차지하는 비중이 큰 UI는 아니지만, 사이트의 계층과 유저의 탐색 경로를 한 번에 보여주는 의미있는 UI라고 할 수 있습니다! 목차 🍞 브레드 크럼의 정의 🥐 브레드 크럼의 역할 🥨 브레드 크럼을 쓰지 말아야 할 경우 🥖 브레드 크럼의 종류 🍞 브레드 크럼의 구성방법 브레드 크럼의 정의 헨젤과 그레텔 이야기에서 헨젤과 그레텔은 집으로 돌아오는 길을 알기 위해서 빵가루를 하나씩 떨어뜨렸던 것을 기억하시나요? 브레드 크럼(Bread Crumbs)은 영어로 빵가루 라는 뜻으로, 헨젤과 그레.. 2023. 8. 2. 웹사이트 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. 이전 1 다음
