UXUI 용어

용어	개념	예시 / 참고
디스플레이(Display)	우리가 보는 디지털 화면 픽셀이라는 작은 칸들로 이루어짐	웹 사이트, 앱, 전광판, 키오스크
픽셀(Pixel)	디지털 화상을 구현하는 아주 작은 단위
해상도(Resolution)	디스플레이의 선명한 정도 디스플레이 안에 들어가 있는 픽셀의 개수를 의미 픽셀의 개수는 가로 픽셀x세로 픽셀로 나타냄	1920*1080 = 2,073,600개 가로에 1920개, 세로에 1080개의 픽셀로 이루어져있다.
1배수	디자인을 할 때 기준이 되는 사이즈 1배(100%), 원본 사이즈
랜더링	코드를 읽고 디자인으로 바꾼다음. 자기 배율만큼 확대/축소 하는 과정
래스터(Raster) =비트맵 형식	픽셀 칸에 색깔 칩을 하나씩 담는 형식	포토샵, 프로크리에이트, 클튜 jpg, bmp, gif, png
벡터(Vector)	그림을 수식으로 표현하는 방식 코드 파일에 가까운 형태	svg
8포인트 그리드	UI를 8의 배수에 맞추어 배치하는 레이아웃 규칙	사이 간격, 요소의 여백, 크기 등
프레임(Frame) = 컨테이너(Container)	피그마에서 코드 블록을 만드는 기능이자 실제 화면으로 인식하는 개체	F 로 생성 컨테이너 자체도 컴포넌트에 속한다.
그룹(Group)	여러 개체를 하나로 묶어주는 기능 SVG 이미지로 인식
패딩(Paddding)	컨테이너 사이즈가 되는 내부 여백
보더(Border)	컨테이너의 테두리
마진(Margin)	컨테이너 바깥의 여백, 다른 컨테이너와의 간격
오토레이아웃	개체를 패딩으로 감싸 컨테이너를 만들 때 사용	Shift + A 로 생성
컨스트레인트 (Constraint)	오토레이아웃을 움직이기 위한 규칙을 정함	'핀'의 기능 수행
리사이징(Re-sizing)	프레임을 오토레이아웃으로 감쌀 때 Fixed 외에 생기는 다른 값	Hug, Fill
포지션(Position)	프로토타입에서 요소의 위치를 고정하거나 스크롤에 따른 위치를 조정할 수 있는 기능	스태틱, 픽스드, 앱솔루트, 스티키
스태틱(Staic)	일반적인 요소들이 가지고 있는 포지션
픽스드(Fixed)	화면 전체를 기준으로 스크롤해도 항상 고정된 위치에 있음	헤더, 앱 하단 버튼
앱솔루트(Absolute)	본인이 담겨있는 컨테이너를 기준으로 스크롤해도 항상 고정된 위치에 있음
스티키(Sticky)	스크롤을 따라 움직이다가 특정 위치부터는 상단에 고정됨
파운데이션	UI를 구성하는 기초 요소	더 이상 세부 속성으로 쪼개지지 않음 색상, 서체, 간격, 여백, 곡률, 그리드, 고도(높이), 아이콘
컴포넌트	파운데이션(기초 요소)의 조합 피그마로 만든 UI 블록	Ctrl + Alt + K 로 생성 가장 기초적인 명칭인듯 (포토샵 단위를 레이어라고 부르듯 버튼을 만들면 버튼 컴포넌트~)
합성 컴포넌트 (Compound Component)	컴포넌트를 모아 또 컴포넌트를 만든 것	바텀 시트, 다이얼로그, 리스트, 카드,탭 등 복잡한 구조를 지님
❖ 마스터 컴포넌트 (Master Component)	원본 UI 블록	마스터 컴포넌트를 복사해 사용할 경우 복사 된 디자인들을 한 번에 수정/편집 가능
◇ 인스턴스(Instance)	마스터 컴포넌트의 복제본	마스터 컴포넌트의 속성을 그대로 이어받음
네스티드 인스턴스 (Nested Instance)	상위 컴포넌트에서 하위 컴포넌트의 프로퍼티를 조작할 수 있도록 도와주는 기능	합성 컴포넌트인 경우에 사용
디태치(Detach)	인스턴스를 마스터 컴포넌트와 연결 해제함	일반 프레임으로 변경
의사 상태(Pseudo State)	컴포넌트의 가상의 상태를 표시	마우스 오버 시 변하는 색상
프로퍼티(Property)	디자인 구조가 바뀌지 않는 선에서 변경할 수 있는 요소들을 다룰 때 사용하는 기능	[기본상태] 아이콘1 + 텍스트1 [기본상태] 아이콘2 + 텍스트1 . .
배리언츠(Variants)	의사 상태(=가상의)를 만들 수 있는 피그마 컴포넌트 기능	[기본상태] 아이콘 + 텍스트 [마우스오버] 아이콘 + 텍스트 [선택불가] 아이콘 + 텍스트 . .
컬러 스타일	디자인에서 사용한 색상을 모아둔 팔레트 색상 단계의 규칙을 적용하여 만듦
1:3:6 법칙	컬러의 비율을 10% : 30% : 60% 로 사용하는 것	포인트 컬러 : 세컨 컬러 : 배경
폰트 스타일 = 폰트 스케일	디자인 시스템에서 사용한 폰트를 모아둔 목록 일정한 규칙에 따라 정렬된 하나의 세트
패밀리(Family)	폰트 이름/종류
굵기(=무게감, Weight)	먼저 중요하게 읽어야하는 폰트 안내	개발자는 100, 200 등 굵기에 할당된 숫자로 이야기함.
크기(Size)	폰트의 크기	16px부터 시작, ~10px > 2px씩 / 20~px > 4px씩 조정함
행간(Line-height)	글자 줄 사이의 간격 글자의 크기와 그 사이 간격을 합친 값	제목 - 120 ~ 135% 본문 - 135 ~ 170%, 거의 150%
글로벌 마진	앱 전체적으로 좌우의 여백을 일관성 있게 사용	일반적으로 16 ~ 24
디자인 시스템	UI 디자인에서 서비스 디자인에 적용된 디자인 스타일의 규칙이나 가이드라인	문서의 형태로 사용하는 규칙이나 방법 존재
UI 키트	디자인 프로젝트에 사용되는 시각적 구성 요소와 템플릿 모음	사용하는 규칙이나 방법 없음
액션 UI (Action)	사용자가 중요한 행동을 수행 할 때 사용	버튼
인풋 UI (Input)	사용자의 입력을 받을 때 사용	텍스트 입력(텍스트필드) 미리 정해 옵션 중 하나를 선택(셀렉트박스)
인포메이션 UI (information)	사용자에게 서비스의 상태나 안내 사항을 전달할 때 사용	토스트 메세지, 스낵바, 라벨
컨테이너 UI (Container)	컴포넌트 여러개가 결합되어 하나의 덩어리를 이루는 컴포넌트	카드, 바텀시트, 리스트 복잡한 구조多
내비게이션 UI (Navigation)	사용자가 페이지를 이동할 때 사용	네비게이션 바, 앱 바, 하단 탭 바, 사이드 바
컨트롤 UI (Control)	사용자가 설정이나 값을 수정할 때 사용	라디오, 체크박스, 스위치
히어로 영역	메인화면의 가장 상단 영역 맨 앞에서 가장 중요한 메세지를 전달하는 영역	이벤트 배너, 프로모션 배너
힌트 텍스트(Hint Text)	타이틀 밑에 보조적으로 필요한 정보를 적는 영역
엘리먼트	파운데이션이 모여서 만드는 요소	버튼, 뱃지, 탭 등
모듈	엘리먼트가 모여서 만드는 요소	리스트, 캐러셀, 네비게이션 등
페이지	모듈이 모여서 만드는 최종화면	홈, 마이페이지, 장바구니, 회원가입 등
리딩 엘리먼트 (Leading Element)	타이틀 앞에 붙는 영역	일반적으로 뒤로가기, 닫기 아이콘을 사용
트레일링 엘리먼트 (Trailing Element)	타이틀 뒤에 붙는 영역	일반적으로 화면과 관련 된 보조 기능을 제공
디스크럽션(Description)	리스트의 보조 설명을 적는 영역
프로토타입 (Proto-type)	실제 제품을 만들지 않고 아이디어를 해볼 수 있는 것	구현정도에 따라 낮은 단계/높은 단게로 나눌 수 있음
Lo-fi (low-fidlity)	낮은 단계의 프로토타입	전체적인 흐름을 빠르게 맞춰볼 수 있는 수준
Hi-fi (high-fidlity)	높은 단계의 프로토타입	실제 제품과 같거나 유사한 수준
오버플로우 (Overflow)	프레임 밖으로 컨텐츠가 넘어가는 것
스크롤 컨테이너	오버플로우가 생긴 프레임을 스크롤로 만들어줌	프로토타입 패널에서 선택
핸드오프 (Hand-off)	디자인 의도, 구체적인 규격, 속성 등 디자인 사양을 개발자에게 전달하기 위한 문서