티스토리 댓글 / 방명록 치환자 변경 안내 (With 친효스킨)

안녕하세요. 친절한효자손입니다. 2023년 5월 23일에 티스토리팀에 새로운 공지가 올라왔습니다. 내용인즉슨 댓글 및 방명록 시스템이 업데이트 된다는 소식이었습니다. 자세한 내용은 아래의 공지글에 있습니다.

좋은 업데이트다

https://notice.tistory.com/2645

[안내] 티스토리 댓글과 방명록이 새로워졌습니다.

안녕하세요. 티스토리팀입니다. 지난 안내에서 말씀드린 바와 같이 티스토리 댓글에 새로운 기능이 추가됐습니다. 마음에 드는 댓글을 제일 먼저 보여줄 수 있는 댓글 고정, 특정 블로거를 멘션

notice.tistory.com

새로워졌군요! 좋습니다. 바뀐 기능을 요약해 보겠습니다.

1. 핀 고정 기능

유튜브나 인스타그램과 같은 댓글 시스템이죠? 댓글 고정 기능입니다. 고정된 댓글 레이아웃의 상단에 위치하게 됩니다.

2. 멘션 답글

이건 현재 브런치에 있는 기능 중 하나입니다. 마찬가지로 인스타그램과 유튜브같은 글로벌 대형 플랫폼에서 사용하는 방식이죠. @닉네임으로 특정 인물을 지정해 코멘트를 남길 수 있습니다.

3. 프로필 레이어 변경

프로필에 자신이 운영중인 SNS 바로가기 아이콘을 등록할 수 있는 기능입니다. 이러면 접근성이 다양해져서 좋네요. 다만 댓글로 영업하는 사람들이 훨씬 더 넘쳐날 것으로 예상됩니다.

적용 방법

문제는 티스토리 스킨을 제작하시는 분들의 고충입니다. 와... 이거 언제 다 바꾸지?! 미치겠습니다. 장단점이 있습니다. 기존 치환자보다 훨씬 간결해졌습니다. 다만 이건 어디까지나 HTML에서의 마크업이 간단해진거지 CSS 입장에서는 아닙니다. 아무튼 칭얼거리는건 나중에 하고 변경하는 방법을 알아보겠습니다.

티스토리 관리자 > 꾸미기 > HTML 편집으로 들어갑니다. 아무곳에서 클릭 후 커서를 활성화하고 Ctrl + F를 눌러 s_rp를 검색합니다. 친효스킨의 경우는 현재 이런 상황입니다. s_rp 안쪽에 태그들이 엄청 많습니다. 제가 임의로 넣은 요소도 있고 티스토리측에서 기본적으로 제공하는 치환자 및 태그들도 있습니다. 그래서 양이 제법 많아졌습니다. 새로운 티스토리 댓글 치환자로 변경해볼까요?

s_rp 안쪽의 수많은 태그들을 모두 지우고 [샵샵_comment_group_샵샵] 값 치환자를 넣어줍니다. 간단하죠? 무수한 태그들이 이렇게 한 줄 요약됩니다. 이제 막 티스토리 스킨을 개발하시는 분들 입장에서는 더할나위없이 간단한 방법이 되었습니다. 이제 오른쪽 상단에 있는 적용 버튼 후 댓글 리스트를 한번 살펴보시기 바랍니다. 방명록 태그 수정도 이 과정과 동일합니다.

잘 적용이 되었습니다. 새로 바뀐 댓글 / 방명록 기본 레이아웃도 생각보다 깔끔합니다. 문제는 이걸 다시 친효스킨 스타일로 변경해야 한다는 것입니다. 이 작업이 어우... 고된 작업인거죠.

크롬 개발자툴에서 HTML 구조를 살펴보니 역시 예상대로 너무 많이 바뀌었습니다. 태그명과 클래스명도 싹 다 바뀌었어요. 그래서 친효스킨 스타일대로 댓글을 바꾸려면 꽤 고생을 해야 할 것 같습니다. 뭐 귀찮으면 그냥 티스토리 기본 스타일로 그대로 진행해도 괜찮지 않을까 싶기도 해요. 생각보다 깔끔하네요. 하지만 성격상 바꾸게 되지 않을까 싶습니다. 시간 좀 걸리겠네요.

새로운 댓글 / 방명록 기능

티스토리팀에서 공지한대로 프로필 닉네임 바로 오른쪽에 사람 모양의 작은 아이콘이 있습니다. 마우스를 올려보면 SNS 아이콘들이 있습니다. 티스토리, 유튜브, 인스타그램, 트위터 이렇게 4개입니다.

댓글 맨 오른쪽에는 메뉴 아이콘이 있습니다. 누르면 고정, 삭제, 신고, 링크복사 메뉴가 있습니다.

이젠 답글 버튼이 모든 댓글에 있습니다. 구버전은 최초 댓글에만 있었잖아요? 이건 편리하게 바뀌었습니다. 또한 답글을 누르면 해당 댓글을 남긴 사람의 닉네임이 자동 멘션됩니다. 골뱅이로 표시된거 보이시죠? 이런 부분은 매우 좋네요. 친효스킨에서도 사용 가능합니다. 다만 새로운 댓글 / 방명록을 적용시키면 스킨 편집에 있는 친효스킨의 기능들은 사용할 수 없게 되는 점 참고 부탁드립니다. 끝.