본문으로 이동

탭 (인터페이스)

위키백과, 우리 모두의 백과사전.
두 종류의 탭 세트가 있는 탭 인터페이스의 예시: 상단의 가로 탭은 위키낱말사전 웹사이트 내의 다른 페이지로 이동할 수 있게 해준다. 왼쪽의 세로 탭은 해당 철자가 나타나는 언어들을 나타내며, 선택된 탭은 에스페란토로 'jam'('이미')이라는 단어를 보여주고 있다.

인터페이스 디자인에서 탭(tab)은 단일 창 내에 여러 문서나 패널을 포함할 수 있게 하는 그래픽 사용자 인터페이스 객체로, 문서 세트 사이를 전환하기 위한 탐색 위젯으로 탭을 사용한다.[1] 이는 웹 브라우저, 웹 애플리케이션, 문서 편집기, 설정 패널, 창 관리자 및 타일링 창 관리자와 가장 흔히 연관되는 인터페이스 스타일이다.

탭은 종이 파일이나 카드 색인에 삽입된 전통적인 카드 탭을 모델로 한다(데스크톱 메타포를 따름). 일반적으로 웹페이지나 앱에서 종이에 표시된 것과 같은 그래픽으로 표시된다.

탭은 가로 표시줄이나 세로 목록 형태로 나타날 수 있다. 가로 탭은 여러 줄로 구성될 수도 있다. 어떤 경우에는 드래그 앤드 드롭 상호작용을 통해 탭의 순서를 바꾸거나 여러 줄로 정리할 수 있다. 구현 방식에 따라 기존 탭을 별도의 창에서 열거나, 이동·닫기·분리하기 위해 여러 탭을 범위 선택하는 기능을 지원하기도 한다.[2]

역사

[편집]

1982년 IBM PC용으로 출시된 워드비전(WordVision) 워드 프로세서[3]는 아마도 탭 인터페이스를 갖춘 최초의 상용 제품이었을 것이다.[4]

NeWS 창 시스템에서 파이 메뉴를 사용하는 HyperTIES 브라우저와 고슬링 이맥스 저작 도구

돈 홉킨스(Don Hopkins)는 NeWS 창 시스템을 위한 여러 버전의 탭 창 프레임을 자유 소프트웨어로 개발 및 출시했다. 창 관리자는 이를 모든 NeWS 애플리케이션에 적용했으며, 사용자가 탭을 창의 어느 가장자리로든 드래그할 수 있게 했다.[5]

유니프레스(UniPress)의 고슬링 이맥스 문서 편집기 NeWS 버전은 1988년에 여러 개의 탭 창을 가진 또 다른 초기 제품이었다.[6] 이는 1988년 메릴랜드 대학교 인간-컴퓨터 상호작용 연구소에서 벤 슈나이더만(Ben Shneiderman)의 하이퍼미디어 브라우저 HyperTIES(Interactive Encyclopedia System의 NeWS 워크스테이션 버전)를 위한 저작 도구를 개발하는 데 사용되었다.[7][8] HyperTIES는 또한 포스트스크립트 애플릿을 사용하여 창을 관리하고 하이퍼미디어 문서를 탐색하기 위한 파이 메뉴를 지원했다.

