티스토리 스킨 교체 - 반응형2단 뉴스페이퍼A

 

부모님과 함께 살고 있는 집 리모델링을 하는데 거의 두 달의 시간이 걸렸습니다. (제 방은 아직도 진행 중~ ) 실제 공사 기간은 8일 정도였지만, 집에 짐이 있는 채로 거의 전체 수리를 하다 보니 이사하는 것보다 더 까다로운 부분이 많았어요.

 

두 달 동안 계속 짐 옮기고 청소만 한 기분입니다 ㅎㅎ 평생 할 청소 한꺼번에 다 하고 있는 기분?? 리모델링 과정에서 배운 것들이 많은데, 정리가 되는대로 공유하도록 할게요. 이렇게 주거 공간의 변화를 주고 나니, 블로그 집에도 변화를 주고 싶지 뭐예염~ 

 

새 단장도 좋지만 티스토리 스킨은 가능한 자주 교체하지 않는 게 가장 좋습니다. 단순히 스킨을 변경하는 것은 덜하지만, 저처럼 스킨 수정을 많이 해서 쓰는 경우는 영향을 미치는 부분이 많더라고요.

 

 

티스토리 앱으로 볼 때는 확인이 안 되지만, 저는 글을 항상 PC에서 작성하기 때문에 스킨에 대한 아쉬운 부분과 보완점에 대한 고민이 늘 있었어요. 이번에 교체한 스킨은 반응형 2단 뉴스페이퍼A 스킨(무료)입니다.

 

 

다른 분의 블로그에 걸린 스킨이 궁금할 때는 맨 아래에 내려가서 desigNed by aPost.kr 부분 링크를 클릭하면 제작자의 웹사이트로 이동합니다. 무료 스킨인지 유료 스킨인지 확인할 수 있고, 스킨 수정에 대해서 도움(답변)을 주시는 분들도 있고 일체 질문을 받지 않는 분들도 있어요.

 

커스터마이징이 필요한 경우라면 전자의 제작자가 만든 티스토리 스킨을 사용하시는 게 여러모로 도움이 됩니다. 저는 웬만하면 모든 방법을 총동원해서 스스로 알아내고, 정 안 될 때 마지막에 질문을 하는 편이에요.

 

그런데 이번엔 정말 수정을 해도 해도 너무 많이 했는지, 난관에 봉착할 때가 많아서 결국 제작자님께 질문을 남겼습니다. 많은 분들이 질문하셔서 귀찮으셨을 텐데 빠르게 답변을 주셨어요. 한 가지 부분은 쉽게 해결이 되었는데, 나머지 많은 부분은 해결이 되지 않아서 며칠 혼자 뻘짓 많이 했습니다. 결국 스스로 해결하긴 했어요~ 역시 해결사 ㅎㅎ

 

 

초창기부터 사용했던 스퀘어(Square) 스킨에 정이 많이 들었는데요. 중간중간 다른 스킨으로 교체해봤지만 결국 스퀘어 스킨으로 다시 돌아가곤 했었어요. 스퀘어 스킨의 아쉬운 부분을 수정해서 사용하고 있긴 했지만, 여전히 남아있는 아쉬움이 있었죠.

 

이번에 변경한 반응형 2단 뉴스페이퍼A 스킨 역시 장단점이 있는 듯해요. 유료 스킨이라고 해도 그건 마찬가지 같습니다. "완벽한 스킨은 없다! 수정은 하면 할수록 끝이 없다! 그만 건드리자."라는 것이 최종 결론이네요 ㅋㅋ

 

반응형 2단 뉴스페이퍼A 스킨은 이번에 처음 사용한 것은 아닙니다. 서브 블로그 2개에서 몇 달 동안 사용하고 있었는데, 수정 과정에서 틀어진 것인지 댓글 창이 좀 이상해져 있었어요. 서브 블로그는 거의 불통 블로그라 댓글이 거의 없어서 별로 신경 쓰지 않고 놔뒀습니다.

 

그러다가 그 부분을 이번에 보완해서 메인 블로그로 데려온 것이죠. 그 과정도 쉽지는 않았어요~ 수정 안 하고 사용했으면 이런 고생을 안 했을 텐데, 정말 뻘짓한 시간들을 생각하면!! 으윽... ㅋㅋ

 

