99개 항목 · 2026-11-02 기준

웹 UI 용어 사전 Web UI Glossary

용어마다 핵심 문법 표, 직접 눌러 볼 수 있는 예시, 복사해서 쓰는 코드를 한 카드에 담았습니다. 필요할 때 위의 검색창에 한글이나 영어로 입력해 찾으세요.

공통 용어 보기

UI

User Interface, 사용자가 눈으로 보고 누르는 화면 구성

HTML

HyperText Markup Language, 화면의 구조를 적는 언어

CSS

Cascading Style Sheets, 화면의 모양과 배치를 정하는 언어

JavaScript

자바스크립트, 화면에 동작을 넣는 언어

SVG

Scalable Vector Graphics, 확대해도 깨지지 않는 벡터 그림 형식

Canvas

캔버스, 자바스크립트로 점과 도형을 직접 그리는 영역

ARIA

Accessible Rich Internet Applications, 화면 낭독기 같은 보조 기술에 역할과 상태를 알려 주는 속성

FPS

Frames Per Second, 1초에 화면이 갱신되는 횟수

CDN

Content Delivery Network, 라이브러리 파일을 빠르게 내려받게 해 주는 배포망

코드 사용법 (처음 쓰신다면 먼저 읽어 주세요)

1. 복사

카드의 “코드 보기”를 열고 “복사” 버튼을 누릅니다.

2. 저장

빈 파일에 붙여넣고 이름.html로 저장합니다. 코딩용 편집기(예: VS Code)를 쓰면 가장 안전합니다.

Mac

TextEdit(텍스트 편집기)는 먼저 메뉴 포맷 → 일반 텍스트로 만들기(Shift+Command+T)를 누른 뒤 붙여넣고 저장하세요. 그렇지 않으면 코드가 화면에 글자 그대로 보입니다.

Windows

메모장은 저장할 때 파일 형식을 “모든 파일”, 인코딩을 UTF-8로 두고 이름 끝에 .html을 붙입니다. 이름이 .html.txt가 되지 않았는지 확인하세요.

3. 열기

저장한 파일을 더블클릭해 브라우저(Chrome 등)로 엽니다.

안내

99개 카드 모두 위 방법으로 바로 열리는 완성본입니다. 일부 카드(React 관련 등)는 개념을 순수 자바스크립트로 흉내 낸 데모이며, 실제 React 코드는 주석으로만 적었습니다(확인 필요).