웹페이지 기획과 사용자 경험(UX) 디자인, 그리고 실제 구현 과정에서 자주 쓰이는 핵심 용어들

웹페이지 기획과 사용자 경험(UX) 디자인, 그리고 실제 구현 과정에서 자주 쓰이는 핵심 용어들을 기능별로 분류하여 정리해 드립니다.

1. 콘텐츠 탐색 및 배치 (Navigation & Layout)

• 페이지네이션 (Pagination): 콘텐츠를 여러 페이지로 나누어 배치하고, 하단에 숫자 버튼(1, 2, 3...)을 두어 이동하게 하는 방식입니다. 게시판이나 검색 결과에서 흔히 볼 수 있습니다.

• 무한 스크롤 (Infinite Scroll): 사용자가 페이지 하단에 도달할 때마다 새 콘텐츠를 자동으로 불러오는 방식입니다. 인스타그램이나 유튜브처럼 끊김 없는 탐색이 중요할 때 사용합니다.

• CTA (Call To Action): '구매하기', '회원가입'처럼 사용자의 클릭이나 특정 행동을 유도하는 버튼이나 문구를 뜻합니다. 마케팅 성과에 매우 중요한 요소입니다.
• 모달/팝업 (Modal/Popup): 현재 페이지 위에 새로운 창이 뜨는 형태입니다. '모달'은 배경이 어두워지며 해당 창을 닫기 전까지 본문을 조작할 수 없는 형태를 주로 말합니다.
• 브레드크럼 (Breadcrumbs): 사용자가 현재 사이트 내 어디에 있는지 보여주는 경로 표시입니다. (예: 홈 > 제품 > 노트북 > 삼성)

---

2. 디자인 및 반응형 요소 (UI/UX)

• 레이아웃 (Layout): 웹페이지의 구성 요소(로고, 메뉴, 본문, 푸터 등)를 배치하는 전체적인 틀입니다.
• 와이어프레임 (Wireframe): 디자인 시작 전, 뼈대만 대략적으로 그린 설계도입니다. 색상 없이 도형과 선으로만 기능을 표현합니다.
• 뷰포트 (Viewport): 웹페이지가 사용자에게 실제로 보여지는 화면 영역입니다. 기기(모바일/PC)마다 뷰포트 크기가 달라집니다.
• 햄버거 메뉴 (Hamburger Menu): 주로 모바일에서 볼 수 있는 세 줄 형태(≡)의 아이콘입니다. 클릭하면 숨겨진 전체 메뉴가 나타납니다.
• 파비콘 (Favicon): 브라우저 탭 왼쪽이나 즐겨찾기에 표시되는 작은 아이콘입니다.

---

3. 기능 및 데이터 처리 (Functional)

• 플레이스홀더 (Placeholder): 입력창(Input)에 무엇을 적어야 할지 안내하기 위해 미리 연하게 적혀 있는 예시 문구입니다.
• 툴팁 (Tooltip): 특정 요소에 마우스를 올렸을 때 나타나는 짧은 설명 창입니다.
• 스켈레톤 UI (Skeleton UI): 데이터가 로딩되는 동안 실제 콘텐츠의 윤곽을 회색 박스 형태로 미리 보여주어 사용자의 지루함을 줄여주는 기법입니다.
• API 호출 (API Fetching): 프론트엔드가 백엔드 서버에 "데이터를 달라"고 요청하는 행위입니다.

---

4. 성능 및 최적화 (Optimization)

• SEO (Search Engine Optimization): 검색 엔진 최적화. 구글이나 네이버 같은 검색 결과 상단에 우리 웹사이트가 잘 노출되도록 기술적으로 관리하는 작업입니다.
• 캐싱 (Caching): 자주 사용하는 데이터를 임시 저장소에 보관하여, 다음 접속 시 서버 요청 없이 빠르게 화면을 보여주는 기술입니다.
• Lazy Loading (지연 로딩): 페이지 내의 이미지를 한꺼번에 다 불러오지 않고, 사용자가 스크롤해서 해당 이미지 근처에 왔을 때만 로딩하여 초기 속도를 높이는 방식입니다.

---

핵심 용어 요약 목록

 

페이지네이션	콘텐츠를 쪽수로 나누기	안정적인 정보 탐색
무한 스크롤	스크롤하면 끝없이 나옴	소셜 미디어 특화
CTA	행동 유도 버튼	마케팅/전환 핵심
모달	페이지 위 레이어 팝업	집중도 필요시 사용
와이어프레임	화면 설계 뼈대	기획 단계 필수
SEO	검색 노출 최적화	웹 홍보 핵심