# 모바일 주제 목록에서 태그를 탭할 수 없습니다
**URL:** https://meta.discourse.org/t/tag-is-not-tappable-in-topic-list-on-mobile/255774
**Category:** UX
**Created:** [2월 21, 2023, 12:15오후 UTC](https://meta.discourse.org/t/tag-is-not-tappable-in-topic-list-on-mobile/255774 "2023-02-21T12:15:14Z")
**Posts on this page:** 6
**Page:** 1
### Author:  [@md-misko](https://meta.discourse.org/u/md-misko)
#### Post date: [2월 21, 2023, 12:15오후 UTC](https://meta.discourse.org/t/tag-is-not-tappable-in-topic-list-on-mobile/255774/1 "2023-02-21T12:15:15Z")
재현 단계 (Meta에서 태그가 있는 모든 토픽):
- 데스크톱:
- 토픽 목록과 토픽 제목 모두에서 카테고리 및 태그를 클릭할 수 있습니다.
- 모바일:
- 토픽 목록(최근 변경 사항으로 생각됩니다)과 토픽 제목에서 카테고리를 탭할 수 있습니다.
- 태그는 토픽 제목에서만 탭할 수 있습니다.
이전에 이 문제에 대해 논의된 바 있습니다([Opening the category in the topic-list on mobile - #2 by codinghorror](https://meta.discourse.org/t/opening-the-category-in-the-topic-list-on-mobile/106998/2?u=md-misko), [Extra padding makes it hard for users to click on tag and category under topic title - #8 by awesomerobot](https://meta.discourse.org/t/extra-padding-makes-it-hard-for-users-to-click-on-tag-and-category-under-topic-title/214978/8?u=md-misko)). 모바일에서 토픽 목록 뷰에서 카테고리와 태그를 탭할 수 없는 이유는 모바일에서 요소의 크기가 작기 때문이었습니다. 그러나 동시에 요소 크기가 동일하고 요소 간 간격이 더 좁은 토픽 제목에서는 항상 카테고리와 태그를 탭할 수 있었습니다.
개인적으로 저는 모바일에서 이러한 요소가 너무 작다고 느끼지 않습니다. 실제로 저는 토픽 목록에서 카테고리와 태그를 자주 탭하지만, 결국 토픽 제목으로 이동하게 되어 같은 작업을 반복해야만 비로소 카테고리/태그 뷰에 도달하게 됩니다.
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [2월 21, 2023, 2:24오후 UTC](https://meta.discourse.org/t/tag-is-not-tappable-in-topic-list-on-mobile/255774/2 "2023-02-21T14:24:13Z")
안녕하세요 @md-misko 👋
재현해 보았습니다.
모바일 보기에서 태그에 링크가 있는 것은 맞지만, 클릭해도 동작하지 않습니다.
커서를 올려서 클릭하면 아래에 있는 토픽이 열리기도 합니다:
---
### Author:  [@sam](https://meta.discourse.org/u/sam)
#### Post date: [2월 23, 2023, 4:59오전 UTC](https://meta.discourse.org/t/tag-is-not-tappable-in-topic-list-on-mobile/255774/3 "2023-02-23T04:59:34Z")
@awesomerobot 의 전체 변경 사항은 CSS로 오버라이드할 수 있다고 생각합니다. 몇 주 동안 사이트에서 테마 구성 요소를 사용해 보고, 권장하는 CSS 변경 사항을 보고해 주시겠어요?
---
### Author:  [@md-misko](https://meta.discourse.org/u/md-misko)
#### Post date: [2월 23, 2023, 6:23오전 UTC](https://meta.discourse.org/t/tag-is-not-tappable-in-topic-list-on-mobile/255774/4 "2023-02-23T06:23:15Z")
> [@sam](#):
>
> @awesomerobot의 전체 변경 사항은 CSS로 오버라이드할 수 있다고 생각합니다.
샘, 이것이 말씀하신 내용인가요:
> [@awesomerobot](#):
>
> 다음과 같은 CSS를 조금만 추가하면 하단 행의 항목들을 다시 클릭 가능하게 만들 수 있습니다:
>
> ```plaintext
> .mobile-view .topic-list .topic-item-stats {
> pointer-events: all;
> }
>
> ```
이미 테마 컴포넌트에서 위의 CSS를 사용하여 시도해 보았지만, 작동하지 않는 것 같습니다.
제 프로덕션 서버는 아직 최신 버전으로 업데이트되지 않았으며,那里的 카테고리나 태그를 탭할 수 없습니다.
하지만 최신 빌드로 스테이징 환경에서도 시도해 보았는데, 최근 무언가 변경된 것 같습니다. 이제 카테고리는 탭할 수 있지만, 태그는 탭할 수 없습니다.
일관성을 위해, 두 요소가 유사한 기능을 수행하므로 기본적으로 동일한 방식으로 작동해야 한다고 동의하시나요?
물론 CSS를 사용하여 이 문제를 수정하는 데 문제가 없겠지만, 제 환경에서는 작동하지 않는 것 같습니다(프로덕션과 스테이징 양쪽 모두 시도해 보았음).
---
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [2월 23, 2023, 3:26오후 UTC](https://meta.discourse.org/t/tag-is-not-tappable-in-topic-list-on-mobile/255774/5 "2023-02-23T15:26:55Z")
음, 무언가 회귀(regression)된 것 같습니다… 현재 iOS에서 확인되는 것은 카테고리 탭이 카테고리 페이지로 이동하지만, 태그는 아무 반응이 없다는 것입니다 (즉, 토픽으로조차 클릭이 안 됩니다). 이 부분을 조사해 보겠습니다. 해당 CSS도 오래되었네요… 현재 상태라면 (해당 게시물을 업데이트하겠습니다):
```css
.topic-list .topic-item-stats__category-tags {
.discourse-tag,
.badge-wrapper {
pointer-events: all;
}
}
```
일관성을 원한다는 욕구는 충분히 이해합니다. 하지만 토픽 대신 카테고리나 태그를 실수로 탭하거나, 잘못된 카테고리/태그를 탭하기가 매우 쉽습니다… 그리고 토픽으로의 진입이 주요 동작인 토픽 목록 화면에서는 특히 나쁜 사용자 경험을 초래합니다.
모바일 기기의 탭 가능 요소에 대한 최소 권장 크기는 일반적으로 약 45px 정사각형입니다. 이를 충족하려면 카테고리 및 태그의 높이를 거의 두 배로 늘려야 합니다. 카테고리 및 태그가 한 줄로 제한되는 경우 이는 가능하지만, 많은 사이트에는 내용이 많아 줄바꿈이 발생하며… 이러한 간격은 좋지 않을 것입니다:
적절한 탭 크기를 보장하기 위해 카테고리 및 태그를 버튼 스타일처럼 재설계하는 것은 상상할 수 있지만, 이는 Discourse 전체에 걸쳐 구현해야 할 큰 변경 사항이 될 것입니다.
---
### Author:  [@md-misko](https://meta.discourse.org/u/md-misko)
#### Post date: [2월 23, 2023, 8:24오후 UTC](https://meta.discourse.org/t/tag-is-not-tappable-in-topic-list-on-mobile/255774/6 "2023-02-23T20:24:03Z")
> [@awesomerobot](#):
>
> 그 CSS도 오래되었네요…
업데이트된 CSS 감사합니다. 최신 빌드에서 잘 작동합니다.
> [@awesomerobot](#):
>
> 하지만 토픽 대신 카테고리나 태그를 실수로 탭하거나, 잘못된 카테고리/태그를 탭하는 것은 매우 쉬운 일이죠…
이상하게도, 저는 모바일에서 그런 경험을 전혀 하지 않았습니다. 아마도 오른손으로 사용하다 보니 그럴 수도 있지만, 저는 항상 다른 요소보다 토픽 제목을 탭하는 것이 훨씬 더 어려웠습니다.
대부분 오른손 엄지로 탐색하는데, 카테고리나 심지어 태그를 실수로 탭하는 일은 거의 불가능에 가깝습니다. 하지만 제목 자체를 탭하는 일은 가끔씩 발생합니다(텍스트가 왼쪽 정렬되어 있고 좁은 화면 폭 때문에 줄바꿈이 일어나므로 오른쪽에 대부분 여백이 있기 때문이죠).
다행히 [Clickable Topic Theme Component](https://github.com/discourse/discourse-clickable-topic.git) 덕분에 모바일에서의 내비게이션이 크게 개선되었습니다. 이제 저는 거의 전적으로 토픽 목록의 여백을 이용해 토픽으로 이동하고, 카테고리 및 태그 요소를 사용하여 카테고리나 태그 보기로 빠르게 필터링합니다(하지만 다시 한번 놀라는 것은, 이것이 작동하지 않는다는 사실입니다 🙃).
> [@awesomerobot](#):
>
> 모바일 기기에서 탭 가능한 요소의 최소 권장 크기는 일반적으로 약 45px 정사각형입니다.
이것이 화면 크기와 관련이 있는지 확실하지는 않지만, 제 모바일은 6인치 미만의 화면을 가지고 있으며, 해당 요소를 정확히 탭하는 데 문제가 없었습니다.
그리고 토픽 내부에 있을 때, 토픽 제목과 카테고리 및 태그 요소 사이의 간격은 더 적으며, 그곳에서 그것들을 탭하는 것은 항상 활성화되어 있었습니다.