<?xml version="1.0" encoding="utf-8" ?>
<rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/">
<channel>
<title>AI_23yellow &amp;gt; 커뮤니티 &amp;gt; AI Skill 개발</title>
<link>https://ai.23yellow.com/ai_skill_dev</link>
<language>ko</language>
<description>AI Skill 개발 (2026-11-01 22:04:01)</description>

<item>
<title>Claude + Three.js — 자연어로 만드는 웹 기반 3D 모션그래픽</title>
<link>https://ai.23yellow.com/ai_skill_dev/claude-threejs-%EC%9E%90%EC%97%B0%EC%96%B4%EB%A1%9C-%EB%A7%8C%EB%93%9C%EB%8A%94-%EC%9B%B9-%EA%B8%B0%EB%B0%98/</link>
<description><![CDATA[
Matt Penny의 영상 **「Claude + Three.js = Premium 3D Motion Graphics」**는 Claude와 Three.js를 결합해 웹 브라우저에서 실행되는 **프리미엄 느낌의 3D 모션그래픽**을 만드는 방법을 소개합니다.

&gt; 이번 영상은 YouTube 자막을 불러오는 과정에서 요청 제한(HTTP 429)이 발생해 전체 자막은 확인하지 못했습니다. 아래 내용은 영상의 제목·설명과 Three.js의 일반적인 활용 구조를 바탕으로 정리했습니다.

## 핵심은 생성형 영상이 아니라 ‘코드로 만드는 3D 모션’

이 방식은 이미지나 영상을 AI 모델이 직접 생성하는 구조와 다릅니다.

Claude가:

- Three.js 코드 작성
- Scene 구성
- Camera 설정
- Light 배치
- Geometry / Material 구성
- Animation Loop 작성
- Interaction 추가

같은 작업을 코드로 만들어 주고, 실제 렌더링은 브라우저와 WebGL이 담당합니다.

즉:

**Claude → Three.js 코드 → 브라우저 렌더링 → 3D Motion Graphic**

구조입니다.

## Three.js는 무엇인가?

Three.js는 WebGL을 직접 다루지 않고도 브라우저에서 3D 그래픽을 만들 수 있게 해주는 JavaScript 라이브러리입니다.

일반적으로 다음 요소를 조합합니다.

- Scene
- Camera
- Renderer
- Geometry
- Material
- Mesh
- Light
- Animation

Claude에게 이런 구조를 자연어로 설명하면 코드를 빠르게 생성할 수 있습니다.

## 왜 Claude와 잘 맞는가?

Three.js는 코드 기반이라 AI 코딩 모델이 다루기 좋습니다.

예를 들어:

&gt; 검은 배경에 금속 재질의 구체가 천천히 회전하고, 뒤에는 입자가 흐르도록 만들어줘.

라고 요청하면 Claude가:

- Scene 생성
- Sphere Geometry
- Metallic Material
- Lighting
- Particle System
- Animation Loop

를 포함한 코드를 작성할 수 있습니다.

이후:

&gt; 카메라 움직임을 더 시네마틱하게 바꿔줘.

&gt; 입자 속도를 절반으로 줄여줘.

&gt; 텍스트가 등장할 때 Glow 효과를 넣어줘.

처럼 자연어로 반복 수정할 수 있습니다.

## 생성형 영상 도구와의 차이

Seedance, Veo, Kling 같은 생성형 영상 모델은 최종 영상을 직접 생성합니다.

반면 Three.js 방식은 **코드와 실시간 렌더링**이 핵심입니다.

장점은:

- 수정 가능성이 높음
- 반복 재생이 쉬움
- 해상도 제약이 상대적으로 적음
- 인터랙션 추가 가능
- 웹사이트에 바로 삽입 가능
- 브랜드 색상과 타이밍을 정확히 제어 가능

입니다.

## 웹사이트 Hero Section에 특히 잘 맞는다

Three.js 기반 모션은 다음과 같은 웹 디자인에 적합합니다.

- SaaS Landing Page
- Product Hero Section
- Tech Brand Intro
- 3D Logo Animation
- Data Visualization
- Interactive Portfolio
- Product Showcase

영상 파일을 단순 배경으로 넣는 대신 실제 3D Scene을 실행할 수 있기 때문에 사용자 입력에 반응하는 효과도 만들 수 있습니다.

## Claude가 맡을 수 있는 역할

Claude는 단순 코드 생성보다 다음 작업까지 맡길 수 있습니다.

1. Scene 구조 설계
2. 코드 작성
3. 오류 수정
4. Animation Timing 조정
5. Camera Movement 개선
6. Light / Material 변경
7. Responsive 처리
8. Performance 최적화

즉, 디자이너가 직접 Three.js API를 모두 외우지 않아도 자연어로 3D Motion Graphic을 반복 개선할 수 있습니다.

## 모션그래픽 디자이너에게 의미가 큰 이유

기존 3D 모션그래픽은 Blender, Cinema 4D, After Effects 같은 툴을 배워야 했습니다.

Three.js + Claude 조합은 다른 접근입니다.

**디자인 의도는 자연어로 설명하고, 구현은 AI가 코드로 작성**

하는 방식입니다.

그래서 개발 경험이 많지 않은 디자이너도:

- 3D Landing Page
- Interactive Graphic
- Web Motion
- Product Animation

을 빠르게 실험할 수 있습니다.

## After Effects 방식과의 차이

기존 AI + After Effects 자동화가 완성된 영상을 만드는 데 유리하다면 Three.js는 실시간 웹 경험에 더 적합합니다.

### After Effects
- 영상 중심
- Timeline 기반
- 최종 Render 파일 생성
- 광고·모션그래픽 영상 제작에 적합

### Three.js
- 웹 중심
- Code 기반
- 실시간 Render
- Interaction 가능
- Landing Page·Portfolio·Product UI에 적합

따라서 두 방식은 경쟁 관계라기보다 용도가 다릅니다.

## 성능 최적화는 여전히 중요하다

AI가 코드를 만들어 준다고 해서 모든 Three.js 결과가 자동으로 최적화되는 것은 아닙니다.

특히:

- Polygon 수
- Texture 크기
- Shadow 품질
- Particle 수
- Post-processing
- Mobile GPU 성능

을 고려해야 합니다.

시각적으로 멋진 결과라도 모바일에서 프레임이 떨어지면 실제 서비스에 쓰기 어렵습니다.

## 실전 Prompt 예시

Claude에 다음과 같이 요청할 수 있습니다.

&gt; Three.js로 어두운 배경의 프리미엄 테크 제품 Hero Section을 만들어줘. 중앙에 반투명한 유리 재질의 구체를 배치하고, 천천히 회전하게 해줘. 주변에는 작은 입자가 흐르고, 마우스를 움직이면 카메라가 약하게 따라오게 해줘. 모바일에서는 Particle 수를 줄여줘.

이런 식으로:

**Scene + Visual Style + Motion + Interaction + Responsive 조건**

을 함께 말하면 결과가 더 안정적입니다.

## AI 모션그래픽의 방향

최근 AI 모션그래픽은 두 가지 방향으로 발전하고 있습니다.

### 1. 생성형 Video
Prompt → 완성 영상

### 2. Code-based Motion
Prompt → Code → 실시간 Graphic

Three.js는 두 번째 방향의 대표적인 도구입니다.

Code 기반 결과물은 수정·재사용·인터랙션 측면에서 큰 장점이 있어 웹디자인과 AI 코딩의 접점에서 활용도가 높습니다.

## 한 줄 정리

**Claude + Three.js의 핵심은 AI가 영상을 직접 생성하는 것이 아니라, 디자이너의 자연어 지시를 Three.js 코드로 바꿔 실시간 3D 모션그래픽을 만드는 것입니다.**

웹사이트, 포트폴리오, SaaS Landing Page처럼 **수정 가능하고 인터랙티브한 3D 표현**이 필요한 작업에서는 생성형 영상 모델과는 다른 강점을 가집니다.]]></description>
<dc:creator>최고관리자</dc:creator>
<dc:date>2026-11-01T22:04:01+09:00</dc:date>
</item>


