즐겨찾기를 활용한 웹 인터랙션 디자인 연구 : 카탈로그 카드의 탐색 행위와 수행성을 중심으로 = A Study of Web Interaction Design Through Bookmarks:Exploration and Performativity in Catalog Cards

국문 초록 (Abstract)

본 연구는 디지털 환경 속에서 단순한 정보 저장 기능에 머물러 있는 웹 브라우저의 즐겨찾기를 사용자의 정보 탐색 경험과 기억 작용을 촉진하는 수행적 인터랙션 및 인터페이스로 재설계하는 데 목적이 있다.

인류는 디지털 기술의 발전을 통해 필요한 정보와 더불어 맞춤으로 제안되는 더 많은 정보에 쉽게 다가갈 수 있게 되었다. 그러나 이러한 기술적 편의성 이면에는 인간의 물리적 상호작용과 탐색, 경험을 통한 지식 습득 행위가 축소되고 정보의 맥락에 대한 기억 구성 방식이 점차 단편화되는 문제가 있다. 이를 해결하기 위해 웹페이지에 내장된 메타데이터를 활용하는 분류 기반의 접근과, 저장된 즐겨찾기의 탐색 과정을 행위로 전환하기 위한 상호작용 기반의 접근, 행위의 시각적 연출을 위한 공연학적 접근 방식을 적용한다.

이를 위해 먼저 웹 브라우저와 즐겨찾기의 역사적, 기능적 배경을 고찰하고 상용 브라우저의 즐겨찾기 인터페이스를 분석하였다. 설문을 통해 새로운 인터페이스에 대한 수요와 즐겨찾기 분류의 중요성, 위치와 연관된 기억의 효과를 확인하였다.

이러한 기초 연구를 바탕으로 즐겨찾기 정보와 계층 구조를 전통적인 서지 분류법인 도서관 카드 카탈로그와 메타데이터를 활용하여 재구성한다. 즐겨찾기가 가진 메타데이터를 수집하고 선별하여 시각적으로 표시할 데이터 세트를 구축하고 저장 일자와 키워드 기반의 분류 체계를 수립하였다.

또한, 인지심리학과 정보 탐색 이론에 따라 사용자가 화면의 공간에서 탐색 동작을 수행하거나 이를 관찰하는 것만으로도 위치와 행동 사이의 연관성이 형성되며, 이는 정보 기억 강화에 도움이 될 수 있음을 확인하였다. 이러한 이론적 관점을 바탕으로, 정보 인지와 체제화 단계에 대응하는 즐겨찾기 정보 탐색 수행 방식과 흐름을 정의하여 4개의 주요 화면과 탐색 인터랙션 단계를 도출하였다.

마지막으로, 공연학적 접근을 통해 시노그래피와 블랙박스 개념을 인터페이스의 공간 구성과 주요 색상에 적용하였다. 사용자의 시선 이동과 정보의 깊이에 따라 입체와 평면이 교차하는 공간을 구성하고 이를 통해 화면의 깊이감과 몰입감을 유도하였다. 나아가, 탐색을 수행하는 인터랙션을 통해 사용자가 능동적으로 정보 경로를 재구성하고, 정보를 지식으로 내재화하는 과정으로 보았다.

최종 작품은 구글 크롬 브라우저 환경에 최적화된 인터랙티브 웹으로 모니터에 내장된 카메라와 마우스 이벤트를 이용한 탐색 인터랙션을 웹 프로그래밍 언어로 제작하였다. 또한, 각 화면의 인터랙션 영상과 함께 사용자가 직접 체험할 수 있도록 전시하였다.

본 연구를 통해 즐겨찾기를 단순한 정보 저장이 아닌, 지식을 구성하는 공간으로 제안하고, 도서관 카탈로그 카드 시스템과 수행성 이론을 시각적 분류 방식으로 적용하였다. 이를 통해 사용자 인지와 기억 향상에 기여할 수 있는 인터랙션 디자인의 가능성을 제시한다. 이로써 즐겨찾기 웹 인터랙션을 통해 사용자가 수행적 방식으로 온라인 정보를 탐색하며 개인적 지식과 경험을 확립하는데 이점을 제공할 것으로 기대한다.

