웹 디자인 기본 용어
GNB(Global Navigation Bar) : 웹 대표 메뉴 (대분류)
LNB(Local Navigation Bar) : GNB의 하위 메뉴 (중분류 / 소분류)
CTA (Call to Action) : 목표 달성 버튼
라벨 (Label) : 인풋창 옆 소게
플레이스홀더 (placeholder) : 인풋창에 입력할 힌트를 주는 내용
인풋창, 입력 필드 (input Field, Text box) : 입력할 때 사용하는 창
파비콘(Favicon) : 상단 브라우저 탭 타이틀 옆 16*16 아이콘
사이드바 (aside) : 콘텐츠 영역 제외 좌측 혹은 우측에 배치된 영역, 반응형에 취약
헤더 (header) : 상단 영역
푸터 (Footer) : 하단 영역
레이아웃 (Layout) : 화면 구성 / 배치
그리드 (Grid) : 레이아웃을 구현하는 데 필효한 가이드
오브젝트 (Object) : 디자인의 시각적인 각각의 요소들
비주얼 (Visual) : 웹에서 디자인적인 요소가 가미된 이미지 혹은 영역, 영역에 따라 메인 비주얼 /서브 비주얼
WSG (Web Style Guide) : 페이지에 일관성을 부여하기 위한 운영, 시각적 구조적 정의 및 관리 지침. BX 경험을 바탕으로 함.
반응형 웹 (Responsive Web) : 디스플레이에 따라 웹의 화면이 자동으로 변환
행동유도성 (Affordance) : 디자이너의 의도대로 행동을 유도하는 것
웹 서버 (web server) : 브라우저에 띄울 코드, 이미지, 데이터 베이스를 저장하는 공간
웹 호스팅 (web hosting) : 웹 서버를 이용할 수 있도록 만든 서비스, 유/무료 (Ex. 카페24, 닷홈 등)
크로스 브라우징(Cross Browse) : 다양한 브라우저 환경에서 사용자 정보가 소외되지 않고 호환되는지 테스트 (같은 화면 X)
검색엔진최적화 (SEO) : 검색 결과 상위 노출하는 작업
GA (Google Analytics) : google에서 제공하는 웹 분석 서비스
메타포 (Metaphor) : 디자인할 때 비슷한 것을 빌려 표현
모티브 (Motive) : 디자인을 하게 된 추진력, 원동력
스토리보드 (Storyboard) : 웹 사이트 디자인을 하기 위한 화면 설계서 (화면정의서, 기능정의서, 서비스흐름도)
톤앤매너 (Tone&Manner) : 웹사이트의 방향성이나 분위기
룩앤필 (Look&Feel) : 디스플레이의 일관성
헤드카피 (Head Copy) : 웹 사이트 메인에 들어갈 핵심 문장, 메인 카피
커스트마이징 (Custonizing) : 사용환경에 맞지 않을 경우 재수정
플랫디자인 (Flat Design) : 심플한 형태의 디자인, 모바일 디바이스에 대응하기 위한 디자인 관리가 용이
백 오피스( Back office) : 관리자 단, 웹을 운영하는 관리자 페이지
UI 기본 용어
툴팁 (Tooltip) : 마우스 오버시 해당 영역 설명이 말풍선 형태로 나타나고 사라짐
드롭다운 메뉴 (Drop down menu /list) : 메뉴의 한 컬럼을 선택하면 하위 메뉴가 아래로 펼쳐지는 메뉴
경고창 (Alerts) : 확인과 승인이 필요한 상황에 유저에게 알려주는 창
팝업 (Popup) : 유저로부터 단일 선택을 요구하는 대화 상자의 창
토글 버튼 (Toggle Button) : On/ Off를 설정할 때
토글 스위치 (Toggle Switch) : On/ Off를 설정할 때, 주로 모바일에서 사용
스피너 (Spinner) : 값을 조절할 때, 직접 입력 / 상하,좌우 화살표로
프로그레스 바 (progress bar) : 로딩 등 진행 상태를 시각적으로 보여주는 바
액티브 인디케이터 (Activity Indicator) : 작업이 완료될 때까지 기다려달라고 요청하는 표시
콤보 박스 (Combo Box) : 입력 필드에 직접 입력하거나, 나열된 항목들 중 하나를 선택할 수 있음
라디오 버튼 (Radio Button) : 선택 항목 중 하나의 항목만 선택 가능
체크 박스 (Check Box) : 동시에 여러 항목 선택 가능
아코디언 (Accordion) : 내용을 펼쳤다 접을 수 있는 컴포넌트
스낵바 (Snack Bar) : 유저가 수행한 작업에 대한 결과를 텍스트 레이블 형태로 노출
Hover : 마우스 또는 포인터가 올려진 상태
Disabled : 동작할 수 없는 비활성 상태일 때
Enabled : 상호 작용이 가능한 상태일 때
Focused : 키보드 또는 음성등의 입력을 통해 강조된 때
Pressed : 마우스 또는 포인터로 클릭했을 때