<item>
<title>AI Website Cloner — 코딩 에이전트가 웹사이트를 분석·재구성·시각 비교하는 Skill</title>
<link>https://ai.23yellow.com/ai_skill_dev/ai-website-cloner-%EC%BD%94%EB%94%A9-%EC%97%90%EC%9D%B4%EC%A0%84%ED%8A%B8%EA%B0%80-%EC%9B%B9%EC%82%AC%EC%9D%B4%ED%8A%B8%EB%A5%BC-%EB%B6%84%EC%84%9D%EC%9E%AC%EA%B5%AC%EC%84%B1%EC%8B%9C%EA%B0%81/</link>
<description><![CDATA[
Layperson의 쇼츠 **「말로만 시켜 사이트 첫 페이지 복제했습니다, 코드 안 고치고 만든 건축 사무소 화면」**은 AI 코딩 에이전트가 기존 웹사이트를 직접 탐색하고, 화면 구조와 자산을 분석한 뒤 비슷한 프론트엔드를 다시 구현하는 **Website Cloner Skill** 사례를 보여줍니다.

&gt; 영상 속 사례는 해당 건축 사무소에 연락해 **허락을 받은 뒤 진행한 복제 테스트**입니다. 실제 사이트를 재현할 때는 저작권, 상표, 이미지·폰트 라이선스, 이용약관을 반드시 확인하고 본인이 소유했거나 명시적으로 허가받은 대상에서 사용하는 것이 안전합니다.

## 핵심은 단순 스크린샷 복사가 아니다

영상에서 사용하는 방식은 화면을 이미지처럼 캡처해 붙이는 것이 아닙니다.

AI 코딩 에이전트가 실제 사이트를 직접 탐색하면서:

- 페이지를 끝까지 스크롤
- 이미지·폰트·기타 자산 확인
- 레이아웃 구조 분석
- 컴포넌트 재구성
- 애니메이션과 스크롤 효과 확인
- 원본과 복제본 비교

까지 수행합니다.

즉:

**사이트 관찰 → 자산 수집 → 구조 분석 → 코드 재구성 → 시각 검증 → 수정**

이라는 Agent Workflow입니다.

## AI Website Cloner Template

영상 설명에는 오픈소스 프로젝트 **AI Website Cloner Template**이 소개됩니다.

이 프로젝트에는 웹사이트 복제를 위한 Skill 지침이 포함되어 있어 Claude Code나 다른 코딩 에이전트가 정해진 절차에 따라 작업할 수 있도록 합니다.

핵심은 단순히:

&gt; 이 사이트처럼 만들어줘

라고 한 번 요청하는 것이 아니라, 에이전트에게 **사이트 분석과 검증 절차 자체를 Skill로 제공한다는 점**입니다.

## Skill이 중요한 이유

AI 코딩 에이전트의 결과는 프롬프트 한 번으로도 만들 수 있지만, 복잡한 작업에서는 결과 편차가 큽니다.

Skill을 사용하면 작업 절차를 미리 고정할 수 있습니다.

예를 들어:

1. 대상 페이지 전체 확인
2. 주요 Section 분석
3. 자산 다운로드
4. Layout 구조 추출
5. Component 구현
6. Responsive 확인
7. 원본과 시각 비교
8. 차이점 수정

같은 순서를 반복적으로 적용할 수 있습니다.

이렇게 하면 Website Cloning이 단순 Prompt Engineering이 아니라 **재사용 가능한 Agent Workflow**가 됩니다.

## 브라우저를 직접 보는 Agent

웹사이트 복제에서 중요한 것은 HTML 코드만 보는 것이 아닙니다.

실제 화면에는:

- CSS Animation
- Scroll Interaction
- Hover
- Sticky Element
- Responsive Layout
- Lazy Loading
- JavaScript Motion

같은 동작이 포함됩니다.

그래서 에이전트가 브라우저를 직접 열어 실제 화면을 보고 비교하는 과정이 중요합니다.

이 구조는 Playwright 같은 Browser Automation 도구와 결합할 때 더 강력해집니다.

## 원본과 같은 스크롤 위치로 비교

영상에서는 원본 페이지와 복제 페이지를 같은 위치까지 스크롤해 비교합니다.

이 방식은 사람이 눈으로 대충 확인하는 것보다 훨씬 체계적입니다.

예를 들어 다음 요소를 비교할 수 있습니다.

- Section 높이
- 여백
- Typography
- 이미지 크기
- Alignment
- Scroll Position
- Animation Timing
- Responsive Breakpoint

AI Agent가 이런 차이를 반복적으로 확인하고 수정하면 결과 품질을 점진적으로 높일 수 있습니다.

## 컴포넌트를 다시 만든다는 점이 중요하다

Website Cloner의 목표는 기존 사이트의 코드를 그대로 복사하는 것이 아니라, 화면과 동작을 분석한 뒤 **새로운 코드 구조로 재구현하는 것**입니다.

예를 들어 원본이 어떤 프레임워크를 사용했는지와 관계없이:

- React
- Vue
- Next.js
- HTML/CSS/JS

등 현재 프로젝트 환경에 맞게 다시 만들 수 있습니다.

이 방식은 기존 디자인을 참고해 빠르게 Prototype을 만들거나, 자사 사이트를 새 기술 Stack으로 이전할 때 특히 유용합니다.

## 말로 한 번 더 수정

영상에서는 첫 복제 결과 이후에도 자연어로 추가 수정 지시를 내립니다.

즉 Workflow는:

**자동 복제 → 시각 비교 → 자연어 수정 → 재검증**

으로 이어집니다.

이 과정에서 개발자가 직접 CSS 값을 하나씩 조정하지 않아도 Agent가 반복 수정 작업을 수행할 수 있습니다.

## 1시간 36분 동안 130개 파일 생성

영상 설명에 따르면 이번 사례에서는 추가 수정까지 포함해 약 **1시간 36분 동안 130개 파일**이 생성되었습니다.

이는 Website Cloning이 단순 HTML 한 장 복사 수준이 아니라, 이미지·컴포넌트·Style·Script 등 실제 프로젝트 구조 전체를 재구성하는 작업이라는 점을 보여줍니다.

## REA와는 무엇이 다른가?

기존 REA(Reverse Engineering Anything)가 실행 파일이나 소프트웨어 내부 동작을 분석해 기능 구조를 재구성하는 방향이라면, Website Cloner는 **웹 브라우저에서 관찰 가능한 UI와 동작을 중심으로 재구현**합니다.

쉽게 비교하면:

**REA**
→ 프로그램의 기능과 내부 동작 분석

**Website Cloner**
→ 웹페이지의 UI·Layout·Asset·Interaction 분석

입니다.

## 실제 활용처

이 Workflow는 단순 복제보다 다음 용도로 활용하는 것이 적합합니다.

- 본인 회사 사이트 리뉴얼
- 기존 서비스의 Frontend Migration
- 허가받은 디자인 Prototype 제작
- Landing Page 재구축
- 오래된 HTML 사이트를 React/Vue로 전환
- 디자인 시스템 추출
- Responsive Layout 분석

특히 기존 사이트가 오래되었지만 디자인은 유지하고 싶은 경우 AI Agent를 이용한 Migration 도구로 활용할 수 있습니다.

## 주의할 점

공개 웹사이트라고 해서 자유롭게 복제할 수 있는 것은 아닙니다.

특히 다음 요소는 별도 권리가 있을 수 있습니다.

- Logo
- Brand Identity
- Photo
- Illustration
- Font
- Copywriting
- UI Asset
- Video
- Proprietary JavaScript

또 원본 사이트의 인증, 결제, 사용자 데이터 같은 Backend 기능을 무단으로 재현하거나 접근해서는 안 됩니다.

따라서 가장 안전한 활용 범위는:

**본인이 소유한 사이트 / 오픈소스 / 명시적으로 허가받은 사이트**

입니다.

## AI 코딩 Agent가 바꾸는 Frontend 개발

이 사례에서 중요한 점은 “사이트를 복제했다”는 결과 자체보다 개발 방식의 변화입니다.

기존에는:

**개발자 → 화면 분석 → HTML/CSS 작성 → 브라우저 확인 → 수정**

이었다면,

이제는:

**개발자 → 목표 설명 → Agent가 분석·구현·비교 → 사람이 승인**

구조로 이동하고 있습니다.

즉 개발자는 직접 모든 픽셀을 구현하는 역할에서, **Agent에게 목표와 품질 기준을 정의하고 결과를 검토하는 역할**로 이동하고 있습니다.

## 한 줄 정리

AI Website Cloner Skill의 핵심은 단순히 웹사이트를 베끼는 것이 아니라,

**AI 코딩 에이전트가 브라우저를 직접 관찰하고, 자산과 구조를 분석하고, 컴포넌트를 재구성한 뒤 원본과 시각적으로 비교하며 반복 수정하는 자동화된 Frontend 재구현 Workflow**를 만드는 것입니다.]]></description>
<dc:creator>최고관리자</dc:creator>
<dc:date>2026-11-01T17:14:46+09:00</dc:date>
</item>


<item>
<title>Claude Code 50분 입문 — 설치·권한·되감기·Git·CLAUDE.md·Skill·Subagent까지</title>
<link>https://ai.23yellow.com/ai_skill_dev/claude-code-50%EB%B6%84-%EC%9E%85%EB%AC%B8-%EC%84%A4%EC%B9%98%EA%B6%8C%ED%95%9C%EB%90%98%EA%B0%90%EA%B8%B0gitclaudemdskillsubagent%EA%B9%8C%EC%A7%80/</link>
<description><![CDATA[
코드깎는노인의 영상 **「클로드코드 50분 마스터 | 바이브코딩 완전 초보자용」**은 Claude Code를 처음 접하는 사람을 위해 설치부터 실제 작업, 되돌리기, Git 버전관리, CLAUDE.md, Context 관리, Skill과 Subagent까지 한 번에 익히는 입문 강의입니다.

## Claude Code는 무엇인가?

Claude Code는 웹 채팅창에서 코드를 보여주는 도구가 아니라, **내 컴퓨터의 실제 프로젝트 폴더를 읽고 파일을 만들고 수정하고 명령을 실행하는 AI 코딩 에이전트**입니다.

즉:

**말로 요청 → 파일 수정 → 실행 → 확인 → 다시 수정**

까지 이어지는 개발 작업을 AI에게 맡길 수 있습니다.

## 1. 처음에는 작업 폴더부터 정확히 잡는다

Claude Code는 현재 터미널이 들어가 있는 폴더를 작업장으로 사용합니다.

그래서 가장 먼저:

1. 새 프로젝트 폴더 생성
2. 해당 폴더로 이동
3. 그 안에서 Claude Code 실행

순서로 시작하는 것이 중요합니다.

사용자 홈 폴더처럼 범위가 너무 큰 곳에서 바로 실행하면 불필요하게 많은 파일을 읽거나 수정 대상으로 인식할 수 있습니다.

## 2. 부탁할 때는 세 가지를 같이 말한다

영상에서 반복해서 강조하는 요청 방식은:

- 무엇을 할지
- 어디까지 할지
- 어떻게 확인할지

입니다.

예:

&gt; 할 일 추가와 삭제만 있는 작은 앱을 만들어줘. 로그인이나 통계 기능은 넣지 말고, 브라우저에서 추가와 삭제가 실제로 되는지 확인해줘.

처럼 범위와 검증 기준을 같이 주면 과도한 기능 추가를 줄일 수 있습니다.

## 3. 마음대로 수정하는 것이 불안하면 모드를 바꾼다

Claude Code는 작업 모드에 따라 자동으로 수정하거나 승인 요청을 할 수 있습니다.

영상에서는 Shift+Tab으로 모드를 바꾸고, 중요한 작업에서는 **manual 또는 plan 중심으로 먼저 확인하는 습관**을 권합니다.

권한 창이 나오면 무조건 승인하지 말고:

- 내 요청과 관련된 명령인지
- 작업 폴더 밖을 건드리는지
- 삭제·설치·업로드 같은 위험 작업인지

를 확인하는 것이 중요합니다.

## 4. 생각과 다르게 흘러가면 빨리 멈춘다

AI가 잘못된 방향으로 작업 중인데 끝까지 기다릴 필요는 없습니다.

영상에서는 Esc로 작업을 중지하고 바로 원하는 방향을 다시 설명하는 방식을 추천합니다.

핵심은:

&gt; **잘못된 작업을 오래 진행시키기보다 초기에 멈추는 것**

입니다.

## 5. 되돌리기와 Git은 다르다

Claude Code에는 대화 기반 되감기 기능이 있지만 모든 변경을 완벽하게 복구할 수 있는 것은 아닙니다.

그래서 중요한 시점마다 Git Commit을 남기는 습관이 필요합니다.

예:

**기능 하나 완성 → 확인 → git commit**

을 반복하면 문제가 생겼을 때 안정적인 지점으로 돌아갈 수 있습니다.

Git은 내 컴퓨터 안의 버전 기록이고, GitHub는 그 기록을 원격 저장소에 올리는 서비스라는 차이도 설명합니다.

## 6. 큰 기능은 Plan 모드부터

작은 수정은 바로 실행해도 되지만, 큰 기능은 먼저 계획을 받는 것이 좋습니다.

예:

- 인증 추가
- DB 구조 변경
- 대규모 리팩터링
- 여러 파일을 건드리는 기능

같은 작업에서는:

**계획 작성 → 계획 검토 → 수정 요청 → 승인 → 실행**

순서가 안전합니다.

특히 Claude가 임의로 정한 기본 동작이나 기술 선택이 있는지 계획에서 확인해야 합니다.

## 7. 에러는 요약하지 말고 그대로 준다

에러가 발생했을 때 사용자가 의미를 추측해서 짧게 바꾸기보다 **원문 그대로 붙여 넣는 것이 가장 좋습니다.**

에러 문장을 찾기 어렵다면:

- 무엇을 눌렀는지
- 실제로 어떤 일이 일어났는지
- 원래는 어떻게 되어야 하는지

를 설명하면 됩니다.

## 8. Playwright를 연결하면 브라우저 검증까지 자동화 가능

Claude Code는 기본적으로 파일과 터미널 작업에 강하지만, 브라우저에서 실제 버튼을 누르고 확인하려면 별도 도구가 필요합니다.

영상에서는 **Playwright MCP**를 예로 듭니다.

이를 연결하면 Claude가:

- 페이지 열기
- 버튼 클릭
- 입력
- 결과 확인

까지 직접 수행할 수 있어 개발 → 테스트 루프를 더 자동화할 수 있습니다.

## 9. 다음 날 이어서 작업하는 방법

Claude Code를 종료했다가 다음 날 다시 열면 새 대화처럼 보일 수 있습니다.

영상에서는:

- claude -c
- /resume
- /rename

을 이용해 이전 대화를 이어가거나 찾는 방법을 설명합니다.

## 10. CLAUDE.md는 프로젝트의 상시 규칙

매번 반복해서 말해야 하는 규칙은 CLAUDE.md에 적어 두는 것이 좋습니다.

예:

- 설명은 쉬운 말로
- UI 문구는 존댓말
- 수정 전 변경 계획 먼저 보고
- 작업 후 lint 실행

같은 규칙입니다.

Claude Code는 대화가 새로 시작되어도 CLAUDE.md를 다시 읽기 때문에 프로젝트 공통 지침으로 사용할 수 있습니다.

/init을 이용하면 프로젝트를 분석해 CLAUDE.md 초안도 만들 수 있습니다.

## 11. 자동 메모와 CLAUDE.md는 다르다

Claude가 대화 중 일부 내용을 자동으로 기억할 수도 있지만, 반드시 지켜야 할 규칙은 자동 메모에만 맡기지 않는 것이 좋습니다.

중요한 규칙은 직접 CLAUDE.md에 명시하는 편이 안전합니다.

## 12. Context가 길어질 때

대화가 길어지면 모델이 기억해야 할 정보가 많아지고, 앞의 지시를 놓칠 가능성도 커집니다.

영상에서는 세 가지 명령을 구분합니다.

### /clear
주제가 완전히 바뀔 때 새 대화처럼 시작

### /compact
현재 대화를 요약해서 Context를 줄이고 같은 작업을 계속

### /context
현재 Context 사용량 확인

즉:

**주제가 바뀌면 /clear**

**같은 일을 계속해야 하면 /compact**

로 이해하면 쉽습니다.

## 13. 잠깐 다른 질문은 /btw

현재 작업 흐름을 흐리지 않고 잠깐 다른 질문만 하고 싶다면 /btw를 사용할 수 있습니다.

이렇게 하면 본 대화 Context에 불필요한 정보가 섞이는 것을 줄일 수 있습니다.

## 14. 같은 문제를 계속 못 풀면 새로 시작

같은 오류를 두세 번 반복해서 해결하지 못하면 실패한 시도가 Context에 계속 누적됩니다.

이때는:

1. 지금까지 알아낸 원인 정리
2. /clear
3. 문제 상황을 처음부터 구체적으로 다시 설명

하는 편이 오히려 빠를 수 있습니다.

## 15. 사용량·모델·생각 깊이 확인

영상에서는:

- /usage
- /effort
- /model

을 통해 사용량과 추론 깊이, 모델 선택을 확인하는 방법도 설명합니다.

초보자라면 기본값을 그대로 쓰고 정말 어려운 작업에서만 Effort를 높이는 것이 좋습니다.

## 16. @로 파일을 정확히 지정

수정해야 할 파일을 알고 있다면:

@파일명

형태로 직접 지정할 수 있습니다.

프로젝트가 커질수록 '그 파일 고쳐줘'보다 정확한 파일을 지정하는 것이 훨씬 안전합니다.

## 17. !로 터미널 명령 직접 실행

Claude Code 입력창에서 !를 붙이면 터미널 명령을 바로 실행할 수 있습니다.

예:

!git log --oneline

처럼 사용할 수 있습니다.

## 18. 반복 작업은 Skill로 만든다

자주 쓰는 요청은 Skill 형태로 만들어 슬래시 명령처럼 재사용할 수 있습니다.

예:

/check

를 실행하면:

- 문법 검사
- lint
- 테스트

를 자동 수행하도록 만들 수 있습니다.

즉, 반복 프롬프트를 **재사용 가능한 작업 절차**로 바꾸는 개념입니다.

## 19. Subagent로 일을 나눈다

하나의 Claude가 모든 검사를 순서대로 하는 대신 Subagent에게 역할을 나눌 수 있습니다.

예:

- 접근성 점검 Agent
- 보안 점검 Agent
- 코드 리뷰 Agent

를 동시에 실행하고 결과만 메인 대화로 가져올 수 있습니다.

이 방식은 Context 사용량을 줄이고 병렬 작업에도 유리합니다.

## 초보자에게 가장 중요한 습관

영상 전체를 관통하는 핵심은 기능을 많이 외우는 것이 아닙니다.

다음 습관이 더 중요합니다.

1. 작업 범위를 작게 나눈다
2. 무엇을·어디까지·어떻게 확인할지 말한다
3. 위험한 권한은 읽고 승인한다
4. 잘못 가면 빨리 멈춘다
5. 좋은 상태마다 Git Commit을 남긴다
6. 큰 기능은 Plan부터 본다
7. 중요한 규칙은 CLAUDE.md에 적는다
8. 주제가 바뀌면 Context를 정리한다
9. 최종 보고의 '확인하지 못한 것'을 반드시 본다

## 핵심 정리

Claude Code를 잘 쓰는 핵심은 '프롬프트를 멋지게 쓰는 것'보다 **AI에게 일을 맡기고 검토하는 개발 습관을 만드는 것**입니다.

전체 흐름을 요약하면:

**작게 요청 → 계획 확인 → 실행 → 검증 → Commit → Context 정리 → 반복 작업은 Skill/Subagent화**

입니다.

바이브코딩 초보자라면 처음부터 복잡한 앱을 만들기보다 작은 프로젝트에서 이 흐름을 반복해 보는 것이 가장 좋은 출발점입니다.]]></description>
<dc:creator>최고관리자</dc:creator>
<dc:date>2026-10-27T13:24:23+09:00</dc:date>
</item>