Boeing Calc는 이미 적어도 1987년부터 (이른바 워드 패드로서) 탭 시트를 활용하고 있었으나,[9][10] 볼랜드의 쿼트로 프로가 1992년에 스프레드시트용 탭을 대중화했다. 1993년 마이크로소프트 워드는 하위 메뉴를 단순화하기 위해 탭을 사용했다.[4] 1994년 북링크 테크놀로지스는 인터넷워크(InternetWorks) 브라우저에서 탭 창을 선보였다. 같은 해, 울트라에디트 문서 편집기도 현대적인 다중 행 탭 인터페이스를 갖추고 등장했다. 탭 인터페이스 방식은 1997년 인터넷 익스플로러 셸인 넷캡터(NetCaptor)에 의해 계승되었다. 이후 1999년 아이브라우즈, 2000년 오페라(버전 4 출시와 함께 - 이전에도 MDI 인터페이스는 지원됨), 2000년 10월 멀티뷰(MultiViews) 등이 뒤를 이었으며, 멀티뷰는 2001년 4월 1일에 멀티질라(MultiZilla, 모질라 애플리케이션 스위트용 확장 기능[11])로 이름을 바꾸었다. 또한 2001년 초 Galeon, 2001년 10월 모질라 0.9.5, 2002년 10월 피닉스(Phoenix) 0.1(현 모질라 파이어폭스), 2003년 1월 Konqueror 3.1, 2003년 사파리가 그 뒤를 이었다. 2006년 인터넷 익스플로러 7의 출시와 함께 모든 주요 웹 브라우저는 탭 인터페이스를 갖추게 되었다.

사용자들은 웹 브라우징과 웹 검색에서 탭 사용을 빠르게 받아들였다. 2009년 6월 탭 브라우징 행태에 대한 연구에 따르면, 사용자들은 탭 세션의 57%에서 탭을 전환했으며, 사용자의 36%는 해당 기간 동안 적어도 한 번은 검색 엔진 결과를 열기 위해 새 탭을 사용했다.[12]

이후 수많은 추가 브라우저 탭 기능이 등장했다. 한 가지 예로 옴니웹 버전 5의 시각적 탭 브라우징이 있는데, 이는 기본 브라우저 창의 왼쪽이나 오른쪽에 있는 서랍에 페이지의 미리보기 이미지를 표시한다. 또 다른 기능은 탭의 순서를 재정렬하거나, 특정 창의 탭 패널에 열려 있는 모든 웹페이지를 그룹 또는 즐겨찾기 폴더로 북마크하는 기능(및 이들을 동시에 다시 여는 기능)이다. 마이크로소프트 인터넷 익스플로러는 탭 가족을 서로 다른 색상으로 표시한다.

개발

[편집]

애플리케이션의 탭 동작은 기반이 되는 위젯 툴킷(예: 파이어폭스는 GTK 사용) 프레임워크에 의해 결정된다. 표준화의 부재로 인해 애플리케이션마다 동작이 다를 수 있으며, 이는 사용성 문제로 이어질 수 있다.

탭 호딩

[편집]
탭 호더의 크로미엄 브라우저 탭 표시줄.

탭 호딩(Tab hoarding)은 웹 브라우저 탭을 디지털 방식으로 저장하는 행위이다. 사용자들은 (전용 알림 소프트웨어를 사용하는 대신) 조사하거나 완료해야 할 작업의 알림 용도로 탭을 쌓아둘 수 있다.[13] 탭을 정리하거나 주의를 집중시키기 위해 여러 브라우저 창을 사용할 수도 있지만,[13] 여러 창을 열어두는 것은 탭 혼란을 악화시킬 수 있다.[14]

탭 호딩은 심리적 스트레스와 정보 과다, 산만함 및 컴퓨터 성능 저하로 이어질 수 있다. 이는 열려 있는 탭 세트에 대한 정서적 애착으로 발전할 수 있으며, 충돌이나 기타 재기동 시 탭을 잃어버릴 수 있다는 두려움,[13] 그리고 반대로 탭이 제대로 복구되었을 때 느끼는 안도감을 포함한다.[15] 탭 호더들은 이러한 행동의 원인으로 불안, 포모(FOMO), 지연행동, 그리고 부실한 개인 정보 관리 관행을 꼽았다.[16][17][18][19][20]

