본문 바로가기

IT/tech-resources 34

카테고리

IT/tech-resources 2025. 8. 15.
티스토리 블로그 V 4편: 콘텐츠 보호 Base64 인코딩과 자동 디코딩 적용 방법

초보도 쉽게 따라하는 티스토리 Base64 난독화, 콘텐츠 보호 팁Base64는 원래 데이터 전송의 안정성을 위해 만들어진 인코딩 방식이지만, 텍스트나 코드 일부를 사람이 바로 읽기 어려운 형태로 변환하는 데도 활용할 수 있습니다. 이를 적절히 사용하면, 일반 방문자는 문제없이 콘텐츠를 볼 수 있지만 단순 복사나 도용에는 장벽을 만들 수 있습니다. 특히 티스토리 블로그 본문에 Base64 인코딩디코딩 기능을 결합하면, 콘텐츠 노출 방식은 유지하면서 무단 도용 방지 효과를 기대할 수 있습니다.이번 글에서는 Base64 개념부터 인코딩 방식, 활용 목적, 그리고 티스토리 블로그에서 자동 디코딩 스크립트를 적용하는 방법까지 하나씩 살펴보겠습니다.1. Base64란 무엇인가?Base64는 바이너리 데이터를 문자..

2025. 8. 15.

IT/tech-resources 2025. 8. 9.
쿠팡 API 활용과 사용방법 8편 쿠팡 API V2 가이드 및 스크립트 생성기

쿠팡 파트너스 API V2 사용법과 자동화 스크립트 활용법쿠팡 파트너스 API는 쿠팡 파트너스 회원들이 쿠팡 내 상품 정보를 자동으로 조회하고, 추천 상품을 자신의 웹사이트나 블로그 등에 효율적으로 노출할 수 있도록 지원하는 개발자용 인터페이스입니다. 특히 V2 버전은 이전 버전인 V1과 비교해 여러 중요한 차이점을 가지고 있습니다. 사용자 중심의 추천 시스템으로, 기존 V1이 콘텐츠 내 특정 키워드나 핵심 내용을 기반으로 운영자가 보여주고 싶은 상품을 노출했다면, V2는 사용자의 환경과 행동에 맞춰 쿠팡에서 상품을 자동으로 추천하고 노출합니다. 이를 통해 방문자에게 더욱 맞춤화된 상품을 보여줄 수 있게 되었습니다. 또한, V2 버전은 보안과 기능 면에서도 크게 강화되어, 특히 HMAC 서명 방식을 활용..

2025. 8. 9.

IT/tech-resources 2025. 8. 5.
블로그에 콘텐츠 요약을 AI 음성으로 삽입하는 방법! 쉬운 제작법과 코드까지

블로그 글 요약을! NotebookLM으로 음성 콘텐츠 만들기NotebookLM으로 쉽고 빠르게 내 콘텐츠를 음성으로 만들어 보세요 블로그 글을 풍성하게 작성한다는 것은 무엇일까요? 단순히 글자 수를 늘리는 것을 넘어서, 다양한 콘텐츠 형식을 활용해 더 많은 사람에게 효과적으로 전달하는 것이라 생각합니다.지금은 정보의 홍수 시대입니다.바쁜 일상 속에서 우리는 내가 알고 싶은 핵심 정보만 빠르게 얻고 싶을 때가 많죠. 특히 현대인들은 텍스트보다 오디오와 영상 콘텐츠를 소비하는 데 더 익숙해져 있습니다. 그렇다면 블로그는 이제 역사 속으로 사라질 콘텐츠가 될까요?그렇지 않습니다.블로그도 시대의 흐름에 맞춰 진화하고 있기 때문입니다. 또한, 아직까지 AI는 텍스트 기반 콘텐츠를 더 선호하는 경향이 있습니다.N..

2025. 8. 5.

IT/tech-resources 2025. 8. 1.
블로그에 쇼핑몰 디자인 적용하는 방법 1편 (HTML 템플릿 무료 제공)

