AI가 디자인하고, AI가 코드로 바꾸고, AI가 구현까지. 실제로 해봤다.Google Stitch가 뭐야?Google Labs에서 만든 AI 기반 UI 디자인 툴이다. 텍스트 프롬프트만 입력하면 실제 HTML/CSS 코드까지 갖춘 UI를 생성해준다. Figma처럼 와이어프레임이나 목업이 아니라 바로 동작하는 코드가 나온다는 게 핵심이다.Gemini 3.0 기반으로 동작하고 현재 베타라 무료로 쓸 수 있다.접속: stitch.withgoogle.comFlash 모드: 빠른 생성, 월 400크레딧Pro 모드: 고품질, 월 50크레딧 (이미지 업로드 지원)MCP가 뭐야?Model Context Protocol의 약자다.AI 에이전트가 외부 도구(Figma, Stitch, Notion 등)와 직접 통신할 수 ..

전체 글
들어가며이전 편에서 스킬(Skill)을 사용해 Claude에게 팀 컨벤션을 가르치는 방법을 다뤘습니다.하지만 스킬에는 치명적인 약점이 있습니다:당신: "UserController 만들어줘"Claude: [spring-api-rules 스킬 적용해서 코드 생성] [코드는 완벽... 그런데 포맷팅이 안 되어 있음]당신: "spotlessApply 실행해줘"Claude: [포맷팅 실행]당신: "PostController도 만들어줘"Claude: [또 코드 생성] [또 포맷팅 안 됨... 🤦]스킬은 Claude가 "선택"합니다.깜빡할 수도 있고, "이번엔 안 해도 될 것 같은데?"라고 판단할 수도 있죠.하지만 포맷팅, 린팅, 보안 검사같은 건 선택이 아닙니다.무조건 실행되어야 합니다.이럴..
들어가며Claude Code를 사용하다 보면 이런 경험 있지 않으신가요?당신: "Spring Boot API 컨트롤러 만들어줘"Claude: [필드 주입으로 @Autowired 사용한 코드 생성]당신: "생성자 주입으로 바꿔줘"Claude: [수정]당신: "DTO는 record로 만들어줘"Claude: [수정]당신: "다음 API도 만들어줘"Claude: [또 필드 주입 사용... 🤦]매번 같은 말을 반복하는 것, 지겹지 않나요? 스킬(Skill)은 이 문제를 해결합니다.팀의 코딩 컨벤션, 아키텍처 패턴, 베스트 프랙티스를 한 번 정의해두면Claude가 자동으로 학습하고 적용합니다.스킬(Skill)이란?스킬은 Claude에게 특정 작업을 수행하는 방법을 가르치는 지침서입니다.마치 신입 개발자에게 온보딩..
LangGraph를 활용한 AI Agent 강의를 들으면서 LangGraph를 학습중이다.## 🧩 전체 실습 개요이번 실습에서는 단순히 “문서 검색 + 답변 생성”을 넘어서, **LangGraph를 활용한 상태(State) 기반 RAG 파이프라인**을 직접 구성해보았다.전체 흐름은 다음과 같다.1. 국세청 홈페이지에서 소득세 법령 PDF 다운로드 2. PDF → `.txt`, `.md`로 변환 후 `documents/` 디렉토리에 저장 3. 텍스트 분할(Text Split) 4. 임베딩 생성 후 Chroma Vector DB 저장 5. Retriever 생성 6. LangGraph로 Retrieve → Generate 흐름 구성 7. 질문을 입력하면 상태(state)를 따라 응답 생성 k=..
LangGraph 첫 실습: LangChain에서 그래프로 사고하기 LangChain을 어느 정도 사용해본 상태에서 LangGraph를 처음 접하면 이런 생각이 든다. “이거… 그냥 LangChain으로 하던 걸 다른 방식으로 감싼 거 아닌가?” 첫 강의를 듣고 실제로 코드를 작성해보니, 이 질문은 절반만 맞고 절반은 틀렸다는 걸 알게 됐다.이 글에서는 LangGraph 첫 실습 코드와 함께, LangGraph가 무엇을 다르게 가져가는지를 정리해본다. 강의는 LangGraph를 활용한 AI Agent 개발(feat. MCP) 를 수강하고 있다. 1. LangGraph는 무엇이 다른가? LangChain은 기본적으로 선형 흐름이다.Input → Prompt → LLM → Output물론 체인, 에이전트, ..
최저임금법 특화 고급 Retriever 시스템 구축하기구축된 벡터 스토어를 활용해서 정확하고 똑똑한 고급 Retriever 시스템을 만들어보겠습니다. 단순한 벡터 검색을 넘어서 키워드 검색과 의미 검색을 결합한 EnsembleRetriever를 사용해서 최저임금법 질문에 대해 정확하고 신뢰할 수 있는 답변을 제공하는 완성된 RAG 시스템을 구축합니다. 실제 사용자들이 "최저임금을 위반하면 어떤 처벌을 받나요?"같은 자연스러운 질문을 했을 때, 관련된 법령 조문을 정확히 찾아내고 이해하기 쉬운 답변을 생성할 수 있도록 설정할 거예요. 1. 최저임금법에 최적화된 검색 전략 선택왜 EnsembleRetriever를 사용하는가?법령 문서는 일반적인 문서와 다른 특성을 가지고 있습니다. "제28조", "최저임금법..
최저임금법 특화 벡터 스토어 구축하기이제 분할된 최저임금법 청크들을 벡터로 변환해서 검색 가능한 데이터베이스로 만들어보겠습니다. 단순히 벡터 스토어를 만드는 것이 아니라 최저임금법의 특성을 활용한 메타데이터 필터링과 조문별 정확한 검색이 가능하도록 구축할 거예요. 벡터 스토어는 RAG 시스템의 핵심 구성 요소입니다. 사용자가 "최저임금 위반 시 처벌은 어떻게 되나?"라고 질문하면, 이 질문을 벡터로 변환해서 가장 유사한 법령 내용을 찾아내는 역할을 하죠. Chroma 벡터 데이터베이스를 사용해서 로컬 환경에서도 빠르고 정확한 검색이 가능한 시스템을 만들 어보겠습니다. 1. 임베딩 모델 설정 및 벡터 변환 준비임베딩 모델의 중요성최저임금법 내용을 정확하게 벡터화하기 위해 OpenAI의 임베딩 모델을 설정하..
최저임금법 구조에 최적화된 텍스트 분할 완전 가이드1. 최저임금법 구조에 최적화된 텍스트 분할이제 PDF에서 추출한 최저임금법 문서들을 조문 구조에 최적화된 방식으로 분할해보겠습니다. 일반적인 텍스트 분할과 달리 **최저임금법의 특성(판-장-절-조-항-호)**을 고려해서 지능적 청킹을 수행해서 의미 있는 단위로 문서를 나누는 거예요. 최저임금법은 총 18개 조문으로 구성된 상대적으로 간결한 법령이에요. 제1조 목적처럼 짧은 조문부터 제6조 최저임금의 효력처럼 긴 조문까지 다양한 길이를 가지고 있으므로 유연한 분할 전략이 필요합니다. 청크 크기는 700자로 설정해서 짧은 조문 2-3개 또는 긴 조문의 일부가 들어갈 수 있도록 하고, 오버랩은 80자로 설정해서 조문 간의 법적 연관성을 보존하도록 할 거예요...