브런치 미리보기 이미지 선택하는 방법


안녕하세요.
고코더 입니다.



 1. 브런치는 작가서비스입니다. 글을 쓸때 HTML 수정이 허용되지 않고 모두 동일한 포맷으로 글을 쓰게 하죠.
개인적으로 좋은 아이디어라고 생각합니다. 그런데 불편한 점이 있다면 원하는 썸네일을 설정할 수 없는 것입니다. 기본적인 글쓰기만 한다면 첫번째 이미지가 썸네일로 나타나게 되는데 
이미지 사이즈나 여러가지 변수로 썸네일이 나타나지 않게 되는 경우가 있습니다.


 2. 썸네일을 읽어드리지 못한 글의 최대 단점은 공유시에 이미지 없는 글로 미리보기가 나타나게 됩니다.


 3. 조금 사용하다보니 썸네일을 지동 하는 방법을 알아냈습니다.  저는 글 마다 어울리는 대표 이미지를 썸네일로 나오게 설정했습니다. 
대표  썸네일을 사용하니 클릭하고 싶죠? 실제로 유입도 늘어났습니다.



 4. 방법은 제가 이전에 남긴 상단 커버 이미지를 사용하는 방법입니다.
상단 배경화면을 이미지로 설정하면 해당 이미지를 썸네일로 사용이 가능합니다.

-> 브런치 - 발행된 글 상단에 이미지로 커버 설정하기



이렇게 상단에 이미지로도 쓰면


 5. 해당 글에서 사용할 썸네일로 자동으로 지정됩니다. 
글마다 대표 썸네일로 개성을 부여 할 수 있습니다. 




마무리


썸네일을 활용하세요!

제 브런치를 구독해주세요!




댓글을 달아 주세요


카톡 사진 미리보기 채팅창에서 크게 나올 때


안녕하세요.
고코더 입니다.


제 안드로이드 갤럭시 카카오톡에서 갑자기 사진 미리보기가 엄청 크게 나오네요. 혹시 같은 문제를 격고 있다면 한번 살펴보세요

 1. 조카 사진이 갑자기 화면을 다 차지하고도 넘치네요.


 2. 원인은 해상도를 변경해서 그렇습니다. 절저 모드에서
원래 해상도은 WQHD+에서 HD+로 변경하니
카카오톡에서 해상도를 인식하고 WQHD 미리보기 크기를 만들어준거죠

 3. 해상도를 다시 WQHD로 변경하거나 카카오톡은 
끄고 다시 키면 해결 됩니다.
 



마무리


제 노트북이 WQHD인데 요즘은 스마트폰이 해상도가 더 좋네요


댓글을 달아 주세요


윈도우 폴더에 미리보기 이미지 변경


안녕하세요.
고코더 입니다.



 1. 윈도우에서 이미지를 모아둔 폴더는 자동으로 파일안에 대표 이미지를 골라서 썸네일을 만들어 줍니다. 
그런데 가끔 불필요한 이미지가 썸네일로 만들어지는 경우가 있습니다. 이럴때 이미지를 변경해보겠습니다.


 2. 해당 폴더에서 마우스 오른쪽 버튼을 눌러 속성으로 이동 합니다. 

 3. 사용자 지정 탭으로 이동 한다음 파일 선택을 클릭 합니다.
그리고 원하는 이미지를 선택 후에 확인을 누르면 

 4. 이렇게 원하는 이미지가 썸네일로 되어 표시 됩니다.


마무리


랜덤한 이미지가 가끔 당혹스러울땐 


댓글을 달아 주세요


youtube 이미지 다운로드


안녕하세요. 고코더 입니다.

▼유투브에 접속해보면
각 영상마다 대표 썸네일이 존재합니다.


이 이미지가 필요해서 캡쳐해서 편집해서 사용한적이 있었는데

▼유투브에서는 썸네일 API를 제공하고 있었습니다.
아래 URL을 확인해보시면 

