Mac 스타일의 Web Terminal

Shadow DOM을 활용해 Tistory 블로그 내에서 작동하는 Mac 스타일 터미널입니다. 명령어를 통해 블로그 페이지의 테마, 글자 크기, 커서, 색상을 동적으로 변경할 수 있으며, localStorage로 페이지별 설정을 독립적으로 관리합니다.

🔧 기술 스택

분류	스택
Language	Vanilla JavaScript (ES6+)
DOM API	Shadow DOM (캡슐화)
Styling	CSS (Shadow DOM 내부 격리)
Storage	localStorage (JSON 직렬화)
Architecture	IIFE 패턴 (스코프 격리)
Deployment	Tistory 블로그 임베드 스크립트

🎯 핵심 강점

• 의존성 없음: 순수 Vanilla JavaScript로 프레임워크 불필요
• 가벼움: 번들 크기 최소화로 블로그 로딩 속도 영향 최소
• 격리된 UI: Shadow DOM으로 블로그 스킨과 완전히 독립
• 사용자 친화적: localStorage로 개인 설정 자동 저장
• 에러 처리: try-catch로 localStorage 에러 안전하게 처리

📋 주요 기능

Shadow DOM 캡슐화

• 터미널 UI를 Shadow DOM으로 격리해 블로그 스킨과 완전히 독립
• 외부 CSS 영향 없이 독립적으로 작동

터미널 명령어 인터페이스

• 명령어 입력 + 실시간 출력
• 화살표 키(↑/↓)로 명령 히스토리 탐색
• 프롬프트 동적 생성으로 연속 입력 지원

CSS 동적 변경 명령어

• theme: 다크/라이트 테마 전환
• cursor: 마우스 커서 변경 (pointer, crosshair, text, none)
• font: 본문 글자 크기 조정 (12~28px)
• invert: 페이지 색상 반전 (0~100%)
• reset: 모든 변경 초기화
• help : 모든 명령어 설명

페이지 단위 상태 저장

• localStorage로 설정 저장
• URL path 기준으로 독립적인 관리
• 새로고침 후에도 사용자 설정 유지