📖 용어사전

mobile first

작은 모바일 화면을 기본으로 설계한 뒤 큰 화면을 확장하는 방식

breakpoint

반응형 레이아웃을 변경하는 기준 화면 너비

fluid layout

화면 크기에 따라 자연스럽게 늘어나는 레이아웃

responsive image

기기와 화면 크기에 따라 적절한 이미지 크기를 제공하는 방식

srcset

브라우저가 화면에 맞는 이미지 파일을 선택하게 하는 img 속성

rem

HTML 루트 글자 크기를 기준으로 계산하는 CSS 상대 단위

vw

브라우저 화면 너비의 1%를 나타내는 CSS 단위

touch target

모바일에서 손가락으로 누르기 충분한 클릭 영역

접근성

장애·기기·환경에 상관없이 서비스를 이용할 수 있도록 설계하는 원칙

WCAG

국제적으로 널리 쓰이는 웹 콘텐츠 접근성 가이드라인

스크린리더

화면의 텍스트와 UI 정보를 음성 등으로 읽어주는 보조기술

키보드 접근

마우스 없이 키보드만으로 기능을 사용할 수 있게 하는 것

ARIA

복잡한 웹 UI의 역할과 상태를 보조기술에 알려주는 표준

aria-label

화면에 텍스트가 없을 때 접근성 이름을 제공하는 ARIA 속성

대체 텍스트

이미지 내용을 텍스트로 설명하는 정보

색상 대비

글자와 배경을 충분히 구분해 읽기 쉽게 만드는 명도 차이

웹 성능

페이지가 얼마나 빠르게 로드되고 반응하는지를 나타내는 품질

이미지 최적화

이미지 크기·포맷·압축률을 조정해 로딩을 줄이는 작업

WebP

웹에 최적화된 압축 효율 좋은 이미지 포맷

lazy loading

화면에 필요해질 때 이미지나 코드를 늦게 불러오는 최적화

Lighthouse

성능·접근성·SEO 등을 자동 점검하는 브라우저 도구

Core Web Vitals

Google이 사용자 경험 평가에 쓰는 핵심 웹 성능 지표

LCP

큰 주요 콘텐츠가 표시되기까지 걸린 시간을 측정하는 지표

CLS

페이지 로딩 중 요소가 갑자기 움직이는 정도를 나타내는 지표

INP

사용자 입력 후 다음 화면 갱신까지 반응성을 나타내는 지표

TTFB

요청 후 서버의 첫 바이트를 받을 때까지 걸리는 시간

bundle size

브라우저가 다운로드해야 하는 빌드된 파일 크기

load test

많은 사용자가 접속했을 때 서버 성능과 한계를 측정하는 테스트

bottleneck

전체 처리 속도를 제한하는 가장 느린 지점

Figma

웹·앱 UI 디자인과 프로토타이핑·협업에 널리 쓰는 도구