<item>
<title>REA 실전 — 엑셀·워드·PPT·노션을 Claude Code·Codex로 리버스 엔지니어링해보니</title>
<link>https://ai.23yellow.com/ai_skill_dev/rea-%EC%8B%A4%EC%A0%84-%EC%97%91%EC%85%80%EC%9B%8C%EB%93%9Cppt%EB%85%B8%EC%85%98%EC%9D%84-claude-codecodex%EB%A1%9C-%EB%A6%AC%EB%B2%84%EC%8A%A4-%EC%97%94%EC%A7%80%EB%8B%88%EC%96%B4%EB%A7%81%ED%95%B4%EB%B3%B4%EB%8B%88/</link>
<description><![CDATA[
리트머스의 영상 **「엑셀·워드·PPT·노션까지 AI로 똑같이 만들어봤습니다」**에서는 REA(Reverse Engineering Anything)를 Claude Code와 Codex에 연결해 기존 소프트웨어의 기능과 UI를 분석하고, 실제로 유사한 앱을 재구현하는 과정을 보여줍니다.

&gt; 리버스 엔지니어링은 소프트웨어 라이선스, 저작권, 이용약관과 직접 관련될 수 있습니다. **본인이 소유한 프로그램, 오픈소스, 또는 분석·재구현 권한이 명확한 대상에서 사용하는 것이 중요합니다.**

## REA는 무엇을 해주는가

REA는 완전히 새로운 역공학 기술이라기보다 기존 도구와 분석 절차를 Claude Code·Codex 같은 AI 코딩 에이전트가 쓰기 쉽게 Skill 형태로 묶은 도구에 가깝습니다.

영상에서는 REA가 다음과 같은 전통적 역공학 도구를 활용할 수 있도록 구성됐다고 설명합니다.

- Ghidra
- IDA Pro
- 바이너리/번들 분석
- 네트워크 요청 관찰
- 앱 동작 분석

핵심은 **무엇을 어떤 순서로 분석할지 AI 에이전트에게 워크플로우로 제공하는 것**입니다.

## 엑셀·원노트·PPT·워드·캡컷을 실제로 복제

영상에서는 Microsoft 계열 앱과 CapCut을 대상으로 유사 앱을 만들어 비교합니다.

### Excel
UI와 기본 함수, 서식, 피벗 일부까지 구현됐지만 자동완성·대규모 시트·세부 UX에서 한계가 보입니다.

### OneNote
레이아웃과 기본 동작은 상당히 유사했지만 스크린샷 삽입, 들여쓰기 등 일부 기본 기능이 빠졌습니다.

### PowerPoint
외형은 비슷하지만 도형 편집·표 수정·세부 인터랙션처럼 핵심 UX가 약했습니다.

### Word
문서 편집·표·날짜 입력 등 기본 기능은 구현되지만 세밀한 문서 기능은 제한적이었습니다.

### CapCut
타임라인·미디어 추가·기능 메뉴는 많이 재현됐지만 편집 인터랙션과 핵심 미디어 처리 품질은 부족했습니다.

## 겉모습을 베끼는 것과 제품을 복제하는 것은 다르다

영상의 중요한 포인트는 **UI를 비슷하게 만드는 것과 실제 제품 기능을 재현하는 것은 완전히 다른 문제**라는 점입니다.

AI는:

- 버튼
- 메뉴
- 레이아웃
- 기본 화면 흐름

같은 표면적 구조는 빠르게 재현하지만:

- 동시 편집
- 실시간 동기화
- 대규모 데이터 정합성
- 권한 처리
- 인증
- 복잡한 백엔드

같은 부분은 훨씬 어렵습니다.

## 노션 클론에서는 접근 방식이 달랐다

가장 흥미로운 부분은 Notion 클론입니다.

단순히 화면을 보고 따라 만드는 방식이 아니라 다음 자료를 수집해 **기능 명세를 먼저 만들었습니다.**

- Notion 사용 설명서
- 업데이트 로그
- 브라우저에서 보이는 API 요청
- 번들/프론트엔드 동작

이를 기반으로 약 **3,000개의 기능 명세/테스트 케이스**를 만들고 AI 에이전트를 반복 실행했습니다.

즉:

**관찰 → 기능 분해 → 테스트 케이스화 → 구현 → QA → 수정 반복**

구조입니다.

## 왜 노션 결과가 더 좋았나

영상에서는 초기 기능 테스트가 약 38점 수준이었지만 반복 QA와 수정으로 96점 수준까지 올라갔다고 설명합니다.

차이는 REA 자체보다 **요구사항과 테스트 케이스를 얼마나 세밀하게 정의했는가**에 있었습니다.

즉, AI 코딩에서 중요한 것은 단순히 좋은 모델을 쓰는 것이 아니라:

- 기능 명세
- QA 기준
- 에이전트 역할 분리
- 반복 검증
- 오류 수정 루프

를 잘 설계하는 것입니다.

## 약 8시간 만에 고품질 노션 클론

영상에서는 Claude 기반 에이전트를 병렬로 나눠 실행해 약 8시간 정도에 높은 수준의 Notion 클론을 만들었다고 설명합니다.

하지만 이것을 'Notion 전체를 8시간 만에 복제했다'고 이해하면 안 됩니다.

Notion이 오랜 기간 쌓아온:

- 실시간 협업
- 대규모 동기화
- 서버 인프라
- 권한 모델
- 안정성
- 성능 최적화

까지 그대로 재현한 것은 아닙니다.

## Litpage 공개

영상에서 완성된 Notion 스타일 프로젝트는 **Litpage**라는 이름으로 오픈소스 공개됐습니다.

특징은:

- Notion 유사 UI/UX
- 페이지
- 데이터베이스
- AI 기능
- Self-hosting
- Node.js 프로세스
- SQLite 기반

입니다.

개인 프로젝트나 내부용 Workspace로 참고하기 좋은 형태입니다.

## AI 리버스 엔지니어링의 진짜 가치

이번 영상에서 가장 중요한 점은 '소프트웨어를 복제할 수 있다'가 아닙니다.

더 중요한 변화는 **기존 제품을 분석해 요구사항과 기능 구조를 자동으로 추출하고, 이를 개발 에이전트의 입력으로 바꿀 수 있다는 것**입니다.

즉:

**기존 제품 분석 → 기능 명세 자동화 → AI 구현 → 테스트 자동화**

로 이어집니다.

이 방식은 완전한 복제보다 다음과 같은 합법적 개발 작업에서 더 유용합니다.

- 레거시 시스템 재구축
- 내부 도구 마이그레이션
- 오픈소스 프로젝트 재설계
- 기존 서비스 기능 분석
- UI/UX 벤치마킹
- 요구사항 역추출

## AI 시대의 소프트웨어 해자는 어디로 갈까

영상 후반의 중요한 관찰은 **프론트엔드 기능과 화면 복제는 점점 쉬워지고, 경쟁력은 백엔드·데이터·운영 품질로 이동할 수 있다**는 점입니다.

특히:

- 동시성
- Sync
- 데이터 정합성
- 보안
- 권한
- 대규모 운영
- 도메인 데이터

는 여전히 쉽게 복제되지 않습니다.

## 핵심 정리

이번 실험은 REA 하나만의 성능 비교라기보다 **AI 코딩 워크플로우 품질이 결과를 얼마나 크게 바꾸는지** 보여주는 사례입니다.

핵심 흐름은:

**Reverse Engineering → Feature Catalog → Test Case → Multi-Agent Implementation → QA Loop → Refinement**

입니다.

결국 AI 개발에서 중요한 것은 '한 번에 만들어줘'가 아니라 **기능을 얼마나 잘 분해하고, 검증 기준을 얼마나 명확히 만들고, 에이전트를 얼마나 구조적으로 반복 실행하느냐**입니다.]]></description>
<dc:creator>최고관리자</dc:creator>
<dc:date>2026-10-24T20:48:08+09:00</dc:date>
</item>


