컴포넌트 이해하기: 웹의 뼈대와 흐름을 만드는 컴포넌트 – 웹디자인 강좌 1-6

웹 UI 컴포넌트란?

컴포넌트는 웹페이지를 구성하는 재사용 가능한 UI 단위입니다.

버튼과 배지, 입력창처럼 비교적 작은 요소부터 내비게이션 바와 탭, 페이지네이션처럼 여러 요소가 조합된 구조까지 다양한 형태가 있습니다.

웹페이지는 이러한 컴포넌트를 조합해 만들어집니다.

예를 들어 로그인 화면은 다음과 같은 컴포넌트로 구성할 수 있습니다.

이메일 입력창
비밀번호 입력창
로그인 버튼
비밀번호 찾기 링크
오류 메시지
소셜 로그인 버튼

각 요소를 화면마다 새롭게 만드는 것이 아니라, 일정한 규칙을 가진 컴포넌트로 만들어 여러 화면에서 재사용하는 것이 핵심입니다.

컴포넌트를 재사용하는 이유

웹사이트에는 같은 형태와 기능을 가진 요소가 반복해서 등장합니다.

로그인 버튼이 여러 페이지에 들어갈 수 있고, 게시물 목록에는 같은 형태의 카드가 반복될 수 있습니다. 헤더와 페이지네이션처럼 여러 화면에서 공통으로 사용하는 요소도 있습니다.

이러한 요소를 매번 새롭게 디자인하면 페이지마다 크기와 색상, 여백, 상태 표현이 달라질 수 있습니다.

반면 컴포넌트로 관리하면 동일한 규칙을 유지하면서 필요한 화면에 반복해서 사용할 수 있습니다.

컴포넌트화는 다음과 같은 부분에 도움이 됩니다.

반복되는 UI를 효율적으로 제작할 수 있습니다.
여러 페이지에서 일관된 디자인을 유지할 수 있습니다.
컴포넌트의 수정 사항을 관련 화면에 반영하기 쉽습니다.
디자이너와 개발자가 동일한 단위를 기준으로 소통할 수 있습니다.
기본 상태와 선택, 비활성화 같은 상태를 체계적으로 관리할 수 있습니다.

컴포넌트는 단순히 작업 시간을 줄이기 위한 복사 가능한 요소가 아닙니다. 웹사이트의 규칙과 사용 방식을 반복해서 전달하는 UI 단위입니다.

작은 컴포넌트가 모여 하나의 화면이 된다

컴포넌트는 크기와 역할에 따라 다양한 수준으로 구성됩니다.

버튼과 배지, 입력창처럼 하나의 기능을 담당하는 작은 컴포넌트가 있고, 여러 요소가 결합된 카드와 검색창, 내비게이션처럼 더 큰 컴포넌트도 있습니다.

예를 들어 내비게이션 바는 다음과 같은 요소를 포함할 수 있습니다.

로고
메뉴 링크
드롭다운 버튼
검색창
로그인 버튼
회원가입 CTA
모바일 메뉴 버튼

이처럼 작은 단위가 조합되어 더 큰 UI를 만들고, 여러 UI가 다시 조합되어 하나의 페이지를 구성합니다.

따라서 웹디자인을 공부할 때는 화면 전체를 하나의 이미지처럼 바라보기보다, 어떤 컴포넌트들이 어떤 역할로 조합되어 있는지 나누어 살펴보는 것이 좋습니다.

웹의 뼈대와 흐름을 만드는 컴포넌트

웹사이트는 한 장짜리 포스터가 아닙니다.

사용자는 페이지를 위에서 아래로 스크롤하고, 메뉴를 눌러 다른 페이지로 이동하며, 자신이 원하는 정보나 기능을 찾아갑니다.

이 과정에서 사용자는 계속해서 다음과 같은 내용을 파악해야 합니다.

현재 어느 페이지에 있는가?
어떤 페이지로 이동할 수 있는가?
현재 어떤 항목이 선택되어 있는가?
콘텐츠가 더 있는가?
이전 또는 다음 콘텐츠로 어떻게 이동하는가?

웹사이트에는 이러한 위치와 이동 흐름을 도와주는 컴포넌트가 필요합니다.

대표적으로 다음 네 가지가 있습니다.

내비게이션 바
브레드크럼
탭
페이지네이션