탭 호딩의 유행은 모질라와 같은 브라우저 벤더들에 의해 인지되었으며, 브라우저와 확장 프로그램의 메모리 관리 및 탭 관리 기능에 영감을 주었다.[15] 이러한 기능에는 관련 탭을 시각적으로 정리하고 접을 수 있게 하는 탭 그룹화,[21] 탭을 하이퍼링크 목록으로 변환하는 기능,[19] 그리고 고수준의 작업을 탭 대신 일급 객체로 구성하는 대안적인 사용자 인터페이스 패러다임 등이 포함된다.[22][20] 2021년의 한 연구는 지식 노동자와 기타 사용자들이 브라우저 탭을 더 잘 관리하고 활용할 수 있도록 더 나은 도구와 웹 브라우저 코드 변경을 가능케 하는 UI 디자인 고려 사항을 개발했다.[20][23]

구현

[편집]

탭 기능을 포함하는 CSS 프레임워크에는 부트스트랩,[24] 테일윈드 CSS,[25] 파운데이션 등이 있다.[26]

탭 기능을 포함하는 위젯 툴킷에는 Notebook[27] 위젯을 사용하는 GTK와 TabBar[28] 위젯을 사용하는 Adwaita 라이브러리가 있다. 또한 QTabWidget 위젯을 사용하는 Qt가 있다.[29]

같이 보기

[편집]

각주