<item>
<title>10월 셋째 주 GitHub AI 오픈소스 TOP 10 — REA·ArtCraft·VoiceStudio·Orca·OpenAI Math</title>
<link>https://ai.23yellow.com/ai_skill_dev/10%EC%9B%94-%EC%85%8B%EC%A7%B8-%EC%A3%BC-github-ai-%EC%98%A4%ED%94%88%EC%86%8C%EC%8A%A4-top-10/</link>
<description><![CDATA[
One Repo a Day 채널의 쇼츠 **「깃허브 트렌딩 Top 10 (10월 셋째 주)」**에서는 2026년 10월 셋째 주 GitHub에서 별 증가량이 컸던 AI·개발 관련 오픈소스 10개를 정리합니다.

이번 주 흐름은 크게 **AI 에이전트, 로컬 실행, 시각·음성 제작 자동화, 에이전트 감사·관리**로 나눠 볼 수 있습니다.

## 10위 — OpenAI Math

**openai/math**는 모델이 생성한 수학 결과와 논문, 코드를 모아 검토와 재현을 돕는 저장소입니다.

특히 Lean 형식화 자료를 함께 다뤄, 단순한 자연어 수학 답변을 넘어 **형식 검증 가능한 수학 연구 워크플로우**와 연결되는 점이 특징입니다.

## 9위 — HyperFrames

**heygen-com/hyperframes**는 HTML/CSS 기반 장면을 MP4 영상으로 렌더링하는 프레임워크입니다.

일반 생성형 영상처럼 매번 결과가 달라지는 방식이 아니라 **코드 기반으로 장면을 정의해 반복 가능한 결과를 만들기 쉽다**는 점이 장점입니다.

AI 에이전트와 연결하면:

- 텍스트·레이아웃 생성
- 모션그래픽 구성
- 반복 렌더링
- 템플릿 기반 영상 자동화

같은 워크플로우를 만들 수 있습니다.

## 8위 — Orca

**stablyai/orca**는 여러 코딩 에이전트를 병렬로 실행하고 결과를 비교·검토·병합할 수 있도록 돕는 데스크톱 IDE입니다.

각 에이전트를 분리된 Git worktree에서 실행하면 동일한 작업을 여러 방식으로 시도하게 한 뒤 가장 좋은 결과를 선택할 수 있습니다.

즉, 하나의 AI에게 모든 판단을 맡기는 대신 **여러 에이전트의 결과를 경쟁·비교시키는 개발 방식**입니다.

## 7위 — iFixAi

**ifixai-ai/iFixAi**는 AI 에이전트의 행동을 독립적으로 감사하는 도구입니다.

에이전트가 다음과 같은 문제를 일으키는지 확인하는 데 초점을 둡니다.

- 규칙 우회
- 의도하지 않은 행동
- 정책 위반
- 이상한 도구 사용
- 지시와 다른 결과

행동 기록과 평가 점수를 남길 수 있어 **에이전트 보안·감사·Eval** 관점에서 의미가 있습니다.

## 6위 — Diagram Design

**cathrynlavery/diagram-design**은 프롬프트로 브랜드 스타일에 맞는 다이어그램을 생성하고 단일 HTML+SVG 파일로 내보내는 도구입니다.

서비스 설명, 기술 아키텍처, 제품 흐름 등을 이미지 파일로만 만드는 것이 아니라 **웹에서 바로 수정 가능한 구조**로 만들 수 있다는 점이 장점입니다.

## 5위 — Strata

**Niko1221/Strata**는 게이밍 PC의 로컬 GPU에서 대형 AI 모델을 실행하고 OpenAI 호환 API 형태로 사용할 수 있도록 돕는 프로젝트입니다.

영상에서는 Qwen 계열 대형 모델을 로컬에서 구동하는 사례를 소개합니다.

이런 구조의 장점은:

- 클라우드 API 의존 감소
- 사내·개인 데이터 로컬 처리
- 기존 OpenAI API 기반 앱과 연동 용이
- 자체 GPU 자원 활용

입니다.

## 4위 — Anatomy

**wheresryan22/anatomy**는 SVG와 WebGL을 활용해 인터랙티브 등각도 기계 도면을 만드는 도구입니다.

단순 이미지가 아니라 수치와 상태를 실시간으로 바꾸고 구조를 움직여 볼 수 있어 **제품·기계·시스템 설명용 인터랙티브 시각화**에 활용할 수 있습니다.

## 3위 — VoiceStudio

**debpalash/VoiceStudio**는 로컬 환경에서 음성 관련 작업을 한 번에 처리하는 오픈소스 도구입니다.

주요 기능은 다음과 같습니다.

- 음성 합성
- 음성 복제
- 음성 전사
- 더빙
- GPU/MPS 로컬 실행

클라우드 음성 API를 사용하지 않고 내부 파이프라인에 직접 넣을 수 있어 **개인정보 보호와 비용 관리** 측면에서 관심을 받을 만합니다.

## 2위 — ArtCraft

**storytold/artcraft**는 2D 합성과 3D 스테이징을 한 환경에서 다루는 AI 제작 IDE입니다.

프롬프트 한 번에 결과를 맡기는 방식보다:

- 카메라 위치
- 구도
- 오브젝트 배치
- 샷 구성
- 반복 가능한 장면

을 직접 제어하는 방향에 초점이 있습니다.

AI 이미지·영상 제작에서도 점점 **프롬프트 운에 맡기는 생성**보다 **재현 가능한 제작 파이프라인**이 중요해지고 있다는 흐름을 보여줍니다.

## 1위 — REA

**morluto/rea**는 AI 에이전트가 Ghidra, Hopper, IDA 같은 분석 도구와 연결돼 바이너리의 구조와 동작을 분석하도록 돕는 리버스 엔지니어링 툴킷입니다.

MCP를 통해 분석 흐름을 연결하고, 결과에 근거를 남기면서 조사할 수 있다는 점이 특징입니다.

보안 사고 대응이나 본인이 분석 권한을 가진 프로그램 조사에 활용할 수 있습니다.

&gt; 리버스 엔지니어링은 소프트웨어 라이선스와 저작권, 이용약관의 영향을 받을 수 있으므로 **본인이 소유하거나 분석 권한이 명확한 대상에서만 사용하는 것이 중요합니다.**

## 이번 주 트렌드에서 보이는 변화

이번 TOP 10은 단순히 새로운 모델보다 **AI가 실제로 일하기 위한 실행 환경**이 빠르게 발전하고 있다는 점이 눈에 띕니다.

### 1. 에이전트를 여러 개 동시에 운영

Orca처럼 여러 에이전트를 병렬로 돌려 결과를 비교하는 방식이 늘고 있습니다.

### 2. 에이전트도 감사와 평가가 필요

iFixAi처럼 에이전트의 행동을 추적하고 평가하는 도구가 등장하면서 **Agent Ops·Eval·보안**이 중요해지고 있습니다.

### 3. 로컬 실행이 계속 확대

Strata와 VoiceStudio처럼 모델과 음성 파이프라인을 **내 GPU에서 직접 실행**하려는 흐름이 강합니다.

### 4. 생성보다 재현 가능한 제작

HyperFrames와 ArtCraft는 이미지·영상 제작에서도 결과를 다시 만들 수 있는 **결정적·구조화된 제작 방식**을 강조합니다.

## 핵심 정리

10월 셋째 주 GitHub 트렌딩에서는 다음 흐름이 두드러졌습니다.

- **REA** → AI 리버스 엔지니어링
- **ArtCraft** → AI 2D·3D 제작 IDE
- **VoiceStudio** → 로컬 음성 합성·복제·더빙
- **Anatomy** → 인터랙티브 기술 도면
- **Strata** → 로컬 대형 모델 실행
- **Diagram Design** → 브랜드 맞춤 다이어그램
- **iFixAi** → AI 에이전트 감사
- **Orca** → 병렬 코딩 에이전트 관리
- **HyperFrames** → 코드 기반 영상 렌더링
- **OpenAI Math** → 수학 결과·형식 검증

AI 생태계가 이제 모델 자체뿐 아니라 **에이전트 운영·검증·로컬 실행·미디어 제작 인프라**까지 빠르게 확장되고 있다는 점이 이번 주의 핵심입니다.]]></description>
<dc:creator>최고관리자</dc:creator>
<dc:date>2026-10-18T21:04:40+09:00</dc:date>
</item>


