김영사 콘텐츠로 제작한 티스토리 북클럽 스킨 데모 페이지입니다.
북클럽 스킨은 모바일 화면에서 팝업 윈도를 띄웁니다. 화면이 작기 때문에 PC 화면의 사이드바(aside)를 모바일 화면의 팝업창으로 이동한 형태입니다.
모바일 기기에서 왼쪽과 같은 메뉴 버튼을 누르면 본문 위에 팝업 윈도가 뜨면서 사이드바의 내용을 나열하게 됩니다.
팝업창의 댓글 리스트에서 하나의 링크를 마우스로 클릭하면,
1. 해당 페이지를 웹브라우저의 메인 창에 펼치고
2. 클릭한 댓글의 위치로 화면이 이동합니다.
https://skin-demo-0053.tistory.com/27#comment17308450
페이지 주소
+ 글 번호(27)
+ 댓글 번호(#comment17308450)댓글 링크를 클릭할 때 발생하는 문제
만약
- window.opener 역할을 하는 부모 요소(parent element)가 본문의 내용으로 담고 있는 인터넷 주소가,
- 팝업창 역할을 하는 자식 요소(child element)의 댓글 링크 주소와 일치하고,
- 해당 링크를 클릭할 경우,
웹브라우저는 페이지를 갱신하는 것이 아니라 단순하게 해당 댓글 위치로 본문 페이지를 스크롤하게 됩니다.
페이지를 갱신(refresh)한다는 것은 HTML 코드를 다시 렌더링하는 것이기 때문에 부모 창과 자식 창 모두 닫고 새로 창을 만드는 것이지만, 동일 페이지의 댓글 위치를 보여 준다는 것은 다시 렌더링 하지 않고 위치만 변경하는 것이기 때문에 기존 부모 창과 자식 창은 그대로 남아 있습니다.
결국 북클럽 모바일 환경에서 자식 창은 오버레이 형태로 부모 창을 계속 가리고 있습니다. 부모 창의 페이지 스크롤도 육안으로 확인되지 않을 뿐만 아니라 자식 창이 가리고 있기 때문에 본문의 내용을 볼 수가 없습니다. 자식 창을 닫아 주어야 합니다. 하지만 자식 창의 클릭에 대한 시각적인 변화가 눈으로 감지되지 않기 때문에 어떤 오류가 발생한 것으로 오인할 수 있습니다.
자주 발생하기 어려운 조건이지만 PC 화면에서도 팝업창을 사용하면 발생 조건은 산술적으로 2배가 됩니다. 이 블로그가 지금 북클럽 스킨을 그러한 형태로 구조를 수정하여 사용하고 있습니다. 화면에 사이드바가 없고 팝업창으로 변경하여 컨테이너의 구조를 단순하게 만들었습니다.
해결 방법
현재 HTML과 CSS로는 해결이 어렵기 때문에 자바스크립트로 해결해야 합니다.
1. 본문 인터넷 주소와 댓글 링크가 같을 경우 링크를 만들지 않고 단순 텍스트로 처리하는 방법
2개의 주소를 비교하고 해당 댓글에 대한 HTML 출력을 별도로 처리해야 합니다.
2. 2개의 주소를 비교하여 같을 경우 댓글 링크를 누르면 무조건 자식 창을 닫는 방법
(1)과 마찬가지로 비교하는 코드가 필요합니다.
3. 댓글 링크를 누르면 2개의 주소를 비교하는 사전 절차 없이 무조건 자식 창을 닫는 방법
극 초보적인 자바스크립트 지식으로 해결 가능한 형태가 (3)이고 script.js 파일의 내용을 살펴보니까 그나마 간단한 수정으로 해결이 가능하며, 2개의 주소가 다를 경우에는 어차피 페이지를 갱신하는 것이므로 문제가 안되고 단지 일치할 때만 적용하는 것이기 때문에 페이지 로딩 속도에 전혀 변화를 줄 여지가 없습니다.
코드 수정
북클럽 스킨의 "script.js"
// script.js
$(document).on("click", "#dimmed, #aside .close", function(){
$("body").removeClass("mobile-menu");
if ( $("#dimmed").length ) $("#dimmed").remove();
});수정할 코드입니다. 클릭하면 body에 추가된 class "mobile-menu"를 제거하고, 팝업창 주위를 어둡게 만드는 "#dimmed" 요소를 제거하는 기능을 수행합니다. 정확하게 필요한 코드이므로 이것을 그대로 살리고 "click"과 연결된 요소를 추가할 것입니다.
"#dimmed, #aside .close"
쉼표(,)로 각각의 요소를 분리하고 계속해서 추가할 수 있습니다.
<aside id="aside" class="sidebar">
<div class="recent-comment">
<h2>최근댓글</h2>
<ul>
<li><a href="/27#comment17308450">생각을 잘 정리하는것이 중요⋯</a></li>
<li><a href="/26#comment17214562">고독이 우리 자신과 대화하는⋯</a></li>
<li><a href="/24#comment16454000">안녕하세요?</a></li>
<li><a href="/37#comment16407826">댓글입력</a></li>
</ul>
</div>
</aside>
북클럽 스킨 데모 사이트에서 관련 코드를 발췌한 것입니다. 이것을 기초로 하여 script.js 파일에 필요한 코드를 만듭니다.
#aside .recent-comment ul li a
클릭할 요소로 추가합니다.
"#dimmed, #aside .close, #aside .recent-comment ul li a"- #dimmed
- #aside .close
- #aside .recent-comment ul li a
변경 사항을 처음 원본 코드에 반영합니다.
// script.js
$(document).on("click", "#dimmed, #aside .close, #aside .recent-comment ul li a", function(){
$("body").removeClass("mobile-menu");
if ( $("#dimmed").length ) $("#dimmed").remove();
});
댓글