본문 바로가기

전체 글

 (101)
JAVAPARK Dev v1.2 스킨 — 목차(TOC) 자동 생성과 플로팅 네비게이션 ☕ 안녕하세요, 자바파커입니다!지난번 스킨 v1.0 포스팅에서 개발자 감성의 티스토리 스킨을 공유해 드렸는데요, 그 이후로 직접 블로그를 운영하면서 느낀 게 하나 있습니다.글이 길어지면 "지금 어디쯤 읽고 있지?" 하는 순간이 옵니다.위로 올라가서 다른 섹션을 찾으려면 스크롤 지옥이 시작되죠.그래서 JAVAPARK Dev 스킨 v1.2에서는 목차(TOC) 자동 생성과 플로팅 네비게이션을 추가했습니다.티스토리 스킨 v1.2 주요 변경사항결론부터 말씀드리면, 이번 업데이트의 핵심은 "긴 글을 편하게 읽게 만드는 것" 입니다.티스토리 목차 자동 생성 기능 (인라인 TOC)포스팅에 h2, h3, h4 헤딩이 2개 이상 있으면, 글 상단에 목차가 자동으로 생성됩니다.별도의 플러그인이나 수동 작성 불필요JavaSc..
블로그 대표이미지를 코드로 만드는 법 — HTML + Playwright PNG 변환 안녕하세요, 자바파커입니다.블로그 포스팅을 쓸 때마다 고민되는 게 있습니다 — 대표이미지."포토샵은 못 쓰고, Canva는 매번 접속하기 귀찮고, 일관된 스타일을 유지하고 싶은데..."결론부터 말씀드리면 — HTML+CSS로 이미지를 디자인하고, Playwright로 PNG를 캡처하면 됩니다. 이 블로그의 모든 대표이미지가 이 방식으로 만들어졌습니다.왜 HTML로 이미지를 만드는가?방법장점단점포토샵/피그마자유도 높음매번 수동 작업, 라이선스 비용Canva쉽고 빠름템플릿 느낌, 일관성 유지 어려움HTML+CSS코드로 관리, 재사용, 자동화 가능CSS 지식 필요개발자에게 HTML+CSS 방식이 유리한 이유는 세 가지입니다.코드 = 템플릿 — 한 번 만들면 텍스트만 바꿔서 재사용버전 관리 — Git으로 이미지..
블로그 글을 유튜브 영상으로 만드는 법 — NotebookLM 동영상 변환 가이드 안녕하세요, 자바파커입니다.블로그에 글을 열심히 써도, 읽는 사람이 한정되어 있다는 걸 느낄 때가 있습니다."이 글을 영상으로도 만들 수 있으면 좋겠는데, 촬영도 편집도 할 줄 모르는데..."결론부터 말씀드리면 — Google NotebookLM을 쓰면 블로그 글 하나로 AI 동영상을 만들 수 있습니다. 촬영 장비도, 영상 편집 기술도 필요 없습니다. 글만 있으면 됩니다.이 글에서는 제가 실제로 블로그 포스팅을 NotebookLM 동영상으로 변환하고, 유튜브에 업로드한 전체 과정을 공유합니다.전체 워크플로우 — 3단계전체 흐름을 먼저 보면 이렇습니다.블로그 글 작성 → NotebookLM에 업로드 → AI 동영상 생성 → 유튜브 업로드단계도구소요 시간1. 글 작성티스토리 / 마크다운이미 완료2. 동영상 ..
Claude Code Skill 사용법 — 슬래시 명령어로 반복 업무 자동화 안녕하세요, 자바파커입니다.Claude Code를 쓰다 보면 매번 같은 지시를 반복하는 순간이 옵니다."블로그 포스팅 써줘. 톤은 친근하게, 마크다운으로, 코드 예시 포함해서, 도입-본문-정리 구조로..."이 긴 설명을, 이렇게 한 줄로 바꿀 수 있다면 어떨까요?/blog-post Claude Code Skill 소개이게 바로 Skill입니다. 실제로 이 글도 제가 만든 블로그 포스팅 스킬로 작성했습니다.Claude Code Skill이란?반복되는 작업 지시를 파일로 저장해두고, 슬래시 명령어로 호출하는 기능입니다.비유하자면, 신입에게 매번 말로 설명하던 업무 절차를 매뉴얼 문서로 만들어둔 것과 같습니다. Claude가 그 매뉴얼을 읽고, 그대로 실행합니다.Skill vs Hook vs CLAUDE.md..
티스토리 블로그 구글 SEO 최적화 — 검색 노출을 위한 실전 가이드 안녕하세요, 자바파커입니다.블로그에 글을 꾸준히 쓰는데, 구글에 검색해보면 내 글이 안 나옵니다. 이런 경험 있으신가요?"좋은 글을 쓰면 알아서 검색에 뜨겠지" — 저도 그렇게 생각했습니다. 틀렸습니다.결론부터 말씀드리면, 글의 품질과 검색 노출은 별개의 문제입니다. 아무리 좋은 내용이라도 구글이 이해하기 쉬운 형태로 작성되지 않으면 검색 결과에 나타나지 않습니다. 이걸 해결하는 게 SEO(Search Engine Optimization, 검색엔진 최적화) 입니다.이 글에서는 제가 이 블로그에 직접 적용한 SEO 방법을 공유합니다. 티스토리 블로그 기준이지만, 원리는 어떤 블로그든 동일합니다.SEO, 30초 요약SEO를 한 문장으로 설명하면 이렇습니다."구글이 내 글을 찾고, 이해하고, 추천하게 만드는 ..
AI로 웹서비스 만드는 법 — Claude Code + Supabase 실전 가이드 안녕하세요, 자바파커입니다.요즘 개발 환경이 빠르게 바뀌고 있습니다. 예전에는 웹서비스 하나 만들려면 프론트엔드, 백엔드, DB, 배포까지 혼자 다 해야 했습니다. 지금은 다릅니다."아이디어만 있으면, AI와 함께 웹서비스를 만들 수 있는 시대"과장이 아닙니다. 실제로 저는 Claude Code + GitHub + Supabase 조합으로 웹서비스를 개발하고 있고, 이 프로세스를 공유합니다.AI 웹개발 도구 조합 — Claude Code, GitHub, Supabase먼저 각 도구의 역할을 정리합니다.도구역할비유Claude CodeAI 코딩 에이전트 — 설계, 구현, 디버깅24시간 일하는 시니어 개발자GitHub코드 저장소 + 버전 관리 + 배포프로젝트의 금고Supabase백엔드 올인원 (DB, 인증, ..
티스토리 포스팅 자동화 방법 — API 폐지 이후 남은 선택지 정리 안녕하세요, 자바파커입니다.블로그를 운영하다 보면 자연스럽게 이런 생각이 듭니다."마크다운으로 글을 써놓고, 자동으로 티스토리에 올릴 수 없을까?"개발자라면 한 번쯤 고민해볼 주제입니다. 저도 그랬고, 직접 조사해봤습니다. 결론부터 말씀드리면 — 쉽지 않습니다.티스토리 Open API 폐지 — 무슨 일이 있었나과거에는 티스토리가 공식 Open API를 제공했습니다. tistory.com/apis/post/write 같은 엔드포인트로 글을 작성하고, 수정하고, 삭제할 수 있었죠.하지만 2024년 초, 공식 API가 완전히 종료되었습니다.2023년 하반기: 신규 API 키 발급 중단2024년 초: 기존 키 포함 전면 폐지GitHub에 있는 tistory-cli, tistory-markdown-publishe..
티스토리 스킨 커스터마이징 — Claude Code로 개발자 테마 만들기 ☕ 안녕하세요, AI JAVAPARK입니다!오늘은 조금 색다른 이야기를 가지고 왔습니다.바로 여러분이 지금 보고 계신 이 블로그 화면, 스킨을 직접 바꿨습니다. 티스토리 기본 스킨의 한계티스토리 기본 스킨은 깔끔하지만, 솔직히 말하면 "개발 블로그" 라는 느낌이 잘 나지 않았습니다.제가 원한 건 세 가지였습니다.Simple — 읽는 데 방해되는 요소 없이 깔끔하게Modern — 2025년에 어울리는, 기술적인 감각Readable — 코드도, 글도, 한눈에 들어오는 가독성그래서 기본 스킨의 HTML 구조(티스토리 치환자)는 그대로 유지하면서, CSS만 전면 재작성하기로 했습니다.Claude Code로 CSS 전면 재작성이번 작업에서 코드를 직접 작성한 건 저가 아닙니다.Claude Code (Anthrop..
레벨업! 지식 사냥꾼 - 아이들을 위한 학습 퀴즈 앱 개발기 프로젝트 소개"레벨업! 지식 사냥꾼"은 초등학생부터 중학생까지 재미있게 학습할 수 있는 퀴즈 웹앱입니다. 게이미피케이션 요소를 적용하여 아이들이 게임하듯 공부할 수 있도록 만들었습니다.기술 스택프론트엔드: React 20 + TypeScript + Vite스타일링: Tailwind CSS백엔드/인증: Firebase (Authentication, Firestore, Cloud Functions)AI 문제 생성: Google Gemini API배포: Netlify (프론트엔드), Firebase (백엔드)PWA: 오프라인 지원 및 앱 설치 가능주요 기능1. 과목별 퀴즈과학, 역사, 사회, 영어 4개 과목 지원학년별 난이도: 초등 저학년, 초등 고학년, 중학생각 퀴즈는 5문제로 구성2. AI 맞춤 문제 생성..

티스토리툴바