각 컴포넌트는 비슷하게 여러 항목을 보여주지만 담당하는 역할은 서로 다릅니다.

내비게이션 바란?

내비게이션 바는 사용자가 웹사이트의 주요 페이지와 기능으로 이동할 수 있도록 제공하는 컴포넌트입니다.

보통 웹사이트 상단의 헤더 안에 배치되며, 사이트 전체에서 사용할 수 있는 주요 이동 경로를 보여줍니다.

내비게이션 바에는 일반적으로 다음과 같은 요소가 포함됩니다.

로고
주요 메뉴
하위 메뉴
로그인
검색
회원가입
문의하기
주요 CTA

내비게이션 바는 단순한 메뉴 목록이 아닙니다.

사용자가 사이트 안에서 길을 잃지 않도록 돕는 지도와 같은 역할을 합니다. 사용자는 내비게이션을 통해 어떤 콘텐츠가 있는지 파악하고 자신이 원하는 페이지로 이동할 수 있습니다.

내비게이션 메뉴의 개수를 조절해야 하는 이유

헤더에 배치할 수 있는 가로 공간은 제한되어 있습니다.

메뉴를 너무 많이 배치하면 각 항목 사이의 간격이 좁아지고, 검색이나 로그인, CTA 버튼을 배치할 공간도 부족해질 수 있습니다.

화면의 너비가 줄어드는 반응형 환경도 고려해야 합니다.

메뉴가 지나치게 많으면 사용자는 어떤 항목을 먼저 선택해야 하는지 판단하기 어려워질 수 있습니다. 따라서 모든 페이지를 동일한 수준으로 노출하기보다 우선순위가 높은 메뉴를 선별해야 합니다.

내비게이션 메뉴를 정할 때는 다음 내용을 확인하는 것이 좋습니다.

사용자가 가장 자주 찾는 페이지는 무엇인가?
사이트에서 가장 중요하게 알리고 싶은 내용은 무엇인가?
하나의 메뉴 아래에 묶을 수 있는 페이지는 무엇인가?
헤더 대신 푸터에서 제공해도 되는 메뉴는 무엇인가?
화면이 좁아졌을 때 메뉴를 어떻게 정리할 것인가?

메뉴는 사이트 내부의 조직 구조보다 사용자가 이해하기 쉬운 분류와 이름을 기준으로 구성하는 것이 좋습니다.

하위 메뉴와 드롭다운

모든 메뉴가 하나의 페이지만 연결하는 것은 아닙니다.

특정 메뉴 안에 여러 하위 페이지가 포함되어 있다면 드롭다운 형태로 추가 메뉴를 보여줄 수 있습니다.

예를 들어 가격 메뉴처럼 하나의 페이지로 바로 이동하는 항목은 클릭 즉시 페이지로 연결할 수 있습니다.

반면 플랫폼이나 리소스처럼 여러 하위 페이지를 포함하는 메뉴는 클릭하거나 마우스를 올렸을 때 추가 메뉴를 보여줄 수 있습니다.

하위 항목이 많다면 일반적인 작은 드롭다운보다 넓은 영역을 사용하는 메가 메뉴를 활용할 수도 있습니다.

일반 드롭다운

비교적 적은 수의 하위 메뉴를 세로 목록으로 보여주는 방식입니다.

메가 메뉴

하위 메뉴가 많을 때 넓은 패널 안에서 항목을 그룹별로 분류해 보여주는 방식입니다. 제목과 설명, 아이콘, 추천 콘텐츠 등을 함께 배치할 수도 있습니다.

드롭다운과 메가 메뉴를 사용할 때는 사용자가 상위 메뉴에 하위 항목이 있다는 사실을 알 수 있도록 화살표와 같은 표시를 제공하는 것이 좋습니다.

현재 페이지를 표시하는 활성 상태

사용자가 현재 보고 있는 페이지가 무엇인지 내비게이션에서 명확하게 표시해야 합니다.

예를 들어 가격 페이지를 보고 있다면 내비게이션의 가격 메뉴를 다른 메뉴와 구분해 보여줄 수 있습니다.

활성 상태는 다음과 같은 방법으로 표현할 수 있습니다.

텍스트 색상을 변경합니다.
글자 두께를 높입니다.
메뉴 아래에 선을 추가합니다.
배경색을 적용합니다.
별도의 인디케이터를 표시합니다.

