UX/UI 실전 용어 가이드

버튼 & CTA Button / Call To Action

눌렀을 때 동작이 일어나는 요소. CTA는 "지금 신청"처럼 사용자의 핵심 행동을 유도하는 강조 버튼입니다.

이 사이트 → "문의하기 →" 버튼

체크박스 vs 라디오 버튼 Checkbox / Radio

체크박스는 여러 개를 동시에 고를 수 있고, 라디오 버튼은 여럿 중 딱 하나만 고릅니다.

인풋 필드 & 플레이스홀더 Input / Placeholder

글자를 입력하는 칸. 플레이스홀더는 입력 전에 흐리게 보이는 예시 안내문("이름을 입력하세요")입니다.

이 사이트 → 문의 폼 · 게시판 검색창

토글 스위치 Toggle Switch

켜짐/꺼짐 두 상태를 좌우로 밀어 바꾸는 스위치형 컨트롤.

드롭다운 & 셀렉트 박스 Dropdown / Select

누르면 목록이 펼쳐져 그중 하나를 고르는 입력.

이 사이트 → 문의 "관심 프로그램" 선택

툴팁 Tooltip

요소에 마우스를 올렸을 때 뜨는 작은 보조 설명.

이 사이트 → 8강 · 툴팁

탭 & 세그먼트 컨트롤 Tab / Segmented Control

같은 자리에서 내용만 갈아끼우는 분할 메뉴. 세그먼트는 버튼들이 한 덩어리로 붙은 형태.

아코디언 Accordion

제목을 누르면 접혀 있던 내용이 펼쳐지는 구조. 화면을 짧게 유지합니다.

이 사이트 → 7강 · 아코디언/토글 (FAQ)

카드 UI Card

정보를 네모 박스 단위로 묶어 보여주는 패턴.

이 사이트 → 프로그램 · 교육자료 카드

배지 Badge

상태나 개수를 표시하는 작은 라벨("준비 중", 알림 숫자 등).

이 사이트 → 모듈 "준비 중" 배지

헤더 & GNB/LNB Header / Global·Local Nav

헤더는 페이지 최상단 영역. GNB는 사이트 전체 공통 메뉴, LNB는 특정 영역 안의 지역 메뉴입니다.

이 사이트 → 상단 메뉴(GNB)

그리드 & 컬럼 Grid / Column

화면을 보이지 않는 격자와 세로 칸으로 나눠 요소를 가지런히 정렬하는 방식.

캐러셀 vs 무한 스크롤 Carousel / Infinite Scroll

캐러셀은 좌우로 넘기는 슬라이드, 무한 스크롤은 내릴수록 콘텐츠가 계속 로드되는 방식.

이 사이트 → 홈 히어로 캐러셀(6장면)

반응형 디자인 Responsive

화면 크기에 따라 레이아웃이 자동으로 바뀌는 설계(PC 다열 → 모바일 1열).

이 사이트 → 6강 · UX/UI 원칙

사이드바 / 드로어 Sidebar / Drawer

옆에 붙는 보조 영역. 드로어는 평소 숨었다가 밀려나오는 서랍형 메뉴입니다.

이 사이트 → 우측 퀵 사이드바 · 모바일 햄버거

푸터 Footer

페이지 맨 아래 영역(사업자 정보·링크·저작권 등).

이 사이트 → 하단 푸터

스티키 / 고정 Sticky / Fixed

스크롤해도 자리에 머무름. sticky는 특정 지점부터 붙고, fixed는 항상 같은 자리에 떠 있습니다.

이 사이트 → 10강 · 고정 퀵 사이드바

모달 vs 팝업 Modal / Popup

화면 위에 떠서 흐름을 멈추는 레이어. 모달은 닫기 전까지 뒤 화면을 못 만집니다.

이 사이트 → 9강 · 팝업·모달 (입금안내·쿠폰)

토스트 메시지 Toast

잠깐 떴다가 스르륵 사라지는 짧은 알림("저장되었습니다").

로딩 스피너 / 프로그레스 바 Spinner / Progress Bar

기다리는 중임을 보여주는 표시. 스피너는 빙글 돌고, 프로그레스 바는 진행률을 채웁니다.

호버 상태 Hover

마우스를 올렸을 때의 모습 변화(색·그림자 등). 클릭 가능함을 암시합니다.

이 사이트 → 카드 호버 시 살짝 떠오름

스켈레톤 UI Skeleton

내용이 로딩되기 전, 회색 뼈대를 먼저 보여줘 빈 화면의 답답함을 줄이는 기법.

비활성화 상태 Disabled

지금은 누를 수 없는 흐릿한 상태(조건 미충족 등).

액티브 상태 Active

지금 선택·적용 중임을 나타내는 강조 표시.

이 사이트 → 현재 언어 버튼(녹색) · 페이지네이션

CRUD Create·Read·Update·Delete

데이터의 4대 기본 동작 — 생성·조회·수정·삭제. 거의 모든 앱의 뼈대입니다.

이 사이트 → 게시판 글(작성·조회)

변수 Variable

값을 담아 두고 이름으로 꺼내 쓰는 상자(예: currentLang).

API 호출 API Call

다른 서버·서비스에 데이터를 요청하거나 보내는 것.

이 사이트 → 11강 · 게시판 서버리스 글쓰기

JSON 제이슨

데이터를 주고받는 표준 글자 형식. { "키": "값" } 모양으로 적습니다.

조건문 If-Else / Conditional

"~라면 A, 아니면 B"로 갈라지는 논리.

이 사이트 → 2강 언어별 분기(ko/en/zh)

보더 Border / Stroke

요소의 테두리 선(두께·색·스타일).

패딩 vs 마진 Padding / Margin

패딩은 테두리 안쪽 여백(내용과 테두리 사이), 마진은 테두리 바깥쪽 여백(요소 사이).

보더 레디우스 Border Radius

모서리를 둥글게 깎는 정도(radius=반지름).

이 사이트 → 둥근 카드·버튼

오파시티 Opacity

투명도. 0은 완전 투명, 1은 완전 불투명.

그림자 Box Shadow

요소 뒤에 그림자를 깔아 떠 있는 듯한 입체감을 주는 효과.

이 사이트 → 카드 호버 그림자

그라데이션 Gradient

한 색에서 다른 색으로 서서히 변하는 효과.

이 사이트 → 아트 컨시어지 카드 헤더

타이포그래피 & 폰트 Typography / Font

글자의 종류·크기·굵기·줄간격을 설계하는 일. 읽힘과 분위기를 좌우합니다.

이 사이트 → 본문 Noto Sans KR + 강조 Merriweather

헥스 코드 & RGB HEX / RGB

색을 숫자로 표현하는 방법. HEX는 #3B6259처럼, RGB는 빨강·초록·파랑 값으로 적습니다.

이 사이트 → 브랜드 그린 #3B6259