Hi Don,
우선, 정말 멋진 테마네요! 최근 제 지역 교육 커뮤니티인 **Jiwa.now**에 FKB Pro를 배포했는데, 카드 기반 UI가 아름답고 매우 전문적인 인상을 줍니다.
모바일에서 테스트하던 중 토픽 카드의 클릭 영역과 관련된 UX 문제를 발견했습니다. 현재 클릭 가능한 영역이 일관성이 없습니다. 예를 들어, 카드의 가장자리에서는 토픽으로 진입할 수 있지만, 다른 빈 영역(아바타 행 오른쪽이나 푸터 중앙 등)을 클릭하면 아무 반응이 없습니다.
이러한 “때로는 되고 때로는 안 되는” 인터랙션은 사용자를 혼란스럽게 만들며, 피드를 스와이프하거나 스크롤하려는 중에 의도치 않은 클릭이 발생하는 경우가 많습니다.
향후 업데이트를 위한 제안: 테마가 기본적으로 이를 개선하여 *핵심 콘텐츠(제목, 이미지, 발췌문)*만 클릭 시 토픽으로 진입하도록 하고, 스와이프 시 오클릭을 방지하기 위해 카드 배경의 클릭을 비활성화하면 UX 측면에서 개선이 될 것입니다.
그동안, 제 사용자들이 모바일 터치 경험을 100% 신뢰할 수 있도록 pointer-events “화이트리스트” 방식을 활용한 CSS 스니펫을 작성했습니다. 이를 통해 배경 클릭을 완전히 무효화하고, 실제 인터랙티브 요소에만 클릭을 선택적으로 재활성화합니다.
터치 타겟을 개선하고자 하는 분들을 위해 여기에 공유하고, 개발자분들께도 유용한 참고 자료가 될 수 있기를 바랍니다:
/* Fix for mobile card click/touch conflicts (Smart Whitelist Approach) */
/* 1. Neutralize the entire card background to prevent swipe-clicks */
.topic-list-item {
pointer-events: none !important;
}
/* 2. Re-enable all native links and buttons (Avatars, Tags, Titles) */
.topic-list-item a,
.topic-list-item button {
pointer-events: auto !important;
}
/* 3. Re-enable image clicks */
.topic-list-item .topic-image,
.topic-list-item .topic-thumbnail,
.topic-list-item img {
pointer-events: auto !important;
cursor: pointer !important;
}
/* 4. Re-enable the entire footer stats area */
.topic-list-item .topic-item-stats,
.topic-list-item .topic-footer,
.topic-list-item .post-activity,
.topic-list-item .activity,
.topic-list-item .num,
.topic-list-item .topic-meta-data {
pointer-events: auto !important;
}
/* 5. Kill any overlapping stretched-link pseudo-elements */
.topic-list-item .main-link::before,
.topic-list-item .main-link::after {
pointer-events: none !important;
display: none !important;
}
```\n
감사합니다!
Leo