▼ 이렇게 우리형 썸네일이 보이고 자유롭게 다운로드 가능 합니다. 



▼ 사용법은 이렇습니다. 해당 URL 가운데 동영상 고유 코드를 넣으면 됩니다.
그리고 뒤어 jpg 앞에 0부터 숫자를 넣으면 됩니다. 
https://img.youtube.com/vi/[동영상코드]/[0~].jpg

▼ 동영상 코드는 영상 상세 들어가면 나오게 되는 제일 뒤 파라미터 입니다.




마무리


일반 사용자에게도 편리하게 썸네일을 제공하네요 





댓글을 달아 주세요


open graph 태그란? / 썸네일, 제목 설명 등의 


안녕하세요. 고코더 입니다.

SNS나 카카오톡,라인 등
일상을 공유하는 커뮤니티 프로그램에서

링크를 공유하면 자연스럽게 보이는
썸네일, 제목, 설명들이 있습니다.

▼ 고코더 블로그를 카카오톡 으로 공유했을 때
나타나는 og 태그 메타 정보



해당 화면에서 보이는

제목 : "고코더의 IT Express"
설명 : "각종 프로그래밍 강의... " 
이미지: 고코더.jpg

등이 바로 open graph 태그로
노출된 정보 입니다.

▼ 제 블로그의 소스 보기를 보면
아래처럼 og 태그가 입력 되어 있습니다. 


규약 된 해당 태그를 읽고 카카오톡도 미리보기가 가능한 정보를 노출 해주고 있습니다.

이 규약은 페이스북에서 시작 되었습니다.


SNS의 초대형 기업이기에 
페이스북이 지정한 방법은 결국 표준이 되었다고 봐도 무방 합니다.

각 태그의 설명을 드리자면 
og:url 
- URL 입니다. 링크될 URL을 지정하시면 됩니다. 
og:type 
- 타입을 지정합니다. 웹인지 앱인지 등등
og:title 
- 해당 링크의 제목 입니다. 카톡에서 가장 굵고 큰 글자로 보이겠죠
og:description 
- 설명입니다. 제목 아래 설명글씨로 주저리 담깁니다. 
og:image 
- 썸네일 이미지 입니다. http:// 부터 시작하는 절대 주소로 남기셔야 합니다.

▼제 블로그를 기준으로 og 태그를 작성 해보았습니다.
1
2
3
4
5
<meta property="og:url"                content="http://gocoder.tistory.com" />
<meta property="og:type"               content="website" />
<meta property="og:title"              content="고코더의 IT Express" />
<meta property="og:description"        content="모든 IT 정보를 " />
<meta property="og:image"              content="https://t1.daumcdn.net/cfile/tistory/234774445960F69422" />
cs



SNS등의 공유버튼으로 생겨난
태그 입니다. 
지금은 필수적인 사이트의 메타 정보가 되었습니다.

만약 해당 OG태그가 없는 사이트는
각 시스템에서 알아서 대표 정보를 찾아서 
나름의 정보를 만들어 미리보기로 보여주게 됩니다.


마무리
웹 개발자들이 챙겨야 할게 많아지네요


댓글을 달아 주세요

  • 질문좀 2018.04.26 08:57  댓글주소  수정/삭제  댓글쓰기

    og 태그 블로그 잘봤습니다
    그런데 메타 내용을 바꿔도
    카톡 링크 내용이 그대로인데
    제가 이해를 잘못하고 있는건지ㅠㅠ

    • Favicon of https://gocoder.tistory.com 고코더 2018.04.26 23:32 신고  댓글주소  수정/삭제

      안녕하세요. 개발자님
      메타 내용을 잘 바꾸셨지만
      카카오톡 링크 썸네일 내용은 그대로군요.
      이런
      그래서 질문자님을 위해
      블로그를 하나 남겼습니다.
      아래 글을 확인해주세요^^

      http://gocoder.tistory.com/317

      결론은 카카오톡 캐시 서버의
      질문자님의 도메인 정보를 지워야 합니다^^