현재 위치를 표현하지 않으면 사용자는 페이지 제목을 확인하기 전까지 자신이 어느 메뉴에 들어와 있는지 파악하기 어려울 수 있습니다.

선택 상태는 디자인을 강조하기 위한 장식이 아니라 사용자의 현재 위치를 알려주는 중요한 피드백입니다.

스크롤에 따라 달라지는 내비게이션

내비게이션 바는 스크롤 상황에 따라 형태나 동작이 달라질 수 있습니다.

스티키 내비게이션

페이지를 아래로 스크롤해도 헤더가 화면 상단에 고정되는 방식입니다.

페이지가 길더라도 사용자가 메뉴를 이용하기 위해 다시 맨 위로 올라갈 필요가 없습니다.

헤더가 콘텐츠 위에 고정될 때는 아래쪽에 테두리나 그림자, 배경색을 추가해 콘텐츠 영역과 구분할 수 있습니다.

스크롤 시 숨겨지는 내비게이션

사용자가 아래로 스크롤할 때는 헤더가 사라지고, 위쪽으로 스크롤하면 다시 나타나는 방식입니다.

콘텐츠를 읽는 동안에는 헤더가 차지하는 공간을 줄이고, 사용자가 이전 영역이나 메뉴로 이동하려 할 때 다시 내비게이션을 제공할 수 있습니다.

이 방식은 콘텐츠의 집중도를 높이면서도 필요한 순간에 메뉴에 접근할 수 있도록 합니다.

내비게이션 동작은 시각적인 재미보다 페이지의 길이와 콘텐츠 성격, 사용자가 메뉴를 얼마나 자주 이용하는지를 기준으로 선택해야 합니다.

반응형 내비게이션을 설계하는 방법

데스크톱에서는 여러 메뉴를 가로로 배치할 수 있지만, 화면이 좁아지면 메뉴를 모두 보여주기 어렵습니다.

이때 특정 브레이크포인트를 기준으로 내비게이션의 형태를 변경할 수 있습니다.

대표적인 방식은 다음과 같습니다.

햄버거 메뉴

주요 메뉴를 세 줄 형태의 메뉴 버튼 안에 넣는 방식입니다.

버튼을 누르면 화면 위에 메뉴가 펼쳐지거나, 측면에서 메뉴 패널이 나타날 수 있습니다.

메뉴 개수 축소

모바일에서는 핵심 기능만 헤더에 남기고 나머지 메뉴는 별도의 메뉴 화면에서 제공할 수 있습니다.

반응형 내비게이션을 설계할 때는 단순히 메뉴를 숨기는 데서 끝나지 않아야 합니다. 사용자가 모바일에서도 동일한 주요 페이지와 기능에 접근할 수 있어야 합니다.

내비게이션 바 디자인 체크리스트

로고와 주요 메뉴를 쉽게 찾을 수 있는가?
메뉴의 개수가 지나치게 많지 않은가?
메뉴가 중요도에 따라 정리되어 있는가?
하위 메뉴가 있다는 사실을 알아볼 수 있는가?
현재 페이지가 다른 메뉴와 구분되는가?
스티키 상태에서 콘텐츠와 헤더가 구분되는가?
모바일에서도 주요 메뉴에 접근할 수 있는가?
햄버거 메뉴를 열고 닫는 방법이 명확한가?
로그인과 CTA 같은 기능이 메뉴와 구분되는가?
키보드로도 메뉴와 하위 메뉴를 탐색할 수 있는가?

브레드크럼이란?

브레드크럼은 사용자가 사이트 구조 안에서 현재 어느 위치에 있는지 보여주는 경로 표시 컴포넌트입니다.

보통 홈을 시작점으로 하여 상위 페이지와 카테고리, 현재 페이지까지의 경로를 순서대로 보여줍니다.

예를 들어 UX 리서치에 관한 아티클이라면 다음과 같이 표시할 수 있습니다.

홈 > 아티클 > UX 리서치 > 인터뷰 질문지 만들기

사용자는 이 경로를 통해 현재 콘텐츠가 사이트의 어떤 카테고리에 포함되어 있는지 이해할 수 있습니다.

브레드크럼이 필요한 이유

콘텐츠의 깊이가 얕은 소규모 웹사이트에서는 현재 위치를 쉽게 파악할 수 있습니다.

하지만 블로그와 뉴스, 쇼핑몰, 문서 사이트처럼 카테고리와 하위 페이지가 많은 사이트에서는 사용자가 검색이나 외부 링크를 통해 깊은 페이지로 바로 들어올 수 있습니다.

이때 브레드크럼은 다음과 같은 역할을 합니다.

현재 페이지의 위치를 알려줍니다.
상위 카테고리와 페이지 구조를 보여줍니다.
이전 단계의 페이지로 이동할 수 있게 합니다.
사용자가 사이트 구조를 이해하도록 돕습니다.

브레드크럼은 사용자가 이전에 방문한 페이지의 기록을 보여주는 기능과는 다릅니다. 현재 페이지가 사이트의 정보 구조 안에서 어디에 포함되어 있는지 보여주는 컴포넌트입니다.

브레드크럼의 현재 페이지 처리

브레드크럼의 마지막 항목은 현재 보고 있는 페이지를 의미합니다.

현재 페이지를 다시 클릭할 필요는 없으므로 일반적으로 클릭할 수 없는 상태로 처리합니다.

상위 경로와 현재 페이지도 시각적으로 구분해야 합니다.

예를 들어 상위 경로는 링크 색상으로 표현하고, 현재 페이지는 더 진한 글자나 일반 텍스트로 표시할 수 있습니다.

구분 기호에는 다음과 같은 표현을 사용할 수 있습니다.

>
/
오른쪽 화살표 아이콘
쉐브론 아이콘

구분 기호가 너무 강하게 보이면 실제 메뉴보다 더 눈에 띌 수 있으므로 경로의 관계만 이해할 수 있는 수준으로 표현하는 것이 좋습니다.

모바일에서 브레드크럼 처리하기

브레드크럼은 경로가 깊어질수록 가로 공간을 많이 사용합니다.

모바일에서는 전체 경로가 여러 줄로 내려가거나 현재 페이지 제목과 겹칠 수 있습니다.

따라서 좁은 화면에서는 다음과 같은 방식을 고려할 수 있습니다.

일부 중간 경로를 생략합니다.
바로 위 상위 페이지까지만 보여줍니다.
긴 항목을 축약합니다.
필요성이 낮다면 브레드크럼을 숨깁니다.

모바일에서 내용을 줄이더라도 사용자가 이전 단계나 상위 카테고리로 이동해야 하는 상황이 있다면 최소한의 경로는 제공하는 것이 좋습니다.

브레드크럼 디자인 체크리스트

현재 페이지의 위치를 이해할 수 있는가?
상위 페이지의 순서가 실제 구조와 일치하는가?
상위 경로를 클릭해 이동할 수 있는가?
현재 페이지는 클릭 불가능한 상태로 구분되는가?
경로 사이의 구분 기호가 명확한가?
현재 페이지와 상위 링크가 시각적으로 구분되는가?
경로가 길어졌을 때 레이아웃이 깨지지 않는가?
모바일에서 축약하거나 생략할 기준이 있는가?

탭이란?

탭은 같은 화면 안에서 콘텐츠를 전환할 때 사용하는 컴포넌트입니다.

여러 정보 그룹을 하나의 영역에 배치하되, 선택한 항목의 내용만 보여주는 방식입니다.

탭의 중요한 특징은 사용자가 다른 페이지로 이동하는 것이 아니라 현재 화면 안에서 표시되는 콘텐츠가 변경된다는 점입니다.

예를 들어 상품 상세 페이지에서는 다음과 같은 정보를 탭으로 구분할 수 있습니다.

상품 설명
상세 정보
후기
배송 안내
교환 및 환불

사용자가 후기 탭을 선택하면 같은 화면 안에서 후기 콘텐츠가 표시됩니다.

탭은 언제 사용하는가?

탭은 서로 관련된 콘텐츠를 같은 수준의 그룹으로 나누어 보여줄 때 적합합니다.

다음과 같은 상황에서 사용할 수 있습니다.

하나의 상품에 관한 세부 정보를 구분할 때
설정 화면의 여러 항목을 구분할 때
기간이나 카테고리에 따라 데이터를 전환할 때
하나의 컴포넌트 안에서 서로 다른 예시를 보여줄 때
화면 공간을 과도하게 늘리지 않고 관련 정보를 정리할 때

탭에 너무 많은 항목을 넣으면 사용자가 전체 내용을 파악하기 어려울 수 있습니다.

