유저 경험을 위한 한 끗 차이: Blogger 카드 전체 클릭 처리의 여정

안녕하세요, J.Lab입니다. 최근 블로그를 운영하면서 문득 불편함을 느낀 부분이 있었어요. 바로 메인 페이지나 카테고리 페이지에 노출되는 게시글 카드들이었죠. 썸네일, 제목, 그리고 '더 읽기' 버튼까지 각기 다른 영역이 클릭되다 보니, 독자들이 의도치 않게 다른 곳을 누르거나, 원하는 곳을 정확히 클릭하기 위해 애쓰는 모습이 눈에 밟혔습니다. 'Blogger 카드 전체 클릭'이라는 목표를 세우게 된 계기였습니다.

솔직히 말하면, 이건 작은 개선처럼 보이지만 사용자 경험(UX) 측면에서는 정말 큰 차이를 만들어냅니다. 모바일 환경에서는 더더욱 그렇죠. 시원하게 아무 곳이나 눌러도 게시글로 이동하는 경험, 이게 바로 J.Lab이 추구하는 사용자 친화적인 블로그의 첫걸음이었습니다. 그래서 저는 이 문제 해결에 도전하기로 마음먹었습니다.

첫 번째 시도: 가상 요소(::after)와 z-index의 배신

처음에는 간단하게 생각했습니다. CSS의 `::after` 가상 요소를 활용해서 카드 전체를 덮는 투명한 레이어를 만들고, 여기에 `z-index`를 높여서 링크 역할을 부여하면 되지 않을까 하고요. 겉으로 보기엔 아주 그럴싸한 계획이었죠. 저의 issuelog, kidstory, 그리고 jins-lab 세 가지 테마에 동일하게 적용할 생각으로 코드를 작성하기 시작했습니다.

하지만 현실은 녹록지 않았습니다. 코드를 적용하고 테스트를 해보니, 이게 웬걸? `::after` 방식은 제가 기대했던 대로 동작하지 않았습니다. 일부 영역은 클릭이 되지만, 기존에 있던 썸네일이나 제목에 걸려있는 링크들이 여전히 활성화되거나, 클릭 자체가 안 되는 묘한 상황이 발생했습니다. 아무리 `z-index` 값을 높여도 소용없었어요. '가상 요소와 z-index의 배신'이라고 해도 과언이 아니었죠. 분명 이론적으로는 가능해야 할 것 같은데, 실제 웹 환경, 특히 Blogger 플랫폼에서는 다른 문제들이 얽혀 있는 듯했습니다.

문제의 근원과 해결책의 실마리: 왜 ::after는 안됐을까?

며칠 밤낮을 고민하며 개발자 도구를 붙잡고 씨름했습니다. 기존 HTML 구조를 뜯어보니, 각 카드 내부에는 썸네일 이미지, 게시글 제목, 그리고 '더 읽기' 버튼 등 여러 요소에 개별적인 `` 태그가 이미 걸려 있었습니다. 이 복잡한 중첩 구조 안에서 `::after`는 모든 `` 태그 위에서 완전한 오버레이로 작동하기 힘들었던 것입니다.

결국, 기존에 분산되어 있던 링크들을 제거하고, 카드 전체를 감싸는 단 하나의 링크로 통합하는 방향으로 전환해야 한다는 결론에 도달했습니다. 이건 마치 엉켜있는 실타래를 풀기 위해 과감하게 잘라내고 새로 엮는 과정과 비슷했습니다. 기존의 모든 링크를 없애고, 새로운 CSS 오버레이를 씌우는 것이 제가 찾은 해결책의 실마리였습니다.

결정적 한방: position:absolute 오버레이와 예외 처리

새로운 해결책은 바로 `position:absolute`를 활용한 투명한 `` 태그 오버레이였습니다. 먼저, 썸네일, 타이틀, '더 읽기' 버튼에 걸려 있던 모든 `` 태그를 제거했습니다. 그리고 각 게시글 카드를 감싸는 부모 요소에 `position:relative`를 부여한 다음, 그 안에 `position:absolute; inset:0;` 속성을 가진 빈 `` 태그를 삽입했습니다.

이 `` 태그는 부모 요소의 전체 영역을 덮으면서, 카드의 어느 부분을 클릭하든 게시글로 이동하게 만들었습니다. 여기에 접근성을 위해 `sr-only` 클래스로 숨겨진 텍스트('본문으로 이동')를 추가하여 스크린리더 사용자도 이 링크의 목적을 명확히 알 수 있도록 했습니다. 하지만 여기서 또 하나의 난관이 있었습니다. 바로 카테고리 태그(`.jp-tag`)였습니다. 이 태그들은 게시글 링크와는 별개로 해당 카테고리 페이지로 이동해야 했죠.

해결책은 간단했습니다. 카테고리 태그에만 `position:relative; z-index:1;`을 부여하여, 전체 카드 오버레이 위에 놓이도록 하여 독립적인 클릭을 유지하게 했습니다. 이렇게 하니 '카드 링크 처리'는 물론, 기존의 카테고리 링크 기능까지 완벽하게 보존할 수 있었습니다. 드디어 제가 원하던 'Blogger 카드 전체 클릭' 기능이 제대로 작동하게 된 순간이었습니다.

마무리하며: 삽질 끝에 얻은 깨달음과 다음 계획

이번 'Blogger 카드 전체 클릭' 기능 구현을 통해 얻은 가장 큰 깨달음은 '때로는 복잡하게 생각하기보다 단순하고 명확한 방법이 최고의 해결책'이라는 것이었습니다. `::after` 방식에 갇혀 한참을 헤매다가, `position:absolute` 오버레이라는 직관적인 방법으로 문제를 해결할 수 있었죠. 저처럼 `CSS 오버레이`나 `position absolute` 관련 삽질을 하고 계신 분들께 이 경험이 조금이나마 도움이 되었으면 좋겠습니다.

앞으로도 J.Lab은 독자 여러분의 편의성을 높이기 위한 다양한 시도를 멈추지 않을 것입니다. 다음번에는 어떤 재미있는 문제 해결기로 찾아올지 기대해주세요. 제 블로그에서 더 나은 사용자 경험을 위한 여정은 계속됩니다!