카테고리 위치는 탑 메뉴 또는 사이드바로 설정할 수 있습니다. 스킨을 선택할 때 가장 중요하게 보는 것 중 하나가 이 부분이에요. 카테고리를 사이드바에 펼칠 수 없고, 탑 메뉴 고정만 되는 스킨은 선택하지 않아요. 그런 스킨을 수정해서 사용해 보기도 했지만, 최대한 손을 덜 댈 수 있는 스킨이 좋겠죠.

 

탑메뉴에 있는 카테고리가 더 깔끔하다고 생각하고 실사용자들은 필요에 의해서 탑메뉴의 카테고리를 클릭하고 펼쳐서 보는 수고로움을 하기도 하겠지만, 기본적으로 카테고리는 한눈에 보이게 펼쳐진 것이 더 유리합니다.

 

 

메인 화면은 커버를 사용하지 않고, 최신 글 목록으로만 구성했습니다. 최신글 목록 사이에 들어가는 인피드 광고도 삽입했습니다. 몇 달 전에 했기 때문에 어떻게 했는지는 기억이 전혀 나지 않습니다.. ㅋㅋ

 

SNS 공유 아이콘은 애드디스(AddThis)를 이전부터 사용하고 있었어요. 스킨을 교체하면서 사라진 소스코드를 다시 삽입해 줬습니다. 원래 PC에서는 오른쪽, 모바일에서는 하단에서 사용하고 있었어요. 스킨의 사이드바 위치가 바뀌었기 때문에 SNS 공유 아이콘 위치도 PC 화면에서 왼쪽으로 설정을 바꿔봤어요.

 

그러자, 사용자 환경에 따라서는 본문의 글을 덮을 수도 있겠단 생각이 들었습니다. 그래서 다시 오른쪽으로 위치를 옮겼죠. 하지만 결론은 스킨에서 애드디스(AddThis) 소스코드를 삭제했습니다. 용량을 제법 차지하는 부분이 있어서 말이죠.

 

 

대신 본문 하단 공감 버튼 아래에 SNS 공유 아이콘을 삽입했습니다. 구글링으로 아이콘 이미지와 삽입하는 방법의 도움 얻었고요. 공감 버튼 위치도 가운데 정렬로 바꾸고, 위아래 여백도 수정했습니다. 공감버튼의 상하단 여백 때문에 SNS 공유 아이콘을 삽입했을 때 부자연스럽게 떨어져 있어서 보기 좋지 않았어요.

 

공감버튼 옆에 페이스북, 카카오톡, 카카오스토리, 트위터, URL 복사로 공유하기 버튼이 있습니다. 하지만 눌러보지 않으면 모를 사람들이 더 많겠죠? 그래서 아래에 SNS 공유 아이콘을 펼쳐서 넣어주고, 원하는 아이콘을 추가로 넣어줍니다.

 

 

애드디스를 사용할 때는 핀터레스트와 라인도 사용했는데, 상황 봐서 추가로 작업해 봐야겠어요. AddThis를 사용하면서 좋았던 점은 어떤 글이 어떤 SNS로 얼마나 공유되는지 통계를 쉽게 확인할 수 있다는 점이었어요. 페이스북, 트위터의 공유가 가장 많았지만 카카오톡, 카카오스토리, 핀터레스트, 라인 등의 공유도 꾸준히 있었습니다. 

 

 

티스토리 스킨을 변경했던 또 다른 이유는 기존에 사용했던 스퀘어 스킨에 인기글(Popular Posts) 기능이 없어서 수동으로 삽입한 상태였습니다. 자동이 아니라 수동이라 번거로움이 많았고, 스킨을 수정할 때마다 영향이 많아서 별로 좋지가 않았어요.

 

그런데 스킨 교체 후 인기글을 보니 "읭?? 너 인기글 맞니?" 그중에 몇 개는 실제 인기글이 맞는데, 최근 글을 바탕으로 한 인기글이라 그런지 블로그 전체 인기글과는 다소 차이가 많아 보였어요. 티스토리 관리 페이지에서 보는 최근 7일 통계와도 무관해 보였고요.

 