[편집]
  1. ↑ Khola, Vivek (2023년 2월 17일). “Tab (interface)”. 《www.blogger.com》.
  2. ↑ Elliott, Matt (2014년 1월 28일). “How to manipulate multiple tabs in Chrome or Firefox” (영어). 《CNET》. 2021년 10월 29일에 확인함.
  3. ↑ Manes, Stephen (1984년 4월 3일). “Taking A Gamble With Word Vision”. 《PC Magazine - The Independent Guide To IBM Personal Computers》. 3권 6호 (PC Communications Corp.). 211–221쪽. ISSN 0745-2500. 2015년 3월 17일에 원본 문서에서 보존된 문서. 2015년 2월 15일에 확인함.
  4. 1 2 Seymour, Jim (1994년 3월 15일). “Everything Old Is New Again”. 《PC Magazine》. 13권 5호 (Ziff-Davis Publishing Company). 99–100쪽. ISSN 0888-8507. 2015년 2월 15일에 확인함.
  5. ↑ Hopkins, Don (October 1989). “The Shape of PSIBER Space: PostScript Interactive Bug Eradication Routines”. 《Don Hopkins' Web Site》. 2010년 1월 3일에 원본 문서에서 보존된 문서. 2010년 3월 1일에 확인함.
  6. ↑ Hopkins, Don (1988년 8월 17일). “Email from Don Hopkins to James Gosling, David S H Rosenthal, Owen Densmore, Jerry Farrell about Text selection in NeMACS.”. 《Don Hopkins' Web Site》.
  7. ↑ Hopkins, Don (2005년 9월 29일). “HyperTIES Hypermedia Browser and Emacs Authoring Tool for NeWS”. 《Don Hopkins' Web Site》. 2010년 4월 27일에 원본 문서에서 보존된 문서. 2010년 3월 1일에 확인함.
  8. ↑ Hopkins, Don. “HCIL Demo - HyperTIES Authoring”. 《유튜브》.
  9. ↑ Malloy, Rich (June 1987). “Spreadsheets - This new crop of advanced programs offers multidimensionality and natural language” Sommer 1987 Bonus판. 《BYTE》. Review. 69–75쪽. 2020년 2월 12일에 확인함.
  10. ↑ corwyn. “Boeing Calc - The first truly 3-D spreadsheet.”. 2006년 2월 19일에 원본 문서에서 보존된 문서.
  11. ↑ van Rantwijk, HJ. “Mozdev.org - multizilla: history”. 모질라. 2008년 12월 7일에 원본 문서에서 보존된 문서. 2010년 3월 1일에 확인함.
  12. ↑ Jeff Huang, Ryen W. White (2010). 〈Parallel Browsing Behavior on the Web〉 (PDF). 《Proceedings of the 21st ACM Conference on Hypertext and Hypermedia (HT '10)》.
  13. 1 2 3 Ramis, Ali Jaffe (2023년 10월 24일). “Stop, Before You Close This Tab (or Any Others) …”. 《The New York Times》. 2024년 9월 25일에 확인함.
  14. ↑ Ma, Rongjun; Lassila, Henrik; Nurgalieva, Leysan; Lindqvist, Janne (2023년 4월 19일). 《When Browsing Gets Cluttered: Exploring and Modeling Interactions of Browsing Clutter, Browsing Habits, and Coping》. ACM. 1–29쪽. doi:10.1145/3544548.3580690. ISBN 978-1-4503-9421-5.
  15. 1 2 Ahmed, Zo (2024년 5월 5일). “Zero regrets: Firefox power user kept 7,500 tabs open for two years”. 《TechSpot》. 2024년 9월 25일에 확인함.
  16. ↑ Koebler, Jason (2015년 4월 3일). “I Live in a Digital Dumpster Fire”. 《VICE》. 2024년 9월 25일에 확인함.
  17. ↑ Cassella, Carly (2021년 5월 9일). “We're Getting Buried in Browser Tabs And Scientists Want to Fix It”. 《ScienceAlert》. 2024년 9월 25일에 확인함.
  18. ↑ Kehayias, John (2021년 1월 21일). “Death by 1,000 Tabs: Confessions of a Tab Hoarder”. 《VICE》. 2024년 9월 25일에 확인함.
  19. 1 2 Samuel, Alexandra (2017년 7월 11일). “Browser Tab Clutter Is The New Hoarding”. 《JSTOR Daily》. 2024년 9월 25일에 확인함.
  20. 1 2 3 “Overcoming tab overload: Researchers develop tool to better manage browser tabs” (영어). 《techxplore.com》. 2021년 6월 14일에 확인함.
  21. ↑ Navigation, Social Links (2020년 5월 13일). “Google is giving Chrome users a way out of tab overload hell”. 《TechRadar》. 2024년 9월 25일에 확인함.
  22. ↑ Kulkarni, Minchu; Kapoor, Kshitij; Madala, Deva Surya Vivek; Bansal, Sanchit; Hangal, Sudheendra (2019). 《Compartmentalizing web browsing with Sailboat》. ACM. 1–8쪽. doi:10.1145/3364183.3364187. ISBN 978-1-4503-7716-4.
  23. ↑ Chang, Joseph Chee; Hahn, Nathan; Kim, Yongsung; Coupland, Julina; Breneisen, Bradley; Kim, Hannah S; Hwong, John; Kittur, Aniket (2021년 5월 6일). 〈When the Tab Comes Due:Challenges in the Cost Structure of Browser Tab Usage〉. 《Proceedings of the 2021 CHI Conference on Human Factors in Computing Systems》. Association for Computing Machinery. 1–15쪽. doi:10.1145/3411764.3445585. ISBN 9781450380966. S2CID 233987809. Available under
  24. ↑ “Navs and tabs” (영어). 《getbootstrap.com》. 2025년 1월 27일에 확인함.
  25. ↑ “Tailwind CSS Tabs - Official Tailwind UI Components” (영어). 《www.tailwindui.com》. 2025년 1월 27일에 확인함.
  26. ↑ “Tabs | Foundation for Sites 6 Docs” (영어). 《get.foundation》. 2025년 1월 27일에 확인함.
  27. ↑ “Gtk.Notebook” (영어). 《docs.gtk.org》. 2025년 1월 27일에 확인함.
  28. ↑ “Adw.TabBar” (영어). 《gnome.pages.gitlab.gnome.org》. 2025년 1월 27일에 확인함.
  29. ↑ “QTabWidget Class | Qt Widgets 6.8.1”. 《doc.qt.io》. 2025년 1월 27일에 확인함.
원본 주소 "https://ko.wikipedia.org/w/index.php?title=탭_(인터페이스)&oldid=42265159"