Skip to content

[DevLoop] 검색 결과 카드에 매칭 키워드 하이라이트 추가 제안 #4

@github-actions

Description

@github-actions

문제

현재 검색 결과 카드에서 사용자가 왜 해당 글이 검색되었는지 직관적으로 이해하기 어려워, 실제 사례 탐색 시 빠른 판단이 어렵습니다.

지금 필요한 이유

TechCase의 핵심 가치는 개발자가 실제 기술 도입 사례를 빠르게 파악하는 데 있으므로, 검색 결과 카드에 매칭된 기술명, 문제 키워드, 아키텍처 키워드 등을 하이라이트로 표시하면 사용자가 결과의 관련성을 즉시 인지할 수 있어 탐색 효율이 높아집니다.

제안 범위

프론트엔드 apps/web의 검색 결과 카드 컴포넌트에 Elasticsearch 응답의 matchedKeywordshighlights 필드를 활용해 매칭된 키워드를 시각적으로 강조하는 UI 개선 문서 및 코드 스켈레톤 추가. 서비스 코드 변경 없이 UI 문서와 컴포넌트 구조 제안 중심으로 진행.

하지 않을 일

검색 알고리즘 변경, 백엔드 검색 API 수정, 키워드 추출 로직 개선, 인프라 변경, 인증 및 결제 관련 작업은 포함하지 않습니다.

위험 요소 / 가드레일

하이라이트 UI가 과도하게 복잡해질 경우 사용자 경험이 저해될 수 있으므로, 단순하고 명확한 강조 방식만 제안하며, 성능 영향은 미미할 것으로 예상됩니다.

검증 방법

검색 결과 페이지에서 특정 검색어로 조회 후, 결과 카드에 매칭 키워드가 명확히 하이라이트되어 표시되는지 수동으로 확인합니다. 또한 UI 변경 사항이 기존 스타일과 잘 어우러지는지 디자이너와 협의하여 검증합니다.

승인 방법

이 아이디어를 진행하려면 이슈 댓글에 정확히 /ai approve를 남겨주세요.
승인 후 DevLoop가 ai/ 브랜치와 PR scaffold를 생성합니다.

DevLoop fingerprint: da1ad5f8bb48

Metadata

Metadata

Assignees

No one assigned

    Labels

    ai-proposedAI-proposed idea awaiting human review.devloopManaged by the DevLoop MVP workflow.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions