본문 바로가기

나의 FE피봇이야기/UI

[UI] 텝(tabs)으로 구성할 것인가? 페이지(pages)로 구성할 것인가?

홈페이지를 만들다 보면 종종 몇가지 질문데 부딧치게 된다.

이 페이지는 어떻게 구성해야 사용자가 훨씬 편리하게 사용할수 있을까?

이번엔 콘텐츠를 바탕으로 텝(a tab)과 페이지(a page)로 어떻게 구성할 것인가에 대해서 논의해보도록 한다.

 

텝이란?

쇼핑물 상세페이지
Google Material Design(Mobile)

 

인터페이스 디자인에서 탭은 여러 문서 또는 패널을 단일 창에 포함할 수 있는 그래픽 사용자 인터페이스 개체이다.

 

특징

탭은 사용자가 앞뒤로 이동할 필요 없이 여러 페이지 사이를 쉽게 전환할 수 있게 해주고 인터페이스 공간을 절약하는 데 유용할 수 있다. 하지만 너무 많은 탭이 열려 있으면 복잡해지고 사용자가 원하는 정보를 찾기 어려워질 수 있다

  • 탭을 사용하면 공간을 절약하고 사용자가 앞뒤로 이동할 필요 없이 여러 페이지 사이를 빠르게 전환
  • 탭은 한 페이지에서 관련 콘텐츠나 여러 페이지를  이동가능

 

 

 

페이지이란

페이지는 웹/앱에서 별도의 페이지를 의미한다. 공간을 구성한때 아에 따로 공간을 만드는 것이다.

 

특징

별도의 페이지는 특정 작업이나 주제에 대해 더 많은 컨텍스트를 제공하고 집중할 수 있으며, 콘텐츠를 정리하고 혼란을 줄이는 데 유용할 수 있다. 하지만 개별 페이지를 너무 많이 열면 페이지 사이를 탐색하기 어렵다.

 

  • 별도의 페이지는 더 많은 컨텍스트를 제공하고 특정 주제나 작업에 집중 가능
  • 별도의 페이지는 콘텐츠를 정리하고 혼란을 줄이는 데 유용
  • 개별 페이지를 너무 많이 열면 페이지 사이를 탐색하기 어려울  수 있음

 

 

만약 이런 것이 생각 나지 않는다면?

페이지를 인쇄한다고 생각해보라, 만약 사용자가 이 내용을 한번에 인쇄하고 싶다면 TAB을 사용하게 좋다.

반면에 사용자가 나눠서 인쇄하고 있다면 PAGE로 구성하는 것이 좋다.

 

참조

GPT chat

https://www.freshconsulting.com/insights/blog/uiux-principle-21-when-and-when-not-to-use-tabs/