어떤 기준으로 인기글이 되는 건지 좀 애매하단 느낌이 듭니다. 검색하다 보니 비슷한 글을 제법 발견하게 되었어요. 조회수와 댓글, 공감 등을 모두 반영한 결과라 그런 것일 수도 있겠지만, 누적 조회수가 훨씬 높은 글이 인기글에 뜨지 않는 건 좀 아쉽다는 생각입니다.

 

 

본문 상단 광고는 PC 기준 우측 상단 광고(336px x 280px)를 오랫동안 사용하고 있었는데, 사이드바가 우측으로 오면서 우측 광고가 가독성에 도움이 되지 않아서 중간 2개 광고로 변경했습니다. 

 

검색창 아래 들어간 구글 번역기는 기존에 사용하고 있었기 때문에 계속 사용할 수 있었어요. 기존 사용자 외에는 구글 번역기를 웹사이트에 장착하는 게 현재는 지원되지 않습니다. 번역을 지원하는 브라우저를 사용하지 않을 경우를 생각해서 장착하고 있지만, 득과 실을 따져봐야 할 부분입니다.

 

효과적인 측면은 미비하고, 많은 용량을 차지해서 블로그를 더 무겁게 만든다면 삭제도 고려할 필요가 있겠습니다. 구글 번역기 때문에 모바일 사이드바 너비를 꽤 많이 넓혔어요. 심플형으로 하면 가로 길이가 짧지만, 실제 번역기를 사용할 때 불편함이 많습니다.

 

선택 언어가 가로로 펼쳐지면서 화면이 확대, 축소가 되지 않아 언어를 선택할 수 없는 오류가 발생합니다. 드롭 다운 형식은 구글 번역기 가로 길이가 길어서 많은 너비를 차지하지만 언어를 선택할 때는 오류 없이 편리합니다. 미국, 일본 등의 해외 유입도 있기 때문에 아직은 사용하고 있습니다.

 

 

반응형 2단 뉴스페이퍼A 모바일 화면입니다. 메뉴 버튼의 모양과 위치는 변경했어요. 상단 광고가 뜰 때 토글이 좌측에 있으니 거의 다 덮여버려서 우측으로 이동했습니다. 뜨는 광고 모양, 위치에 따라서 수시로 다를 것 같습니다.

 

반응형 스킨을 사용하는 경우, "티스토리 모바일웹 자동 연결을 사용하지 않습니다."로 설정을 맞춰놓으셨을 텐데요. 이 또한 장단점이 있습니다. 아무리 반응형 스킨이지만 PC와 모바일에서 맞추기 힘든 부분이 많을 때가 있어요. 그럴 때 모바일웹 자동 연결을 사용하면 심플하고 깔끔합니다.

 

애드센스 광고 수익에는 영향이 있을 수 있다는 단점이 있지만, 웹사이트 속도 개선에는 큰 효과가 있습니다. 모바일 검색량이 거의 대부분을 차지하는데 블로그의 무게와 속도가 신경이 쓰이네요. 우선은 모바일도 반응형 스킨을 함께 사용하면서 다른 부분에서 속도 개선할 방법을 찾고 있습니다.

 

 

사이드바의 너비를 넓히고, 여기저기를 수정했습니다. 세세한 부분을 수정한 것이기 때문에 스킨의 큰 골격에는 변함이 없지만, 원래 뉴스페이퍼A 스킨이 어떠했는지는 잘 기억나지 않습니다... ㅋㅋ

 

수정하다가 멘붕이 여러 번 와서 그냥 다 버리고, 수정 전의 깨끗한 스킨을 그대로 입히자는 생각까지 갔다가 겨우 스킨 커스터마이징을 마무리 지었습니다. 저는 항상 몸소 뻘짓을 체험하고 결론을 내리지만, 현명하신 분들은 하기 전에 미리 알죠~ 그럼 몸도 머리도, 마음도 덜 고생합니다 ㅎㅎ

 

 

카테고리의 다른 글과 아래 태그 부분도 수정했습니다. 없던 테두리를 넣었고, 태그의 폰트 사이즈와 자간 등을 수정했습니다. 이 부분에서도 계속 오류가 발생했어요. 테두리 밖으로 나간 태그가 잘려서 일부분 보이지 않았습니다.

 

