# 패널 아래에서 미리보기가 생성 중이라는 것을 사용자가 알 수 있도록 하세요

**URL:** https://meta.discourse.org/t/make-sure-users-know-that-a-preview-is-being-generated-below-panel/167673
**Category:** UX
**Created:** [10월 19, 2020, 8:34오후 UTC](https://meta.discourse.org/t/make-sure-users-know-that-a-preview-is-being-generated-below-panel/167673 "2020-10-19T20:34:37Z")
**Posts on this page:** 7
**Page:** 2

<div class="post-metadata">

### Author: ![JimPas](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jimpas/32/148179_2.png) [@JimPas](https://meta.discourse.org/u/JimPas)
#### Post date: [4월 3, 2022, 4:30오후 UTC](https://meta.discourse.org/t/make-sure-users-know-that-a-preview-is-being-generated-below-panel/167673/21 "2022-04-03T16:30:41Z")

</div>

패널에 흰색(노란색) 여백이 조금 있는 것을 보니, 미리보기 창을 보려면 상자를 닫으라는 안내 문구를 한 줄 추가하는 건 어떨까요? 그러면 ESC 키나 닫기 버튼(X)을 누르도록 추가적으로 유도할 수 있습니다. 예를 들어 `이 패널을 닫으면 미리보기 창을 볼 수 있습니다.`와 같은 문장 말입니다.

---

<div class="post-metadata">

### Author: ![bsilver8192](https://avatars.discourse-cdn.com/v4/letter/b/dec6dc/32.png) [@bsilver8192](https://meta.discourse.org/u/bsilver8192)
#### Post date: [5월 7, 2022, 7:13오전 UTC](https://meta.discourse.org/t/make-sure-users-know-that-a-preview-is-being-generated-below-panel/167673/22 "2022-05-07T07:13:31Z")

</div>

저도 Rust 포럼 사용자로 인해 이 문제에 당황한 적이 있습니다. 해당 Discourse 인스턴스(용어가 잘못된 건가요?)에는 노란색 “환영합니다” 박스와 비슷한 스타일의 파란색 “귀하의 주제가 …와 유사합니다” 박스가 있습니다. 하지만 이 박스는 하단 영역의 절반을 완전히 덮지 않습니다. 이 박스를 닫은 후, 노란색 박스가 다른 모습으로 보였기 때문에 텍스트 입력 영역을 밀어내어(폭을 좁혀) 만드는 것이라고 생각하여 처음에는 열어 두었습니다. 제가 찾고 있던 포맷된 미리보기가 노란색 박스 바로 아래에 딱 들어맞을 것이라고는 꿈에도 생각하지 못했습니다.

이 문제를 해결하기 위한 또 다른 아이디어: "포맷된 게시글 미리보기를 보려면 오른쪽 상단의 버튼으로 이 패널을 숨기세요."라는 문구를 내용에 추가하는 것입니다. 인스턴스별로 커스터마이징할 수 있다고 추측하지만, 기본 템플릿에 이 문구를 추가하면 대부분의 인스턴스에서 표시되도록 할 수 있을 것입니다.

---

<div class="post-metadata">

### Author: ![debryc](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/debryc/32/101652_2.png) [@debryc](https://meta.discourse.org/u/debryc)
#### Post date: [5월 8, 2022, 4:43오후 UTC](https://meta.discourse.org/t/make-sure-users-know-that-a-preview-is-being-generated-below-panel/167673/23 "2022-05-08T16:43:25Z")

</div>

> [@TZornG](#):
>
> 환영 패널의 너비를 2/3로 줄여 아래에 있는 미리보기 영역을 보이게 해 주세요.

네, 그렇게 해 주세요.

> [@bsilver8192](#):
>
> "포맷된 게시글 미리보기를 보려면 오른쪽 위 버튼을 눌러 이 패널을 숨기세요."라는 문구를 콘텐츠에 추가해 주세요.

이 해킹(hack)을 시도해 보겠습니다!

> [@codinghorror](#):
>
> 지금 제가 이렇게 하고 있듯이, 단어를 입력하는 작업에는 보통 (혹은 전혀?) 포맷팅이 필요하지 않다고 느끼며, 사람들은 인터넷에서 30년 넘게 박스에 단어를 입력하는 데 익숙해져 있습니다.

당신은 평균적인 사용자가 아닙니다. 당신은 이 제품을 만들고 있으며 기술을 다루는 데 수년의 경험을 가지고 있습니다. 우리는 실제로 일어나고 있는 상황을 관찰하고 있습니다.

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [5월 9, 2022, 7:59오전 UTC](https://meta.discourse.org/t/make-sure-users-know-that-a-preview-is-being-generated-below-panel/167673/24 "2022-05-09T07:59:43Z")

</div>

미리보기가 뒤에 숨겨져 있다는 시각적 힌트를 충분히 남기는 대체 시각적 목업을 보고 싶을 것 같습니다. (예를 들어, 창을 약간 좁히거나 높이를 약간 제한하는 방식)

테마 컴포넌트에서 100% 실현 가능합니다.

---

<div class="post-metadata">

### Author: ![Benjamin\_D](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/benjamin_d/32/277831_2.png) [@Benjamin\_D](https://meta.discourse.org/u/Benjamin_D)
#### Post date: [5월 9, 2022, 11:10오전 UTC](https://meta.discourse.org/t/make-sure-users-know-that-a-preview-is-being-generated-below-panel/167673/25 "2022-05-09T11:10:55Z")

</div>

> [@sam](#):
>
> 아마 창을 조금 더 좁히거나 높이를 약간 제한하는 것일 수 있습니다.

저도 그렇게 생각했습니다. 컴포저의 미리보기 부분 높이의 80~90% 정도로, 하단 오른쪽 모서리에 정렬하되 닫기 X 버튼은 왼쪽 상단에 배치하면, 눈이 패널 아래 줄과 X 버튼을 동시에 집중할 수 있을 것 같습니다.

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [5월 9, 2022, 6:42오후 UTC](https://meta.discourse.org/t/make-sure-users-know-that-a-preview-is-being-generated-below-panel/167673/26 "2022-05-09T18:42:51Z")

</div>

> [@debryc](#):
>
> 당신은 이 제품을 구축하고 있으며 기술을 다루는 데 수년의 경험을 가지고 있습니다. 우리는 실제로 일어나고 있는 상황을 관찰하고 있습니다.

하지만 저는 페이스북 사용자가 최소 2010년부터 해당 사이트를 사용해 왔으며, 이제 "웹페이지의 상자에 단어를 입력하는 방법"을 다루는 데 10년 이상의 경험을 쌓았을 거라고 주장하고 싶습니다. 원래의 Apple Mac 매뉴얼에는 마우스 사용법이 설명되어 있었지만, 요즘 컴퓨터에는 마우스나 터치패드가 어떻게 작동하는지에 대한 설명서가 포함되어 있지 않다고 생각합니다.

이 토픽의 나머지 부분에 대해서는, 이러한 새로운 사용자 교육 패널은 **첫 두 개의 게시물에만 표시됩니다** (그것도 새 사용자 온보딩에서 옵트아웃하지 않은 경우에만 해당되며), 패널에도 그렇게 명시되어 있습니다.

 ![image](https://global.discourse-cdn.com/meta/original/4X/b/6/d/b6d0bb2f72e587e1f2e9c3e0ba298dfa7c4f6fe7.png)

교육 노트를 지울 수 있음을 나타내기 위해 “X” 옆에 "esc"라는 단어도 있습니다.

![image](https://global.discourse-cdn.com/meta/original/4X/1/e/5/1e5d9af2665657a3471778dda84fde8f06a28a7c.png)

따라서 세 번째 게시물부터는 교육 패널이 표시되지 않지만, 새 토픽을 생성할 때 "당신의 토픽은 ~과 유사합니다"라는 메시지는 **유사성 매칭이 될 만큼 충분히 텍스트를 입력한 후에만** 나타납니다.

제 제안은, 사용자들에게 이것이 걱정된다면 사이트 설정을 통해 교육 패널을 비활성화하거나 CSS로 숨기는 것입니다.

---

<div class="post-metadata">

### Author: ![JammyDodger](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jammydodger/32/254611_2.png) [@JammyDodger](https://meta.discourse.org/u/JammyDodger)
#### Post date: [5월 9, 2022, 7:24오후 UTC](https://meta.discourse.org/t/make-sure-users-know-that-a-preview-is-being-generated-below-panel/167673/27 "2022-05-09T19:24:30Z")

</div>

> [@debryc](#):
>
> > [@TZornG](#):
> >
> > 환영 패널의 너비를 2/3로 줄여 아래에 있는 미리보기 영역을 보이게 하세요.
> 
> 네, 그렇게 해주세요.

이런 식으로요?

 ![image](https://global.discourse-cdn.com/meta/original/4X/b/1/2/b12502a70aef36b163419cc12932ebb959974dd0.png)

이 작업을 위해 너비를 5% 줄였습니다. 제 CSS 실력이 초보 수준이라 진정한 해결책이 아닐 수도 있습니다. 🙂

```plaintext
.composer-popup {
    width: calc(45% - 16px);
}

```

[이전 페이지](https://meta.discourse.org/t/make-sure-users-know-that-a-preview-is-being-generated-below-panel/167673.md?page=1)