<item>
<title>2026 AI 개발 오픈소스 TOP 8 — Archify·Vercel Agent Skills·gstack·Superpowers·REA</title>
<link>https://ai.23yellow.com/ai_skill_dev/2026-ai-%EA%B0%9C%EB%B0%9C-%EC%98%A4%ED%94%88%EC%86%8C%EC%8A%A4-top-8-archifyvercel/</link>
<description><![CDATA[
MINDUNG 채널의 쇼츠 **「2026년 개발자들이 선택한 오픈소스 TOP8 개발부문」**에서는 2026년 GitHub에서 주목받은 AI 개발용 오픈소스 도구와 Skill 8가지를 정리합니다.

이번 목록의 공통점은 단순히 코드를 대신 작성하는 것이 아니라, **프로젝트 구조 이해 → 요구사항 확인 → 구현 → 테스트 → 리뷰 → 보안·품질 점검**까지 AI 개발 워크플로우 전체를 보완한다는 점입니다.

## 8위 — Archify

**Archify**는 복잡한 프로젝트 구조와 데이터 흐름을 다이어그램으로 시각화해 주는 도구입니다.

코드가 많아질수록 파일과 모듈이 어떻게 연결되는지 파악하기 어려워지는데, 이를 클릭해서 살펴볼 수 있는 구조도로 바꿔 줍니다.

특히 다음 상황에서 유용합니다.

- 처음 보는 코드베이스 파악
- 레거시 프로젝트 구조 분석
- 데이터 흐름 추적
- 리팩터링 전 영향 범위 확인

## 7위 — Vercel React Best Practices

Vercel의 Agent Skills 저장소에 포함된 React Best Practices는 AI가 React 코드를 작성하거나 수정할 때 **Vercel이 권장하는 성능 최적화 기준**을 적용하도록 돕습니다.

예를 들어 다음과 같은 문제를 찾는 데 활용할 수 있습니다.

- 불필요한 재렌더링
- 순차적 데이터 요청으로 인한 지연
- 비효율적인 상태 관리
- 느린 컴포넌트 구조

AI가 단순히 “작동하는 코드”를 만드는 것을 넘어 **실서비스 수준의 성능 기준**을 적용하도록 만드는 Skill입니다.

## 6위 — Addy Osmani Agent Skills

**addyosmani/agent-skills**는 AI 코딩 에이전트에게 실무 엔지니어링 절차를 적용하기 위한 Skill 모음입니다.

요구사항 확인부터 테스트, 코드 리뷰까지 개발 과정 전체에 일관된 절차를 적용할 수 있습니다.

즉, “일단 동작하는 코드”에 그치지 않고 **품질과 유지보수성까지 점검하는 개발 방식**을 AI에게 주입하는 도구입니다.

## 5위 — Matt Pocock Skills

**mattpocock/skills**는 다양한 AI 개발 Skill을 모아둔 저장소입니다.

영상에서 대표적으로 소개한 **grill-me**는 AI가 바로 구현에 들어가는 대신 사용자를 계속 질문해 요구사항의 빈틈을 찾는 방식입니다.

이를 통해 다음 내용을 먼저 명확하게 할 수 있습니다.

- 어떤 문제를 해결할 것인지
- 빠진 조건은 없는지
- 예외 상황은 무엇인지
- 기능 범위는 어디까지인지
- 중요한 설계 결정을 무엇으로 할지

“다 만들고 나서 이게 아닌데”를 줄이기 위해 **구현 전에 계획 품질을 높이는 Skill**입니다.

## 4위 — Everything Claude Code

**everything-claude-code**는 Claude Code를 개발 환경으로 제대로 활용하기 위한 다양한 구성 요소를 모아둔 저장소입니다.

영상에서는 다음과 같은 요소를 한꺼번에 가져다 쓸 수 있는 도구로 소개합니다.

- 개발용 에이전트
- 코드 리뷰 에이전트
- 테스트 Skill
- 보안 점검 Skill
- 자동화 설정

Claude Code를 처음 구성할 때 어떤 설정과 Skill을 붙여야 할지 막막한 사용자에게 **개발 환경 템플릿** 역할을 합니다.

## 3위 — gstack

**gstack**은 혼자 개발할 때 필요한 여러 역할을 AI에게 분담하도록 돕는 개발 도구 모음입니다.

개발자는 혼자서도 실제로는 여러 역할을 동시에 수행합니다.

- 제품 기획
- 디자인 검토
- 구현
- 브라우저 테스트
- 버그 확인
- 품질 점검

gstack은 이런 역할을 AI에게 나눠 맡기고, 실제 브라우저를 확인하면서 문제를 찾도록 구성하는 방식입니다.

개인 개발자나 소규모 팀이 **여러 전문 역할을 가진 가상의 개발팀**처럼 AI를 활용하는 데 초점이 있습니다.

## 2위 — Superpowers

**Superpowers**는 AI가 요청을 받자마자 코드를 작성하지 않고, 먼저 요구사항과 설계를 확인한 뒤 작업을 작은 단위로 나눠 개발하도록 돕는 도구입니다.

주요 흐름은 다음과 같습니다.

1. 요구사항 확인
2. 설계
3. 작업 분해
4. 구현
5. 테스트
6. 검증

AI 코딩에서 자주 생기는 **“사용자가 원한 것과 다른 결과를 빠르게 만들어 버리는 문제”**를 줄이는 데 의미가 있습니다.

## 1위 — REA

**REA(Reverse Engineer Anything)** 는 소스 코드가 없는 프로그램이나 실행 파일의 구조와 동작을 AI가 분석하도록 돕는 오픈소스 도구입니다.

다른 앱의 특정 기능이 어떻게 동작하는지 조사하고, 내부 구조와 흐름을 이해해 비슷한 기능을 구현할 때 참고할 수 있습니다.

단, 리버스 엔지니어링은 저작권과 라이선스, 이용약관에 영향을 받을 수 있으므로 **본인이 소유했거나 분석 권한이 있는 프로그램, 오픈소스 등 허용된 대상에만 사용하는 것이 중요합니다.**

## TOP 8에서 보이는 공통 흐름

이번 목록을 보면 2026년 AI 개발 도구의 관심사가 단순 코드 생성에서 다음 단계로 이동하고 있음을 볼 수 있습니다.

### 1. 코드보다 먼저 요구사항을 정리한다

Superpowers와 grill-me처럼 **코드를 작성하기 전에 설계와 요구사항을 명확히 하는 도구**가 중요해지고 있습니다.

### 2. 코드 품질을 자동으로 검증한다

Vercel Best Practices와 agent-skills처럼 **성능·테스트·리뷰·보안 기준을 AI 개발 과정에 포함**시키는 흐름이 강합니다.

### 3. 프로젝트 전체 구조를 이해한다

Archify나 REA처럼 AI가 단일 파일이 아니라 **전체 코드베이스와 프로그램 구조를 파악하도록 돕는 도구**가 늘고 있습니다.

### 4. 여러 전문 역할을 AI에게 나눈다

gstack처럼 하나의 AI에게 모든 것을 맡기기보다 **기획·개발·테스트·리뷰를 역할별 에이전트로 나누는 구조**가 확산되고 있습니다.

## 핵심 정리

2026년의 AI 개발 도구는 “코드를 얼마나 빨리 생성하느냐”보다 **무엇을 만들지 제대로 결정하고, 안정적으로 구현하고, 결과를 검증하는 것**에 더 초점을 맞추고 있습니다.

- **Archify** → 프로젝트 구조 시각화
- **Vercel React Best Practices** → React 성능 최적화
- **Addy Osmani Agent Skills** → 실무 개발 절차
- **Matt Pocock Skills** → 요구사항·계획 보완
- **Everything Claude Code** → Claude Code 개발 환경
- **gstack** → 역할 기반 AI 개발팀
- **Superpowers** → 설계·작업 분해·테스트
- **REA** → 프로그램 구조와 동작 분석

AI 코딩 에이전트를 단순 코드 생성기가 아니라 **개발 프로세스 전체를 수행하는 시스템**으로 바꾸는 도구들이 주목받고 있다는 점이 이번 TOP 8의 핵심입니다.]]></description>
<dc:creator>최고관리자</dc:creator>
<dc:date>2026-10-18T20:26:06+09:00</dc:date>
</item>


<item>
<title>GitHub 주간 트렌딩 AI 개발 도구 TOP 5 — agent-skills·HyperFrames·e2e·moli·skills</title>
<link>https://ai.23yellow.com/ai_skill_dev/github-%EC%A3%BC%EA%B0%84-%ED%8A%B8%EB%A0%8C%EB%94%A9-ai-%EA%B0%9C%EB%B0%9C-%EB%8F%84%EA%B5%AC-top-5/</link>
<description><![CDATA[
실밸개발자 채널의 쇼츠 **「REA 말고 뜬 깃허브 이번 주 TOP 5」**에서는 2026년 10월 둘째 주 기준 GitHub 주간 트렌딩에서 별 증가량이 컸던 개발 도구 5가지를 추려 소개합니다.

이번 목록은 단순 인기 순위보다 **AI 개발·에이전트·자동화에 바로 활용할 수 있는 저장소**를 중심으로 보는 것이 핵심입니다.

## 5위 — addyosmani/agent-skills

**agent-skills**는 실무 엔지니어링에 필요한 여러 AI Skill을 한 번에 설치해서 사용할 수 있도록 정리한 저장소입니다.

영상에서는 약 25개의 실무형 스킬을 명령 한 줄로 설치할 수 있다고 소개합니다.

활용 예시는 다음과 같습니다.

- 코드 리뷰
- 설계 검토
- 디버깅
- 성능 개선
- 개발 워크플로우 표준화

Claude Code나 Codex 같은 코딩 에이전트를 사용할 때 매번 프롬프트를 처음부터 작성하는 대신, 반복 업무를 Skill로 재사용하는 방식입니다.

## 4위 — heygen-com/hyperframes

**HyperFrames**는 HTML/CSS 기반으로 영상 장면을 정의하고 이를 MP4 영상으로 렌더링하는 도구입니다.

영상 생성 AI처럼 매번 장면을 새로 그리는 방식이 아니라 **코드로 레이아웃·텍스트·애니메이션을 정의해 렌더링**한다는 점이 특징입니다.

따라서 다음과 같은 장점이 있습니다.

- 동일한 코드를 다시 렌더하면 결과를 재현하기 쉽다
- 색상이나 텍스트를 변수 수준에서 수정할 수 있다
- AI가 직접 코드를 작성해 모션그래픽을 만들 수 있다

영상 제작자는 이번 쇼츠 자체도 HyperFrames로 렌더링했다고 설명합니다.

## 3위 — tester-army/e2e

**e2e**는 자연어로 테스트 동작을 정의하고, 한 번 성공한 테스트를 이후에는 반복 실행할 수 있도록 하는 자동화 도구입니다.

예를 들어 **“업그레이드해 줘”** 같은 자연어 명령을 테스트 시나리오로 만들고, 처음 검증이 끝난 뒤에는 같은 테스트를 AI 호출 없이 재생하는 식입니다.

AI가 테스트를 설계하고, 이후 반복 작업은 결정적인 자동화로 실행하는 구조라 비용과 재현성 측면에서 의미가 있습니다.

## 2위 — lexmount/moli

**moli**는 Rust로 작성된 에이전트용 브라우저입니다.

일반적인 AI 에이전트가 Chrome이나 Chromium 기반 헤드리스 브라우저를 많이 사용하는 것과 달리, 더 가벼운 실행 환경을 목표로 합니다.

영상에서 소개한 저장소 자체 측정 기준으로는:

- 메모리 사용 중간값 약 **73 MiB**
- Chrome Headless 약 **773 MiB**
- 공개 웹 페이지 192곳 테스트에서 유용한 페이지 추출 결과는 Chrome과 비슷한 수준

이라고 설명합니다.

이 수치는 프로젝트 README의 자체 측정 결과이므로 환경에 따라 달라질 수 있습니다.

여러 브라우저 에이전트를 동시에 운영하거나 서버 자원이 제한적인 환경에서 특히 관심 있게 볼 만한 프로젝트입니다.

## 1위 — mattpocock/skills

**skills**는 AI 코딩 에이전트를 위한 다양한 Skill을 모아 둔 저장소입니다.

영상에서는 해당 주에만 별이 1만 개 이상 증가했고, 누적 별 수가 약 28만 개라고 소개합니다.

대표적으로 소개된 기능은 **grill-me**입니다.

이 스킬은 AI가 바로 코드를 작성하는 대신 사용자에게 계속 질문을 던져:

- 요구사항의 빈틈
- 아직 결정되지 않은 설계 요소
- 예외 상황
- 우선순위
- 구현 범위

를 먼저 명확하게 만드는 방식입니다.

즉, **코드 생성 전에 계획 품질을 높이는 Skill**로 볼 수 있습니다.

## 이번 TOP 5에서 보이는 흐름

다섯 프로젝트를 함께 보면 최근 AI 개발 도구의 방향을 크게 세 가지로 정리할 수 있습니다.

### 1. AI Skill의 표준화

반복 업무를 프롬프트가 아니라 **Skill 단위로 패키징**해서 여러 프로젝트에서 재사용하는 흐름이 강해지고 있습니다.

### 2. AI + 결정적 실행

AI가 처음 계획하거나 테스트를 만들고, 이후 반복 실행은 일반 코드로 처리해 **비용과 재현성을 개선**하려는 구조가 늘고 있습니다.

### 3. 에이전트 실행 환경의 경량화

브라우저, 영상 렌더링, 테스트 등 AI 에이전트가 실제로 사용하는 외부 도구도 점점 에이전트 친화적으로 바뀌고 있습니다.

## 핵심 정리

이번 주 GitHub 트렌딩에서 눈에 띈 프로젝트는 단순한 AI 모델보다 **에이전트가 실제 일을 더 안정적으로 수행하도록 돕는 주변 도구**가 많았습니다.

- **agent-skills** → 실무 Skill 모음
- **HyperFrames** → 코드 기반 영상 렌더링
- **e2e** → 자연어 기반 반복 테스트
- **moli** → 경량 에이전트 브라우저
- **skills** → AI 코딩 Skill 생태계

AI 개발 환경이 모델 자체의 성능 경쟁을 넘어, **Skill·브라우저·테스트·렌더링 같은 실행 인프라 경쟁으로 확장되고 있다는 흐름**을 보여주는 사례입니다.]]></description>
<dc:creator>최고관리자</dc:creator>
<dc:date>2026-10-18T20:12:15+09:00</dc:date>
</item>