블로그를 쇼핑몰처럼 만드는 템플릿 활용법 (반응형 지원)이번 글에서는 "블로그에 쇼핑몰 디자인을 적용해보면 어떨까?"라는 간단한 아이디어에서 출발해, 누구나 손쉽게 쇼핑몰 스타일의 상품 상세 페이지를 구현하는 방법을 소개해 드리겠습니다. 단순히 상품 링크만 나열하는 방식은 이제 한계가 분명합니다. 방문자의 시선을 끌기 어렵고, 정보 전달력도 떨어지기 때문입니다. 이제는 블로그도 시각적인 구성과 사용자 친화적인 레이아웃을 시도해보는 건 어떨까요?그래서 오늘은 블로그를 실제 쇼핑몰처럼 보이게 만들어주는 상품 상세 페이지 템플릿을 어떻게 활용할 수 있는지, 그리고 이를 통해 방문자 만족도와 수익성을 함께 높이는 방법에 대해 알아보겠습니다.코딩 몰라도 OK! 블로그에 상품 상세페이지 구현하기블로그에 쇼핑몰형 디..

2025. 8. 1.

IT/tech-resources 2025. 7. 27.
블로그 구독자 관리 자동화 프로그램 3편: 댓글에 서로구독 상태 자동 표시하는 방법 (GAS 자동화)

블로그 (티스토리)댓글에 자동으로 구독자 상태를 표시하는 방법 (구독 프로그램 3편)앞선 블로그 구독관리 자동화 프로그램 1편과 2편에서 우리는 구독자 정보를 수집하고 이를 Google 스프레드시트에 저장하는 과정을 통해 기본적인 구독자 관리 자동화 시스템을 구축해 보았습니다. 이번 3편에서는 여기에서 한 발 더 나아가, 티스토리 블로그의 댓글 영역에 자동으로 구독자 상태를 표시하는 방법을 소개하려 합니다.구독자 상태 자동 표시 스크립트 만들기｜티스토리 댓글 자동화이 기능을 활용하면, 방문자가 남긴 댓글 옆에 서로구독 여부, 단방향 구독 상태 등을 자동 태그로 표시할 수 있습니다. 댓글만 보더라도 구독 상태를 한눈에 파악할 수 있기 때문에, 운영자와 방문자 모두에게 유용한 시각적 피드백이 됩니다.왜 댓글..

2025. 7. 27.

IT/tech-resources 2025. 7. 27.
블로그 구독자 자동화 프로그램 2편:크롬 확장과 Apps Script 연동 방법

티스토리 구독자 추출 크롬 확장 프로그램 사용법 (2편)블로그 구독자 자동 관리 프로그램 1편에서는 구독자 관리를 위해 꼭 필요한 기본적인 Google Apps Script 설정과 구독자 데이터를 저장할 스프레드시트 생성 방법에 대해 알아보았습니다.구독자 프로그램 1편의 설정까지 마쳤다면, 사실상 자동화 시스템의 기반 작업은 모두 완료된 것이나 다름없습니다. 이제 우리가 해야 할 일은, 실제 블로그 구독자 데이터를 수집하여 스프레드시트에 적용하는 과정만 남았습니다.지난 글에서 소개한자동 구독자 추출 프로그램을 그대로 활용하셔도 무방하지만, 이번 글에서는 더 쉽고 간편하게 구독자 자료를 추출하고 스프레드시트에 적용할 수 있는 방법을 소개하고자 합니다.티스토리 구독자 자동 수집 방법 누구나 쉽게 설정하는 자..

2025. 7. 27.

IT/tech-resources 2025. 7. 26.
티스트리 구독자 관리 자동화 프로그램 1편: 구독자 데이터 활용을 위한 기본 설치 및 설정 방법

