UI/UX 디자이너가 알아야 할 기초 정보

 

1. UI (User Interface) & UX (User Experience)

• UI (사용자 인터페이스): 사용자가 웹사이트나 앱을 사용할 때 눈으로 보고, 클릭하고, 조작하는 모든 요소(버튼, 메뉴, 폰트, 색상 등).
• UX (사용자 경험): 사용자가 웹사이트나 앱을 사용할 때 느끼는 전반적인 경험(편리성, 직관성, 만족도 등).

2. 웹 디자인 관련 용어

• 와이어프레임 (Wireframe): 웹사이트나 앱의 기본적인 레이아웃을 설계한 초안.
• 목업 (Mockup): 디자인 요소가 포함된 정적인 시각적 시안.
• 프로토타입 (Prototype): 실제 동작이 가능한 인터랙티브한 시안.
• 그리드 시스템 (Grid System): 웹페이지의 정렬과 배치를 위해 사용하는 가이드라인.

3. 사용자 인터페이스 요소

• CTA (Call To Action): 사용자가 특정 행동을 하도록 유도하는 버튼(예: “구매하기”, “회원가입”).
• 네비게이션 (Navigation): 사용자가 웹사이트를 쉽게 이동할 수 있도록 돕는 메뉴 및 링크 구조.
• 브레드크럼 (Breadcrumbs): 사용자가 현재 위치를 알 수 있도록 제공하는 탐색 경로 표시.
• 카드 UI (Card UI): 정보를 카드 형태로 정리하여 배치하는 디자인 패턴(예: 유튜브 썸네일, 인스타그램 게시물).

4. 웹 개발 및 코딩 관련 용어

• 반응형 디자인 (Responsive Design): 다양한 화면 크기에 맞게 자동으로 조정되는 웹사이트 디자인.
• 적응형 디자인 (Adaptive Design): 특정 디바이스 해상도에 맞춰 별도로 제작되는 웹 디자인.
• 프론트엔드 (Frontend): 사용자가 직접 보는 화면을 구성하는 개발 영역 (HTML, CSS, JavaScript).
• 백엔드 (Backend): 데이터베이스, 서버와 연결되는 부분 (PHP, Node.js, Python 등).
• API (Application Programming Interface): 프로그램 간 데이터를 주고받을 수 있도록 만든 인터페이스.

5. 웹 성능 및 접근성 관련 용어

• UX 라이팅 (UX Writing): 사용자의 행동을 유도하는 버튼, 메시지, 알림 등의 텍스트 작성 기법.
• 웹 접근성 (Web Accessibility): 장애가 있는 사용자도 웹을 쉽게 이용할 수 있도록 설계하는 원칙.
• Lighthouse: 구글이 제공하는 웹사이트 성능, SEO, 접근성을 평가하는 도구.
• A/B 테스트 (A/B Testing): 두 가지 버전의 디자인을 테스트하여 더 나은 성과를 분석하는 방법.

6. 트렌드 및 기타 용어

• 마이크로 인터랙션 (Microinteraction): 버튼 클릭 시 애니메이션, 로딩 표시 등 작은 인터랙션.
• 스켈레톤 스크린 (Skeleton Screen): 페이지 로딩 시 빈 화면 대신 윤곽을 먼저 보여주는 방식.
• 더크 모드 (Dark Mode): 사용자 눈의 피로를 줄이기 위해 어두운 테마를 제공하는 UI 옵션.

 

컴포넌트(Component) 관련 용어

컴포넌트는 UI를 구성하는 독립적이고 재사용 가능한 요소입니다.

📌 기본 UI 컴포넌트

• 버튼 (Button) → 클릭하여 특정 동작을 수행하는 요소. (예: 제출, 취소, 확인 등)
• 아이콘 (Icon) → 정보를 시각적으로 표현하는 작은 그래픽 (예: 검색 🔍, 설정 ⚙️).
• 배너 (Banner) → 중요 공지나 광고를 표시하는 영역.
• 카드 (Card) → 정보를 정리하여 블록 형태로 보여주는 UI 요소. (예: 유튜브 썸네일, 상품 카드)
• 모달 (Modal) → 팝업처럼 화면 위에 떠서 추가 정보를 제공하는 창.
• 툴팁 (Tooltip) → 특정 요소 위에 마우스를 올리면 나타나는 짧은 설명.
• 아코디언 (Accordion) → 클릭하면 내용이 펼쳐지고 접히는 UI 요소.
• 탭 (Tab) → 여러 개의 콘텐츠를 전환할 수 있도록 구성한 UI.
• 토스트 메시지 (Toast Message) → 화면 하단 또는 우측에 잠깐 나타나는 알림 메시지.
• 스피너 / 로딩 인디케이터 (Spinner / Loading Indicator) → 로딩 중임을 나타내는 애니메이션.

 

