본문 바로가기

AI 도구

 (13)
블로그 글을 유튜브 영상으로 만드는 법 — 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..
AI로 웹서비스 만드는 법 — Claude Code + Supabase 실전 가이드 안녕하세요, 자바파커입니다.요즘 개발 환경이 빠르게 바뀌고 있습니다. 예전에는 웹서비스 하나 만들려면 프론트엔드, 백엔드, DB, 배포까지 혼자 다 해야 했습니다. 지금은 다릅니다."아이디어만 있으면, AI와 함께 웹서비스를 만들 수 있는 시대"과장이 아닙니다. 실제로 저는 Claude Code + GitHub + Supabase 조합으로 웹서비스를 개발하고 있고, 이 프로세스를 공유합니다.AI 웹개발 도구 조합 — Claude Code, GitHub, Supabase먼저 각 도구의 역할을 정리합니다.도구역할비유Claude CodeAI 코딩 에이전트 — 설계, 구현, 디버깅24시간 일하는 시니어 개발자GitHub코드 저장소 + 버전 관리 + 배포프로젝트의 금고Supabase백엔드 올인원 (DB, 인증, ..
레벨업! 지식 사냥꾼 - 아이들을 위한 학습 퀴즈 앱 개발기 프로젝트 소개"레벨업! 지식 사냥꾼"은 초등학생부터 중학생까지 재미있게 학습할 수 있는 퀴즈 웹앱입니다. 게이미피케이션 요소를 적용하여 아이들이 게임하듯 공부할 수 있도록 만들었습니다.기술 스택프론트엔드: React 20 + TypeScript + Vite스타일링: Tailwind CSS백엔드/인증: Firebase (Authentication, Firestore, Cloud Functions)AI 문제 생성: Google Gemini API배포: Netlify (프론트엔드), Firebase (백엔드)PWA: 오프라인 지원 및 앱 설치 가능주요 기능1. 과목별 퀴즈과학, 역사, 사회, 영어 4개 과목 지원학년별 난이도: 초등 저학년, 초등 고학년, 중학생각 퀴즈는 5문제로 구성2. AI 맞춤 문제 생성..
지침 관리의 자동화: Claude Code를 활용한 디자이너, 프론트엔드, 백엔드 통합 워크플로우 전략 서론: 분절된 지침, 파편화된 워크플로우현대 소프트웨어 개발의 품질, 일관성, 확장성은 명확하게 정의되고 준수되는 '지침(Guidelines)'에 의해 좌우됩니다. 이러한 지침은 단순히 미적인 선호나 기술적 선택의 집합이 아니라, 개발팀이 공통의 프레임워크 내에서 협업하고 고품질의 결과물을 안정적으로 생산하기 위한 핵심적인 계약입니다. 한국의 '소프트웨어 개발보안 가이드' 나 'KPX 소프트웨어 개발방법론' 과 같은 공식화된 지침들은, 기획에서부터 설계, 구현, 테스트, 운영에 이르는 소프트웨어 개발 수명 주기(SDLC) 전반의 표준화된 절차와 산출물을 정의합니다. 이러한 표준화의 목적은 개발 생산성을 향상시키고, 프로세스를 체계적으로 관리하며, 잠재적인 보안 취약점을 사전에 예방하는 데 있습니다.그러나..
Figma Make: AI 기반 프로토타이핑의 심층 분석 및 활용 전략 가이드 I. 서론: Figma Make의 개념과 AI 기반 프로토타이핑의 혁신A. Figma Make의 정의: '프롬프트 투 코드(Prompt-to-Code)' 환경의 도래Figma Make는 AI 기술을 기반으로 하는 '프롬프트 투 앱(prompt-to-app)' 또는 '프롬프트 투 코드(prompt-to-code)' 도구입니다.1 이 서비스의 핵심 기능은 디자이너의 아이디어나 기존 Figma 디자인 파일을 실제 작동하는 기능적 프로토타입(functional prototypes), 웹 애플리케이션, 또는 대화형 UI로 구현하는 데 있습니다.이는 단순히 정적인(static) 디자인 화면을 클릭 가능한 목업(mockup)으로 연결하는 기존 프로토타이핑의 한계를 넘어섭니다. Figma Make는 AI와의 대화형 채..
터미널에 AI 날개 달기: OpenAI Codex CLI (그리고 그 이후) GitHub Copilot이나 ChatGPT의 코드 생성 기능을 터미널에서 바로 사용할 수 있다면 어떨까요? 복잡한 awk 명령어를 기억해내려 애쓰거나, 간단한 Python 스크립트를 짜기 위해 웹 브라우저를 열 필요가 없을 것입니다.'OpenAI Codex CLI'는 공식적으로 명명된 단일 제품은 아니지만, 많은 개발자가 터미널 환경에서 OpenAI의 강력한 코드 생성 모델(초기 Codex 및 현재의 GPT-4/GPT-3.5)을 활용하는 도구와 방식을 통칭하는 개념이 되었습니다.이 포스팅에서는 명령줄 인터페이스(CLI)에서 AI의 힘을 빌려 개발 생산성을 극대화하는 방법을 소개합니다.1. OpenAI Codex에서 현재의 GPT 모델까지먼저 용어를 정리할 필요가 있습니다.OpenAI Codex: Git..
"로그인 테스트 짜줘" 말 한마디면 끝? Playwright Agent가 가져올 테스트 자동화의 미래 "로그인 테스트 짜줘" 말 한마디면 끝? Playwright Agent가 가져올 테스트 자동화의 미래안녕하세요! E2E(End-to-End) 테스트 자동화, 웹 개발자나 QA 엔지니어라면 누구나 그 필요성에 공감하실 겁니다. 하지만 동시에, 솔직히 번거롭고 시간이 많이 드는 작업이기도 하죠.수많은 사용자 시나리오를 코드로 옮겨야 하는 부담프론트엔드 UI가 조금만 변경되어도 쉽게 깨지는 테스트 코드 (Flaky Tests)이렇게 깨진 코드를 찾아 수정하는 데 드는 지속적인 유지보수 비용이 모든 것이 우리의 퇴근 시간을 늦추는 주범이었습니다.하지만 만약, AI에게 **"회원가입 플로우 테스트 계획해줘"**라고 말만 하면 테스트 계획서가 나오고, **"이 계획대로 코드 짜줘"**라고 하면 테스트 코드가 완성되..
Playwright Agent 연구: 지능형 테스트 자동화의 새로운 패러다임 Playwright Agent 연구: 지능형 테스트 자동화의 새로운 패러다임Executive Summary소프트웨어 품질 보증(QA) 분야는 수동 및 스크립트 기반 자동화에서 지능형 에이전트 기반 시스템으로 전환하는 패러다임의 변화를 겪고 있다. 이러한 변화의 중심에 있는 Playwright Agents는 테스트 생명주기 전반에 대한 근본적인 재고를 제시하는 중요한 기술로 부상하고 있다. 이 시스템은 Planner, Generator, Healer라는 세 가지 전문화된 에이전트로 구성되며, 대규모 언어 모델(LLM)과의 안전한 인터페이스를 위해 모델 컨텍스트 프로토콜(Model Context Protocol, MCP)에 의존한다.본 보고서의 핵심 분석 결과는 다음과 같다. 첫째, Playwright Ag..
AI 코딩 에이전트의 전략적 도입: OpenAI Codex와 Anthropic Claude Code 비교 분석 AI 코딩 에이전트의 전략적 도입: OpenAI Codex와 Anthropic Claude Code 비교 분석제 1부: 에이전트 기반 소프트웨어 개발의 부상1.1. 서론: 자동 완성을 넘어 진정한 에이전트로소프트웨어 개발 분야에서 인공지능(AI)의 역할은 단순한 코드 자동 완성 기능을 넘어, 지능적이고 자율적인 파트너로 진화하는 패러다임 전환을 겪고 있습니다. 초기 AI 코딩 어시스턴트는 개발자가 입력하는 코드 라인을 예측하고 완성하는 데 중점을 둔 지능형 자동 완성 도구에 가까웠습니다. 그러나 현 세대의 AI 코딩 도구는 '에이전트(Agentic)' 시스템으로 정의됩니다. 이 에이전트들은 높은 수준의 목표를 이해하고, 다단계 계획을 수립하며, 파일 읽기/쓰기 및 명령어 실행과 같은 개발 환경과의 상호작..

티스토리툴바