CSS에서 테두리 밖으로 나간 텍스트를 감추지 않고, 줄바꿈을 해서 다 보이게 설정을 아무리 해도 계속 오류가 생기고 잘되지 않았어요. 밤새우고 비몽사몽간에 어떻게 수정을 하긴 했는데, 어떻게 했는지 모르겠어요. ㅋㅋ

 

 

수정을 너무 많이 하다 보면 잘못 건드려지는 부분도 있고, 서로 영향을 미쳐서 자꾸 오류가 발생하는 부분이 있어요. 그럴 땐 어떤 방법으로도 해결이 안 될 때가 있습니다. 오기가 생겨서 끝까지 어떻게 하긴 했습니다만, 두 번 다시 하고 싶진 않네요~>.<

 

 

댓글 입력 창도 수정했습니다. 테두리에 색상을 넣고, 댓글 창 문구도 변경했어요. "본문과 관련 있는 내용으로 댓글을 남겨주시면 감사하겠습니다"라는 표현을 사용하는 곳이 많아서 저도 넣어 봤습니다 :)

 

 

이 댓글창은 수정이 완료된 상태인데요. 그전에는 이 부분이 다 뒤틀려 있었어요. 아마도 중간에 수정 과정이나 광고 삽입에서 오류가 발생한 것 같다고 제작자님이 말씀하셨어요. 아주 미세한 부분 하나만 건드려도 여기저기 연쇄적으로 오류를 일으킬 수 있기 때문에 조심해야 합니다.

 

플러그인에서 아이콘과 파비콘 설정을 함께 해놓았습니다. 현재 댓글창에 보이는 이미지는 블로그 계정 대표 이미지인 듯합니다. 수정 전, 아이콘, 파비콘, 대표 이미지 3개가 동일한 크기로 조금씩 겹쳐서 보이는데 사이즈 조절도 안되고 3개 이미지를 코드로 아무리 분리하려고 해도 안 됐어요.

 

저는 대표 이미지는 안 보이게 하고 블로그 아이콘을 크게 파비콘은 작게 넣고 싶었거든요. 몇 날 며칠 고생한 결과 결국 아이콘과 파비콘은 플러그인에서 해제하고 계정 대표 이미지 하나만 위치를 잡아놓고 깔끔하게 라인을 추가했습니다. 이 또한 뒤틀려있는 상태라 원하는 대로 수정이 원활하게 되진 않았어요.

 

 

휴대폰에서 모바일 환경을 체크해 가면서 모두 잘 작동하는지를 확인했습니다. 수정 과정에서 토글 버튼이 작동하지 않는 오류가 발생하여 가족, 친구들의 스마트폰 10종류 정도로 테스트를 해봤어요.

 

 

모바일에서 보이는 댓글 창입니다. 날짜와 댓글 주소 수정/삭제 댓글 쓰기 등의 부분도 위치와 폰트, 색상 등을 수정했습니다. 댓글 주소 수정/삭제 댓글 쓰기 부분은 하단에 위치하게 하고 싶었으나, 이 또한 오류 발생으로 정확하게 원하는 위치에 넣을 수 없어서 좀 복잡해 보이지만 상단에 뒀습니다.

 

출구가 보이지 않는 복잡한 미로 속에 갇혀 허우적거리면 거릴수록 출구와 점점 더 멀어져 가는 기분이었어요. 처음으로 다시 돌아가기도 억울하고, 계속하자니 점점 더 미궁 속으로 빠져들고 진퇴양난이란 바로 이런 상황이 아니었을까 해요. 

 

제게 5월은 티스토리 스킨 커스터마이징을 비롯한 모든 상황이 미궁 속으로 빠져드는 시간 같았어요. 연쇄적으로 계속 터지는 문제를 매일매일 해결하며 에너지를 다 소진해서 너덜너덜해진 한 달이었습니다. 여러분은 5월 한 달 어떻게 보내셨나요?

 

유월은 여유롭고 즐거운 시간을 가지면서,

스스로에게 휴식과 보상을 충분히 줘야겠단 생각이 듭니다. ㅎㅎ

 

편안하고 여유로운 휴일 보내세요 :D