메로그

Sub-agents로 만드는 프론트엔드 개발 자동화 분석 → 설계 → 구현 → 리뷰, 4개의 전문 에이전트로 개발 파이프라인을 자동화하는 방법 Claude Code의 Sub-agents 기능을 프론트엔드 개발에 적용해보고 있고, 여러 방법을 이용해보고 있다.분석, 설계, 구현, 리뷰 에이전트 4개를 만들어서 사용하고 있고 반복 작업이 눈에 띄게 줄었고, 각 단계의 품질도 일관성 있게 올라갔다. 이 글은 그 과정을 정리한 실용 가이드다. 너무 많으면, 설계 + 구현을 묶어서 진행해도 된다. 하나의 컨택스트에서 공유하기 때문에 오히려 더 좋은 효과를 보여줄 때도 있다. 만약, 굳이 sub-agents 를 쓰지 않아도 되는 상황이면, rules, skills 만으로 해결하는 것을 추천한다.목차Sub-age..

웹 개발을 하다 보면 내 컴퓨터에선 멀쩡한데, 특정 사용자의 컴퓨터에서만 이미지가 아예 렌더링되지 않는 현상을 마주하곤 합니다.실제 경험 중 React + WebView2(EXE) 환경에서 발생한 이미지 증발 사건이 있는데 이를 통해, GPU 합성(Compositing)과 레이아웃 타이밍 문제를 파헤쳐 봅니다.해당 문제는 React 환경에서 발생하는 것이 아닌, css 페인팅 및 합성 과정에서 발생하는 문제입니다.용어 정리우선 문제를 정의 전에 알아두고 가면 좋을 용어들을 정리합니다. 아래 용어를 달달 외울필요는 없지만, 아 이런게 있구나 정도만 알면 될 듯 합니다.1. Stacking Context (쌓임 맥락)정의: HTML 요소들이 사용자 눈에 보이는 '앞-뒤 순서(Z축)'를 결정하는 가상의 그룹입..

이번에는 비개발자, 특히 사무직들을 위한 에이전트로, 클로드 코드가 터미널 기반의 개발 에이전트였다면, 코워크는 데스크탑 에이전트라고 보시면 됩니다.언제 출시되었는가?2026년 1월에 mac 버전이 나왔고, 윈도우 데스크탑 앱이 2026년 2월 10일에 정식 출시가 되었습니다.무엇을 할 수 있는가?기존의 챗봇에서 벗어나 사용자가 허용한 폴더에서 직무를 수행합니다.로컬 파일 접근: 내 폴더의 파일을 읽고 만들거나 수정합니다.클로드 코드처럼 터미널을 쓸 필요없이 앱 UI 에서 버튼 클릭, 자연어로 동작합니다.주요 활용 사례로는 아래와 같습니다.파일 정리: 특정 폴더에 있는 파일들을 파일 형식과 날짜별로 정리해줘.데이터 분석 및 문서화: 영수증을 보고 엑셀로 정리해줘.보고서 작성: 회의록 3개를 요약해서 월간..

최근 AI 코딩에서 가장 뜨거운 Claude Code 를 사용하다보면, 복잡한 작업을 더 체계적으로 처리하고 싶은 경우가 있습니다.이 때 이제 랄프 루프(RALF Loop) 프로레스를 이용하시면 됩니다.Claude Code 는 CLI 기반으로 사용자가 루프를 유도하는 방식입니다. 옆집에 커서는 Agent/Plan 모드를 사용해서 이러한 루프를 보다 쉽게 지원하고 있습니다.그럼 이제 랄프 루프가 무엇인가?단순히 코드를 한 번 짜고 끝이 아니라, 계획 -> 실행 -> 피드백 -> 수정 의 순환 구조를 갖게 함으로써 AI Tool(Claude) 가 작업이 완성될 때까지 계속 일하게 만드는 프로세스입니다. AS-IS 예시나: 조회 기능 만들어줘클로드: 코드 작성 후, 완료되었습니다.나: 실행 -> 에러 발생, ..

AI 코딩 도구 중에서도 Cursor 를 쓰는 사람이 엄청 많을 것 입니다.이제 커서를 그냥 쓰는 것과 잘 쓰는 것은 차이가 분명합니다.우리는 AI 로 만들어진 코드 품질이 떨어진다고 생각하여 꼭 인간이 개입해야 한다고 생각합니다.하지만 어떤 프롬프트로 개인화를 했냐에 따라서 그 퀄리티는 차기아 많이 납니다. 그 차이를 만드는 핵심은 프롬프트가 아니라 👉 Rules와 Skills 설정입니다.이 글에서는 Cursor를 처음 쓰거나, 이미 쓰고 있지만 매번 수정 지시를 반복하고 있다면 꼭 알아야 할 핵심만 정리해봅니다.Cursor를 쓰면서 이런 경험 없나요?매번 “함수형 컴포넌트로”, “TypeScript로”, “Tailwind 써줘” 반복프로젝트마다 코드 스타일이 미묘하게 달라짐AI가 우리 아키텍처를 전..

Commands, Skills, Plugins로 AI 개발 워크플로우 자동화하기.claude 폴더 구조프로젝트 루트나 홈 디렉토리(~/.claude)에 다음과 같은 구조로 폴더를 만듭니다..claude/├── commands/ # 슬래시 커맨드├── skills/ # AI 스킬Commands - 슬래시 커맨드사용자가 직접 호출하는 커스텀 명령어파일 위치.claude/commands/커맨드명.md커밋 메시지 생성기파일: .claude/commands/commit.md---description: Git 커밋 메시지 자동 생성---현재 스테이징된 변경사항을 분석하여 명확한 커밋 메시지를 생성하세요.형식:- [타입] 제목 (50자 이내)- 상세 설명 (필요시)타입 예시: fe..