다국어 초록 (Multilingual Abstract)

This study aims to redesign the bookmark function in web browsers—traditionally limited to simple information storage—into a performative interaction and interface that facilitates users’ information-seeking experiences and memory processes in digital environments.

While advancements in digital technology have enabled users to access both necessary and algorithmically recommended information with ease, they have also led to a diminishing role for physical interaction and embodied exploration in knowledge acquisition. This shift has fragmented users’ memory construction regarding informational context. In response, this study adopts three approaches: a classification-based method utilizing embedded metadata within webpages; an interaction-based method that reinterprets bookmark navigation as embodied action; and a performative approach inspired by scenography to visually stage such interactions.

The research first examines the historical and functional background of web browsers and bookmarks, followed by an interface analysis of contemporary commercial browsers. Through a user survey, the study identifies the demand for new interfaces, the significance of bookmark classification, and the cognitive effects of location-associated memory.

Based on these findings, the study reconstructs bookmark information and its hierarchy using traditional bibliographic classification—specifically the library card catalog system—and embedded metadata. A visualized dataset is constructed by collecting and refining bookmark metadata, which is then organized into a classification system based on saving date and keyword indexing.

Further, drawing from cognitive psychology and information-seeking theory, the study verifies that spatial interaction or even observation on a screen can reinforce associative links between position and action, enhancing memory retention. With this in mind, the study defines a performative flow of bookmark navigation corresponding to stages of information perception and organization, ultimately designing four key interactive screens.

Finally, the performative approach applies scenography and black box theater concepts to the spatial composition and visual depth of the interface. By orchestrating transitions between flat and dimensional layers according to gaze and information depth, the system fosters immersive engagement. Users are thereby encouraged to reconstruct information pathways and internalize content as knowledge through active exploration.

The final output is an interactive web interface optimized for the Google Chrome browser, developed using standard web programming languages and designed to utilize camera and mouse-based interaction. It was exhibited alongside interaction videos, allowing users to engage directly with the system.

This study proposes a new role for bookmarks—not merely as storage tools but as performative spaces for knowledge formation. By incorporating library card catalog systems and performativity theory into visual classification design, it demonstrates how interaction design can support user cognition and memory. Ultimately, it suggests that web-based bookmark interactions can offer users performative pathways to explore online information and establish personal knowledge and experience.

목차 (Table of Contents)

• 제 1 장 서 론 1
• 제 1 절 연구 배경 및 동기 1
• 제 2 절 연구 목표 3
• 제 3 절 연구 범위 및 연구 방법 4
• 제 2 장 웹 브라우저와 즐겨찾기에 대한 이해 6
• 제 1 절 웹 브라우저와 즐겨찾기의 기능과 역사 6
• 제 2 절 현행 즐겨찾기 인터페이스 분석 10
• 제 3 절 브라우저 사용자의 즐겨찾기 사용 행태 16
• 제 3 장 카드 카탈로그 분류와 메타데이터의 활용 27
• 제 1 절 다양한 분류법과 카탈로그 카드시스템 27
• 제 2 절 메타데이터와 메타태그 34
• 제 3 절 즐겨찾기의 메타데이터 활용 36
• 제 4 장 정보 인지 및 탐색의 수행적 공간 40
• 제 1 절 정보의 인지와 정보의 내재화 방법 40
• 제 2 절 정보 수집과 물리적 탐색 행위 분석 44
• 제 3 절 웹 인터랙션 사례 분석 51
• 제 5 장 작품 연구 58
• 제 1 절 수행적 정보 탐색을 위한 인터랙티브 웹 58
• 제 2 절 파일 분석을 통한 데이터 세트 및 분류 구성 59
• 제 3 절 웹 인터페이스 공간과 행위 인터랙션 디자인 64
• 제 4 절 최종 작품 75
• 제 5 절 작품 전시 95
• 제 6 장 결 론 100
• 제 1 절 디자인 연구 결과 100
• 제 2 절 연구의 한계점 및 이후 활용 방안 101
• 참 고 문 헌 102
• 부 록 106
• Abstract 114