구독자 관리 자동화 프로그램 1 편: 구글 스프레드시트로 티스토리 구독자 관리하기블로그를 운영하다 보면, 내가 구독하고 있는 블로그가 과연 나도 나를 구독하고 있는지 궁금할 때가 있습니다. 또한, 매일 댓글을 남기는 방문자가 나를 구독하는 블로거인지, 아니면 내가 구독 중인 블로거인지 헷갈릴 때도 있습니다. 물론 블로그 플랫폼에서도 기본적인 구독자 목록을 확인할 수 있는 기능을 제공하지만, 매번 수동으로 구독 여부를 확인하는 것은 상당히 번거롭고 불편한 일입니다.이럴 때는 구독자 정보를 자동으로 정리하고, 구독 여부를 시각적으로 한눈에 확인할 수 있는 구독자 자동화 프로그램이 큰 도움이 됩니다.구독자 관리 프로그램을 활용하면, 블로그 방문자와의 관계를 더욱 효율적으로 유지할 수 있으며, 중요한 구독 데이..

2025. 7. 26.

IT/tech-resources 2025. 7. 17.
쿠팡 파트너스 상품 자동 노출 7편: 필터링을 적용한 쿠팡 상품 자동 노출 코드 생성기

쿠팡 상품 자동 노출기 웹 코드 생성 도구쿠팡 파트너스 활동을 하면서 가장 번거로운 일 중 하나는 매번 상품 링크를 생성하고, HTML 코드에 삽입하고, 클릭 유도 문구까지 반복적으로 작성해야 한다는 점입니다.이러한 작업들을 자동화하는 방법이 있다면 분명 큰 도움이 되겠지만, 코드를 직접 수정하거나 API 주소를 바꾸는 과정은 여전히 복잡하게 느껴질 수 있습니다. 사실, 게으름이 인류를 발전시켰듯이, 반복적인 코딩 작업을 줄이는 것도 하나의 '생산성 해방'이라고 할 수 있습니다.그래서 오늘 소개할 쿠팡 상품 자동 노출기 코드 생성기는, 필요한 설정 값만 간단히 입력하면 자동으로 코드를 만들어 주어, 누구나 쉽게 활용할 수 있는 편리한 도구입니다.코딩용 노트북, 꼭 고사양이 필요할까?이처럼 자동화 도구를 ..

2025. 7. 17.

IT/tech-resources 2025. 7. 16.
크롬 확장2: 페이지 텍스트 추출기 코드 정리기 크롬 확장 프로그램 버전UP!

크롬 확장 프로그램으로 HTML 코드 추출 정리 자동화 도구HTML 콘텐츠 추출, 자동 저장, 코드 정리를 한 번에! 블로거 필수 크롬 에디터 확장 프로그램 설치 및 활용 방법 총정리-블로그 편집 작업 중 지저분한 코드, 작성 중 사라진 글, 반복적인 편집 작업에 지칠 때가 많습니다. 물론 블로그 에디터 자체에 백업 기능이 있어 어느 정도는 해결되지만, 그래도 작성 중인 글이 사라지는 경험은 블로그를 운영해 본 사람이라면 누구나 한두 번쯤은 겪어보았을 것입니다. 또한, 에디터 창은 왜 이리 작은지 모르겠습니다.자신이 만드는 콘텐츠의 가로 폭은 1000px인데, 좁은 화면에서 콘텐츠를 제작하다 보면 원하는 디자인과는 전혀 다른 결과물이 나오기도 합니다. 블로그를 운영하면서 자료를 수집하고 이를 효과적으로 ..

2025. 7. 16.

IT/tech-resources 2025. 7. 15.
크롬 확장1: 티스토리 글쓰기 크롬 확장 프로그램 소개 (자동저장. 가로폭 조절기능)

티스토리 글쓰기 크롬 확장 프로그램 소개 및 설치 방법티스토리 블로거로서 "글을 저장하지 못한 채 날려버린 경험" 혹은 "좁은 에디터 창에서의 답답한 글쓰기"는 누구나 한 번쯤 겪어봤을 문제입니다. 이러한 문제를 단번에 해결해 줄 크롬 확장 프로그램, 바로 Tistory Editor 크롬 확장 프로그램를 소개합니다. 이 확장 프로그램은 자동 저장 기능과 에디터 너비 조절 기능을 통해 티스토리 글쓰기 환경을 한 단계 업그레이드시켜줍니다. 초보 블로거부터 파워 블로거까지 모두에게 유용한 도구입니다.티스토리 확장 프로그램이란?Tistory Editor Helper는 티스토리 에디터에 Google Chrome 확장 프로그램으로, 글쓰기 도중 발생할 수 있는 다양한 문제로부터 콘텐츠를 보호하고, 더 편리한 작성을..