<item>
<title>AI 코딩 도구끼리 기억 공유하기 — Claude Code·Codex·Cursor 사이 프로젝트 맥락 이어가기</title>
<link>https://ai.23yellow.com/ai_skill_dev/ai-%EC%BD%94%EB%94%A9-%EB%8F%84%EA%B5%AC%EB%81%BC%EB%A6%AC-%EA%B8%B0%EC%96%B5-%EA%B3%B5%EC%9C%A0%ED%95%98%EA%B8%B0-claude-codecodexcursor/</link>
<description><![CDATA[
MINDUNG 채널의 쇼츠 **「클로드·코덱스 기억을 공유하는 AI모델 바꿔도 다시 설명할 필요 없는 깃허브 6위 도구」**에서는 서로 다른 AI 코딩 도구 사이에서 **프로젝트의 작업 맥락을 이어 주는 메모리 도구**를 소개합니다.

## 왜 이런 도구가 필요한가?

Claude Code에서 개발하다가 사용량 제한이나 다른 이유로 Codex, Cursor, Gemini CLI 같은 다른 도구로 바꾸면 보통 다음 내용을 다시 설명해야 합니다.

- 지금까지 무엇을 만들었는지
- 어떤 설계 결정을 내렸는지
- 어떤 오류를 이미 해결했는지
- 어떤 방법은 시도했지만 실패했는지
- 다음에 무엇을 해야 하는지

프로젝트가 커질수록 이 설명 비용이 커지고, 중요한 맥락이 빠지면 AI가 이미 실패했던 방법을 다시 시도하거나 기존 구조와 맞지 않는 코드를 만들 수 있습니다.

## 작업 기록을 공통 메모리로 저장

영상에서 소개한 도구는 개발 과정에서 생기는 중요한 정보를 자동으로 기록해 두고, 다른 AI 코딩 도구가 그 기록을 다시 읽어 작업을 이어갈 수 있도록 합니다.

예를 들어 Claude Code에서 웹사이트를 개발하다가 Codex로 전환해도 Codex가 기존 메모리를 읽어 **어디까지 개발됐는지, 어떤 결정이 있었는지, 어떤 문제를 해결했는지** 파악한 뒤 이어서 작업하는 방식입니다.

## 여러 AI 코딩 도구에서 같은 기억 사용

영상에 따르면 Claude Code와 Codex뿐 아니라 다음과 같은 다양한 AI 개발 도구를 포함해 **20개 이상의 도구**를 지원합니다.

- Claude Code
- Codex
- Cursor
- Gemini CLI
- OpenCode 등

핵심은 특정 모델 자체에 기억을 맡기는 것이 아니라, **프로젝트 바깥에 독립된 메모리 계층을 두는 것**입니다.

이렇게 하면 AI 모델이나 개발 도구를 바꾸더라도 프로젝트의 중요한 맥락은 그대로 유지할 수 있습니다.

## 기억은 로컬 Markdown 파일로 저장

또 하나의 장점은 메모리가 외부 서비스에만 저장되는 것이 아니라 **내 컴퓨터의 Markdown 파일 형태로 관리된다는 점**입니다.

따라서 사용자가 직접 내용을 열어보고 다음과 같이 관리할 수 있습니다.

- 잘못 기록된 내용 수정
- 오래된 정보 삭제
- 중요한 설계 결정 추가
- 프로젝트별 기록 검토

AI의 기억이 불투명한 내부 상태가 아니라 사람이 읽고 수정할 수 있는 문서로 남는다는 점이 실용적입니다.

## 실제 활용 포인트

이 구조는 여러 AI 코딩 에이전트를 번갈아 사용하는 개발 환경에서 특히 유용합니다.

**Claude Code → Codex → Cursor**처럼 도구를 바꿔도 매번 프로젝트 설명부터 다시 시작하지 않고, 공통 메모리를 기반으로 다음 작업을 이어갈 수 있기 때문입니다.

장기 프로젝트에서는 단순한 편의 기능을 넘어 **AI 에이전트의 장기 기억과 프로젝트 지식 관리 계층**으로 활용할 수 있습니다.

## 핵심 정리

이 도구의 핵심은 AI 모델 하나를 더 똑똑하게 만드는 것이 아니라, **여러 AI 개발 도구가 동일한 프로젝트 기억을 공유하도록 만드는 것**입니다.

AI 코딩 도구를 자주 바꾸거나 여러 에이전트를 함께 사용하는 환경이라면, 코드 자체뿐 아니라 **결정·실패·진행 상황을 별도의 메모리로 관리하는 방식**이 점점 중요해질 수 있습니다.]]></description>
<dc:creator>최고관리자</dc:creator>
<dc:date>2026-10-18T13:56:06+09:00</dc:date>
</item>


<item>
<title>CLI-Anything — 프로그램을 AI가 터미널 명령으로 조종하게 만드는 자동 CLI 생성기</title>
<link>https://ai.23yellow.com/ai_skill_dev/cli-anything-%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%A8%EC%9D%84-ai%EA%B0%80-%ED%84%B0%EB%AF%B8%EB%84%90-%EB%AA%85%EB%A0%B9%EC%9C%BC%EB%A1%9C-%EC%A1%B0%EC%A2%85%ED%95%98%EA%B2%8C-%EB%A7%8C%EB%93%9C%EB%8A%94/</link>
<description><![CDATA[
MINDUNG 채널의 쇼츠 **「아무 프로그램이나 AI가 터미널로 조종하게 만드는 미친 생성기」**에서는 프로그램이나 GitHub 저장소를 분석해, AI가 해당 소프트웨어를 **터미널 명령어(CLI)** 로 제어할 수 있도록 도구를 자동 생성해 주는 **CLI-Anything**을 소개합니다.

## CLI-Anything은 무엇인가?

CLI-Anything은 프로그램 폴더나 GitHub 주소를 입력하면 소스 코드를 분석해 해당 프로그램을 제어하기 위한 CLI를 자동으로 만들어 주는 오픈소스 프로젝트입니다.

영상에서는 CLI 생성 과정에서 다음 요소까지 함께 만들어 준다고 설명합니다.

- 프로그램 기능을 호출하는 명령어
- 명령어 동작을 검증하는 테스트
- AI 에이전트가 사용할 수 있는 사용 설명서

즉, GUI를 마우스로 조작하는 대신 Claude Code나 Codex 같은 AI 코딩 에이전트가 **명령어 한 줄로 실제 프로그램 기능을 실행**할 수 있게 만드는 구조입니다.

## 실제 프로그램을 그대로 실행한다

핵심은 단순히 프로그램 동작을 흉내 내는 것이 아니라, 뒤에서 실제 애플리케이션을 실행한다는 점입니다.

영상에서는 다음과 같은 사례를 소개합니다.

- LibreOffice를 이용해 실제 PDF 생성
- Blender를 실행해 실제 렌더링 수행
- 게임을 CLI 명령으로 조작
- GIMP, OBS, Zoom, Obsidian 등 데스크톱 프로그램 제어

이 구조를 활용하면 기존 GUI 프로그램도 AI 에이전트의 자동화 도구처럼 사용할 수 있습니다.

## CLI-Hub와 함께 쓰는 방식

이미 여러 프로그램용 CLI가 만들어져 있으며, 영상에서는 **CLI-Hub**를 통해 100개 이상의 도구를 찾아 사용할 수 있다고 설명합니다.

Claude Code나 Codex에 CLI-Hub 관련 스킬을 설치한 뒤 원하는 작업을 설명하면, AI가 적절한 CLI 도구를 찾아 실행하는 방식입니다.

예를 들어 다음과 같은 흐름을 생각할 수 있습니다.

1. AI에게 Blender 렌더링 작업을 요청
2. AI가 CLI-Hub에서 Blender용 도구 확인
3. 필요한 명령어 생성
4. 실제 Blender 실행 및 렌더링
5. 결과 파일 확인

## 왜 중요한가?

AI 에이전트가 실제 업무를 수행하려면 결국 외부 프로그램을 제어해야 합니다.

기존에는 각각의 프로그램마다 API, MCP, 플러그인 등을 별도로 만들어야 했지만, CLI-Anything 같은 접근 방식은 **기존 프로그램을 CLI 인터페이스로 표준화**해 AI가 쉽게 다룰 수 있도록 합니다.

특히 다음과 같은 환경에서 활용 가능성이 큽니다.

- Claude Code·Codex 기반 업무 자동화
- Blender·GIMP 같은 크리에이티브 프로그램 자동화
- OBS 기반 영상·방송 작업 자동화
- 문서 변환·PDF 생성
- 여러 데스크톱 프로그램을 연결한 에이전트 워크플로우

## 핵심 정리

CLI-Anything은 새로운 AI 모델이라기보다, **기존 소프트웨어를 AI 에이전트가 조작할 수 있는 도구로 바꿔주는 연결 계층**에 가깝습니다.

GUI 중심 프로그램까지 CLI로 바꿔 AI가 직접 제어할 수 있게 되면, AI 에이전트가 실제 컴퓨터 프로그램을 사용하는 범위도 크게 넓어질 수 있습니다.]]></description>
<dc:creator>최고관리자</dc:creator>
<dc:date>2026-10-17T15:30:01+09:00</dc:date>
</item>


<item>
<title>GitHub에서 바로 쓰는 무료 AI 오픈소스 5가지 — Ollama·OpenClaw·Playwright MCP·ComfyUI·MarkItDown</title>
<link>https://ai.23yellow.com/ai_skill_dev/github%EC%97%90%EC%84%9C-%EB%B0%94%EB%A1%9C-%EC%93%B0%EB%8A%94-%EB%AC%B4%EB%A3%8C-ai-%EC%98%A4%ED%94%88%EC%86%8C%EC%8A%A4-5%EA%B0%80%EC%A7%80/</link>
<description><![CDATA[
작심만일 채널의 쇼츠 **「전 세계적으로 인기있는 Github 깃허브 클로드 AI 무료 레포 5가지」**에서는 개발·자동화·로컬 AI 작업에 바로 활용할 수 있는 오픈소스 도구 5가지를 소개합니다.

## 1. Ollama

Ollama는 LLM을 내 컴퓨터에서 직접 실행할 수 있게 해주는 로컬 AI 도구입니다.

클라우드 API를 매번 호출하지 않고 로컬에서 모델을 돌릴 수 있어, 반복 테스트나 사내·개인 데이터처럼 외부 전송을 줄이고 싶은 작업에 유용합니다.

## 2. OpenClaw

OpenClaw는 메신저나 명령을 통해 컴퓨터 작업을 대신 수행하는 에이전트형 도구입니다.

예를 들어 다음과 같은 작업을 자동화하는 흐름을 만들 수 있습니다.

- 바탕화면이나 폴더에서 파일 찾기
- 문서 요약
- 반복 업무 실행
- 정해진 작업 순서 수행

단순 대화형 AI보다 실제 컴퓨터 작업으로 이어지는 점이 핵심입니다.

## 3. Playwright MCP

Playwright MCP는 Claude Code 같은 AI 코딩 에이전트가 브라우저를 직접 조작하도록 연결하는 도구입니다.

활용 예시는 다음과 같습니다.

- 웹페이지 열기
- 경쟁사 가격표 수집
- 웹 UI 테스트
- 폼 입력
- 반복적인 브라우저 작업 자동화

브라우저 자동화가 필요한 개발·리서치 작업에서 특히 유용합니다.

## 4. ComfyUI

ComfyUI는 이미지와 영상을 로컬 GPU에서 생성할 수 있도록 워크플로우를 시각적으로 구성하는 도구입니다.

클라우드 생성 서비스처럼 결과물마다 비용이 발생하는 구조가 아니라, 본인 PC의 GPU를 활용해 반복 생성할 수 있다는 점이 장점입니다.

상품 이미지 배경 교체, 이미지 변형, 영상 생성 같은 작업을 대량으로 반복할 때 활용할 수 있습니다.

## 5. MarkItDown

MarkItDown은 Microsoft가 공개한 문서 변환 도구로, 다양한 파일을 AI가 읽기 쉬운 Markdown 텍스트로 바꾸는 데 사용합니다.

예를 들어 다음 파일을 AI 입력용 텍스트로 변환하는 데 활용할 수 있습니다.

- PDF
- Excel
- PowerPoint
- Word 등 문서 파일

복잡한 원본 파일을 그대로 AI에 넣는 것보다 먼저 Markdown으로 변환하면 구조를 더 안정적으로 읽게 만들 수 있습니다.

## 5개 도구를 용도별로 정리하면

- **Ollama** → 로컬 LLM 실행
- **OpenClaw** → 컴퓨터 작업 자동화
- **Playwright MCP** → 브라우저 자동화
- **ComfyUI** → 로컬 이미지·영상 생성
- **MarkItDown** → 문서를 AI용 텍스트로 변환

이 도구들의 공통점은 AI를 단순히 질문에 답하는 서비스로 사용하는 것이 아니라, **로컬 실행·브라우저 조작·파일 처리·콘텐츠 생성까지 실제 작업 흐름에 연결한다는 점**입니다.]]></description>
<dc:creator>최고관리자</dc:creator>
<dc:date>2026-10-16T23:44:02+09:00</dc:date>
</item>


