북마크, 즐겨찾기, 핀, 별표의 디자인 차이점

프로덕트 디자이너로서 우리는 북마크, 즐겨찾기, 핀, 별표와 같은 용어를 자주 접합니다. 이 기능들은 간단해 보일 수 있지만, 구현 방식에 따라 사용자 경험(UX)에 큰 영향을 미칩니다. 이 글에서는 이러한 요소들을 접근하는 방법을 다루며, 모호성을 줄이고 사용자 만족도를 높이는 방법을 공유합니다.

기본 개념 이해하기

• 북마크(Bookmarks): URL이나 문서를 나중에 쉽게 접근할 수 있도록 저장하는 기능입니다. 주로 웹 브라우저에서 사용되며, 예를 들어 사용자가 중요한 정보를 빠르게 찾을 수 있도록 도와줍니다.
• 즐겨찾기(Favourites): 사용자가 자주 사용하거나 선호하는 항목을 빠르게 접근할 수 있도록 표시하는 기능입니다. 예를 들어, 쇼핑몰 웹사이트에서 자주 구매하는 상품을 즐겨찾기에 추가할 수 있습니다.
• 핀(Pins): 목록의 상단에 고정하거나 눈에 잘 띄는 위치에 배치하여 항상 보이도록 하는 기능입니다. 예를 들어, 팀 협업 툴에서 중요한 공지사항을 핀으로 고정할 수 있습니다.
• 별표(Stars): 즐겨찾기와 유사하지만, 이메일이나 프로젝트 관리 도구 등 다른 문맥에서 사용됩니다. 예를 들어, 중요한 이메일에 별표를 달아 쉽게 식별할 수 있습니다.

용례 파악하기

맥락적 관련성

이러한 기능들이 사용될 맥락을 평가합니다. 예를 들어, 지식 관리 시스템에서는 '북마크'가 문서를 참조할 필요가 있는 사용자에게 더 직관적일 수 있습니다.

사용자 목표

사용자가 달성하려는 목표를 이해합니다. 자주 사용하는 항목을 강조하고 싶은 것인지(즐겨찾기), 중요한 정보를 항상 손쉽게 접근하고 싶은 것인지(핀) 등을 파악합니다.

명확성을 위한 디자인

일관된 용어 사용

애플리케이션의 생태계 내에서 친숙한 용어를 고수합니다. 한 부분에서 '북마크'를 사용한다면, 다른 곳에서 같은 의미로 '즐겨찾기'를 사용하지 않도록 합니다.
- 일관성 유지: 동일한 용어와 아이콘을 사용하는 것이 중요합니다. 예를 들어, 모든 기능에서 '별표'를 사용할 때는 동일한 별 아이콘을 사용해야 합니다.

시각적 구분

서로 다른 아이콘과 색상을 사용하여 사용자가 이러한 기능들을 빠르게 구분할 수 있도록 합니다. 예를 들어, '별표'에는 별 아이콘, '핀'에는 핀 아이콘을 사용합니다.

• 아이콘 디자인: 아이콘의 크기, 색상, 모양 등을 고려하여 사용자가 직관적으로 이해할 수 있도록 디자인합니다.
• 색상 사용: 예를 들어, 즐겨찾기는 노란색, 북마크는 파란색으로 구분하여 시각적으로 쉽게 인식할 수 있도록 합니다.

반응형

실제 예시

구글 드라이브

중요한 파일에 '별표'를 사용하여 주요 파일이 메인 작업 공간을 혼란스럽게 만들지 않으면서 눈에 띄게 합니다. 이는 사용자가 중요한 파일을 빠르게 찾을 수 있도록 도와줍니다.

• 기능 설명: 사용자가 파일 목록에서 중요한 파일을 별도로 표시하여 쉽게 접근할 수 있습니다.
• 사용자 피드백: 많은 사용자가 이 기능을 통해 작업 효율이 크게 향상되었다고 보고합니다.

Google Drive의 Star 기능. 영어권 유저는 Star, 한국 유저는 중요 문서함 이라 표기한다.

핀터레스트

시각적 북마크를 저장하는 용도로 '핀'을 사용하는 플랫폼입니다. 이는 사용자가 관심 있는 이미지를 빠르게 저장하고 공유할 수 있도록 합니다.

• 기능 설명: 사용자가 다양한 이미지를 핀으로 저장하여 나중에 참고하거나 공유할 수 있습니다.
• 사용자 피드백: 사용자는 이 기능을 통해 쉽게 이미지를 관리하고 필요한 정보를 찾을 수 있다고 평가합니다.

---

적절한 용어를 선택하고 이를 올바르게 구현하는 것은 사용자 만족도에 매우 중요합니다. 사용자 중심의 디자인 접근 방식을 적용하여 혼란을 줄이고 제품의 전체 UX를 개선할 수 있습니다. 항상 사용자 피드백에 따라 반복하고 개선하는 것을 잊지 마십시오.