2025. 7. 15.

IT/tech-resources 2025. 7. 4.
블로그 에디터 자동 저장 + 화면 폭 조절 기능! 글 날림 방지 및 편집 프로그램

에디터 폭 좁고 글도 날아가나요? 두 문제를 한 번에 해결하는 방법블로그 글을 작성하다가 갑자기 브라우저가 꺼졌던 적 있으신가요?인터넷이 끊기거나, 실수로 뒤로 가기 버튼을 눌러 작성 중인 글이 한순간에 사라진 경험, 누구나 한 번쯤은 겪어보셨을 겁니다. 정성 들여 쓴 글이 저장되지도 못한 채 날아가 버릴 때의 허탈감은 이루 말할 수 없죠. 또 하나, 많은 블로거들이 겪는 숨은 불편함이 있습니다.바로 에디터 폭 제한 문제입니다. 티스토리나 워드프레스, 네이버 블로그 등 대부분의 플랫폼은 에디터의 폭이 고정되어 있어 실제 노출 화면과 전혀 다른 상태에서 글을 작성하게 됩니다. 그 결과, 이미지나 표가 깨지거나, 줄바꿈이 어색하게 보이는 등 레이아웃 오류가 발생하기 쉽습니다. 특히 반응형 콘텐츠를 작성할 때..

2025. 7. 4.

IT/tech-resources 2025. 7. 1.
블로그 동영상 활용법2. 동영상과 유튜브 썸네일 이미지를 블로그에 넣는 쉽고 간단한 방법

유튜브 동영상 썸네일을 블로그에 설정하는 방법현대 인터넷 환경에서 블로그 콘텐츠의 소비 방식은 빠르게 변화하고 있습니다. 과거에는 텍스트와 이미지 중심의 콘텐츠가 주류였지만, 오늘날의 일반 사용자들은 단순한 글과 사진만으로는 만족하지 못하는 경향이 뚜렷해졌습니다. 영상 콘텐츠가 대중화되면서, 블로그 역시 유튜브 동영상과 같은 멀티미디어 콘텐츠를 적극적으로 활용하는 것이 필수적이 되었습니다.유튜브는 단순한 동영상 시청 플랫폼을 넘어, 정보 제공, 교육, 지식 공유의 중요한 매체로 자리잡았습니다. 이에 따라 블로그 운영자들은 방문자의 관심과 체류 시간을 늘리기 위해, 유튜브 영상을 썸네일 형태로 카테고리 페이지나 메인 페이지에 효과적으로 노출하는 전략이 필요해 보입니다.동영상과 블로그의 관계 , 멀티미디어 ..

2025. 7. 1.

IT/tech-resources 2025. 6. 29.
블로그 자동 생성 목차의 SEO 문제와 해결 방안,검색 노출 막는 목차 구조

블로그 목차, 사용자 접근성은 좋은데 SEO는 괜찮을까?블로그 콘텐츠의 품질과 접근성을 높이기 위한 여러 도구 중 하나가 바로 '목차(Table of Contents)'입니다. 특히 글이 길고 구조적인 경우, 목차는 독자가 내용을 빠르게 파악하고 원하는 부분으로 이동하는 데 큰 도움이 되며 콘텐츠를 논리적으로 운영할 수 있습니다. 하지만 자동으로 생성되는 목차 기능이 널리 사용되면서, SEO 측면에서 의도치 않은 문제를 일으키는 사례도 발생하고 있습니다.목차 기능의 양날의 검: SEO 최적화와 CLS 리스크 관리이번 글에서는 자동 목차의 장점과 함께, 그로 인해 발생할 수 있는 SEO상의 문제점, 그리고 그 해결책까지 자세히 살펴보겠습니다.목차 기능의 장점: 사용자 접근성 향상블로그 글에 목차를 포함하면..

2025. 6. 29.

IT/tech-resources 2025. 6. 29.
Gemini CLI 사용을 위한 Google API 키 무료 발급 방법 (초보자도 쉽게 따라 하기)