또한 중요한 콘텐츠를 탭 안에 숨기면 사용자가 해당 탭을 선택하지 않고 지나칠 수 있으므로, 반드시 확인해야 하는 핵심 정보인지 검토해야 합니다.

탭 리스트와 탭 패널

탭 컴포넌트는 크게 탭 리스트와 탭 패널로 나눌 수 있습니다.

탭 리스트

사용자가 선택할 수 있는 탭 항목이 모여 있는 영역입니다.

예를 들어 개요, 기능, 요금제와 같은 메뉴 항목이 탭 리스트에 해당합니다.

탭 패널

선택된 탭에 따라 실제 콘텐츠가 표시되는 영역입니다.

사용자가 기능 탭을 선택하면 기능에 관한 내용이 탭 패널에 나타납니다.

탭을 설계할 때는 어떤 탭과 어떤 패널이 연결되는지 명확해야 합니다.

선택된 탭을 명확하게 보여주는 방법

탭은 현재 어떤 항목이 선택되어 있는지 즉시 알아볼 수 있어야 합니다.

선택 상태가 명확하지 않으면 사용자는 어떤 기준으로 아래 콘텐츠가 표시되고 있는지 이해하기 어렵습니다.

대표적인 활성 상태 표현은 다음과 같습니다.

선택된 탭 아래에 선을 추가합니다.
선택된 탭의 글자 색상을 변경합니다.
선택된 탭의 글자 두께를 높입니다.
선택된 탭을 알약 형태의 배경으로 감쌉니다.
선택된 탭에 별도의 인디케이터를 추가합니다.

색상만 변경하면 시각적으로 구분하기 어려운 사용자가 있을 수 있으므로 글자 두께와 밑줄, 배경 등의 표현을 함께 사용하는 것이 좋습니다.

탭 항목이 많거나 길어질 때

탭의 이름이 길거나 항목의 개수가 많으면 좁은 화면에서 한 줄에 모두 배치하기 어렵습니다.

이때는 다음과 같은 방식을 사용할 수 있습니다.

탭 리스트를 가로로 스크롤할 수 있게 합니다.
우선순위가 낮은 탭을 더보기 메뉴에 넣습니다.
모바일에서 드롭다운 형태로 변경합니다.
여러 줄 탭보다 다른 탐색 구조를 검토합니다.

가로 스크롤 방식을 사용할 때는 화면 밖에도 탭이 더 있다는 사실을 사용자가 인식할 수 있도록 일부 항목을 살짝 노출하거나 별도의 시각적 단서를 제공하는 것이 좋습니다.

탭과 내비게이션의 차이

탭과 내비게이션은 모두 여러 항목 중 하나를 선택하는 형태로 보일 수 있습니다.

그러나 이동 범위와 목적에는 차이가 있습니다.

탭

같은 화면이나 콘텐츠 영역 안에서 정보 그룹을 전환합니다.

페이지 전체를 이동하기보다 현재 영역의 내용이 변경됩니다.

탭을 일반 메뉴처럼 사용하거나, 페이지 이동 메뉴를 탭처럼 표현하면 사용자가 선택 결과를 잘못 예상할 수 있습니다.

컴포넌트의 시각적인 형태보다 실제 동작과 역할에 맞는 이름과 구조를 사용하는 것이 중요합니다.

탭 디자인 체크리스트

탭이 페이지 이동이 아닌 콘텐츠 전환에 사용되고 있는가?
각 탭의 정보가 서로 같은 수준으로 분류되어 있는가?
선택된 탭을 즉시 알아볼 수 있는가?
비활성 탭도 클릭 가능한 항목처럼 보이는가?
선택 상태를 색상에만 의존하지 않는가?
탭 리스트와 탭 패널의 관계가 명확한가?
탭 이름이 지나치게 길지 않은가?
탭이 많을 때 스크롤이나 더보기 방식을 제공하는가?
모바일에서도 선택 상태와 추가 항목을 확인할 수 있는가?

페이지네이션이란?

페이지네이션은 많은 콘텐츠를 여러 페이지로 나누어 보여주는 컴포넌트입니다.

게시판과 블로그 목록, 검색 결과, 상품 목록처럼 콘텐츠의 개수가 많은 화면에서 자주 사용합니다.

예를 들어 수백 개의 무료 폰트 목록을 한 페이지에서 모두 불러오면 페이지 로딩에 많은 시간이 걸릴 수 있습니다.

