백틱·중괄호·꺾쇠의 정체는? 생성형 AI 실전 활용 완전 정리

프롬프트에 등장하는 ```, { }, < > 같은 기호들, 그냥 장식이 아닙니다. 각자 정해진 역할이 있고 시험에도 나와요. 게다가 파이썬·JSON·HTML 코드를 구별하는 법, 이미지 AI 3종의 차이, 데이터 시각화까지 — 이 글에서 생성형 AI를 '실제로 써먹는' 핵심을 한 번에 정리합니다.

의도를 지키는 기술 — 프롬프트 구분 기호

구분 기호를 안 써도 AI는 답을 내놓습니다. 하지만 프롬프트 엔지니어링의 본질은 AI가 엉뚱한 방향으로 새지 않게 잡아주는 것. 그래서 1급/2급 시험에선 이 기호들을 정확히 알아야 합니다.

🔑 코드는 삼중 백틱, JSON·변수는 중괄호, 구역 나누기는 꺾쇠. 이 세 개만 외워도 절반은 끝납니다.

한눈에 코드 구별하기 — 파이썬 vs JSON vs HTML

AI-POT에는 코드 작성·디버깅도 나옵니다. 깊은 코딩 실력보다는 "이게 무슨 언어냐" 를 알아보는 게 핵심이에요. 단서만 알면 쉽습니다.

🔑 기출 단골: 꺾쇠+태그면 HTML, 중괄호+큰따옴표면 JSON. 이 둘만 확실히 잡으세요.

그림 AI 3대장 — DALL-E·SD·미드저니

이미지 생성 AI는 세 가지를 알아야 합니다. 성격이 꽤 달라요.

생성 시간은 보통 30초~1분. 그리고 공통 진리 하나 — 오타나 모호한 표현은 예상 못 한 결과를 부릅니다. 디테일하게 쓰세요.

💡 DALL-E는 특히 파라미터로 조절하는 대신, 문장으로 최대한 구체적으로 묘사해야 원하는 그림이 나옵니다.

데이터 시각화 — 히스토그램의 함정

AIP 시험에선 데이터 분석보다 시각화가 중요합니다. 가장 잘 나오는 함정은 이거예요.

⚠️ 히스토그램 vs 막대 그래프 — 둘의 결정적 차이는 막대 사이의 틈입니다.

• 히스토그램: 막대 사이에 틈이 없음 (연속형 데이터)
• 막대 그래프: 막대 사이에 틈이 있음 (범주형 데이터)

시험에선 시각화 모형의 이름을 맞추거나, 상황에 맞는 모형을 고르는 문제가 나옵니다. 일단 모형을 보고 이름을 바로 떠올리는 수준까지 익히는 게 우선이에요.

한 걸음 더 — 1급 이미지 가중치 원리

마지막으로 1급에서 빛나는 기법, 가중치(Weight) 입니다. 특정 단어를 얼마나 강하게 반영할지 괄호로 조절하는 거예요.

🔑 한 줄 기억: 소괄호는 올리고(↑), 대괄호는 내린다(↓).

마치며

오늘 내용을 한 문장으로 정리하면 이렇습니다.

구분 기호(백틱·중괄호·꺾쇠)로 의도를 지키고, 코드는 단서로 구별하며, 이미지 AI는 도구별 특성에 맞게 쓰고, 시각화는 히스토그램의 틈을 기억한다.

생성형 AI는 결국 '도구'입니다. 이 도구들의 문법과 성격을 알면, 머릿속 아이디어를 결과물로 옮기는 속도가 완전히 달라져요.

📇 핵심만 빠르게 — 한 줄 암기 카드

• 구분 기호: 삼중 백틱(코드)·중괄호(JSON·변수)·꺾쇠(XML·섹션)
• 코드: 파이썬(if/def) · JSON(중괄호+큰따옴표) · HTML(꺾쇠+태그) · 자바(class·;)
• 이미지 3종: DALL-E(ChatGPT·코파일럿·묘사) / SD(오픈소스·네거티브 칸) / 미드저니(디스코드·4장)
• 이미지 생성 30초~1분, 오타·모호 표현 주의
• 시각화: 히스토그램 = 막대 틈 없음 (막대그래프 = 틈 있음)
• 1급 가중치: 소괄호↑ / 대괄호↓(이중 대괄호 0.81배)

이 글이 도움이 되셨다면 공감과 댓글 부탁드려요. AI 개념 정리 시리즈, 다음 편에서 계속됩니다! 🙌

시험 99% 출제! N샷·CoT·멀티모달 프롬프트 완전 정리

AI-POT 시험에서 출제율이 가장 높은, 무려 99% 이상 나온다는 핵심 챕터입니다. 예시를 몇 개 주느냐로 갈리는 N샷, 단계적으로 사고하게 만드는 CoT, 그리고 텍스트와 이미지를 함께 넣는 멀티모달까지 — 이 셋만 확실히 잡으면 점수가 보입니다. 이 글에서 비유와 함께 한 번에 정리해드릴게요.

① 예시 개수가 전부 — N샷 프롬프팅

N샷 프롬프팅은 AI에게 예시(샷, shot)를 들어주며 시키는 기법입니다. 핵심은 단 하나, 예시를 몇 개 주느냐예요.

🔑 헷갈릴 게 없어요. 0개=제로샷, 1개=원샷, 2개 이상=퓨샷. 개수만 세면 끝.

② 단계적으로 생각하게 하라 — CoT와 자기 성찰

CoT(Chain of Thought, 체인 오브 소트) 는 복잡한 문제를 단계적으로 나눠 풀게 하는 방식입니다. 그런데 이게 세 가지 유형으로 나뉘고, 비유로 외우면 절대 안 잊어버려요.

비유로 직관을 잡아볼까요. 요리 레시피는 적힌 순서대로 따라가면 끝(일반 CoT). 의사는 "정말 이 진단이 맞나?" 스스로 의심하며 재검토하죠(자기 성찰형). 운동 코치는 내 자세를 보고 그때그때 교정해줍니다(피드백 루프).

🔑 구분 한 줄: 단일 방향 순서=CoT / 의심·자기평가=자기 성찰형 / 반복 개선=피드백 루프

③ 텍스트 + 이미지 + 음성 — 멀티모달 프롬프트

멀티모달 프롬프트는 둘 이상의 데이터 유형(텍스트·이미지·음성 등)을 합쳐서 AI에 넣는 겁니다. 여기서 중요한 함정 하나!

⚠️ 텍스트만, 또는 이미지만 넣으면 멀티모달이 아닙니다. 반드시 2종 이상을 결합해야 멀티모달이에요.

멀티모달의 장점은 분명합니다. 정보를 여러 형태로 주니 AI가 딴소리(환각)를 덜 하고, 정확도가 높아집니다.

🔑 핵심: 2개 이상 데이터 유형 결합 = 멀티모달 (단일 유형은 멀티모달 X)

한 걸음 더 — 1급 향상 기법

조금 더 깊이 들어가면, 위 기법들을 한 단계 끌어올린 버전이 나옵니다.

💡 대조적 N샷은 '이건 맞고 저건 틀려'를 같이 보여주는 것, 다중 관점 CoT는 '여러 전문가를 한 테이블에 앉히는 것'이라 생각하면 쉬워요.

마치며

오늘 내용을 한 문장으로 정리하면 이렇습니다.

예시 개수로 나뉘는 N샷(0·1·2+), 단계적 사고의 CoT 3유형(레시피·의사·코치), 그리고 2종 이상 결합의 멀티모달 — 이 셋이 출제율 99%의 핵심이다.

출제율이 가장 높은 만큼, 비유까지 함께 외워두면 어떤 변형 문제가 나와도 흔들리지 않습니다. N샷·CoT·멀티모달, 이 세 단어만큼은 꼭 챙기세요!

📇 핵심만 빠르게 — 한 줄 암기 카드

• N샷: 예시 0개=제로샷 / 1개=원샷 / 2개+=퓨샷
• CoT 3유형: 레시피=일반 CoT(단일방향) / 의사=자기 성찰형(의심) / 코치=피드백 루프(반복)
• 멀티모달 = 텍스트+이미지+음성 등 2종 이상 결합 (단일 유형은 ❌)
• 멀티모달 효과 = 딴소리 억제 + 정확도↑
• 1급: 대조적 N샷(긍정+부정 예시) / 다중 관점 CoT(여러 페르소나·정책·갑론을박)

이 글이 도움이 되셨다면 공감과 댓글 부탁드려요. AI 개념 정리 시리즈, 다음 편에서 계속됩니다! 🙌

결과물만 보고 프롬프트를 알아낸다? 프롬프트 전략과 역설계 완전 정리

멋진 AI 그림을 보고 "이건 대체 뭐라고 입력한 거지?" 궁금했던 적 있으신가요? 놀랍게도 결과물만 보고 원래 프롬프트를 거꾸로 알아내는 '역설계' 기술이 있습니다. 이 글에서는 프롬프트 5대 구성요소를 실전에서 적용하는 법, 이미지 AI별 작성 규칙, 그리고 역설계와 1급 고급 전략까지 한 번에 정리합니다.

프롬프트 5대 구성요소, 실전에서 이렇게 쓴다

좋은 프롬프트의 뼈대는 다섯 가지입니다 — 지시·맥락·입력·출력 형식·제약 조건. 이걸 자기소개서 작성 예시로 보면 감이 확 옵니다.

시험에서는 "이 문장이 어떤 구성요소냐"를 자주 묻습니다. 두 가지 패턴만 기억하세요.

🔑 "중립적 관점", "개인정보 미포함", "전문용어 최소화", "500단어 초과 금지" → 전부 제약 조건.
🔑 "친절한 수학 튜터"에 출력 형식·답변 수준·제한사항은 다 있는데 풀어야 할 수학 문제(데이터)가 없다 → 입력이 누락된 것.

텍스트 vs 이미지 — 작성 규칙이 다르다

흥미로운 차이가 있습니다. 텍스트 프롬프트는 용도에 따라 요소를 유연하게 바꿔도 되지만, 이미지 프롬프트는 작성 순서와 파라미터가 어느 정도 고정돼 있어요. 도구별로 정리하면:

🔑 기출: 하이픈 두 개(--)로 파라미터를 쓰는 방식은 미드저니의 특징입니다.

거꾸로 추적하기 — 프롬프트 역설계

이제 이번 글의 하이라이트입니다. 프롬프트 역설계(Reverse Engineering) 는 완성된 결과물(텍스트·이미지)을 보고, 그걸 만든 프롬프트를 거꾸로 추론하는 기술이에요.

왜 쓸까요? 두 가지 목적이 있습니다.

• ✍️ 효과적인 프롬프트 작성법 학습 — 잘 나온 결과물을 분해해 노하우를 배움
• 🛡️ 규칙 위반/우회 탐지 — AI 서비스의 정책을 어기거나 우회한 프롬프트를 잡아냄

역설계를 잘하려면 원하는 방식을 명확히 요청하고, 첫 결과가 별로여도 계속 개선을 요구해야 합니다. 유형별 방법은:

🔑 텍스트는 --- 세 개로 구분, 이미지는 기반 AI를 반드시 명시하는 게 포인트.

한 걸음 더 — 1급 고급 전략 3종

1급에서는 이름부터 묵직한 세 가지 전략이 나옵니다.

💡 헷갈리지 않게: 모두 만족 중간점 = 내쉬 균형 / 불확실성 예측 = 베이지안 / 답 먼저 = 거꾸로.

마치며

오늘 내용을 한 문장으로 정리하면 이렇습니다.

프롬프트는 5대 구성요소로 설계하고, 이미지는 도구별 규칙을 따르며, 잘 만든 결과물은 역설계로 분해해 배운다.

좋은 프롬프트를 '쓰는' 능력만큼, 잘 된 결과물을 '뜯어보는' 역설계 능력도 실력입니다. 두 방향을 모두 익히면 AI를 다루는 시야가 확 넓어져요.

📇 핵심만 빠르게 — 한 줄 암기 카드

• 5요소: 지시(행동 동사)·맥락(배경)·입력(데이터)·출력 형식(구조)·제약 조건(규칙)
• "중립·개인정보X·500자 금지" → 제약 조건 / 풀 문제·데이터 없음 → 입력 누락
• 이미지: 미드저니(--) / 스테이블 디퓨전(메인+네거티브+버튼) / DALL-E(묘사만)
• 역설계 = 결과물→프롬프트 역추론 (학습 + 규칙 위반 탐지)
• 텍스트 역설계 = --- 3개 / 이미지 역설계 = 기반 AI 명시
• 1급: 내쉬균형(중간점)·베이지안(불확실성)·거꾸로(답 먼저)

이 글이 도움이 되셨다면 공감과 댓글 부탁드려요. AI 개념 정리 시리즈, 다음 편에서 계속됩니다! 🙌

AI의 '성격'은 숫자로 정한다 — 프롬프트 원칙과 Temperature·Top P 완전 정리

똑같은 질문인데 어떤 AI는 딱딱한 보고서처럼, 어떤 AI는 시인처럼 답합니다. 이 '성격' 차이가 사실은 Temperature와 Top P라는 숫자 두 개로 조절된다는 걸 아셨나요? 이 글에서는 좋은 프롬프트의 2대 원칙부터, 출제율 1위 파라미터 Temperature·Top P, 이미지 AI별 파라미터 입력법, 그리고 1급 고급 기법까지 한 번에 정리합니다.

좋은 프롬프트의 두 기둥 — 명확성과 구체성

화려한 기법보다 먼저 잡아야 할 기본이 있습니다. 바로 명확성과 구체성이에요.

① 명확성 — 모호함을 없애고 직접적으로 지시하는 겁니다. AI가 딴생각을 못 하게요. 한 가지 팁은 같은 개념엔 같은 용어를 쓰는 것. '고객'과 '유저'를 섞어 쓰면 AI가 헷갈립니다.

② 구체성 — 상세한 정보, 특히 정량적 표현이 핵심입니다. "짧게 써줘" 대신 "300자 이내로", "몇 개 정도" 대신 "5개"처럼 숫자와 단위로 측정 가능하게 제시하세요.

여기에 맥락 정보(배경·역할 설정)와 제약 조건(분량·개수·용어 제한)까지 더하면 금상첨화입니다.

💡 예를 들어 AI 비서에게 *"내일 미팅 준비해 줘"* 라고만 하면? 무슨 미팅인지, 뭘 준비할지 맥락 정보가 부족해 제대로 응답하기 어렵습니다.

출제율 1위 — Temperature와 Top P

여기가 이번 글의 핵심이자 시험 단골입니다. 텍스트 생성 AI에서 가장 중요한 두 파라미터예요.

외우는 법은 의외로 간단합니다.

🔑 둘 다 "높으면 창의적·다양, 낮으면 일관·안정" 입니다.
차이는 대상이에요 — Temperature는 결과 전체의 창의성, Top P는 단어 선택의 다양성.

그림 AI는 어떻게 파라미터를 넣을까?

이미지 생성 AI는 도구마다 파라미터 입력 방식이 꽤 다릅니다.

🔑 기출 포인트: 미드저니는 --와 --no, 스테이블 디퓨전은 네거티브 프롬프트 칸, DALL-E는 스타일·퀄리티·사이즈를 그냥 문장으로 적습니다.

한 걸음 더 — 1급 고급 기법

① 전략적 모호성 (의도적 모호함) — 보통은 명확하게 쓰라고 하지만, 1급에선 반대 기법도 나옵니다. 일부러 모호하게 써서 AI에게 창의적 자유를 주는 거죠. 핵심은 *"중간까지는 구체적, 이후엔 자율권"* 입니다.

표현 예시: *"하되", "식으로"* — "전체 분위기는 차분하게 하되, 색감은 자유롭게 표현해줘"

② 파라미터로 성격 만들기 — 가장 흥미로운 부분입니다. Temperature와 Top P를 조합하면 AI에게 인격을 부여할 수 있어요.

마치며

오늘 내용을 한 문장으로 정리하면 이렇습니다.

좋은 프롬프트의 기본은 명확성·구체성이고, AI의 창의성은 Temperature(결과)와 Top P(단어)로 조절한다. 둘 다 높이면 작가가, 낮추면 전문가가 된다.

프롬프트의 '말'을 다듬는 것이 절반이라면, 나머지 절반은 이 파라미터라는 손잡이를 돌리는 감각입니다. 두 개를 함께 익히면 AI를 내 의도대로 부리는 힘이 생깁니다.

📇 핵심만 빠르게 — 한 줄 암기 카드

• 좋은 프롬프트 2원칙: 명확성(모호 제거·동일 용어) + 구체성(정량적·숫자·단위)
• 배경·역할 → 맥락 정보 / 분량·개수 제한 → 제약 조건
• "내일 미팅 준비해줘" → 맥락 정보 부족
• Temperature = 결과 창의성 / Top P = 단어 다양성 → 둘 다 ↑창의·다양, ↓일관·안정
• 이미지: 미드저니(--,--no) / SD(네거티브 프롬프트 칸) / DALL-E(자유 서술)
• 일부러 모호("하되","식으로") → 전략적 모호성
• 낮은 Temp+TopP → 전문가·교육자 / 높은 Temp+TopP → 작가

이 글이 도움이 되셨다면 공감과 댓글 부탁드려요. AI 개념 정리 시리즈, 다음 편에서 계속됩니다! 🙌

skin-share.html 코드 가이드

— 파일 구조, 동작 원리, 커스터마이징 지점

tistory-skin-guide.md(제작 과정/이슈 해결기)와 함께 보는 코드 레퍼런스입니다.
이 문서는 "코드가 어떻게 생겼고, 어디를 고치면 무엇이 바뀌는가"에 집중합니다.

1. 파일 한 장 요약

skin-share.html 하나에 HTML + CSS + JS가 전부 들어있습니다. (약 1,300줄)

skin-share.html
├─ <head>
│   ├─ Google Fonts 로드 (Nanum Pen Script / Noto Serif KR / Noto Sans KR)
│   └─ <style>  ······································ 약 10~590행
│       ├─ ① 디자인 토큰 (:root / body.dk)
│       ├─ ② 베이스 & 레이아웃 (헤더, 그리드, 사이드바)
│       ├─ ③ 글 카드 + 미리보기 클램프
│       ├─ ④ 페이지네이션
│       ├─ ⑤ 사이드바 위젯 (검색/카테고리/태그/RSS)
│       ├─ ⑥ Tistory 자동 삽입 요소 덮어쓰기 (!important 지대)
│       ├─ ⑦ 첨부파일 재스타일 + 확장자 칩
│       └─ ⑧ 상세 페이지 모드 (body.detail …)
├─ <body class="tt-body-index">
│   ├─ 헤더 (블로그명, 카테고리 내비, 다크모드 토글)
│   ├─ 메인 컬럼: <s_list> 글 목록 + <s_article_rep> 글 상세
│   │   └─ 카드 내부에 태그/명함/댓글 등 "상세 전용 요소" 동봉
│   ├─ 사이드바: 검색 / 카테고리 / 태그 클라우드 / RSS
│   └─ 푸터
└─ <script>  ········································ 약 724~1330행
    ├─ (a) localStorage 캐시 정리
    ├─ (b) 첨부파일 DOM 재구성
    ├─ (c) 페이지네이션 재구성
    ├─ (d) 페이지 타입 감지 + 상세 모드 토글  ← 가장 큰 블록
    │   ├─ 사이드바 카테고리 재구성
    │   ├─ 글 태그 정리(멀티 태그 분리) + 폴백
    │   ├─ author-box / atags 중복 제거
    │   └─ 사이드바 태그 클라우드 정리
    ├─ (e) 다크모드 토글 + 복원
    └─ (f) 스크롤 진행 바

2. 디자인 토큰 — 색/스타일을 바꾸려면 여기만

모든 색상은 CSS 변수로 선언되어 있고, 라이트/다크가 같은 변수명을 공유합니다.
변수만 바꾸면 전체 테마가 일괄 변경됩니다.

:root {                                  /* 라이트 모드 */
  --ac:#B07828;                          /* 액센트 (브론즈) — 링크 호버, 현재 페이지, 칩 */
  --ac-a:rgba(176,120,40,.13);           /* 액센트 연한 배경 */
  --bg:#F8F6F3;  --nav:#EFE9E2;          /* 페이지 배경 / 내비 배경 */
  --tx:#1A1814;  --sub:#4A4238;  --mt:#6E665E;  /* 본문 / 보조 / 메타 텍스트 */
  --bd:#E4DDD5;  --tb:#EDE7DF;  --cb:#FFFEFB;   /* 보더 / 태그 배경 / 카드 배경 */
}
body.dk { /* 다크 모드 — 같은 변수를 어두운 값으로 재정의 */ }

규칙: 색을 하드코딩하지 말 것. 새 요소를 추가할 때도 var(--ac) 등 변수를 쓰면
다크모드가 공짜로 따라옵니다. (예외: 확장자 칩 색상은 파일 형식 고유색이라 하드코딩)

3. 한 장 두 모드: 목록 ↔ 상세

이 스킨의 핵심 트릭입니다. 카드(.card) 마크업은 하나인데,
body 클래스에 따라 두 가지 모습으로 렌더됩니다.

목록 모드 (기본)                상세 모드 (body.detail)
┌─ .card ──────────┐           .card → 보더/배경 제거, 아티클화
│ 제목 (.pt)        │           .pt   → 28px 대제목
│ 미리보기 2줄 (.pe) │           .pe   → 클램프 해제, 전문 표시
│ 태그 (compact)    │           .rep-extra → 표시 (명함, 댓글 등)
└──────────────────┘           + "← 목록으로" 링크 JS 삽입

동작 순서:

1. <body class="tt-body-index"> → Tistory가 tt-body-page(상세) 등으로 치환
2. JS(d블록)가 클래스를 읽어 body.detail 클래스를 추가/생략
3. CSS의 body.detail ... 섹션(⑧)이 카드를 아티클로 변환

// 정식 판별 우선, 변수 미처리 시 휴리스틱 폴백
if (/tt-body-/.test(bodyCls)) {
  isDetail = /tt-body-page(\s|$)/.test(bodyCls);
} else {
  isDetail = cards.length === 1;
}

상세 전용 요소 패턴: 명함·댓글처럼 상세에서만 보일 요소는 카드 안에
class="rep-extra"로 넣어두고 기본 display:none, body.detail에서만 표시합니다.
새 상세 전용 요소를 추가할 때 이 클래스만 붙이면 됩니다.

4. 미리보기 클램프 — .pe의 방어 설계

목록의 본문 미리보기는 Tistory가 어떤 HTML이든 넣을 수 있는 영역입니다.
그래서 3중 방어를 합니다:

.pe{ max-height:53px !important; overflow:hidden !important;
     display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.pe img,.pe figure,.pe video,.pe iframe,.pe table{ display:none !important; }  /* 미디어 제거 */
.pe *{ font-size:14px !important; margin:0 !important; ... }                   /* 평탄화 */

상세 모드에서는 이걸 전부 해제합니다 (body.detail .pe{max-height:none !important;...}).
미리보기 줄 수를 바꾸려면 -webkit-line-clamp 값과 max-height(줄수 × line-height)를 함께 수정하세요.

5. !important 지대 — Tistory 덮어쓰기 레이어

⑥~⑦ 섹션은 거의 모든 선언에 !important가 붙어 있습니다. 버그가 아니라 의도입니다.
Tistory가 런타임에 자체 CSS와 인라인 스타일을 주입하기 때문에, 이를 이기려면 필요합니다.

주요 덮어쓰기 대상:

여기를 수정할 때 주의: 셀렉터가 div[class*="another_category"]처럼 부분 일치인 이유는
Tistory가 클래스명을 바꾸는 경우가 있어서입니다. 정확한 클래스명에 의존하지 마세요.

6. JS 모듈별 가이드

전부 IIFE(즉시실행함수)로 독립되어 있어 하나가 죽어도 나머지는 동작합니다.
중요 로직은 try/catch로 감싸고, 실패 시 console.warn('[hyos] ...')을 남깁니다.

(b) 첨부파일 재구성

• .tt_attachment 등에서 파일명/크기/링크를 파싱
• 확장자를 추출해 <span class="file-ext-ico" data-ext="pdf"> 칩 삽입
• 새 확장자 색을 추가하려면: CSS의 .file-ext-ico[data-ext="..."] 규칙 한 줄 추가

(c) 페이지네이션 재구성

• 서버가 렌더한 번호 링크에서 현재 페이지(href 없는 항목), 전체 페이지, URL 패턴을 수집
• ‹ 1 … 4 5 6 … 23 › 형태로 다시 그림
• 윈도우 크기 변경: var win = 2 (현재 ±2) 값 수정
• 변수 미치환([##_ 잔존) 시 페이지네이션 전체 숨김 — raw 텍스트 노출 방지

(d) 페이지 타입 감지 블록 (메인)

가장 큰 블록. 내부 순서가 중요합니다:

1. body_id로 상세/목록 판별 → body.detail 토글
2. 상세면: "← 목록으로" 링크 삽입
3. 사이드바 카테고리 재구성  ← try/catch (실패해도 원본 노출)
4. 글 태그 정리: '#' 멀티 태그 분리 → 칩 재구성
   └ 폴백 사다리: s_tag_label 결과 → 본문 /tag/ 링크 → 페이지 JSON
     → 모바일 페이지(/m/...) fetch → 전부 실패 시 숨김
5. author-box / atags 중복 제거
6. 사이드바 태그 클라우드 정리 (멀티 태그 분리 동일 적용)

태그 폴백은 0ms / 800ms / 2500ms 3회 재시도합니다 — Tistory React가
비동기로 마운트되기 때문. 이 패턴은 React 영역을 읽는 모든 코드에 필요합니다.

(e) 다크모드

document.getElementById('b').classList.toggle('dk', dk);   // className= 금지!
localStorage.setItem('hyos-dark', dk ? '1' : '0');

• classList.toggle을 쓰는 이유: className =으로 덮어쓰면 Tistory의
  tt-body-page 클래스가 날아가 레이아웃이 깨집니다 (실제 겪은 버그)
• 새로고침 시 localStorage에서 복원

(f) 스크롤 진행 바

헤더 위 2px 바(#prog)의 너비를 스크롤 비율로 갱신. 필요 없으면
#prog 요소와 마지막 scroll 리스너만 지우면 됩니다.

7. 공통 패턴 (새 기능 추가 시 따라할 것)

패턴 1 — 미치환 변수 가드

if (/\[##_/.test(el.innerHTML)) { /* 변수 미처리 → 폴백 or 숨김 */ }

모든 동적 영역의 첫 줄. raw 텍스트가 사용자에게 노출되는 것을 막습니다.

패턴 2 — 폴백 사다리

정식 치환자 → DOM 정규화 → 대체 소스(RSS, /m/ 페이지) → 깔끔하게 숨김

어느 단계에서 성공하든 결과 UI는 동일하게. 전부 실패하면 빈 껍데기 대신 섹션 자체를 숨깁니다.

패턴 3 — 비동기 재시도

if (!run()) {
  setTimeout(function(){ run(); }, 800);
  setTimeout(function(){ run(); }, 2500);
}

Tistory React 마운트를 기다리는 표준 방법. MutationObserver보다 단순하고 충분합니다.

패턴 4 — 네임스페이스

• CSS 클래스: hyos-file, hyos-cmt 처럼 접두사 사용 (Tistory 클래스와 충돌 방지)
• 콘솔 로그: console.log('[hyos] ...') — 필터링 가능
• localStorage 키: hyos-dark, hyosTagCache_v1 — 버전 붙여서 마이그레이션 대비

8. 커스터마이징 빠른 레시피

9. 수정 시 지켜야 할 것 (안 깨뜨리는 법)

1. <s_...> 블록 구조를 옮기지 마세요. 치환자는 자기 블록 안에서만 동작합니다.
   특히 <s_tag_label>, <s_random_tags>(반복 단위 주의), <s_paging_rep>.
2. 는 href="..."로 감싸면 안 됩니다. 속성 전체를 출력하는 변수입니다.
3. body 클래스는 classList로만 조작하세요.
4. React 마운트 포인트(data-tistory-react-app) 내부 DOM을 JS로 수정하지 마세요.
   리렌더 시 덮어써집니다. CSS 덮어쓰기만 허용.
5. JS 추가는 새 IIFE로. 기존 블록에 끼워 넣지 말고 독립 블록 + try/catch로 추가하면
   실패해도 다른 기능이 살아 있습니다.
6. 수정 후에는 5종 페이지를 모두 확인: 홈 / 글 상세 / 카테고리 / 태그 검색 / 마지막 페이지(글 1개).

깃허브로 따로 관리를 하고있지 않아서 파일로 전달 드리니 참고바랍니다~