<item>
<title>Cloudflare·Tencent 무료 AI 도구 3가지 — 보안 점검·브라우저 자동화·사내 문서 RAG</title>
<link>https://ai.23yellow.com/ai_skill_dev/cloudflaretencent-%EB%AC%B4%EB%A3%8C-ai-%EB%8F%84%EA%B5%AC-3%EA%B0%80%EC%A7%80-%EB%B3%B4%EC%95%88-%EC%A0%90%EA%B2%80%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80/</link>
<description><![CDATA[
짐코딩의 쇼츠 **「대기업이 풀어버린 무료 AI 도구 3가지｜클로드 코드 보안·자동화·사내문서」**에서는 Cloudflare와 Tencent가 공개한 오픈소스 AI 도구 3가지를 소개합니다.

이번 영상의 핵심은 Claude Code 같은 AI 코딩 에이전트를 단순 코드 생성 도구가 아니라 **보안 점검, 브라우저 자동화, 사내 지식 검색**까지 확장하는 방법입니다.

## 1. Cloudflare security-audit-skill

Cloudflare의 **security-audit-skill**은 AI 에이전트를 코드 보안 점검 도구처럼 활용하게 해주는 스킬입니다.

영상에서는 다음과 같은 흐름으로 동작한다고 설명합니다.

- 회원가입, 파일 업로드, API 입력 등 외부 입력 지점 파악
- 신뢰 경계와 공격 가능 지점 정리
- 여러 AI 에이전트가 취약점 후보 탐색
- 다른 에이전트가 실제 취약점인지 재검증
- 오탐을 걸러낸 뒤 결과 정리
- 최종 보안 보고서 생성

즉, 단순히 코드에서 수상한 부분을 찾는 것이 아니라 **탐색 → 검증 → 보고서** 흐름으로 보안 점검을 구조화하는 방식입니다.

## 2. Tencent BrowserSkill

**BrowserSkill**은 AI 에이전트가 사용자의 Chrome이나 Edge 브라우저에서 직접 작업할 수 있도록 연결하는 도구입니다.

예를 들어 로그인된 관리자 페이지에서 문제가 발생했을 때 AI가 직접 페이지를 열고 다음 내용을 확인할 수 있습니다.

- 네트워크 요청과 응답
- 브라우저 콘솔 오류
- 페이지 동작
- 특정 UI의 문제 상황

작업은 별도의 Agent Window에서 진행되며, 휴대폰 인증이나 추가 로그인처럼 사람이 직접 해야 하는 단계에서는 사용자에게 제어권을 넘기는 방식입니다.

&gt; 주의할 점은 Agent Window가 완전히 격리된 샌드박스가 아니라는 것입니다. **선택한 브라우저 프로필의 로그인 상태와 권한을 그대로 사용할 수 있으므로 신뢰할 수 있는 작업에만 연결해야 합니다.**

## 3. Tencent WeKnora

**WeKnora**는 회사 내부 문서를 기반으로 답하는 오픈소스 지식 플랫폼입니다.

주요 기능은 다음과 같습니다.

- RAG 기반 문서 검색
- 답변 근거 문서 표시
- Notion·GitLab 등 데이터 소스 연동
- Slack 같은 메신저에서 질문
- 에이전트 기능
- 위키 형태의 지식 관리
- MCP 서버 연동

예를 들어 신입 직원이 Slack에서 “휴가 신청은 어떻게 하나요?”라고 질문하면, 사내 규정 문서를 검색해 답변하고 근거 문서까지 함께 보여주는 형태로 활용할 수 있습니다.

## 세 도구를 역할별로 정리하면

- **security-audit-skill** → 코드 보안 점검 자동화
- **BrowserSkill** → 로그인된 브라우저 업무 자동화와 웹 디버깅
- **WeKnora** → 사내 문서 기반 RAG·지식 검색

서로 분야는 다르지만 공통점은 AI 에이전트가 실제 업무 환경과 연결되어 **코드·브라우저·사내 데이터까지 직접 활용하게 만든다**는 점입니다.

## 활용할 때 주의할 점

이런 도구는 생산성을 크게 높일 수 있지만 권한 관리가 중요합니다.

특히 BrowserSkill처럼 로그인된 브라우저를 사용하는 도구는 AI가 접근할 수 있는 범위가 넓기 때문에, 다음 원칙이 중요합니다.

- 최소 권한 계정 사용
- 중요 서비스는 별도 프로필 사용
- 결제·삭제·배포 등 위험 작업은 수동 승인
- 사내 문서는 외부 공개 여부 확인
- 내부 서비스는 가능하면 사설망에서 운영

AI 에이전트가 실제 시스템과 연결될수록 **성능보다 권한·보안·감사 로그 설계가 더 중요해진다**는 점을 보여주는 사례입니다.]]></description>
<dc:creator>최고관리자</dc:creator>
<dc:date>2026-10-15T14:37:38+09:00</dc:date>
</item>


<item>
<title>REA 실전 테스트 — 실행 파일만으로 소스 코드 재구성하는 AI 리버스 엔지니어링</title>
<link>https://ai.23yellow.com/ai_skill_dev/rea-%EC%8B%A4%EC%A0%84-%ED%85%8C%EC%8A%A4%ED%8A%B8-%EC%8B%A4%ED%96%89-%ED%8C%8C%EC%9D%BC%EB%A7%8C%EC%9C%BC%EB%A1%9C-%EC%86%8C%EC%8A%A4-%EC%BD%94%EB%93%9C/</link>
<description><![CDATA[
잔재미코딩의 쇼츠 **「실행 파일만 주면 AI가 소스 코드를 만들어준다 | REA」**에서는 무료 오픈소스 도구 **REA(Reverse Engineer Anything)** 를 Claude Code나 Codex에 연결해, 소스 코드가 없는 실행 파일을 분석하고 원래 동작을 재구성하는 과정을 실제 테스트와 함께 소개합니다.

&gt; 리버스 엔지니어링은 소프트웨어 라이선스, 저작권, 이용약관과 직접 관련될 수 있습니다. **본인이 소유한 프로그램, 오픈소스, 또는 분석 권한이 명확히 있는 대상에만 사용하는 것이 중요합니다.**

## REA는 무엇을 하는 도구인가?

REA는 실행 파일을 분석해 내부 동작을 추적하고, Claude Code나 Codex 같은 AI 코딩 도구가 이를 바탕으로 원래 기능에 가까운 소스 코드를 다시 작성하도록 돕는 오픈소스 도구입니다.

영상에서는 REA 단독으로 모든 일을 처리한다기보다, 다음과 같은 분석 도구와 함께 동작하는 구조로 소개합니다.

- REA
- Ghidra
- 디컴파일러
- Node.js
- Java
- Claude Code 또는 Codex

즉, **바이너리 분석 도구 + AI 코딩 에이전트**를 결합하는 방식입니다.

## Claude Code가 설치 과정까지 자동화

영상에서는 사용자가 Claude Code에 단순히 **“REA를 설치해 줘”**라고 요청한 뒤, 필요한 환경과 도구 설치를 AI에게 맡깁니다.

테스트 환경에서는 다음과 같은 구성 요소가 함께 준비됐다고 설명합니다.

- Node.js
- Java
- Ghidra
- macOS용 디컴파일러
- 프로젝트 폴더 연결

영상 설명 기준 설치에는 약 4분 30초가 걸렸다고 합니다.

## 오픈소스 2048 실행 파일로 테스트

테스트 대상은 AI가 기존 코드를 미리 학습했을 가능성을 줄이기 위해 비교적 최근 공개된 오픈소스 2048 게임으로 선정했습니다.

원본 소스 코드는 주지 않고 **실행 파일만 제공한 뒤 C 코드로 다시 만들어 달라고 요청**했습니다.

영상에서 소개한 결과는 다음과 같습니다.

- 약 4분 24초 만에 216줄 C 코드 생성
- 원본 함수 14개 중 13개 기능을 동일한 역할로 재구성
- 함수 이름 차이를 제외하면 약 89% 수준으로 일치
- 동일 입력 조건에서 수백 차례 화면을 비교했을 때 같은 결과 확인

## 작은 프로그램과 대형 상용 프로그램은 다르다

영상에서도 중요한 한계점을 강조합니다.

200줄 정도의 작은 프로그램은 비교적 빠르게 분석할 수 있었지만, 복잡한 게임이나 대형 상용 프로그램은 훨씬 많은 시간과 사람이 필요합니다.

즉,

**실행 파일 → 몇 분 만에 완벽한 원본 소스 복원**

이라고 이해하기보다는,

**실행 파일 분석 → 구조 파악 → AI가 동작을 재구현하도록 보조**

하는 도구에 가깝습니다.

## 리버스 엔지니어링에서 AI가 바꾸는 부분

기존 리버스 엔지니어링은 사람이 디컴파일 결과와 함수 호출 구조를 직접 읽고 의미를 해석하는 작업이 많았습니다.

REA와 Claude Code를 함께 사용하면 다음 과정을 AI가 보조할 수 있습니다.

- 실행 파일 분석
- 함수 역할 추정
- 호출 관계 파악
- 코드 구조 재구성
- 새로운 언어로 재작성
- 동작 비교 및 수정

이 때문에 기존보다 훨씬 빠르게 프로그램의 구조를 이해하고 프로토타입을 만들 수 있습니다.

## 활용하기 좋은 경우

권한이 있는 소프트웨어라면 다음과 같은 상황에서 유용할 수 있습니다.

- 오래된 사내 프로그램 구조 분석
- 소스가 유실된 개인 프로젝트 복구
- 오픈소스 실행 파일 분석 학습
- 레거시 프로그램 현대화
- 기존 기능을 참고한 신규 구현
- 보안 연구 및 취약점 분석

## 저작권과 라이선스는 반드시 확인

리버스 엔지니어링이 기술적으로 가능하다고 해서 모든 소프트웨어를 자유롭게 분석하거나 재판매할 수 있는 것은 아닙니다.

특히 상용 프로그램을 분석해 기능이나 코드를 그대로 복제하고 배포·판매할 경우 저작권, 라이선스, 이용약관 문제가 발생할 수 있습니다.

따라서 REA는 **내가 소유하거나 분석 허가를 받은 프로그램, 오픈소스, 연구·교육 목적의 허용된 대상**에서 사용하는 것이 안전합니다.

## 핵심 정리

REA가 보여주는 흐름은 다음과 같습니다.

**실행 파일 → 디컴파일·분석 → AI 구조 해석 → 소스 코드 재구성 → 동작 검증**

AI 코딩 에이전트가 단순히 새로운 코드를 작성하는 것을 넘어, 기존 소프트웨어를 이해하고 구조를 복원하는 도구로 확장되고 있다는 점에서 주목할 만한 사례입니다.]]></description>
<dc:creator>최고관리자</dc:creator>
<dc:date>2026-10-15T13:56:41+09:00</dc:date>
</item>