이때 한 페이지에 12개나 20개처럼 일정한 수의 콘텐츠만 보여주고, 나머지 콘텐츠는 다음 페이지에서 확인하도록 나눌 수 있습니다.

페이지네이션은 콘텐츠의 양을 관리하면서 사용자가 다음 결과로 이동할 수 있도록 돕습니다.

페이지네이션이 필요한 이유

웹페이지의 콘텐츠는 서버에서 데이터를 불러와 화면에 표시하는 경우가 많습니다.

한 번에 지나치게 많은 데이터를 불러오면 초기 로딩 시간이 길어지고 화면이 복잡해질 수 있습니다.

페이지네이션을 사용하면 다음과 같은 방식으로 콘텐츠를 나눌 수 있습니다.

한 페이지에 12개의 상품을 보여줍니다.
한 페이지에 20개의 검색 결과를 보여줍니다.
한 페이지에 10개의 게시물을 보여줍니다.
나머지 콘텐츠는 다음 번호를 눌러 확인합니다.

페이지네이션은 모든 데이터를 제거하는 것이 아니라 일정한 단위로 나누어 필요한 범위만 보여주는 방식입니다.

페이지네이션의 기본 구성

페이지네이션에는 일반적으로 다음 요소가 포함됩니다.

현재 페이지
이동 가능한 페이지 번호
이전 페이지 버튼
다음 페이지 버튼
필요한 경우 처음과 마지막 페이지 버튼

현재 페이지는 다른 번호와 명확하게 구분해야 합니다.

선택된 번호를 배경색으로 감싸거나 글자 두께와 색상을 변경할 수 있습니다. 현재 페이지를 다시 클릭할 필요가 없다면 비활성 상태로 처리할 수도 있습니다.

이전과 다음 버튼을 제공하면 사용자는 정확한 번호를 찾지 않아도 인접한 페이지로 이동할 수 있습니다.

페이지 번호를 모두 보여줄 필요는 없다

페이지의 수가 많다고 해서 1번부터 마지막 번호까지 모두 보여주면 페이지네이션 자체가 지나치게 길어질 수 있습니다.

이때는 현재 페이지를 중심으로 일부 번호만 보여주고, 생략된 구간을 말줄임표로 표현할 수 있습니다.

예를 들어 다음과 같이 구성할 수 있습니다.

이전 1 … 8 9 10 11 12 … 30 다음

사용자는 전체 페이지의 규모와 현재 위치를 확인하면서 가까운 페이지로 이동할 수 있습니다.

모바일에서 사용할 수 있는 더보기 패턴

모바일에서는 여러 페이지 번호를 한 줄에 배치하기 어렵습니다.

이때 숫자 페이지네이션 대신 더 보기 또는 더 불러오기 버튼을 사용할 수 있습니다.

사용자가 버튼을 누르면 기존 콘텐츠 아래에 다음 콘텐츠가 이어서 추가됩니다.

더보기 방식은 페이지를 전환하지 않고 목록을 계속 확인할 수 있다는 장점이 있습니다.

다만 새로운 콘텐츠가 추가된 뒤 현재 위치를 잃지 않도록 해야 하며, 사용자가 전체 결과의 규모나 불러온 양을 알 수 있도록 필요한 정보를 제공할 수 있습니다.

무한 스크롤이란?

무한 스크롤은 사용자가 화면 아래로 이동하면 다음 콘텐츠가 자동으로 불러와지는 방식입니다.

유튜브나 인스타그램 같은 콘텐츠 중심 서비스에서 자주 볼 수 있습니다.

사용자가 별도의 다음 버튼을 누르지 않아도 콘텐츠를 계속 탐색할 수 있으므로 연속적인 소비 경험을 만들 수 있습니다.

하지만 모든 웹사이트에 적합한 것은 아닙니다.

사용자가 특정 페이지나 결과의 위치를 기억해야 하거나, 푸터에 접근해야 하거나, 원하는 결과를 다시 찾아야 하는 경우에는 불편할 수 있습니다.

페이지네이션과 더보기, 무한 스크롤 비교

