everydayminder
이 워드프레스 테마 이름이 뭐지? 지나가다 예쁜 가게를 보면 한 번 더 눈이 가게 마련입니다. 웹사이트와 블로그도 비슷한 것 같습니다. 개인의 취향에 따라 다르긴 하겠지만, 도대체 어떤 능력자이길래 이렇게 사이트를 잘 만들고, 잘 운영을 하고 있을까? 라는 생각이 들기도 합니다. 그런데, 만약 그 사이트가 워드프레스로 만든 사이트라면, 어쩌면 우리도 좀더 쉽게 그 레벨에 도달할 수도 있습니다. 어떻게 그 사이트의 구성에 대해 좀 더 알아볼 수 있을까요? 주인에게 물어보기 그 사이트의 주인에게 물어보는 것이 한 가지 방법입니다. 몇몇 워드프레스 사이트에는 사이트의 주인이 정성스럽게 워드프레스를 설정한 이력, 변경한 이력을 글로 적어 놓기도 합니다. 그 글들을 참고한다면, 워드프레스를 썼는지 어떤 테마를 입..
SEO - 분명히 조치했는데도 h1 태그가 2개 이상 존재한다고 뜬다면? MS Bing 웹마스터툴즈로 SEO 검사를 했습니다. 한 개의 글에 여러 개의 h1 태그가 있어 SEO 관점에서 개선이 필요하다는 피드백을 받았습니다. 권고에 따라, 글을 에디트하고 분명히 h1 태그가 한 개만 존재하도록 조치를 완료했는데, 다시 SEO 검사를 해보니 여전히 h1 태그가 2개 이상 존재한다고 뜨는군요. 이럴 때는 어떻게 조치하면 좋을까요? h1 태그는 왜 중요한가? 사람들이 글을 읽을 때는 문맥으로 판단하지만, 구글 크롤러가 글을 읽어서 판단할 때는 기계적으로 구조를 파악하게 됩니다. h1 태그는 글의 구조의 시작을 알려주는 시작점이기 때문에 중요합니다. h1 태그는 왜 하나만 쓰기를 추천하나? 하나의 글에서, 하나..
블로그 코드블럭에 네이버 D2 Coding 폰트 적용하기 개발자들 사이에서 한글과 영문의 조화가 잘 되어, 평이 좋은 네이버 D2 Coding 폰트를 블로그에 적용해 보겠습니다. 모든 폰트를 바꾸려는 것은 아니며, 특히 코드를 인용하는 코드블럭에 한정하여 적용하려 합니다. 왜 D2 Coding 폰트? 일부 알파벳, 한글, 특수기호, 숫자들의 경우 구별하기 힘든 경우가 있습니다. 이를 테면, l과 1, 숫자 0과 알파벳 O 등의 경우, 폰트에 따라 구별하기 굉장히 어려운 경우가 발생합니다. 게다가 한글의 ㅣ와 ㅇ까지 섞이면 복잡도가 더 올라갈 수도 있습니다. D2 Coding 폰트는 한글의 경우 나눔바른고딕을 기본으로 하고 있으며, 위에서 말한 혼선을 최소화 하는데 주안점을 둔 폰트입니다. 많은 개발자들이..
Microsoft Bing Webmaster Tools 보통은 Goolge Adsense, Google Analytics, Google Search Console 의 분석 결과를 바탕으로 개선 포인트를 찾습니다. 그런데, Microsoft Bing에서 제공하는 Webmaster Tool에서도 유사한 기능을 제공합니다. 이를 함께 사용해서, 내 사이트의 문제점을 파악하고 개선하는데 사용해 봅시다. 연동 추가하기 https://www.bing.com/webmasters 에 접속합니다. 좌측 상단 메뉴로부터 사이트 추가 버튼을 누른 후, 아래와 같은 창이 뜨면 Google Search Console 설정 가져오기를 선택하면 쉽게 설정이 완료됩니다. (즉, Google Search Console 설정이 사전에 ..
서브셋 폰트로 경량화하기 블로그에서 사용하는 리소스의 크기가 작을수록 블로그의 반응속도가 빨라집니다. 이미지는 물론이고, 폰트도 마찬가지입니다. 따라서, WOFF보다 WOFF2를 쓰는 것이 좋습니다. 그런데, WOFF2로 줄인 상태에서조차 더 최적화할 수 있다면 더 좋겠죠? 서브셋 폰트 적용 목적 폰트파일에는 우리가 사용하지 않는 글자들도 포함되어 있습니다. 사용하지 않는 글자들은 불필요한 크기를 잡아 먹습니다. 이 파일을 줄일 수 있다면, 우리의 블로그도 좀 더 가벼워질 것입니다. 이와 같은 작업을 서브셋 폰트를 만든다고 부릅니다. 서브셋 폰트에 사용할 데이터 ㄱㄲㄳㄴㄵㄶㄷㄸㄹㄺㄻㄼㄽㄾㄿㅀㅁㅂㅃㅄㅅㅆㅇㅈㅉㅊㅋㅌㅍㅎ ㅏㅐㅑㅒㅓㅔㅕㅖㅗㅘㅙㅚㅛㅜㅝㅞㅟㅠㅡㅢㅣ 0123456789 ABCDEFGHIJKLMNOP..
addthis 적용하기 이전 포스트에서 소개한 SNS 공유기능 방식은 티스토리 기본 플러그인보다는 예쁘지만, 아래의 질문을 들여다보면 확장성이 떨어집니다. 더 많은 종류의 SNS 공유를 적용하고 싶다. 쉽게 적용하고 싶다. 쉽게 변경하고 싶다. 그에 비해, 서비스로서 이러한 기능을 제공하는 솔루션을 택한다면, 위와 같은 아쉬운 점을 해결할 수 있습니다. addthis.com 가입하기 addthis.com에 방문하면 다음과 같은 초기화면이 반겨줍니다. 파란색 시작버튼을 누르고, 회원 가입을 합니다. SNS 공유버튼 생성하기 addthis에서 여러 가지 툴을 제공하지만, SNS 공유 기능은 Share Buttons을 고릅니다. 여러 가지 유형이 있는데, 저는 floating 타입을 골랐습니다. Selecte..
블로그를 SNS에 공유하려면? 작성한 글을 쉽게 공유하려면 SNS 공유 버튼이 도움이 될 것입니다. SNS 공유 기능을 사용해서 내 블로그의 방문자들이 유용한 글을 봤을 때 쉽게 공유할 수 있도록 해 봅시다. 빈약한 티스토리 플러그인 티스토리 자체적으로도 플러그인을 지원합니다. 플러그인 > SNS 글보내기 버튼을 누르는 것만으로 쉽게 적용할 수 있죠. 쉽게 설정할 수 있지만, 여러 종류를 넣는다는 등의 튜닝은 할 수 없습니다. 더 많은 SNS에 공유하려면? 오래된 플러그인을 넘어, 디자인 관점이나 종류 관점에서 기본 플러그인보다 더 나은 솔루션이 있으면 좋을 것입니다. 적용 절차 카카오톡, 카카오스토리, 페이스북, 라인, 네이버 등 여러 개의 SNS에 공유할 수 있도록 적용해 봅시다. 저는 JB-167 ..
티스토리 최적화 - 글꼴 용량 줄이기 네트워크가 빨라지고, 최신 PC/ 모바일의 반응속도가 빨라졌지만, 페이지가 로딩될 떄까지 사용자들이 기다려야 하는 시간에 대한 기대치도 그만큼 높아졌습니다. 즉 빨리 로딩되지 않으면, 사람들의 만족도도 떨어진다는 것이죠. 그런데, 비단 사람들의 반응 뿐만 아니라 SEO 점수 관점도 이와 무관한 것 같지 않습니다. 빨리 로딩되는 사이트가 정보 전달 관점에서도 더 높은 점수를 받는 것이죠. WOFF 대신 WOFF2를 앞서 리디바탕체의 경우, WOFF 형태로 적용하였습니다. 그러나, WOFF 포맷 이후, WOFF2 포맷이 소개되었고, WOFF2 포맷의 효율이 더 좋다고 알려져 있죠. 따라서, WOFF 대신 WOFF2를 쓸 수 있다면 보다 적은 용량으로 폰트를 적용할 수 있..
블로그에 다른 폰트를 적용하고 싶다면? 제목은 리디바탕체 적용하기라고 적었지만, 블로그 꾸미기에 해당될 것 같습니다. 많은 사람들의 블로그와 조금은 달라 보이고자 다른 스킨을 사용하기도 하고, 글꼴도 바꾸지 않나요? 그 중, 가독성이 좋기로 평이 좋은 글꼴인 리디바탕체를 적용하는 방법에 대해 적어 보고자 합니다. 일반적인 적용 방법 글꼴 파일을 직접 다운로드 받아서, 티스토리에 업로드하는 방법과 CDN에서 다운로드 하도록 하는 방법이 있는데, 저는 후자를 우선 택하고자 합니다. 평소 스킨 편집할 때와 마찬가지로, 스킨편집 > html 편집 > CSS를 선택합니다. @font-face { font-family: "RIDIBatang"; font-style: normal; font-weight: 400; s..
원문을 수정할 때마다 힘들었는데, 이젠 고민 끝 티스토리에서 한 번 작성한 글을, 내용을 편집하거나 관련 글을 추가하는 등 기존의 글을 변경할 일이 있습니다. 잘못된 내용이 있다면 고칠 수도 있고요. 그런데, 작성한 글을 편집하려고 하면 레이아웃이 깨지거나 제목/소제목 등에 이상한 변형이 생기는 것을 관찰할 수 있습니다. 현상 최초 발행 상태 편집 후 상태 (미리 보기 포함) 그리고, 이 상태에서 코드를 살펴보면 아래왁 같이 코드가 변형되어 있음을 알 수 있습니다. 디스코드 설치하기 맥북에서 디스코드(discord.py)를 설치하는 방법과, 구글 코랩에서 설치하는 방법 순서로 살펴보자. 맥북에서 디스코드 설치하기 맥북에 discord.py가 기본적으로 설치되어 있지는 않다. discord.py의 설치 여..
배경 우선 이 글은, 원문 https://www.jbfactory.net/11744의 적용/응용임을 사전에 밝힙니다. 스킨 자체의 설정 방안은 원문을 참고하시면 자세하게 설명이 되어 있습니다. 제목이 뜻하는 바는, 아래 스크린샷에서의 의 영역과 의 영역의 순서대로 노출되도록 설정해 보자는 것입니다. 카테고리 다른 글보기 옵션을 켜면, 보통은 -> 의 순서로 노출되는데, 이를 바꾸도록 설정해 보자는 것이죠. 목적은 방문자들이 다른 글로 점프하기 전에, 광고 하나 보고 가시죠! 하는 것입니다. 전제 조건 이 내용을 적용하기에 앞서 전제조건은 구글 애드센스 일치하는 콘텐츠 광고는 활성화 되어 있어야 한다는 점입니다. 사전 작업 적용의 사전작업은 서두에 소개한 바와 같이 원문의 가이드를 따라 그대로 설정하는 것..
구글 애드센스 광고 크롤러 오류 메시지 어느 날 갑자기 구글 애드센스에 안보이던 에러 메시지가 노출되기 시작합니다. 종 모양의 아이콘에 불이 들어온 것이죠. 그리고, 메뉴 다른 곳을 이동해도 다음과 같은 메시지가 계속 따라 다닙니다. 무슨 문제인지 파악해 보기 위해, 에러 문구를 클릭하여 세부 내용을 살펴봅니다. 에러 메시지의 의미 광고 크롤러 오류가 있으며, 이 때문에 수익 손실이 발생할 수 있습니다. 이 메시지는 무슨 의미일까요? 크롤러(crawler)는 인터넷 상에서 데이터를 긁어 모으는 것을 말합니다. 즉, 구글 애드센스와 관련된 정보를 크롤링을 해야 수익이 발생할 수 있는데, 그렇게 동작을 못하니 당신의 수익에 악영향이 발생할 수 있다는 뜻이죠. 그렇다는 뜻은, 구글 검색으로 외부 유입이 발생하..
앞서 소개한 글에서는 작성 중인 글의 글자 수를 여러 온라인 사이트를 사용하여 확인하는 방법을 소개했습니다. 이번에는, 온라인 사이트를 사용하지 않고 맥북 자체의 기능만으로 작성 중인 글의 글자 수를 셀 수 있는 방법들을 소개하고자 합니다. 테스트 문구 안녕하세요. 글자수 세기 테스트입니다. 총 몇 글자일까요? 이 문자열로 글자 수 세기 테스트를 해봅시다. 방법 1 - 맥북 명령어로 글자 수 세기 맥북에서 Terminal(터미널)을 실행합니다. (iTerm과 같은 3rd party 앱 포함) 위의 테스트 문자열을 드래그 한 후, 복사합니다. (Command+C) 그러면, 이제 위의 내용이 클립보드에 복사되었을 것입니다. 클립보드에 위 내용이 복사된 채로, 터미널에 아래의 명령어를 직접 입력해 봅니다. (..
자기소개서나 블로그를 작성할 때 내가 작성하는 글의 길이를 알기 위해 글자 수를 세어볼 필요가 있습니다. 자소서의 경우 너무 짧으면 문제지만, 그렇다고 무한정 길게 작성하는 것이 최고는 아니죠. 오히려 상한 권장 길이가 있기 마련입니다. 시스템 관점에서의 길이와 별개로 임팩트 없이 길기만 하면, 보는 사람 관점에서도 잘 읽지 않게 될 뿐입니다. 블로그의 포스트 길이는 오히려 최소 길이 800 정도는 넘기는 편이 좋다고들 합니다. 따라서, 이런 툴의 도움을 받아서 내 글이 최소 조건을 잘 충족했는지 점검하면 도움이 될 것입니다. 다음과 같은 방법들을 사용해 봅시다. 다음 글자 수 세기 다음 검색창에서, "글자수 세기"라고 입력합니다. https://search.daum.net/search?w=tot&DA=..
티스토리에 2차 도메인을 설정해서 쓰는 분들이라면, 댓글, 구독 그리고 본인이 작성한 글을 미리보기를 할 수 없다는 점이 불편할 것이라고 글을 올렸었습니다. 이러한 제약사항을 감안하면서도 개인적으로는 불편함없이 써왔지만, 다른 사람들이 tistory.com의 원본 주소로 다른 곳에 인용을 하는 것까지 막을 수는 없습니다. 결국, 그렇게 사용자들이 접속하게 되면 애드센스 노출도 되지 않습니다. 그래서, 2차 도메인 설정을 한 많은 블로거들이 관리상의 불편함을 감수하더라도 리다이렉션을 걸어서 썼을 것입니다. 이번 포스트에서는 리다이렉션 적용하기 관리페이지와 댓글달기의 경우 예외 적용하기 두 가지 조건을 만족하도록 변경하도록 스크립트를 변경 적용한 것을 소개하고자 합니다. 사전 준비 스킨 변경에 앞서, 꾸미기..