무료 Google AI Studio API 키 발급하는 법과 Gemini CLI 활용법Gemini CLI는 Google의 AI 기능을 활용하는 도구로, 사용하려면 인증 토큰(API 키)이 필요합니다. 이 키는 Google AI Studio에서 무료로 API키 발급받을 수 있으며, 정확히 등록해야 정상 사용이 가능합니다.Gemini CLI 인증 토큰(API 키) 발급부터 환경 변수 등록까지초보자도 쉽게 따라 할 수 있도록 Google AI Studio에서 API 키를 발급받는 방법을 단계별로 설명합니다. 이 글을 보면 누구나 손쉽게 API 키를 발급받아 Gemini CLI를 시작할 수 있습니다.1. API 키란 무엇인가?API 키는 Google AI 서비스를 사용할 수 있게 하는 열쇠 같은 역할입니다.사용..

2025. 6. 29.

IT/tech-resources 2025. 6. 28.
카테고리별 CSS 스타일 적용하기! 블로그 디자인을 위한 CSS 다크 모드 샘플 3가지

카테고리별 CSS로 블로그 디자인 다르게 설정하는 법블로그를 운영하다 보면 단일 주제에 집중하는 경우도 있지만, 대부분은 콘텐츠 확장 과정에서 자연스럽게 여러 연관 주제를 함께 다루게 됩니다. 특히 티스토리처럼 하나의 레이아웃을 기반으로 다양한 카테고리를 운용하는 경우, 각 카테고리의 성격에 맞는 디자인을 다르게 적용하고 싶을 때가 많습니다.이럴 때 CSS의 특수성(Specificity)을 적절히 활용하면, 공통 레이아웃을 유지하면서도 카테고리별로 고유한 스타일을 적용할 수 있어 시각적 구분이 명확해지고 사용자 경험도 향상됩니다.카테고리마다 다른 테마 적용하는 블로그 꾸미기 방법이번 글에서는 제가 실제로 티스토리 블로그에서 .post-item .text-box 스타일을 카테고리별로 나눠서 적용한 방법과,..

2025. 6. 28.

IT/tech-resources 2025. 6. 25.
블로그 이미지 선명도 최적화, 티스토리 운영자를 위한 이미지 커스텀 리사이징 방법

이미지 선명도 최적화: image-rendering 속성 완벽 가이드웹사이트를 운영하거나 블로그를 디자인할 때,이미지가 의도와 달리 흐릿하게 보이는 경우가 종종 있습니다. 특히 반응형 웹 디자인에서는 이미지 크기가 동적으로 변하면서 브라우저가 자동으로 리사이징 처리하고, 이 과정에서 부드러운 계단 현상(anti-aliasing)이 적용되어 이미지가 뿌옇게 보일 수 있습니다.티스토리 썸네일 흐림 현상, 이렇게 개선하세요이러한 문제는 image-rendering 속성을 통해 일정 부분 제어할 수 있으며, 특히 썸네일, 아이콘, 픽셀 아트 등에서 시각적 선명도를 높이는 데 유용합니다. 이번 글에서는 블로그에 이미지 화질 개선하는 방법에 대한 이야기를 해보겠습니다.1. image-rendering 속성의 기본 ..

2025. 6. 25.

IT/tech-resources 2025. 6. 24.
블로그에 감성을 더하다 – Vocaroo 자동 재생 음악 삽입하는 방법

블로그에 배경음악 넣는 법: Vocaroo로 감성 플레이어 만들기블로그에 글을 쓰다 보면, 때로는 한 줄의 문장보다 한 곡의 음악이 더 큰 감동을 전할 때가 있습니다. 특히 감성적인 에세이나 일기, 글귀, 여행 후기 등을 작성할 때 배경 음악은 텍스트의 정서적 깊이를 배가시켜 주는 요소가 될 수 있습니다. 이번 글에서는 무료 오디오 호스팅 사이트인 Vocaroo를 이용해 블로그에 자동으로 재생되는 배경음악 플레이어를 삽입하는 방법을 소개합니다.Vocaroo로 블로그 자동재생 음악 넣기Vocaroo란?Vocaroo는 웹브라우저만으로 음성 녹음과 공유가 가능한 무료 오디오 서비스입니다. 설치 없이 바로 사용 가능하며, 완성된 음원은 공유 링크 또는 MP3 다운로드 형식으로 제공되어 블로그, 이메일, 메시지 ..