구분	페이지네이션	더보기	무한 스크롤
이동 방식	번호를 눌러 페이지 이동	버튼을 눌러 콘텐츠 추가	스크롤 시 자동으로 추가
현재 위치	페이지 번호로 파악하기 쉬움	불러온 콘텐츠 안에서 유지	정확한 위치를 파악하기 어려울 수 있음
사용자 제어	이동할 페이지를 선택 가능	사용자가 추가 시점을 결정	자동으로 콘텐츠가 계속 표시됨
적합한 상황	검색 결과, 게시판, 상품 목록	모바일 목록, 콘텐츠 탐색	SNS, 영상, 피드형 서비스
주요 장점	결과의 범위와 위치가 명확함	흐름을 유지하며 추가 탐색 가능	별도 조작 없이 연속 탐색 가능
주의점	모바일에서 번호가 복잡할 수 있음	전체 규모를 파악하기 어려울 수 있음	위치 기억과 푸터 접근이 어려울 수 있음

어떤 방식이 더 좋다고 단정할 수는 없습니다.

콘텐츠의 종류와 사용자의 목표, 서비스가 원하는 탐색 방식에 따라 적합한 패턴을 선택해야 합니다.

페이지네이션 디자인 체크리스트

한 페이지에 보여줄 콘텐츠 수가 적절한가?
현재 페이지를 쉽게 알아볼 수 있는가?
이전과 다음 페이지로 이동할 수 있는가?
클릭 가능한 번호와 현재 번호가 구분되는가?
페이지가 많을 때 일부 번호를 적절히 생략하는가?
버튼의 클릭 영역이 너무 작지 않은가?
모바일에서는 어떤 방식으로 전환할 것인가?
페이지 이동 후 사용자가 목록의 시작 위치를 확인할 수 있는가?
검색이나 필터 조건이 페이지 이동 후에도 유지되는가?
페이지네이션과 더보기, 무한 스크롤 중 목적에 맞는 방식을 사용했는가?

네 가지 구조형 컴포넌트 비교

컴포넌트	주요 역할	사용 범위	선택 결과
내비게이션 바	사이트의 주요 페이지와 기능 안내	사이트 전체	다른 페이지나 주요 기능으로 이동
브레드크럼	사이트 구조 안의 현재 위치 안내	계층이 깊은 페이지	상위 경로로 이동
탭	같은 화면 안의 정보 그룹 전환	특정 콘텐츠 영역	현재 영역의 콘텐츠 변경
페이지네이션	많은 콘텐츠를 여러 페이지로 분할	목록과 검색 결과	다른 결과 묶음으로 이동

네 가지 컴포넌트는 모두 사용자의 탐색을 돕지만 해결하는 문제가 다릅니다.

비슷하게 여러 메뉴를 나열한다고 해서 서로 대신 사용할 수 있는 것은 아닙니다. 현재 위치와 이동 범위, 선택 후 발생하는 결과를 기준으로 적절한 컴포넌트를 선택해야 합니다.

구조형 컴포넌트를 설계할 때 중요한 상태

구조와 탐색을 담당하는 컴포넌트는 기본 형태만 만드는 것으로 끝나지 않습니다.

사용자의 행동과 현재 상황을 표현하기 위한 다양한 상태가 필요합니다.

대표적인 상태는 다음과 같습니다.

기본 상태
마우스를 올린 Hover 상태
키보드로 선택한 Focus 상태
누르는 순간의 Active 상태
현재 선택된 Selected 상태
사용할 수 없는 Disabled 상태

특히 내비게이션과 탭, 페이지네이션에서는 현재 선택된 상태가 중요합니다.

사용자가 어느 페이지나 항목에 있는지 알아야 다음 이동을 결정할 수 있기 때문입니다.

상태를 설계할 때는 색상만 바꾸기보다 글자 두께와 배경, 밑줄, 인디케이터 등 여러 시각적 표현을 함께 고려하는 것이 좋습니다.

웹의 이동 흐름을 설계할 때 자주 발생하는 실수

모든 이동 요소를 같은 형태로 만든다

내비게이션과 탭, 페이지네이션이 모두 비슷한 텍스트 메뉴 형태로 보이면 사용자는 선택했을 때 어떤 변화가 일어날지 예상하기 어렵습니다.

컴포넌트의 역할과 이동 범위가 시각적으로 드러나도록 구분해야 합니다.

현재 위치를 표시하지 않는다

내비게이션과 브레드크럼, 탭, 페이지네이션에서 현재 상태가 표시되지 않으면 사용자는 자신이 어느 위치에 있는지 계속 추측해야 합니다.

