용어정리 [용어] 프론트엔드 & 반응형 핵심 용어
페이지 정보
작성자 모던DS
조회 59회
조회 59회
본문
프론트엔드 & 반응형 핵심 용어
| 구분 | 용어 (Keyword) | 한글 발음 | 설명 |
| 개발 영역 | Frontend | 프론트엔드 | 사용자가 직접 보고 상호작용하는 웹 화면 제작 영역 |
| Backend | 백엔드 | 서버, 데이터베이스 등 화면 뒤에서 데이터를 처리하는 영역 | |
| 반응형 핵심 | Media Query | 미디어 쿼리 | 화면 너비에 따라 다른 CSS 스타일을 적용하는 핵심 기술 |
| Breakpoint | 브레이크포인트 | 화면 레이아웃이 변하는 기준점 (예: 768px, 1024px) | |
| Mobile First | 모바일 퍼스트 | 모바일 화면을 먼저 설계하고 큰 화면으로 확장하는 방식 | |
| 레이아웃 | Fluid Grid | 플루이드 그리드 | 고정 수치(px) 대신 비율(%)을 사용하는 유연한 격자 |
| Responsive Web | 리스폰시브 웹 | 화면 크기에 따라 레이아웃이 실시간으로 변하는 방식 | |
| 성능 최적화 | Lazy Loading | 레이지 로딩 | 이미지를 스크롤 시점에 맞춰 불러와 로딩 속도를 높이는 기술 |
| Caching | 캐싱 | 자주 쓰는 데이터를 미리 저장해 두어 빠르게 불러오는 방식 | |
| Minification | 미니피케이션 | 코드의 공백 등을 제거하여 파일 용량을 줄이는 압축 작업 | |
| 이미지/단위 | SVG | 에스브이지 | 확대해도 깨지지 않는 반응형에 최적화된 벡터 그래픽 |
| Rem / Em | 렘 / 엠 | 부모나 최상위 요소 크기에 비례하는 가변 폰트 단위 | |
| Object-fit | 오브젝트 핏 | 이미지가 박스 크기에 맞춰 어떻게 보여질지 결정하는 속성 | |
| 검색/공유 | SEO | 에스이오 | 검색 엔진에서 사이트가 잘 검색되도록 최적화하는 작업 |
| Open Graph (OG) | 오픈 그래프 | SNS 공유 시 미리보기 제목과 이미지를 제어하는 기술 | |
| 랜딩 페이지 | Landing Page | 랜딩 페이지 | 특정 목적(판매 등)을 위해 사용자가 처음 도달하는 페이지 |
| CTA | 씨티에이 | 구매하기' 등 사용자의 행동을 유도하는 버튼이나 문구 | |
| 설계/분석 | Above the Fold | 어보브 더 폴드 | 스크롤 전 화면에 가장 먼저 보이는 최상단 영역 |
| Hero Section | 히어로 섹션 | 페이지 최상단의 강렬한 이미지나 슬로건 영역 | |
| Conversion Rate | 컨버전 레이트 | 방문자가 구매 등 목표 행동을 수행하는 비율 (전환율) | |
| 사용자 경험 | UX / UI | 유엑스 / 유아이 | 사용자 경험(UX)과 사용자 인터페이스(UI) 디자인 |
| Web Accessibility | 웹 접근성 | 모든 사용자가 제약 없이 이용할 수 있게 보장하는 것 |
- 이전글[용어] 자바스크립트(JS) 핵심 용어 정리 26.02.27
- 다음글[용어] CSS3 핵심 용어 정리 26.02.27