부록 3: 용어 사전 — UI편

• 프론트엔드 (Frontend): 브라우저에 보이는 화면 전체. 버튼, 텍스트, 이미지, 입력 폼 등 사용자가 눈으로 보고 직접 조작하는 부분.
• 컴포넌트 (Component): 화면을 이루는 독립적인 단위. 버튼, 카드, 네비게이션 바처럼 여러 페이지에서 반복해서 쓰는 UI 요소를 재사용 가능하게 만든 것.
• 레이아웃 (Layout): 화면 요소들을 어떻게 배치할지에 대한 구조. 어느 쪽에 사이드바가 오고, 헤더와 푸터는 어떻게 생겼는지 등.
• 반응형 디자인 (Responsive Design): 화면 크기에 따라 레이아웃이 자동으로 조정되는 디자인. 컴퓨터에서는 3열로 보이던 카드가 스마트폰에서는 1열로 바뀌는 것.
• 브레이크포인트 (Breakpoint): 반응형 디자인이 전환되는 기준 화면 너비. 예를 들어 768px 이하면 모바일 레이아웃으로 바뀌는 식.
• 뷰포트 (Viewport): 브라우저에서 실제로 보이는 화면 영역. 개발자 도구에서 모바일 화면을 시뮬레이션할 때 뷰포트 크기를 조정한다.
• 헤더 (Header): 페이지 상단에 고정되는 영역. 보통 로고와 네비게이션 메뉴가 들어간다.
• 푸터 (Footer): 페이지 하단 영역. 보통 저작권 정보, 링크 모음이 들어간다.
• 네비게이션 바 (Navigation Bar): 페이지 간 이동을 위한 메뉴. 주로 헤더 안에 위치한다.
• 햄버거 메뉴: 모바일에서 네비게이션 메뉴를 숨기고 ≡ 아이콘으로 표시하는 방식. 아이콘 모양이 햄버거처럼 생겼다고 해서 붙여진 이름.
• 탭 (Tab): 콘텐츠를 여러 탭으로 나눠 전환하는 UI. "전체 / 진행중 / 완료"처럼 같은 공간에서 다른 내용을 보여줄 때 쓴다.
• 아코디언 (Accordion): 제목을 클릭하면 내용이 펼쳐지고, 다시 클릭하면 접히는 UI. FAQ 페이지에서 질문을 클릭하면 답변이 나타나는 방식이 대표적인 예.
• 드롭다운 (Dropdown): 클릭하면 선택 목록이 아래로 펼쳐지는 UI. 카테고리 선택, 정렬 기준 선택 등에 쓰인다.
• 사이드바 (Sidebar): 화면 왼쪽이나 오른쪽에 위치하는 패널. 보통 메뉴나 필터, 추가 정보를 담는다.
• 드로어 (Drawer): 버튼을 누르면 화면 옆에서 슬라이드로 나타나는 패널. 사이드바와 비슷하지만 평소에는 숨겨져 있다가 필요할 때만 열린다. 모바일 메뉴에 자주 쓰인다.
• 바텀 시트 (Bottom Sheet): 모바일에서 화면 하단에서 위로 올라오는 패널. 추가 옵션, 상세 정보, 간단한 폼을 띄울 때 모달 대신 많이 쓴다. 손가락으로 아래로 쓸어내리면 닫힌다.
• 오버레이 (Overlay): 모달이나 드로어가 열릴 때 배경에 깔리는 반투명한 어두운 레이어. 현재 포커스가 팝업에 있음을 시각적으로 알려주고, 클릭하면 닫히는 경우가 많다.
• 카드 (Card): 정보를 박스 형태로 묶어서 보여주는 UI 요소. 배경색, 테두리, 그림자를 주어 시각적으로 구분한다.
• 그리드 (Grid): 격자 형태로 요소를 배치하는 레이아웃. "카드를 한 줄에 3개씩 배치해줘"가 그리드 레이아웃.
• 모달 (Modal): 현재 페이지 위에 뜨는 팝업 창. 삭제 확인, 로그인 폼, 상세 정보 표시 등에 쓰인다. 배경에 오버레이가 깔린다.
• 툴팁 (Tooltip): 마우스를 요소 위에 올렸을 때 나타나는 짧은 설명 텍스트. 아이콘 버튼처럼 기능이 직관적으로 보이지 않는 요소에 달아둔다.
• 배지 (Badge): 숫자나 상태를 표시하는 작은 레이블. 알림 아이콘 위에 붙는 빨간 숫자, "NEW" 태그, "완료" 상태 표시 등이 배지다.
• 토스트 메시지 (Toast Message): 화면 한쪽에 잠깐 나타났다 자동으로 사라지는 알림. "저장됐습니다", "오류가 발생했습니다" 같은 피드백을 줄 때 쓴다.
• 스피너 (Spinner): 로딩 중임을 나타내는 회전하는 원형 아이콘. 데이터를 불러오거나 저장하는 동안 버튼이나 화면 중앙에 표시한다.
• 스켈레톤 UI (Skeleton UI): 데이터를 불러오는 동안 실제 콘텐츠 자리에 보여주는 회색 자리 표시자. 스피너보다 레이아웃 변화 없이 자연스럽게 로딩을 표현할 수 있다.
• 프로그레스 바 (Progress Bar): 작업 진행 상태를 가로 막대로 보여주는 UI. 파일 업로드, 단계별 폼, 프로필 완성도 등에 쓰인다.
• 페이지네이션 (Pagination): 긴 목록을 여러 페이지로 나눠 1, 2, 3... 버튼으로 이동하는 방식. 인피니트 스크롤과 반대 개념.
• 인피니트 스크롤 (Infinite Scroll): 페이지 맨 아래까지 스크롤하면 다음 데이터가 자동으로 이어서 로드되는 방식. 인스타그램, 트위터 피드 같은 형태.
• 플로팅 버튼 (Floating Action Button): 화면 오른쪽 하단 등에 고정되어 떠 있는 버튼. 가장 핵심적인 행동(글쓰기, 추가 등)을 항상 접근 가능하게 배치할 때 쓴다.
• 빈 상태 (Empty State): 데이터가 하나도 없을 때 보여주는 화면. "아직 등록된 항목이 없습니다"처럼 안내 메시지와 행동 유도 버튼을 함께 보여주는 것이 좋다.
• CTA (Call to Action): 사용자에게 특정 행동을 유도하는 버튼이나 링크. "시작하기", "지금 신청", "무료로 만들기" 같은 것들.
• 피드백 (Feedback): 사용자 행동에 대한 시스템의 반응. 버튼을 눌렀을 때 로딩 스피너가 도는 것, 저장 성공 시 토스트가 뜨는 것, 입력 오류 시 빨간 테두리가 생기는 것 모두 피드백이다.
• 폼 (Form): 사용자 입력을 받는 요소들의 묶음. 이름, 이메일, 비밀번호 입력 필드와 제출 버튼이 모여 있는 것이 폼이다.
• 인풋 (Input): 텍스트를 입력하는 필드. 한 줄짜리 텍스트 입력, 비밀번호 입력, 검색창 등이 모두 인풋이다.
• 사용자 흐름 (User Flow): 사용자가 서비스를 이용하는 순서와 경로. "메인 → 로그인 → 대시보드 → 항목 등록 → 목록 확인"처럼 각 화면의 연결을 설계하는 것.
• 다크 모드 (Dark Mode): 어두운 배경에 밝은 텍스트를 쓰는 색상 테마. 눈의 피로를 줄이고 배터리를 아끼는 효과가 있어 많은 서비스가 라이트/다크 모드 전환 기능을 제공한다.
• 색상 코드 (HEX Code): 색상을 # 뒤에 6자리 영문+숫자로 표현하는 방식. #ffffff는 흰색, #000000은 검정, #2563EB는 파란색. 구글에 "color picker"를 검색하면 원하는 색의 코드를 바로 찾을 수 있다.
• z-index: 화면에서 요소가 쌓이는 순서. 숫자가 높을수록 앞에 표시된다. 모달이 다른 요소 위에 나타나는 것이 z-index 덕분이다.