<item>
<title>대규모 코드베이스를 한눈에 보는 Graphify — Claude Code용 코드 맵 스킬</title>
<link>https://ai.23yellow.com/ai_skill_dev/%EB%8C%80%EA%B7%9C%EB%AA%A8-%EC%BD%94%EB%93%9C%EB%B2%A0%EC%9D%B4%EC%8A%A4%EB%A5%BC-%ED%95%9C%EB%88%88%EC%97%90-%EB%B3%B4%EB%8A%94-graphify-claude-code%EC%9A%A9/</link>
<description><![CDATA[
MINDUNG 채널의 쇼츠 **「이 코드가 어디에 쓰이는지 지도로 보여 주는 스킬 알려줌」**에서는 대규모 프로젝트의 코드 구조를 그래프로 시각화해 Claude Code가 더 빠르게 이해하도록 돕는 **Graphify**를 소개합니다.

## 코드 전체를 한 장의 지도처럼 보여준다

Graphify는 프로젝트 안의 함수, 클래스, 모듈 같은 코드 조각을 **점(node)** 으로 표현하고, 서로 호출하거나 참조하는 관계를 **선(edge)** 으로 연결해 보여주는 방식입니다.

그래프를 보면 다음과 같은 내용을 한눈에 파악할 수 있습니다.

- 어떤 함수와 클래스가 서로 연결되어 있는지
- 특정 코드가 프로젝트 어디에서 사용되는지
- 어떤 기능들이 서로 강하게 묶여 있는지
- 프로젝트의 핵심 모듈과 중심 코드가 어디인지

## 점 하나를 누르면 관련 코드가 이어서 보인다

특정 노드를 선택하면 해당 코드와 연결된 함수, 클래스, 모듈이 연속해서 표시됩니다.

같은 색으로 표시된 노드들은 서로 연관성이 높은 기능 묶음으로 볼 수 있어, 복잡한 프로젝트에서 **기능 단위 구조를 빠르게 이해하는 데 도움**이 됩니다.

## Claude Code가 파일을 하나씩 뒤지는 대신 구조부터 본다

AI 코딩 도구는 일반적으로 질문을 받으면 관련 파일을 하나씩 찾아 읽습니다.

Graphify를 함께 사용하면 Claude Code가 먼저 전체 코드 맵을 참고한 뒤 필요한 파일과 연결 관계를 따라갈 수 있어, 질문에 대한 탐색 범위를 더 빠르게 좁힐 수 있습니다.

예를 들어 다음과 같은 질문에 유용합니다.

- 이 함수는 프로젝트 어디에서 호출되는가?
- 로그인 기능과 권한 처리 코드는 어떻게 연결되는가?
- 이 모듈을 수정하면 어떤 기능에 영향이 가는가?
- 특정 버그가 어느 경로에서 발생할 가능성이 높은가?

## 대규모 프로젝트에서 특히 유용

영상에서는 100만 줄 규모의 프로젝트를 대상으로 한 테스트에서, Graphify를 함께 사용했을 때 AI가 핵심을 짚는 비율이 개선됐다고 소개합니다.

이 수치는 영상에서 소개한 제작 측 테스트 기준이므로, 실제 효과는 코드베이스 구조와 질문 유형에 따라 달라질 수 있습니다.

## 로컬에서 코드 구조를 읽어 지도 생성

영상에서는 프로젝트 코드를 로컬에서 읽어 그래프를 만든다고 설명합니다.

즉, 단순히 LLM에 전체 코드를 길게 입력하는 방식보다 **구조 정보를 먼저 만들어 AI가 참고하도록 하는 접근**입니다.

이 방식은 대형 저장소에서 불필요한 토큰 사용을 줄이고, AI가 코드 관계를 이해하는 데 도움을 줄 수 있습니다.

## 활용 포인트

Graphify는 특히 다음 상황에서 유용합니다.

- 오래된 레거시 프로젝트 처음 분석할 때
- 대규모 오픈소스 구조를 파악할 때
- 함수·클래스 의존 관계를 추적할 때
- 리팩터링 전 영향 범위를 확인할 때
- Claude Code가 프로젝트 맥락을 더 빠르게 이해하게 할 때

핵심은 단순한 코드 검색이 아니라, **코드 전체의 관계를 그래프로 만들어 AI가 구조부터 이해하도록 하는 것**입니다.]]></description>
<dc:creator>최고관리자</dc:creator>
<dc:date>2026-10-13T16:38:07+09:00</dc:date>
</item>


<item>
<title>Claude Code·Codex에 붙이는 리버스 엔지니어링 스킬 — 기능 구조를 분석해 구현 아이디어로 활용</title>
<link>https://ai.23yellow.com/ai_skill_dev/claude-codecodex%EC%97%90-%EB%B6%99%EC%9D%B4%EB%8A%94-%EB%A6%AC%EB%B2%84%EC%8A%A4-%EC%97%94%EC%A7%80%EB%8B%88%EC%96%B4%EB%A7%81-%EC%8A%A4%ED%82%AC-%EA%B8%B0%EB%8A%A5/</link>
<description><![CDATA[
MINDUNG 채널의 쇼츠 **「몇 분 만에 모든 소프트웨어를 복제하는 AI스킬 알려줌 | Reverse engineer anything Skill」**에서는 Claude Code나 Codex에 연결해 소프트웨어 내부 동작을 분석하는 리버스 엔지니어링 도구를 소개합니다.

&gt; 리버스 엔지니어링은 소프트웨어 라이선스와 저작권, 이용약관에 영향을 받을 수 있습니다. **본인이 소유한 앱이나 분석 권한이 있는 소프트웨어, 오픈소스처럼 허용된 대상에서만 사용하는 것이 중요합니다.**

## 어떤 기능을 하는가?

영상에서는 소스 코드가 없어도 앱 파일이나 실행 파일을 분석해 특정 기능이 어떻게 동작하는지 조사할 수 있다고 설명합니다.

예를 들어 다음과 같은 질문을 던질 수 있습니다.

- 특정 버튼을 누르면 어떤 코드가 실행되는가?
- 복사·붙여넣기 기능은 내부에서 어떻게 처리되는가?
- 앱의 특정 효과나 동작은 어떤 로직으로 구현되어 있는가?
- 오래된 프로그램이나 게임의 특정 기능은 어떤 구조로 만들어졌는가?

핵심은 단순히 화면을 흉내 내는 것이 아니라, **기능이 실제로 어떤 구조와 코드 흐름으로 동작하는지 근거를 찾아내는 것**입니다.

## Notion 기능 분석 사례

영상에서는 공식 사례로 Notion 앱의 블록 복사 기능을 분석한 예를 소개합니다.

앱 내부에서 복사 기능을 처리하는 코드를 찾아낸 뒤, 그 구조를 바탕으로 자신이 만든 메모 앱에 비슷한 기능을 설계하는 식입니다.

즉,

**기존 기능 분석 → 동작 원리 파악 → 구현 아이디어 도출 → 자신의 프로젝트에 재설계**

이라는 흐름으로 활용할 수 있습니다.

## 분석 가능한 대상

영상에서는 다음과 같은 대상을 예로 듭니다.

- 데스크톱 앱
- 웹사이트
- Android 앱
- 오래된 게임

특정 기능의 동작 원리를 분석하거나 레거시 소프트웨어를 이해할 때 활용할 수 있습니다.

## Claude Code·Codex와 연결

이 도구는 Claude Code나 Codex 같은 AI 코딩 도구와 함께 사용할 수 있다고 소개됩니다.

리버스 엔지니어링 도구가 기능 구조나 코드 근거를 찾아주면, AI 코딩 에이전트가 이를 바탕으로 다음 작업을 도와주는 식입니다.

- 비슷한 기능 설계
- 구조 설명
- 구현 아이디어 제안
- 기존 프로젝트에 맞는 형태로 재작성

## 활용할 때 중요한 점

이런 도구는 소프트웨어 기능을 이해하거나 마이그레이션, 호환성 검토, 레거시 시스템 분석 등에 매우 유용할 수 있습니다.

다만 **타인의 상용 소프트웨어를 무단 복제하거나 보호 기능을 우회하는 용도로 사용하는 것은 피해야 합니다.**

안전한 활용 예시는 다음과 같습니다.

- 내가 만든 프로그램 분석
- 회사에서 권한을 받은 내부 시스템 분석
- 오픈소스 프로젝트 구조 이해
- 레거시 코드 마이그레이션
- 호환성·상호운용성 연구
- 보안 점검이 허용된 환경에서의 분석

## 핵심 요약

이 스킬의 핵심은 ‘소프트웨어를 그대로 복제한다’기보다, **기존 기능의 구현 원리를 분석해 자신의 프로젝트 설계에 참고하는 것**입니다.

Claude Code나 Codex 같은 AI 코딩 에이전트와 결합하면, 복잡한 기능을 빠르게 이해하고 재설계하는 데 도움이 될 수 있습니다.]]></description>
<dc:creator>최고관리자</dc:creator>
<dc:date>2026-10-13T16:21:02+09:00</dc:date>
</item>


<item>
<title>Claude Code 처음 쓸 때 추천하는 플러그인 5개</title>
<link>https://ai.23yellow.com/ai_skill_dev/claude-code-%EC%B2%98%EC%9D%8C-%EC%93%B8-%EB%95%8C-%EC%B6%94%EC%B2%9C%ED%95%98%EB%8A%94-%ED%94%8C%EB%9F%AC%EA%B7%B8%EC%9D%B8-5%EA%B0%9C/</link>
<description><![CDATA[
나민수 AI의 쇼츠 **「클로드 코드 처음 쓸 때 깔아야 할 플러그인 5개」**에서는 Claude Code를 처음 사용할 때 생산성을 높이기 위해 함께 쓰기 좋은 플러그인 5가지를 소개합니다.

## 1. claude-mem

이전 작업 내용을 기억하도록 도와주는 플러그인입니다.

프로젝트를 다시 열 때마다 구조와 진행 상황을 처음부터 설명하는 부담을 줄이고, 이전 세션의 맥락을 이어가는 데 도움이 됩니다.

## 2. superpowers

Claude가 요청을 받자마자 바로 코드를 작성하기보다, 먼저 계획을 세우고 필요한 내용을 사용자에게 확인하도록 돕는 도구입니다.

복잡한 작업에서 AI가 성급하게 구현부터 시작하는 것을 줄이고, **계획 → 확인 → 구현** 흐름으로 작업하기 좋습니다.

## 3. Context7

라이브러리나 프레임워크의 최신 문서를 참고하도록 도와주는 도구입니다.

AI가 오래된 API나 예전 버전의 사용법을 기준으로 코드를 작성해 발생하는 오류를 줄이는 데 유용합니다.

## 4. find-skills

원하는 작업을 설명하면 관련된 Skill을 찾아주는 도구입니다.

사용자가 Skill 이름을 정확히 알지 못해도, 목적을 설명하면 적절한 Skill을 찾고 설치하는 흐름을 쉽게 만들 수 있습니다.

## 5. frontend-design

영상에서는 Anthropic의 프론트엔드 디자인 관련 플러그인으로 소개합니다.

AI가 만든 웹사이트가 비슷한 형태로 반복되는 문제를 줄이고, UI와 시각적 완성도를 개선하는 데 활용할 수 있습니다.

## 5개 플러그인의 역할을 정리하면

- **claude-mem** → 작업 기억
- **superpowers** → 계획 중심 작업
- **Context7** → 최신 문서 참조
- **find-skills** → 적절한 Skill 탐색
- **frontend-design** → UI 디자인 품질 개선

Claude Code를 처음 사용할 때 단순히 모델 성능에만 의존하기보다, **기억·계획·최신 문서·Skill·디자인 도구를 함께 구성하면 반복 작업과 시행착오를 줄일 수 있다는 점**이 핵심입니다.]]></description>
<dc:creator>최고관리자</dc:creator>
<dc:date>2026-10-01T13:54:24+09:00</dc:date>
</item>

</channel>
</rss>
