티스토리 정보 저장소

본문 바로가기카테고리 랜딩(허브) 페이지 만드는 법｜요약·바로가기·시리즈 연결요약: 허브 페이지는 “카테고리의 목차이자 길잡이”입니다. 요약 인트로로 범위를 규정하고, 바로가기 카드로 핵심 경로를 제시하며, 시리즈 연결로 회독 동선을 만듭니다. 이 글은 카드형 레이아웃, 대표 글 선정 규칙, 내부 링크 구조를 실무 기준으로 정리했습니다.📑 목차본문1｜허브의 목표와 구성: 요약·바로가기·시리즈본문2｜카드형 레이아웃: 썸네일·제목·보조 정보 규칙본문3｜대표 글 선정·내부 링크 구조(허브→글/시리즈)코드 스니펫(복붙용)점검표｜합격 기준과 흔한 실수실천 요약허브의 목표와 구성: 요약·바로가기·시리즈허브의 1차 목표는 “독자가 이 카테고리에서 얻을 수 있는 결과”를 한 문단으로 설명하고, 2차 목표는 “다음 행..

404·리디렉션 안내 페이지 만들기｜이탈을 줄이는 복구 동선요약: 404와 리디렉션은 ‘에러 처리’가 아니라 복구 경험입니다. 404 안내 모듈로 상황을 명확히 설명하고, 301/302 기준으로 검색 신호를 안정화하며, 링크 허브로 바로 갈 목적지를 제시하면 이탈률과 불만을 동시에 낮출 수 있습니다. 📑 목차404 안내 모듈: 메시지·검색·빠른 이동301/302/410 기준: 언제 어떤 응답을 쓸까링크 허브 설계: 이탈을 줄이는 복구 동선코드 스니펫(복붙용)점검표｜합격 기준과 흔한 실수실천 요약404 안내 모듈: 메시지·검색·빠른 이동404 페이지는 단순한 “페이지가 없습니다”가 아니라, 왜와 어떻게 복구할 지를 즉시 알려주는 안내 화면이어야 합니다. 핵심은 3가지입니다. (1) 명확한 메시지, (2)..

본문 바로가기접근성 기본 세팅 스타터팩｜대체텍스트·키보드 포커스·ARIA 힌트 요약: 접근성은 선택이 아니라 기본 세팅입니다. 본문 이미지는 ALT 템플릿으로, 링크·폼·토글 등 상호작용 요소는 키보드 포커스 스타일로, 보조 안내는 ARIA-label 패턴으로 표준화합니다. 이 글은 즉시 복붙 가능한 코드와 점검표를 함께 제공합니다.📑 목차본문1｜ALT(대체텍스트) 템플릿본문2｜키보드 포커스 스타일본문3｜ARIA-label/role 힌트 패턴실무 스니펫 모음(복붙용)점검표｜합격 기준과 흔한 실수실천 요약ALT(대체텍스트) 템플릿ALT는 이미지가 전달하는 의미를 텍스트로 요약해 화면낭독기 사용자에게 정보를 제공합니다. 또한 이미지 검색·콘텐츠 이해의 단서로 활용됩니다. 핵심은 “무엇 + 맥락 + 핵심 수..

본문 바로가기링크 스타일 표준화｜색 대비· 밑줄· 호버 인터랙션 실전요약: 링크는 블로그 탐색의 최소 단위입니다. 색 대비, 밑줄, 호버/포커스, 방문 상태, 외부 링크 구분까지 표준화하면 독자는 길을 잃지 않고, 검색·접근성 신호가 함께 좋아집니다. 이 글은 실무 규칙과 코드, 점검표까지 포함해 즉시 적용 가능한 형태로 구성했습니다.📑 목차본문1｜색 대비 수치와 기준본문2｜밑줄·호버·포커스 규칙본문3｜방문 링크 차별화 & 외부 링크 아이콘실무 패턴 세트(복붙용)점검표｜합격 기준과 흔한 실수실천 요약색 대비 수치와 기준링크는 문장 속에서 본문 텍스트와 공존합니다. 따라서 링크 색은 배경과의 대비뿐 아니라 주변 텍스트와의 구분까지 고려해야 합니다. 가장 안전한 기준은 WCAG AA입니다. 일반 텍스트 크..

