인터페이스
사람과 컴퓨터, 시스템, 기기 등 그 사이에서 일어나는
상호작용을 매개하는 장치, 간단하게 정의하자면 서로간의 의사소통을 원활하게 해주는 번역가.
사용자 인터페이스=UI
프로그래밍 인터페이스=API
인터렉션
사용자가 어떤 목적을 달성하기 위해서 제품의 UI를 사용해서 제품과 상호작용 하는 과정
프로덕트
회사에서 만들어낸 상품
프레임워크
효율적으로 프로그램을 진행할 수 있도록 돕는 툴
백오피스=어드민
서비스 운영을 위한 관리자 페이지
모달
현재 머무는 브라우저 창에 띄어지는 레이어 팝업
얼럿
알림, 경고창 등을 뜻하는 시스템 팝업
라이트 박스
팝업이 뜨는 동시에 백그라운드 화면의 밝기가 달라지느 효과
토스트 팝업
주로 모니터 우측 하단에서 잠시 나타났다 사라지는 팝업메세지
드롭다운 메뉴
메뉴 제목이 표시된 곳을 선택하면 메뉴가 펼쳐지는 스타일
스낵바
앱이 수행했거나 수행할 프로세스를 사용자에게 알려주고 일시적으로 나타나지는 표현
배너
중요한고 간결한 메세지를 표시하고 사용자가가 처리할 작업을 제공한다.
셀렉트 박스
사용자에게 어떤 특정 값을 선택하게 할 때 사용
토글
온, 오프를 설정할 때 쓰이는 컨트롤
라디오버튼
중복 선택이 불가능한 버튼형(원형) 수단
체크박스
중복 선택이 가능한 선택 수단
콤보박스
드롭 다운 리스트와 입력 필드 기능을 결합한 상태
입력필드
사용자가 직접 텍스트를 입력하는 곳
레이블
입력필드 상단, 좌측의 입력할 정보를 설명해주는 문구
플레이스 홀더
임력 필드 안에 짧은 형식으로 입력방법을 알려주는 정보
문자를 입력하면 사라진다.
텍스트 필드
한 줄 텍스트를 입력하는 폼 필드로
텍스트 입력 혹은 수정하는 필드
텍스트 에이리어
주로 긴 문장의 텍스트를 입력하는 경우에 사용
파비콘
주소창 옆의 자은 아이콘
툴팁
마우스를 갖다대면 메뉴에 대해 말풍선이 뜨는 설명
페이지네이션
페이지의 일련번호로 콘텐츠가 많은 경우에 표현
프로그래스 바
현재 진행정도를 나타내는 인디케이터(지표)
플로팅 버튼
모바일에 사용되는 우측 하단에 떠있는 버튼
로더
화면이 진행 중일 때 보이는 표현방식으로 거의 5초 내외로 표시한다.
스피너
대표적인 숫자 입력 컨트롤
캐러셀
메인 페이지에서 마케팅 정보를 보여주는 방법.
하나의 화면에서 거의 두 개 이상의 콘텐츠를 나열해서 보여준다.
네비게이션
앱하단에 위치한 하단바
브레드크럼블
웹,앱에서 현재 위치를 보여주는 네비게이션으로 표현
GNB
메인 화면 상단에 위치한 주 메뉴바
LNB
GNB메뉴를 클릭하거나 호버상태(마우스를 올린 상태)에서 보이는 메뉴로 서브 페이지, 특정 메뉴로 이동할 수 있다.
SNB
상단 메뉴를 제외한 왼쪽에 있는 메뉴바
푸터
홈페이지 하단에 고정되어 있는 영역으로
주로 사업자 번호, 회사 정보가 기입되어 있다.
스플래시 스크린
앱이 시작할 . 때보여주는 화면으로 앱의 로고, 이미지를 보여주는 콘텐츠로 홍보한다
햄버거
웹, 모바일 상단에 위치한 버튼으로 전체 메누를 한 눈에 볼 수 있게 해준다.
아코디언
내용을 펼쳤다가 접을 수 있는 컴포넌트