폼(Form) 관련 용어

폼(Form)은 사용자가 정보를 입력하고 제출할 수 있도록 하는 UI 요소입니다.

📌 폼 입력 요소 (Input Elements)

• 입력 필드 (Input Field) → 사용자가 텍스트를 입력할 수 있는 영역.
• 텍스트 입력 (Text Input) → 짧은 텍스트(이름, 이메일 등)를 입력하는 필드.
• 텍스트 영역 (Textarea) → 여러 줄의 텍스트를 입력할 수 있는 입력란.
• 체크박스 (Checkbox) → 다중 선택이 가능한 입력 요소.
• 라디오 버튼 (Radio Button) → 하나의 옵션만 선택 가능한 버튼.
• 드롭다운 (Dropdown, Select Box) → 여러 개의 옵션 중 하나를 선택할 수 있는 메뉴.
• 토글 스위치 (Toggle Switch) → ON/OFF를 전환하는 버튼.
• 슬라이더 (Slider) → 숫자나 값을 조절할 수 있는 막대형 컨트롤.
• 파일 업로드 (File Upload) → 사용자가 파일을 업로드할 수 있는 입력 필드.

📌 폼 관련 기능 용어

• 플레이스홀더 (Placeholder) → 입력 필드에 표시되는 예시 텍스트.
• 유효성 검사 (Validation) → 입력값이 올바른지 확인하는 과정 (예: 이메일 형식 검사).
• 오토컴플리트 (Autocomplete) → 입력 시 자동으로 추천 옵션을 제공하는 기능.
• 폼 제출 (Form Submission) → 사용자가 입력한 데이터를 서버로 전송하는 동작.
• 폼 리셋 (Form Reset) → 입력된 내용을 초기화하는 기능.

 

레이아웃의 기본 구성 요소

컨테이너(Container)	콘텐츠나 컴포넌트를 담는 박스 형태의 구조. 전체 레이아웃의 경계 역할을 함.
그리드(Grid)	일정한 간격으로 콘텐츠를 정렬하는 체계. 열(Column)과 행(Row)으로 구성됨.
컬럼(Column)	세로 방향의 그리드 단위. 반응형 웹에서는 12컬럼 시스템이 일반적.
로우(Row)	가로 방향의 정렬 단위. 여러 개의 컬럼을 포함함.
갭(Gap)	그리드 시스템 또는 플렉스 박스에서 요소 간의 간격을 조절하는 속성.
마진(Margin)	요소 외부의 여백. 요소 간 간격을 조절함.
패딩(Padding)	요소 내부의 여백. 콘텐츠와 테두리 사이의 공간을 조절함.

레이아웃 구성 방식

플렉스박스(Flexbox)	주로 1차원(가로 or 세로)의 정렬과 정돈에 사용되는 CSS 레이아웃 방식.
그리드 레이아웃(CSS Grid)	2차원 레이아웃 구성에 유용. 복잡한 그리드 구조를 만들기 쉬움.
반응형 레이아웃 (Responsive Layout)	화면 크기에 따라 자동으로 조정되는 디자인. 미디어 쿼리 사용.
적응형 레이아웃 (Adaptive Layout)	특정 화면 크기에 맞춰 고정된 레이아웃을 제공함.
고정 레이아웃 (Fixed Layout)	요소의 크기나 위치가 절대값으로 고정되어 있는 구조.
유동형 레이아웃 (Fluid Layout)	% 단위로 구성되어 브라우저 크기에 따라 유동적으로 변함.
중앙 정렬(Centering)	콘텐츠를 수직, 수평으로 중앙에 배치하는 방식. flex나 grid 사용.

실제 웹사이트에서 자주 등장하는 영역 용어

헤더(Header)	웹사이트 최상단 영역. 로고, 네비게이션, 검색창 등이 위치함.
네비게이션(Navigation)	사이트 내 페이지 이동을 위한 메뉴. 사이드바나 상단에 배치.
히어로 섹션(Hero Section)	첫 화면에서 사용자 시선을 끌기 위한 큰 배너 이미지와 메시지.
본문(Body / Main Content)	사이트의 핵심 콘텐츠가 위치하는 곳. 기사, 상품, 이미지 등.
사이드바(Sidebar)	좌우 측면에 배치되는 부가 메뉴나 광고 영역.
푸터(Footer)	웹페이지 최하단 영역. 사이트 정보, 연락처, 저작권 등 포함.