👉 기획이 좋다 해도 실제 구현을 위한 커뮤니케이션이 안되면 엉뚱한 결과물이 나옵니다. 더 빠르고 더 나은 결과물을 위한 UI 기본 용어가 있어 공유 합니다! 📱 버튼(BTN) 상태 - Ena

👉 기획이 좋다 해도 실제 구현을 위한 커뮤니케이션이 안되면 엉뚱한 결과물이 나옵니다. 더 빠르고 더 나은 결과물을 위한 UI 기본 용어가 있어 공유 합니다! 📱 버튼(BTN) 상태 - Enabled : 상호작용이 가능한 상태일 때 - Disabled : (어떤 이유로든) 동작할 수 없는 비활성 상태일 때 - Hover : 마우스 또는 포인터가 올려진 상태일 때 - Focused : 키보드 또는 음성 등의 입력을 통해 강조된 때 - Pressed : 마우스 또는 포인터로 클릭/터치했을 때 📱 자주 사용하는 UI 요소와 컴포넌트 1. GNB(Global Navigation Bar) - 웹사이트 최상단에 위치하는 메뉴 2. LNB(Local Navigation Bar) - GNB 메뉴를 누르거나 마우스 오버 상태일 때 발생되는 소메뉴 3. Hero Banner(Main Banner) - 웹사이트 메인 상단에 위치하는 대형 배너 4. Drop Down list - 버튼을 클릭하거나 커서를 올렸을 때, 세부 항목들이 펼쳐지고 그중 하나의 항목(값)을 선택할 수 있는 요소 5. 모달, 팝업 - 모달 : 기존 페이지 위에 새로운 레이어를 덮는 기능 - 팝업 : 페이지 위에 새로운 브라우저 페이지를 띄우는 개념 6. 스낵바, 토글, 툴팁 - 스낵바 : 유저가 수행한 작업에 대한 결과를 간단한 텍스트 레이블 형태로 보여줌 - 토글 : 설정 켜기/끄기와 같은 항목에 적용(스위치) - 툴팁 : 특정 화면 요소에 마우스를 가져가면 나타나는 설명 7. Input Field와 유효성 검사 - Input field : 사용자가 텍스트를 입력하고 편집할 수 있는 입력란 - 유효성 검사 : 유저가 입력 필수 요소를 생략했거나, 정해진 양식에 맞춰 입력하지 않을 경우의 오류 상태 8. Checkbox - 여러 개의 목록에서 값을 다중 선택해야 할 경우 자주 사용하는 컴포넌트 9. Accordion - 아코디언은 내용을 펼쳤다가 접을 수 있는 컴포넌트 10. Bread Crumb - 현재의 위치를 시각적 계층 구조로 나타나는 내비게이션 💭Insight 기획할 때 분명 머리 속에는 있는데 표현이 안돼서 거의 편지를 썼던 경험이 있습니다. '모달'이라는 용어를 알지 못해서 '팝업'을 만들고 낑낑대며 이게 아닌데..하기도 했었죠. 기획자가 디자인 툴을 다룰 줄 아는 것도 좋겠지만 UI/UX를 이해하고 말이 통하는 기획자가 되는게 중요할 것 같네요. 👇'김아영'님의 원글 보러가기