본문 바로가기

Tech-tips/Tistory

라이브리를 당장 티스토리에서 떼어 내야하는 이유 10가지 제가 라이브리를 이틀남짓 쓰다가 플러그인 적용을 해제해 버렸습니다. 그 이유를 몇가지 들어보겠습니다. 1. 외부 플러그인 주제에 속도가 너무 느리다. 보통 외부에서 제공하는 이런 소셜 댓글 플러그 인은 빠른 속도가 생명입니다. 특히 요소를 외부에서 호출 해오기 때문에 원래 사이트의 로딩속도를 떨어뜨리기 쉽습니다. 그래서 일단 빠른게 가장 중요한데 그점에 있어서 라이브리는 형편 없습니다. 구글에서 제공하는 페이지 스피드 크롬 익스텐션으로 검사를 해보면 라이브리 플러그인을 당장 제거 할것을 추천하는 것을 보실수 있습니다. 2. 사진을 올리기가 불편하다. 일단 사진을 3개 밖에 못 올립니다. 게다가 콩알만한 섬네일로 띄워줍니다. 지금이 시대가 어느시대인데 아직도 파인더로 파일 찾아서 올려야 됩니다. 디스커스 .. 더보기
디스커스 댓글 창 기본 기능 알아보기 디스커스를 설치했으니 디스커스 댓글 입력 화면을 알아보도록 하겠습니다. (설치 방법은 여기) 전체적인 댓글 창의 모습입니다. 디스커스 댓글 입력 창은 이렇게 생겼습니다. 로그인 한 상태의 모습이며, 자신이 프로필 난에 지정한 사진이 옆에 뜨게 됩니다. 토론 참여하기 부분을 눌러서 코맨트 메시지를 입력하면 됩니다. 코맨트 난은 컨텐츠 자동 인식 기능이 있어서 사진 주소를 붙여넣으면 사진이 뜨고, 유투브 주소를 붙여넣으면 유투브가 자동으로 뜹니다. 가장 왼쪽 버튼은 코맨트 정렬 방식을 바꾸는 버튼입니다. 우수는 가장 추천 수가 많은것, 최신은 가장 최근 것부터, 오래된 순은 그 역순으로 정렬합니다. 커뮤니티 버튼은 현재 사이트에서 댓글이 달리고 있는 상황을 볼수 있습니다. 인기 대화를 통해서 가장 댓글이 많.. 더보기
티스토리에 디스커스 소셜 댓글 플러그인 달기 디스커스(Disqus)라는 코맨트 시스템에 대해서 들어보신적이 있으신가요? 국내 웹 이외에 해외 웹을 돌아다니시는분들에게는 익숙한 이름일지도 모릅니다. 저같은 경우에는 TNW과 IGN에서 처음 보았고 영국 톱기어 매거진 홈페이지가 작년에 개편과 함께 디스커스를 도입하면서 저도 디스커스에 가입을 하게 되었습니다. 이전에는 공식 홈페이지에 회원가입을 해서 댓글을 다는 방식이었는데 그게 쓸만은 했지만 그렇게 썩 좋지는 않았습니다. 사실 소셜 댓글 플러그인이라면 정말 종류가 많습니다. 우리가 흔히 알고있는 페이스북 댓글 플러그인도 있고, 티스토리와 제휴하여 기본플러그인으로 사용할수 있는 라이브리도 있습니다. 특히 라이브리는 거의 모든 언론사 사이트에 달려있을 정도로 널리 확산되어 있습니다. 하지만 제가 라이브리.. 더보기
티스토리 속도향상 프로잭트 - 페이지 압축하기 Google Inspactor나 Site analysis의 권고 사항에는 html,css,js의 압축을 명시하고 있습니다. 따라서 페이지를 압축하면 비약적인 속도향상을 이뤄 낼수 있습니다. 페이지 압축을 위해 HTML compressor에 접속합니다. 제작자가 비트코인이나 라이트 코인으로 기부를 받고 있으니 채굴 좀 많이 하신 분이라면 기부를 하셔도 될 듯 합니다. ^^; 여기서 자신의 skin.html, css, 그리고 자신이 사용중인 자바스크립트를 붙여 넣고 하단에 compress를 누릅니다. 옆에 속성을 설정하는 메뉴가 있긴하지만 자동인식을 하기 때문에 귀찮게 따로 선택해줄 필요는 없습니다. 조금만 기다리면 압축률과 압축된 코드가 나옵니다. 제 블로그의 CSS의 같은 경우 77% 압축이 되었네요. .. 더보기
[잉여] 티에디션 버튼 바꾸기 티스토리 블로그에서 티에디션 플러그인을 사용하개 되면 우측 상단에 티에디션이라는 버튼이 뜹니다. 이 버튼은 오직 관리자 한테만 보이는 버튼으로써 이 버튼을 눌리면 티에디션 설정으로 들어갈수 있습니다. 하지만 이게 그리 디자인이 이쁜게 아니라서 볼때마다 눈에 거슬렸습니다. 일반인 눈에 보이지 않아 아무 상관없긴 하지만요 그래서 잉여력이 폭발해서 이것을 바꾸어 보기로 했습니다. 일단 버튼에 쓸 이미지를 준비합니다. (포토샵으로 제작 약 10분소요) 파일을 업로드 합니다. (gif로 하려다가 마지막에 png로 바꿨습니다.) 콘솔에서 보면 티에디션 버튼의 ID파악이 가능합니다. 마크업 합니다. !important 태그를 잊지 마세요. 완료. 아... 잉여력이 폭발합니다!!! 요시 그란도 시즌!한가지 좋은것은 버.. 더보기
티스토리에 마이믹시 위젯 설치 방법 아시다시피 믹시에서 기본 제공하는 위젯중, 자신의 발행글 목록이나 추천 목록을 보여주는 기능인 마이 믹시 위젯이 있습니다. 그러나 믹스업 버튼과달리 믹시 위젯은 코드를 받으러 가보면 익스플로러이외의 브라우저 에서는 받아지지도 않고, 그것도 IE10이하에서만 페이지가 로드되는등 상당히 병크스러운 모습을 보이고 있습니다. (인터파크 이 양반들아 지마켓 팔아먹고 돈도 댑따 많이 벌었으면서 서비스 개선 의지좀 보여봐!!) 시대가 어느시대인데 아직도 크로스 브라우징을 지원안하는 믹시 -_- 믹시에서 기본 제공하는 마이믹시 위젯의 경우 다음과 같은 코드를 제공합니다. 플러그인 화면, 사이드바에 마이믹시 위젯은 작동하지 않습니다. 그러나 막상 페이지에 적용하고 보면 작동이 안 됩니다. -_- 게다가 플러그인을 활성화.. 더보기
티스토리의 숨겨진 치환자/기능들 티스토리의 알려진 페이지 치환자로는 검색 결과, 태그로그, 위치로그, 포스팅 본문이 있습니다. 티에디션이나 테터데스크라는 것도 있지만 플러그인 개념으로 기본 포스팅 부분에 덮히는 것이라서 치환자로 분류 되지는 않습니다. 그런데 여기에 알려지지 않은 치환자가 2개 더 있습니다. 바로 '키로그'와 '미디어로그'입니다. 키로그는 키워드 플러그인 사용시에 본문에 뜨는 키워드를 태그 로그 처럼 한대 모아서 보여주는 기능입니다. 텍스트큐브의 기능 중에 하나이며 티스토리에서는 플러그인으로 끄고켜는 기능인줄 알았는데, 베이스가 같다보니 굳이 플러그인을 켜지 않고 치환자만으로 페이지를 활성화시킬수 있습니다. 키로그 관리 → 플러그인 에서 사용 여부를 선택할수 있는 키워드 플러그인 입니다. 포스팅시 특정 문구를 제목으로 .. 더보기
티스토리에 라이브파이어 소셜 댓글 달기 티스토리는 html을 수정 할 수 있기 때문에, 댓글 시스템도 굳이 티스토리에서 제공하는것을 사용 하지 않아도 됩니다. 티스토리 댓글 같은 경우 알림을지원하지 않고, 소셜 네트워크로 로긴하여서 댓글을 다는 기능을 제공하지 않아 상당히 불편한데요, 이는 외부 플러그인 설치를 통하여 해결할수 있습니다. 물론 라이브 리라는 별도 플러그인이 있긴하지만 속도도 상당히 느리고 버그가 많아서 저는 사용하지 않습니다. 참고글: 2013/12/18 - [Tutorials /Tistory] - 라이브리를 당장 티스토리에서 떼어 내야하는 이유 10가지 라이브파이어 홈페이지에 접속합니다. http://web.livefyre.com/ 사이트에 우선 가입을 합니다. (sign in을 누르세요) 계정을 만듭니다. 이름을 적고 블로.. 더보기
티스토리 주소에 이상한 숫자가 따라 붙을때 해결방법 이렇게 주소 뒤쪽에 무언가 숫자가 붙은 경우가 있을겁니다. 사실 모든 블로그에서 발생하는 현상은 아니고요, AddThis에서 제공하는 쉐어 버튼을 적용했을 경우에 나타나는 현상입니다. 이는 쉐어버튼을 통해서 AddThis가 제공하는 통계를 불러오기 위해서 붙이는 일종의 ID로서 옵션 설정으로 주소가 표시되는 것을 막을수 있습니다. 애드 디스 버튼은 다음과 같은 코드로 구성이 됩니다. 여기서 data_track_addressbar의 값이 true로 설정되어있을시 발생하는 현상입니다. 이는 값을 false로 바꿈에 따라 간편하게 해결가능합니다. 더보기
티스토리 속도향상 프로잭트 - 자바스크립트 위치 변경 HTML문서에서는 자바스크립트는 CSS에 비해서 있어도 그뿐, 없어도 그뿐입니다. 물론 특정한 요소는 자바가 없으면 아예 구동이 되지 않지만, 블로그의 주 목적은 포스팅을 게제 하는 것이고 그 본연의 목적하에서는 자바스크립트는 크게 중요한 요소가 아닙니다. 사실 구글 웹사이트 개발 지침에서 보면 html과 css 만으로 사이트가 구동되어야 하며, 자바는 추가 적인 요소 이어야 한다고 명시되어 있습니다. HTML 페이지는 페이지에 나타난 순서 부터 불러오게 됩니다. 그래서 보통 head 안에 link로 css를 넣으라고 하죠. 왜냐면 css가 가장 먼저 로드 되어야 페이지가 똑바로 뜨기 때문이죠. 정말 궁금하신 분들은 실험을 해보셔도 됩니다. css를 body 태그 맨 아래쪽에 놓고 태스트 해보세요 보통 .. 더보기