웹/앱 디자인 용어

웹 디자인 용어

 

 

레이아웃 (Layout)	일정 해상도 공간 안에 이미지, 텍스트, 버튼 등을 배치하는 것	web.dev
그리드 (Grid)	레이아웃 안에서 정확한 위치 배정을 위한 수직-수평 격자 개념	hello web
반응형 웹 (Responsive Web)	디스플레이 크기에 따라 자동으로 웹 화면이 변하는 형태	hello web
스토리보드 (Storyboard)	웹사이트 전체 경로 및 화면 구성을 이해할 수 있는 기획서 및 화면 설계도	Medium
스타일 가이드 (Style Guide)	일관성 있는 디자인을 유지하기 위한 텍스트 폰트, 컬러, 버튼 등의 규칙	bonsae.tistory
GNB (Global Navigation Bar)	고정된 상단 메뉴로, 메인 페이지와 다른 경로로 이동하는 역할을 하는 바 메뉴	geonlee.tistory
푸터 (Footer)	화면 아래쪽에 위치한 바 형태로, 회사 정보, 주소 등이 포함되는 영역	beusable.net
톤앤매너 (Tone and Manner)	웹의 전반적인 스타일, 방향, 색상 등을 나타내는 것	-
목업 (Mockup)	가상으로 구현된 형태를 보여주는 것으로, PC나 모바일 화면 껍데기에 실제 콘텐츠를 삽입하여 시안을 만듦	yesform
파비콘 (Favicon)	아주 작은 소형 아이콘으로, 보통 16x16 픽셀 사이즈로 만들어 사이트를 나타냄	naver.com
인풋 창 (Input)	뭔가를 입력할 수 있는 공간, 라벨(Label)과 플레이스홀더(Placeholder)를 포함	webdir.tistory
썸네일 (Thumbnail)	페이지나 사진을 축소하여 미리 알아보기 쉽게 보여주는 이미지	-

​

 

앱[모바일] 디자인 용어

 

 

스플래시 스크린 (Splash Screen)	앱이 처음 실행될 때 나오는 화면으로, 서비스 로고나 광고를 포함하는 화면	justinmind
엠프티 데이터 (Empty Data)	앱을 처음 실행했을 때 설정이나 추가가 안된 상태를 나타내는 빈 화면	toptal
코치 마크 (Coach Mark)	앱을 처음 실행할 때 각 버튼이나 메뉴에 대한 설명을 반투명하게 덮어서 보여주는 화면	medium.com
워크스루 페이지 (Walkthrough page)	스와이프로 페이지 전환하는 튜토리얼 화면	stackoverflow
스프링보드 (SpringBoard)	모든 스마트폰의 구조로, 런처(Launcher)로도 불림	androidayuda.com
드롭다운 (Drop Down)	버튼 터치 후 세부 항목이 나오는 UI	unity3d
콤보박스 (Combo Box)	입력할 수 있는 기능이 더해진 드롭다운 메뉴	sap.com
라디오 버튼 (Radio Button)	여러 선택지 중 하나만 선택 가능한 버튼	jitbit.com
체크박스 (Check Box)	여러 선택지를 고를 수 있는 상자	-

 

브레드크럼 (Breadcrumbs)	이동 경로와 뎁스(Depth)를 나타내는 UI	pinterest.co.kr
토글 (Toggle)	기능을 켜고 끌 때 사용되는 UI, 스위치와도 유사	brunch.co.kr
툴팁 (Tooltip)	특정 버튼이나 기능에 부연 설명을 자동으로 뜨는 표시	userguiding.com
스피너 (Spinner)	숫자를 입력하거나 화살표로 조절하는 UI, 로딩 화면에 사용되기도 함	-
슬라이더 (Slider)	위아래 또는 좌우로 조절하여 수치를 시각적으로 표현하는 UI	justinmind.com
캐러셀 (Carousel)	이미지나 영상 등의 콘텐츠가 좌우, 위아래로 전환되는 UI	webflow.com
플로팅 액션 버튼 (Floating Action Button)	화면 위에 떠다니는 버튼으로, FAB라고도 불림	developer.android.com
팝업 (Popup)	창 위에 또 다른 창을 띄우는 UI	-
모달 (Modal)	창 위에 뜨는데, 다음 진행 단계 상에서 무조건 거쳐야하며 종료하기 전까지 메인 화면이 보이지 않음	velog.io
아코디언 (Accordion)	메뉴를 접거나 펼칠 수 있는 UI	dev.to
메뉴 (Menu)	버튼에 따라 다르게 나타나는 UI	behance.net
픽커 (Picker)	아이폰에서 날짜를 선택하는데 사용되는 휠 방식의 UI	designencyclopedia.io
뱃지 (Badge)	새로운 정보나 업데이트 건이 있을 때 숫자나 표시를 해주는 기능, 숫자가 있는 경우 컨테이너 뱃지라고 함	-