본문 바로가기

분류 전체보기167

알트 이미지(Alt Text)란? 블로그 SEO와 접근성을 높이는 숨은 비밀 알트 이미지(Alt Text), 티스토리에서는 이렇게 넣어야 합니다 – SEO와 접근성을 위한 완벽 가이드블로그에 이미지를 올릴 때, 그냥 삽입만 하고 넘어가시나요?‘알트 이미지(alt text)’는 화면에는 드러나지 않지만, 검색 최적화(SEO)와 웹 접근성을 높이는 중요한 역할을 합니다.이번 글에서는 alt 텍스트의 개념부터, 티스토리에서 이를 실제로 적용하는 방법까지 구체적으로 설명드립니다. 1. 티스토리에서 이미지를 넣으면 처음엔 이렇게 나옵니다티스토리 기본 에디터로 이미지를 삽입하면 아래와 같이 자동 코드가 생성됩니다:이 구조는 이미지 출력은 되지만, alt 속성을 넣을 수 없다는 단점이 있습니다. 2. alt 텍스트를 넣기 위한 준비 – 먼저 발행하고 주소를 확인해야 합니다글을 1회 발행한 후.. 2025. 5. 13.
무료 폰트, 상업적 이용 가능한 걸로만 쓰세요! 블로그·유튜브용 추천 폰트 7선 “무료 폰트라서 그냥 써도 되는 거 아냐?”하지만 정말 ‘상업적 이용’까지 가능한 폰트일까요?블로그, 썸네일, 유튜브, 인쇄물 등 수익과 연결되는 콘텐츠에서는 ‘폰트 저작권’ 문제가 발생할 수 있습니다. 이번 글에서는 실제로 상업적 이용이 가능한 무료 폰트만을 추려, 블로그 썸네일과 본문용에 적합한 폰트 7종을 소개드립니다.📌 왜 상업적 이용 가능한 폰트만 써야 할까?🔒 ‘무료’라고 해도 대부분은 개인용 한정📹 유튜브 썸네일, 블로그 수익 활동 등은 모두 상업적 이용에 해당⚠️ 저작권 위반 시 삭제 요청, 손해배상 청구 가능성그래서 반드시 라이선스에 ‘상업적 이용 가능’ 표시가 있는 폰트만 사용해야 안전합니다.💡 상업적 이용 가능한 무료 한글 폰트 7선서울남산체 / 서울한강체– 제작: 서울시– 특.. 2025. 5. 13.
티스토리 블로그 이미지, 최적 사이즈는? 직접 만들어보자! 블로그에서 첫인상은 아주 중요합니다. 특히 티스토리처럼 대표 이미지(썸네일)를 자동으로 불러오는 구조에서는,대표 이미지의 품질과 크기가 글 클릭률에 직접적인 영향을 미치죠.이번 글에서는 티스토리 블로그 대표 이미지의 최적 사이즈와 포맷,그리고 무료 툴 Inkscape를 활용해 직접 만드는 방법까지 단계별로 알려드릴게요. 1. 대표 이미지는 왜 중요한가?- 티스토리 메인 글 목록에 노출될 때 - 카카오톡, 네이버블로그, SNS 등에서 공유될 때 대표 이미지는 자동으로 썸네일로 활용됩니다.흐릿하거나 잘린 이미지가 보이면 클릭률이 급격히 떨어지기 때문에, 최적화된 대표 이미지를 세팅하는 것이 중요합니다. 2. 티스토리 대표 이미지 최적 사이즈는?권장 사이즈: 500 x 500px (정사각형)비율: 1:1 (자.. 2025. 5. 12.
블로그 이미지는 왜 WebP로 저장해야 할까? 티스토리 최적화부터 썸네일 속도까지 블로그를 운영하다 보면 썸네일이 깨져보이거나, 이미지가 흐릿하게 보이는 문제를 겪는 경우가 많습니다.또한 티스토리나 워드프레스는 서버 제공이 무료이기 때문에, 무심코 큰 이미지 파일을 계속 올리면로딩 속도 저하까지 이어질 수 있죠.이럴 때 대안으로 떠오르는 것이 바로 WebP(웹피) 포맷입니다. 이번 글에서는 왜 블로그에 WebP 이미지가 유리한지와 함께, 어떻게 활용하면 좋을지 알려드립니다. 1. WebP란 무엇인가요?WebP는 구글(Google)이 개발한 차세대 이미지 포맷입니다.기존의 JPG, PNG보다 훨씬 더 용량이 작으면서도 화질 손실이 적은 것이 특징이죠.📦 용량 절감: JPG 대비 25~35% 작음🎨 투명도 지원: PNG처럼 배경 투명 처리 가능🚀 로딩 속도 향상: 모바일에서도 빠르게.. 2025. 5. 12.
블로그 썸네일, 이젠 직접 만든다 -무료 툴 Inkscape로 대표이미지 완성하기 대표이미지는 글의 첫인상입니다. 흐릿한 썸네일보다 직접 만든 고해상도 썸네일이콘텐츠의 신뢰도와 클릭률을 확실히 높여줍니다.지금부터 아래 예시와 같은 이미지 썸네일을 Inkscape로 완성하는 전 과정을 따라 해보세요. 1. 새 문서 열고 썸네일 사이즈 설정상단 메뉴 → 파일 → 문서 속성 (Shift+Ctrl+D)단위: px (픽셀) 선택너비: 1080 px, 높이: 1080 px창을 닫아도 설정은 유지됩니다.정사각형 사이즈는 블로그, 인스타, 썸네일 모두에서 최적입니다.2. 파란 배경 사각형 그리기왼쪽 툴바에서 사각형 도구(R) 클릭캔버스를 가득 덮도록 드래그하여 사각형 생성하단 색상 팔레트 → 진한 파랑 클릭 (예: #0A57A4) 상단 메뉴 → 객체 → 채움 및 자획선 색상 탭에서 X 클릭 → 선.. 2025. 5. 12.
이건 어디 쓰는 버튼일까? Inkscape 작업 화면 한눈에 파악하기 Inkscape로 도형을 그리고, 선을 긋고, 텍스트를 넣긴 했는데...툴바가 너무 많고 아이콘이 생소해서 뭘 눌러야 할지 감이 안 잡힌 적, 있지 않으셨나요?이번 글에서는 Inkscape 인터페이스와 레이아웃 구조를 하나씩 짚어보며, 실무 작업에서 꼭 알아두면 좋은 위치와 기능들을 정리해드립니다. 1. 전체 인터페이스 구성 개요Inkscape는 기본적으로 아래와 같은 5개 영역으로 나뉘어 있습니다:좌측: 도구 툴바 (도형, 선, 선택 등)상단: 좌표·정렬·자물쇠 등 속성 툴바오른쪽: 내보내기 및 페이지 설정 패널하단: 색상 팔레트, 확대 비율, 레이어 정보중앙: 작업 캔버스 2. 좌측 툴바 – 그림을 그리는 핵심 도구들가장 많이 쓰는 도구들이 모여 있는 곳입니다.화살표: 선택 도구 (객체 클릭/이동)사.. 2025. 5. 12.

티스토리툴바