2025. 6. 24.

IT/tech-resources 2025. 6. 23.
블로그 카테고리 페이지 세련된 디자인 모음: 4가지 스타일과 HTML 코드 예시

블로그 카테고리 페이지 디자인 예시 4가지와 HTML 코드 공유카테고리 페이지는 블로그의 첫인상을 결정짓는 핵심 요소입니다. 특히 티스토리나 워드프레스처럼 콘텐츠 중심 플랫폼에서는 카테고리의 구조와 디자인만으로도 방문자의 클릭률과 체류 시간을 좌우할 수 있습니다. 이번 포스트에서는 심미성, UX(사용자 경험), 모바일 대응성을 모두 갖춘 이쁜 4가지 스타일의 카테고리 디자인을 소개하고, 바로 활용 가능한 HTML 코드 템플릿을 함께 제공합니다.반응형 블로그 카테고리 템플릿 코드 모음카테고리 디자인의 요소카테고리 페이지는 단순히 글 목록을 나열하는 공간이 아닙니다. 독자에게 콘텐츠 흐름을 안내하는 네비게이션 허브이자, 전체 블로그 브랜딩을 완성하는 시각적 요소입니다. 카테고리 페이지를 설계할 때 다음과 같..

2025. 6. 23.

IT/tech-resources 2025. 6. 22.
티스토리 글쓰기 에디터 가로폭 조절 방법 3가지와 간단 에디터 프로그램

티스토리 글쓰기 에디터가 너무 좁아서 불편하다면? 가로폭 확장블로그를 운영하면서 글쓰기 에디터 화면이 유난히 좁다고 느껴본 적 없으신가요? 기존에는 넉넉한 폭으로 콘텐츠를 편집할 수 있었지만, 어느 순간부터 가로 860px 정도로 고정된 편집창이 적용되면서 많은 블로거들이 불편함을 호소하고 있습니다. 이러한 변화는 티스토리 에디터의 UI 개편과 반응형 인터페이스 정비 과정에서 발생한 현상으로, 모바일 태블릿 환경 최적화를 우선적으로 고려한 결과로 분석됩니다.그러나 문제는, 실제 블로그 본문은 880px 이상으로 넓게 구성해놓은 경우가 많다는 점입니다. 또한, 자신이 작성한 콘텐츠가 사용자의 접속 기기(모바일, 태블릿, 노트북, 데스크톱 등)에서 어떻게 보이는지 확인하는 것도 상당히 번거롭고 불편할 수 있..

2025. 6. 22.

IT/tech-resources 2025. 6. 20.
동적 링크 버튼,블로그 카테고리별 맞춤 버튼 자동 생성하기 ,이쁜 버튼모음

티스토리 블로그 카테고리별 맞춤 버튼 자동 생성방법블로그 운영을 하다 보면, 특정 카테고리 페이지에서만 특별하게 안내(네비게이션) 버튼을 띄우고 싶을 때가 많습니다. 예를 들어, SEO 관련 카테고리 페이지에서는 애드센스 최적화 바로가기 버튼을, 애드센스 관련 카테고리 페이지에서는 광고 코드 가이드 버튼을 보여주는 방식입니다.하지만 매번 HTML에 버튼 코드를 직접 넣고 관리하는 것은 번거롭고 실수하기 쉽습니다. 그래서 이번 글에서는 카테고리 URL에 따라 자동으로 버튼을 생성하고 지정 위치에 넣어주는 자바스크립트 코드를 소개합니다.티스토리 운영자를 위한 카테고리별 자동 버튼 생성운영자가 단순히 설정만 변경하면 다양한 카테고리에 맞는 버튼을 자동으로 관리할 수 있어, 블로그 운영시 요긴하게 사용할수 있습..

2025. 6. 20.

이전 1 2 다음

티스토리툴바