# Discourse와 Canonical Ubuntu: UX와 시각적 탐색
**URL:** https://meta.discourse.org/t/discourse-canonical-ubuntu-a-ux-and-visual-exploration/152196
**Category:** UX
**Created:** [5월 21, 2020, 9:21오전 UTC](https://meta.discourse.org/t/discourse-canonical-ubuntu-a-ux-and-visual-exploration/152196 "2020-05-21T09:21:02Z")
**Posts on this page:** 19
**Page:** 1
### Author:  [@Gomboli](https://meta.discourse.org/u/Gomboli)
#### Post date: [5월 21, 2020, 9:21오전 UTC](https://meta.discourse.org/t/discourse-canonical-ubuntu-a-ux-and-visual-exploration/152196/1 "2020-05-21T09:21:02Z")
안녕하세요 여러분,
저는 Canonical(우분투 발행사)에서 UX 리드로 근무하는 클라우디오입니다. 메타 디스코어(Meta Discourse)에 첫 게시글을 올리는 것이지만, Canonical에서는 웹사이트와 제품 커뮤니티 포럼을 위해 이미 디스코어를 사용하고 있습니다.
얼마 전, 기존 웹사이트의 메인 도메인 내에 디스코어를 포함시키는 방식(예: '[discourse.ubuntu.com](http://discourse.ubuntu.com)’에서 '[ubuntu.com/discourse’로](http://ubuntu.com/discourse'%EB%A1%9C) 이동)을 서브도메인 대신 사용할 경우 디스코어가 어떤 모습일지 탐구해 보았습니다.
서브도메인 대신 최상위 웹사이트를 사용하게 되면, 일관되고 매끄러운 방식으로 통합하기 위해 디스코어의 내비게이션, 상호작용 및 전반적인 룩앤필(Look & Feel)을 반드시 변경해야 합니다. 이는 기존 UX의 여러 부분에 영향을 미치는 탐구 작업임을 이해하고 있지만, 그래도 여러분과 공유하고, 이러한 수정 사항 중 일부가 업스트림에도 유효한 제안(예: 템플릿)이 될 수 있는지 논의해 보고자 합니다.
스타일 측면에서는 오픈소스 CSS 프레임워크 [Vanilla](https://vanillaframework.io/)와 그 컴포넌트를 사용하고 있습니다.
모든 비주얼을 이 초기 소개글에 답글로 올릴 예정입니다.
여러분의 의견을 들려 주시면 감사하겠습니다. 이 주제에 대해 더 깊이 논의할 수 있도록 준비되어 있습니다.
감사합니다!
---
### Author:  [@Gomboli](https://meta.discourse.org/u/Gomboli)
#### Post date: [5월 21, 2020, 9:21오전 UTC](https://meta.discourse.org/t/discourse-canonical-ubuntu-a-ux-and-visual-exploration/152196/2 "2020-05-21T09:21:44Z")
## Discourse 내비게이션
### 로그인 전 버전
제안안에서는 기본 Discourse에 포함된 버거 메뉴를 제거하고, 모든 페이지의 주요 진입점으로 사이드 내비게이션 구성 요소를 사용했습니다. 그 이유는 기존 웹사이트 내비게이션에 Discourse를 추가할 때 웹사이트의 기존 구조와 일관성을 유지해야 하기 때문입니다. 이를 통해 사용자에게 모든 사용 가능한 페이지와 주제를 항상 표시되는 단일 내비게이션 구성 요소 내에서 직접 노출할 수 있습니다.
검색 기능은 웹사이트의 전역 내비게이션에 통합되며, Discourse의 검색 결과도 포함됩니다. 이 작업이 프론트엔드와 백엔드에 중요한 변경을 요구할 수 있으므로, 검색 입력 필드를 Discourse 페이지로 이동시켜 독립적으로 사용할 수 있도록 할 수 있습니다.
---
### Author:  [@Gomboli](https://meta.discourse.org/u/Gomboli)
#### Post date: [5월 21, 2020, 9:22오전 UTC](https://meta.discourse.org/t/discourse-canonical-ubuntu-a-ux-and-visual-exploration/152196/3 "2020-05-21T09:22:16Z")
## Discourse 내비게이션
### 로그인 내비게이션
사용자가 로그인하면 ‘새 주제’ CTA(행동 유도)와 왼쪽 사이드 내비게이션의 ‘계정’ 항목이 표시됩니다.
‘최신’, ‘새로움’, ‘읽지 않음’, ‘최고’, ‘카테고리’, ‘북마크’를 모두 페이지 상단에 노출하는 대신, 카테고리를 사이드 내비게이션에 배치하고 나머지는 사용자가 보고 싶은 콘텐츠 뷰를 선택할 수 있는 드롭다운 메뉴에 넣을 수 있습니다.
---
### Author:  [@Gomboli](https://meta.discourse.org/u/Gomboli)
#### Post date: [5월 21, 2020, 9:22오전 UTC](https://meta.discourse.org/t/discourse-canonical-ubuntu-a-ux-and-visual-exploration/152196/4 "2020-05-21T09:22:53Z")
## 모든 주제 표
모든 주제를 표시할 때 표를 재구성했습니다. 카테고리는 사용자가 클릭하여 특정 주제로 바로 이동할 수 있는 색상 태그로 표시됩니다. 사용자 프로필 사진과 여러 사용자는 공간을 절약하기 위해 시각적으로 축소되어 표시됩니다. 답변 수, 조회 수, 활동 상태는 여전히 표시됩니다.
---
### Author:  [@Gomboli](https://meta.discourse.org/u/Gomboli)
#### Post date: [5월 21, 2020, 9:23오전 UTC](https://meta.discourse.org/t/discourse-canonical-ubuntu-a-ux-and-visual-exploration/152196/5 "2020-05-21T09:23:28Z")
## 토픽 내부
토픽/카테고리 내부에서는 ‘팔로우 옵션’ CTA가 표시됩니다. 드롭다운을 통해 사용자가 원하는 알림 수준을 선택할 수 있습니다. 우리의 제안은 드롭다운에 라벨을 표시하여 사용자가 해당 토픽에 대한 구독 상태를 쉽게 이해할 수 있도록 하는 것입니다.
---
### Author:  [@Gomboli](https://meta.discourse.org/u/Gomboli)
#### Post date: [5월 21, 2020, 9:24오전 UTC](https://meta.discourse.org/t/discourse-canonical-ubuntu-a-ux-and-visual-exploration/152196/6 "2020-05-21T09:24:01Z")
## 특정 시간 표시
보기 상단 메뉴에서 ‘Top’을 선택하면, 사용자는 ‘all time’ 드롭다운을 통해 표시할 시간 부분을 결정할 수 있습니다.
---
### Author:  [@Gomboli](https://meta.discourse.org/u/Gomboli)
#### Post date: [5월 21, 2020, 9:24오전 UTC](https://meta.discourse.org/t/discourse-canonical-ubuntu-a-ux-and-visual-exploration/152196/7 "2020-05-21T09:24:35Z")
## 기사 보기
---
### Author:  [@Gomboli](https://meta.discourse.org/u/Gomboli)
#### Post date: [5월 21, 2020, 9:25오전 UTC](https://meta.discourse.org/t/discourse-canonical-ubuntu-a-ux-and-visual-exploration/152196/8 "2020-05-21T09:25:10Z")
## 정보 페이지
로그인된 상태에서는 사용자의 프로필 사진과 정보가 상단에 표시됩니다. 정보 페이지에서는 보조 페이지가 사이드 내비게이션에 펼쳐지고 '모든 주제’는 접힙니다. 사용자가 로그아웃된 경우, 정보 페이지는 동일하지만 상단의 프로필과 ‘계정’ 항목이 표시되지 않습니다.
---
### Author:  [@Gomboli](https://meta.discourse.org/u/Gomboli)
#### Post date: [5월 21, 2020, 9:25오전 UTC](https://meta.discourse.org/t/discourse-canonical-ubuntu-a-ux-and-visual-exploration/152196/9 "2020-05-21T09:25:47Z")
## 계정 페이지
Discourse의 수평 메뉴 항목은 사이드 내비게이션 바에 포함되어 있으며, “요약 - 활동 - 알림 - 메시지 - 배지 - 설정”입니다. 하위 페이지 메뉴 항목은 관련 있는 상위 항목 아래에 열립니다. 예: 활동 \> 전체, 주제, 답변, 초안, 좋아요, 북마크.
의견을 들려주시면 감사하겠습니다. 이 주제에 대해 더 자세히 논의할 준비가 되어 있습니다.
감사합니다!
---
### Author:  [@osioke](https://meta.discourse.org/u/osioke)
#### Post date: [5월 21, 2020, 9:38오전 UTC](https://meta.discourse.org/t/discourse-canonical-ubuntu-a-ux-and-visual-exploration/152196/10 "2020-05-21T09:38:46Z")
설명에 따르면, 여기의 이미지가 잘못된 것 같은데?
---
### Author:  [@cvx](https://meta.discourse.org/u/cvx)
#### Post date: [5월 21, 2020, 9:40오전 UTC](https://meta.discourse.org/t/discourse-canonical-ubuntu-a-ux-and-visual-exploration/152196/11 "2020-05-21T09:40:11Z")
“Latest” 헤더만 잘못되었고, 나머지는 괜찮아 보입니다. 🙂
---
### Author:  [@osioke](https://meta.discourse.org/u/osioke)
#### Post date: [5월 21, 2020, 9:44오전 UTC](https://meta.discourse.org/t/discourse-canonical-ubuntu-a-ux-and-visual-exploration/152196/12 "2020-05-21T09:44:13Z")
‘follow option’의 CTA(행동 유도 요소)와 드롭다운 메뉴가 보이지 않아요:
> [@Gomboli](#):
>
> 토픽/카테고리 내부에서는 ‘follow option’ CTA가 표시됩니다. 드롭다운 메뉴를 통해 사용자는 원하는 알림 수준을 선택할 수 있습니다.
그 외 부분은 디자인이 훌륭해 보입니다!
---
### Author:  [@cvx](https://meta.discourse.org/u/cvx)
#### Post date: [5월 21, 2020, 10:08오전 UTC](https://meta.discourse.org/t/discourse-canonical-ubuntu-a-ux-and-visual-exploration/152196/13 "2020-05-21T10:08:14Z")
호출(CTA)이라고 보기엔 약하지만, “팔로우 옵션” 드롭다운이 “새 주제” 버튼 바로 옆에 있습니다.
---
### Author:  [@Stranik](https://meta.discourse.org/u/Stranik)
#### Post date: [5월 21, 2020, 10:36오전 UTC](https://meta.discourse.org/t/discourse-canonical-ubuntu-a-ux-and-visual-exploration/152196/14 "2020-05-21T10:36:17Z")
전반적으로 좋습니다. 하지만 왼쪽 메뉴가 메인 콘텐츠와 시각적으로 합쳐져 보입니다. Stack Overflow처럼 분리해 보실 수 있을까요? 예를 들어 배경색, 들여쓰기, 색상 등을 조정해 볼 수 있습니다. 선택지가 많습니다.
---
### Author:  [@Gomboli](https://meta.discourse.org/u/Gomboli)
#### Post date: [5월 21, 2020, 12:10오후 UTC](https://meta.discourse.org/t/discourse-canonical-ubuntu-a-ux-and-visual-exploration/152196/15 "2020-05-21T12:10:48Z")
모두 답변해 주셔서 감사합니다.
네, ‘팔로우 옵션’ 드롭다운은 바로 이겁니다:
이 작업을 진행한 이후로 Discourse가 알림/팔로우 아이콘을 변경한 것 같네요(솔직히 훨씬 명확해졌습니다). 따라서 이에 맞춰 업데이트가 필요합니다.
---
### Author:  [@sam](https://meta.discourse.org/u/sam)
#### Post date: [5월 22, 2020, 12:39오전 UTC](https://meta.discourse.org/t/discourse-canonical-ubuntu-a-ux-and-visual-exploration/152196/16 "2020-05-22T00:39:58Z")
theme creator에 테마를 업로드해 보세요.
> [@Get started with Theme Creator and the Theme CLI](https://meta.discourse.org/t/beginners-guide-to-using-theme-creator-and-theme-cli-to-start-building-a-discourse-theme/108444):
>
> This topic will walk you through how to use the [Theme CLI](https://meta.discourse.org/t/discourse-theme-cli-console-app-to-help-you-build-themes/82950) with our [Theme Creator](https://meta.discourse.org/t/theme-creator-create-and-show-themes-without-installing-discourse/84942) site to develop a theme and preview your changes on a live Discourse site. [Sign up for an account here on Meta](https://meta.discourse.org/signup) if you haven’t already [Log in to Theme Creator](https://discourse.theme-creator.io/login) Install the Theme CLI via the [instructions here](https://meta.discourse.org/t/discourse-theme-cli-console-app-to-help-you-build-themes/82950) Create a new theme on Theme Creator by: Visiting [https://discourse.theme-creator.io/my/themes](https://discourse.theme-creator.io/my/themes) Clicking Install, and selecting the “Create New” option. Giving your theme a unique name (you can ignore…
여기저기 둘러보며 사용감에 대한 피드백을 주시면 좋겠습니다. 플래그 UI/북마크 UI 등 직접 확인해야 할 숨겨진 UI 요소가 꽤 많을 것입니다.
---
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [5월 22, 2020, 12:59오전 UTC](https://meta.discourse.org/t/discourse-canonical-ubuntu-a-ux-and-visual-exploration/152196/17 "2020-05-22T00:59:06Z")
정말 훌륭해! 여기서 표현되지 않는 한 가지가 있어:
알림은 사이드바의 “계정” 링크와 함께 목록에 표시되나?
또한 여기에서 태그가 표현되어 있지 않은 것 같으니, 태그를 사용할 계획이 없는 것으로 이해해도 될 것 같다… 그것이 전용 카테고리 열을 없애기로 한 이유 중 하나였다.
제목 아래에 카테고리를 배치하면 카테고리와 태그를 밀접하게 연관시킬 수 있을 뿐만 아니라, 각 토픽 페이지 상단의 제목 레이아웃과도 일관성을 유지할 수 있다(설계에서 토픽에 진입하면 카테고리가 표시되지 않는 것을 방금 알아차렸는데, 의도적인 것인가?).
예를 들어, 
---
### Author:  [@Gomboli](https://meta.discourse.org/u/Gomboli)
#### Post date: [5월 26, 2020, 8:14오전 UTC](https://meta.discourse.org/t/discourse-canonical-ubuntu-a-ux-and-visual-exploration/152196/18 "2020-05-26T08:14:47Z")
@sam, 감사합니다. 가이드를 확인해 보겠습니다. 실제로 프로토타입을 만들어 보면 현재 UI의 문제점과 놓친 부분을 더 잘 파악할 수 있을 것입니다.
---
### Author:  [@Gomboli](https://meta.discourse.org/u/Gomboli)
#### Post date: [5월 26, 2020, 8:21오전 UTC](https://meta.discourse.org/t/discourse-canonical-ubuntu-a-ux-and-visual-exploration/152196/19 "2020-05-26T08:21:48Z")
@awesomerobot 답변 감사합니다.
메인 도메인(예: meta.discourse가 아닌 [The easiest way to host a Discourse community | Discourse - Civilized Discussion](http://discourse.org/meta))으로 Discourse를 이동할 때, 기존 웹사이트 계정/프로필 사진과 충돌할 수 있으므로 사용자 프로필 사진을 제거해야 했습니다.
해당 솔루션을 검토할 당시 태그 기능이 아직 없었던 것 같습니다. 따라서 후속 업데이트에 포함해야 할 사항으로 보입니다.
제목 아래에 카테고리를 배치하는 것도 아주 좋은 지적입니다.
모두의 피드백에 감사드립니다. 이 디자인의 후속 작업을 진행하는 데 큰 도움이 될 것입니다.