표·체크리스트 서식 모음｜완독률을 올리는 표준 컴포넌트요약: 본문 구조가 일정하면 독자는 더 오래 머뭅니다. 이 글은 표·체크리스트·노트/알림·경고 블록을 복붙 가능한 코드와 함께 제공하고, 적용 전/후 비교로 개선 지점을 분명히 보여줍니다. 📑 목차서론｜왜 컴포넌트 표준화인가핵심 패턴: 표·체크리스트·노트·경고사용 전/후 비교코드 스니펫(복붙용)점검표｜합격 기준과 흔한 실수실천 요약 서론｜왜 컴포넌트 표준화인가같은 정보를 다양한 서식으로 흩뿌리면 독자는 패턴을 학습하지 못합니다. 반대로 표준 컴포넌트를 정해두면, 독자는 “이 박스는 핵심 요약, 저 박스는 주의사항”처럼 즉시 해석합니다. 결과적으로 완독률·체류시간·반복 방문에 긍정적 신호가 쌓입니다. 핵심 패턴: 표·체크리스트·노트·경고1) 표(Tab..

본문 바로가기자동 목차(TOC) 정확히 넣기｜H태그 계층·점프 링크·접근성 규칙 요약: 자동 목차는 제목만 많이 넣는다고 완성되지 않습니다. H태그 계층을 올바르게 잡고, 점프 링크가 고정 헤더에 가리지 않도록 scroll-margin-top을 지정하며, 키보드 포커스가 이동하도록 설계해야 진짜 탐색 도구가 됩니다.📑 목차서론｜자동 목차가 필요한 이유H태그 계층 규칙(좋은 예/나쁜 예)점프 링크 구현｜아이디·앵커·스크롤 마진키보드 포커스 이동과 접근성예제 HTML 세트(복붙용)점검표｜흔한 실수와 합격 기준실천 요약서론｜자동 목차가 필요한 이유 자동 목차는 글의 구조를 한눈에 보여주고, 독자가 원하는 섹션으로 즉시 이동하게 합니다. 검색 스니펫 품질도 높아지며, 긴 글의 이탈을 줄입니다.H태그 계층 규칙..

페이지 속도 점검 루틴｜모바일 LCP·INP를 줄이는 주간 체크 시트요약: 같은 작업이라도 루틴으로 굳히면 성과가 누적됩니다. 이 글은 매주 30분 내에 실행 가능한 LCP·INP 중심 점검 시트와 스크린샷/지표 템플릿, 그리고 이미지·폰트·스크립트 우선순위를 제공합니다. 수치와 증거(로그·샷)를 남기면 ‘가치 부족’ 평가를 피할 만큼 재현 가능한 품질 관리가 됩니다.📑 목차서론｜왜 주간 루틴인가배경｜LCP·INP를 좌우하는 3요소실무 루틴｜주간 체크 6단계(30분)템플릿｜스크린샷·지표 기록 양식우선순위｜이미지·폰트·스크립트 정렬점검표｜합격 기준과 흔한 실수실천 요약서론｜왜 주간 루틴인가페이지 경험은 한 번의 대수술보다 작은 개선의 반복에 강합니다. 매주 동일한 시각에 동일한 방법으로 측정·기록하면, ..

티스토리 스킨 백업·버전관리 완전 가이드｜실패 없이 원복하는 체크리스트요약: 스킨 수정을 시작하기 전에 백업·버전 태깅·변경 이력을 표준화하면, 예기치 않은 깨짐·레이아웃 붕괴가 발생해도 1) 원복·2) 원인 추적·3) 재발 방지가 가능합니다. 아래 절차는 재심사 안전 규칙에 맞춰 **콘텐츠 품질·페이지 경험·신뢰 신호**를 함께 강화하도록 설계했습니다.📑 목차서론｜왜 지금 백업·버전관리가 중요한가배경 이론｜변경 관리의 3요소: 백업·diff·리스트어실무 절차｜백업→작업 브랜치→검수→반영→원복예시·템플릿｜로그 양식·파일명 규칙·체크 스크립트점검표｜합격 기준과 흔한 실수실천 요약｜오늘 당장 적용할 5가지 서론｜왜 지금 백업·버전관리가 중요한가블로그의 신뢰는 콘텐츠만으로 완성되지 않습니다. 스킨(레이아웃·..

내부 링크 허브 페이지 만들기｜시리즈·주제 클러스터 설계 요약: 허브-스포크 구조는 “큰 주제(허브)” 아래 “세부 글(스포크)”을 연결하는 정보 설계입니다. 티스토리에서 탐색성, 체류 시간, 재방문을 동시에 높이는 핵심 전략이죠.📑 목차허브 페이지가 필요한 이유주제 범위 정의와 하위 토픽 분해허브 템플릿 구조(HTML 조각)앵커 텍스트·URL 슬러그·링킹 규칙실전 예시(엘리사 블로그 적용)품질 체크리스트(표)운영 루틴(주간 점검표)오늘부터 실행 요약 1. 허브 페이지가 필요한 이유 티스토리에서 글이 늘어날수록 사용자는 “무엇부터 읽어야 하는가”를 고민합니다. 허브 페이지는 입구·지하철 환승역 역할을 하며, 관련 글을 한 화면에서 소개하고 맥락을 제공합니다. 결과적으로:첫 방문자의 탐색 비용 감소 → ..

상단 공지 고정 가이드｜블로그 소개·읽는 순서·가이드라인 작성법 핵심 요약: 상단 공지는 방문자의 첫 30초에 블로그의 목적·읽는 순서·행동 가이드를 제공하는 랜딩 카드입니다. 공지 한 편으로 탐색성, 체류 시간, 신뢰도를 동시에 끌어올릴 수 있습니다. 이 글은 공지의 구성 템플릿, 고정 방법, 접근성·SEO 체크, 유지보수 루틴까지 제공합니다.📑 목차1. 왜 상단 공지인가: 역할과 KPI2. 공지 콘텐츠 구조 템플릿3. 고정(핀) 설정 방법4. UX·접근성·SEO 체크리스트5. 내부링크: 허브↔시리즈 동선 설계6. 유지보수 루틴(30·60·90)오늘부터 실행 요약 1. 왜 상단 공지인가: 역할과 KPI 방향 제시: 블로그의 주제·대상·핵심 섹션을 1화면 내 전달동선 설계: “처음 읽기 → 기초 가이..