# 알림과 계정 옵션 분리

**URL:** https://meta.discourse.org/t/separate-notifications-and-account-options/294616
**Category:** UX
**Created:** [2월 7, 2024, 11:41오후 UTC](https://meta.discourse.org/t/separate-notifications-and-account-options/294616 "2024-02-07T23:41:44Z")
**Posts on this page:** 6
**Page:** 1

<div class="post-metadata">

### Author: ![LWinterberg](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lwinterberg/32/361644_2.png) [@LWinterberg](https://meta.discourse.org/u/LWinterberg)
#### Post date: [2월 7, 2024, 11:41오후 UTC](https://meta.discourse.org/t/separate-notifications-and-account-options/294616/1 "2024-02-07T23:41:44Z")

</div>

현재 우상단의 아바타는 서로 매우 다른 종류의 다양한 항목들을 담는 통합 박스 역할을 하고 있습니다. 여기에는 다양한 종류의 알림(답글, 게시물 알림, 좋아요, DM, 배지) 외에도 북마크와 계정 옵션이 포함되어 있습니다. 처음에는 "오, 참 영리한 설계구나"라고 생각했지만, 사용 기간이 길어질수록 오히려 더 거슬리게 느껴집니다. 제가 겪고 있는 구체적인 문제들부터 시작해 보겠습니다.

## 문제 1: 알림인지 계정 오류인지?

"아이콘 위에 겹쳐진 원 안에 숫자"는 저에게 "이 항목에 나에게 온 메시지가 있다"는 의미로 다가옵니다. 숫자 5가 붙은 Gmail 아이콘은 5통의 이메일, 999+가 붙은 Discord 아이콘은 관심이 없는 사람들로부터 온 핑(Ping) 알림이라는 것을 잘 알고 있습니다.

그렇다면 "원 안에 내 얼굴"은 무엇을 의미할까요? 직관적으로는 _나에 관한_ 무언가입니다. 저는 계속 계정 관련 문제라고 생각합니다. “무료 체험 기간이 만료되었습니다”, “이메일 주소를 확인해 주세요” 같은 종류의 메시지 말이죠. 만약 원 안에 숫자가 없다면, “사용자 온라인” 상태 표시등이라고 해석했을 것입니다. 하지만 "아, 그냥 내 게시물에 달린 답글 알림이구나"라고는 절대 생각하지 않습니다.

## 문제 2: “로그아웃은 어떻게 하나?”

이것은 올해 제 포럼에서 3번이나 본 질문입니다. 사용자의 단계를 이렇게 상상해 봅니다:

1. 오늘 포럼 사용은 끝났다. 로그아웃할 시간이다.
2. 아바타를 클릭한다. 거의 모든 웹사이트에서 로그아웃 버튼이 있는 위치라고 알고 있는 곳이다.
3. 로그아웃 버튼은 보이지 않고, 대신 알림 목록이 표시된다.
4. (혼란스러워져서 포럼에 사용 방법을 질문한다)

여기서의 근본적인 문제는 통합된 알림 및 계정 드롭다운 메뉴가 _괴물처럼_ 복잡하다는 것입니다. 저처럼 사실상 초보자인 메타(Meta) 사이트에서는 이 메뉴 안에 20개의 요소(알림 10개, 탭 8개, 액션 2개)가 보입니다. 완전히 압도적인 수준이며, 로그아웃 버튼이 마트료시카 인형처럼 숨겨져 있다는 것(계정 아이콘을 클릭한 후에야 나오는 계정 아이콘)을 파악하기 위해서는 상당한 인지적 노력이 필요합니다.

## 제안

제 아이디어는 간단하게 유지하는 것입니다:

- 계정 관련 사항(아바타)만 포함하는 계정 버튼을 두기
- 알림 관련 사항(관심 게시물 활동, 답글, 멘션, 좋아요, 배지)만 포함하는 알림 버튼을 두기
- 채팅 알림만 포함하는 채팅 버튼을 두기
- 북마크는 사이드바에 배치하기. 이미 유사한 북마크 기능(사용자 정의 섹션 추가)이 있는 곳입니다.
- (검색 아이콘을 검색바로 변경하여 오른쪽의 아이콘 밀집도를 줄이고, 사람들이 게시글을 작성하기 전에 더 자주 검색하도록 유도하기)

또는 시각적으로 표현하면, 제 놀라운 Figma 실력을 감상해 보세요! 아이콘이나 다른 UI 요소(“채팅” 위젯, 사이드바의 “리마인더가 있는 게시물”) 옆의 빨간 원은 알림 수를 나타내거나, 북마크의 경우 “1일 후 예정” / “목요일부터 기한 초과” 같은 정보를 표시할 수 있습니다. 파란색 빈 공간에 떠 있는 큰 빨간 원은 배경의 일부입니다 😛

 ![Frame 11](https://global.discourse-cdn.com/meta/original/4X/9/9/f/99f77a91529a76d13c95219940897c5b33b7736a.png)

부연 설명: **“개인 메시지”(Messages)와 “개인 채팅”(DMs)의 차이는 무엇인가요?**  
개인적으로 생각하기에 이 둘은 위상적으로 동일하며, 주요 차이점은 한쪽이 다른 쪽보다 조작이 좀 더 어색하다는 점입니다. 아직 제 디자인에서 'Messages’는 좋은 위치를 찾지 못했습니다(참고로 Reddit에서도 마찬가지입니다). 두 시스템을 통합하거나, 하나를 “레거시 DM”, 다른 하나를 “채팅 / 새 DM” 등으로 부르는 것도 고려해 볼 수 있습니다.

---

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [2월 8, 2024, 2:19오전 UTC](https://meta.discourse.org/t/separate-notifications-and-account-options/294616/2 "2024-02-08T02:19:56Z")

</div>

대부분 동의합니다! 🙂

[Discourse Central Theme](https://meta.discourse.org/t/discourse-central-theme-meta-pre-release-out-now/287495)(아직 출시되지 않음)를 떠올리게 합니다. 이 테마는 알림과 계정을 분리하는 구조인데, 훨씬 자연스럽습니다. 개인적으로 꽤 마음에 듭니다:

 ![image](https://global.discourse-cdn.com/meta/original/4X/7/e/8/7e8b15fdb0d88ac614641e96976aa9294bac6d66.png)

(_참고로, 무엇을 하는지 잘 아신다면 이 테마의 수정 사항은 [여기](https://meta.discourse.org/t/central-theme-header-user-icons/291526/4)에 설명되어 있으며, 다른 테마의 테마 컴포넌트로 사용할 수 있습니다._)

메뉴 하단에 로그아웃 아이콘을 추가하는 데 유용한 컴포넌트도 언급할 가치가 있습니다:

> [@awesomerobot](#):
>
> 이 기능을 수행하는 작은 컴포넌트를 만들었습니다:
> 
> [GitHub - awesomerobot/discourse-quick-logout-component: Adds an easier-to-locate logout button to the tabs within the user notification menu · GitHub](https://github.com/awesomerobot/discourse-quick-logout-component)
> 
> ![Screenshot 2023-01-23 at 1.48.07 PM](https://global.discourse-cdn.com/meta/original/4X/4/2/3/42328bd8c38ba28c69a0f8f72b62256073bd53a7.png)

검색 기능에 대해 말씀드리자면, 이 컴포넌트가 관심 있을 수 있습니다:

> [@고급 헤더 검색](https://meta.discourse.org/t/header-search/194093):
>
> discourse2요약 Advanced Header Search는 헤더 메뉴에서 검색 아이콘을 제거하고, 헤더 영역 중앙에 검색 바를 배치합니다.eyeglasses미리보기 [Discourse Theme Creator에서 미리보기](https://discourse.theme-creator.io/theme/Discourse/header-search)hammer_and_wrench저장소 링크 [https://github.com/discourse/discourse-header-search](https://github.com/discourse/discourse-header-search)open_bookDiscourse 테마를 처음 사용하시나요? [Discourse 테마 사용 입문가 가이드](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) 이 테마 컴포넌트 설치 white_exclamation_mark참고 이 테마 컴포넌트는 사이트가 외부 검색을 지원하려는 경우에만 필요합니다. 그렇지 않으면, 사이트 검색을 헤더로 이동시키기 위해 검색 경험 설정을 사이트 헤더의 검색 필드로 업데이트할 수 있습니다. 기능 설정 이름 설명 추가 검색 아이콘 검색 바에 추가…

---

<div class="post-metadata">

### Author: ![LWinterberg](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lwinterberg/32/361644_2.png) [@LWinterberg](https://meta.discourse.org/u/LWinterberg)
#### Post date: [2월 8, 2024, 8:44오전 UTC](https://meta.discourse.org/t/separate-notifications-and-account-options/294616/3 "2024-02-08T08:44:05Z")

</div>

> [@Arkshine](#):
>
> [Discourse Central Theme](https://meta.discourse.org/t/discourse-central-theme-meta-pre-release-out-now/287495) (아직 출시되지 않음)를 떠올리게 합니다. 이 테마는 알림과 계정을 분리하는데, 훨씬 자연스러운 느낌을 줍니다.

네, 그 테마에 대한 좋은 결정입니다. 제 생각에는 다른 많은 테마에도 적용할 가치가 있습니다.

---

<div class="post-metadata">

### Author: ![manuel](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/manuel/32/468169_2.png) [@manuel](https://meta.discourse.org/u/manuel)
#### Post date: [2월 8, 2024, 10:01오전 UTC](https://meta.discourse.org/t/separate-notifications-and-account-options/294616/4 "2024-02-08T10:01:47Z")

</div>

이 의견에도 동의하며, 중앙 테마에서와 같은 설정이 기본값이 되기를 바랍니다. [얼마 전에도 이에 대해 게시글을 올린 적이 있습니다](https://meta.discourse.org/t/what-would-be-the-best-approach-to-split-the-combined-notifications-user-menu-into-two/241856)만, 직접 구현할 경우 내비게이션 관련 변경 속도를 고려하면 상당한 유지보수가 필요하므로 권장하지 않습니다.

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [2월 8, 2024, 10:06오후 UTC](https://meta.discourse.org/t/separate-notifications-and-account-options/294616/5 "2024-02-08T22:06:13Z")

</div>

현재 헤더를 커스텀 위젯 시스템 대신 Ember 컴포넌트를 사용하도록 업데이트하고 있으므로, 머지않아 요소를 더 쉽게 이동할 수 있을 것입니다!

---

<div class="post-metadata">

### Author: ![schneeland](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/schneeland/32/275391_2.png) [@schneeland](https://meta.discourse.org/u/schneeland)
#### Post date: [2월 8, 2024, 10:43오후 UTC](https://meta.discourse.org/t/separate-notifications-and-account-options/294616/6 "2024-02-08T22:43:47Z")

</div>

개인 메뉴의 서로 다른 측면을 분리하는 것은 정말 좋은 아이디어인 것 같습니다.  
그리고 @Arkshine님이 강조한 Central 테마의 변경 사항들도 올바른 방향으로 나아가고 있다고 생각합니다.  
제가 추가하고 싶은 것은 세 가지입니다:

1. 개인 메시지도 별도의 공간을 가져야 한다고 생각합니다. (기본적으로 채팅과 개인 메시지는 하나로 통합되어야 한다고 믿지만, 그것은 별개의 이야기입니다)
2. 적어도 제 경우에는 Central 테마를 사용해도 알림 메뉴에 북마크가 여전히 표시됩니다(아래 스크린샷 참조). 북마크는 사용자 메뉴(제안하신 대로)에만 속하거나, 사용자 메뉴가 "프로필/설정 전용"이 된다면 사이드바에 속해야 한다고 생각합니다.
3. 이 기회에: “답글”, “좋아요”, “배지” 등은 사실상 전체 알림 목록에 대한 필터이므로, 제 생각에는 알림 영역의 상단에 배치되어야 합니다(아니면 완전히 제거해도 됩니다).

 ![image](https://global.discourse-cdn.com/meta/original/4X/1/d/9/1d9c0db0d5084254781ddbd5c91f1c1435b77a55.png)