선택 상태는 모든 구조형 컴포넌트에서 중요한 정보입니다.

메뉴를 지나치게 많이 노출한다

모든 페이지와 기능을 한 번에 보여주면 사용자의 선택 부담이 커집니다.

주요 메뉴와 보조 메뉴를 구분하고, 필요하면 드롭다운이나 메가 메뉴, 더보기 패턴을 활용해야 합니다.

데스크톱 화면만 고려한다

넓은 화면에서는 문제가 없어 보이던 메뉴와 탭, 페이지 번호가 모바일에서는 한 줄에 들어가지 않을 수 있습니다.

햄버거 메뉴와 가로 스크롤, 더보기, 축약 등의 반응형 방식을 함께 설계해야 합니다.

선택 상태를 색상에만 의존한다

색상 차이가 작거나 사용자가 색을 구분하기 어려운 경우 현재 선택된 항목을 파악하지 못할 수 있습니다.

밑줄과 글자 두께, 배경, 아이콘 등의 표현을 함께 사용하는 것이 좋습니다.

페이지 이동과 콘텐츠 전환을 혼동한다

사이트의 다른 페이지로 이동하는 메뉴를 탭으로 표현하거나, 같은 화면의 콘텐츠 전환을 주요 내비게이션처럼 표현하면 동작을 예상하기 어렵습니다.

UI의 외형보다 실제 역할을 먼저 정의해야 합니다.

웹디자이너를 위한 컴포넌트 체크리스트

반복되는 UI가 컴포넌트로 관리되고 있는가?
같은 역할의 컴포넌트가 페이지마다 동일하게 표현되는가?
컴포넌트의 기본 상태와 선택 상태가 구분되는가?
사용자가 현재 위치를 확인할 수 있는가?
사용자가 이동 가능한 경로를 이해할 수 있는가?
내비게이션 메뉴의 우선순위가 명확한가?
하위 메뉴가 있는 항목을 알아볼 수 있는가?
브레드크럼이 실제 사이트 계층을 올바르게 보여주는가?
탭이 같은 화면 안의 콘텐츠 전환에 사용되는가?
페이지네이션의 현재 번호가 명확한가?
모바일에서 각 컴포넌트가 자연스럽게 변경되는가?
항목이 많거나 이름이 길어졌을 때 대응할 수 있는가?
클릭과 Hover, Focus, Disabled 상태가 준비되어 있는가?
컴포넌트가 시각적인 장식이 아니라 실제 탐색을 돕고 있는가?

웹의 뼈대와 흐름을 만드는 컴포넌트 핵심 정리

컴포넌트는 웹페이지를 구성하는 재사용 가능한 UI 단위입니다.

버튼과 입력창 같은 작은 요소부터 내비게이션 바와 탭처럼 여러 요소가 결합된 구조까지 다양한 크기와 역할을 가질 수 있습니다.

이번 글에서 살펴본 구조형 컴포넌트는 사용자가 웹사이트 안에서 현재 위치를 이해하고 다음 이동 경로를 찾도록 돕습니다.

내비게이션 바는 사이트의 주요 페이지와 기능을 안내합니다. 메뉴가 많을 때는 드롭다운이나 메가 메뉴를 사용할 수 있고, 모바일에서는 햄버거 메뉴나 더보기 형태로 변경할 수 있습니다.

브레드크럼은 현재 페이지가 사이트 구조 안에서 어디에 있는지 보여줍니다. 탭은 페이지를 이동하지 않고 같은 화면 안의 콘텐츠를 전환합니다.

페이지네이션은 많은 콘텐츠를 일정한 수로 나누어 보여주며, 사이트 목적에 따라 더보기나 무한 스크롤 방식을 사용할 수도 있습니다.

각 컴포넌트의 외형만 기억하기보다 다음 질문을 기준으로 역할을 구분하는 것이 중요합니다.

사용자는 지금 어디에 있는가?
어디로 이동할 수 있는가?
선택하면 페이지가 이동하는가?
같은 화면의 콘텐츠만 바뀌는가?
다음 콘텐츠는 어떤 방식으로 불러오는가?

좋은 컴포넌트는 눈에 띄는 장식보다 사용자가 별도의 설명 없이 현재 위치와 이동 방법을 이해하도록 돕는 UI입니다.