개발하는 Shopify CEO tobi가 만든 로컬 기반 문서 검색 도구 qmd
- BM25 기반 키워드(텍스트) 검색
- 벡터 기반 의미 검색
- LLM 기반 질의 확장 및 재정렬
정확도+속도+의미 이해를 모두 어느 정도 만족시키는 하이브리드 검색을 구현. AI로 뭔가 만들고 싶은 좋은 사례
https://t.co/eucVlCFrmk
그러나 면접가면 종종 진짜 개발자한테
좋은 인상을 주진 않는 것 같음
깊게 파고드는 것도 없고 스택도 중구난방에 트어느한쪽도 제대로 한게없는 야매풀스택이고
나도 깊이없는거 알아서 내가 주도하고 개발해서 서비스 매출을 향상시켯다로 어필해보지만 작은 규모 아니면 쓸모없긴함ㅋ
개발자가 은근 불안감 MAX인 직종인 이유
1. 계속 직업으로 삼으려면 최신 개발 스택을 주기적으로 따라가긴 해야하는데
2. 명확한 목적 없이 단순히 요즘 뜬다더라 또는 요즘 돈 많이 준다더라 라는 이유 하나만 가지고 무지성으로 최신 개발 스택을 따라가다간 업계 혐오 대상 1순위 당첨됨. 향후 커리어까지 심하게 불리해짐.
3. 최신 정보가 쏟아지는 와중에도 현재 내가 처한 입장에서 명확한 목적을 가질 수 있는 것만 골라 선별해서, 기존에 하던 것과 합쳐 특정 사용 사례나 분야에 특화까지 시킨 스택을 쌓아야 함.
4. 본인이 생각하기에 최신 스택을 그 누구보다 빨리 학습했다쳐도, 단순 학습을 넘어서 아예 특화 사례까지 만들어 임팩트있는 쐐기를 박지 못하면 그냥 능력이 없는걸로 평가절하 심하게 받음.
5. 앞서 설명한 모든 내용을 만족할때까지 울면서 코딩해야 됨.
AI 에이전트 생태계의 npm이 왔다는 느낌적인 느낌..
Vercel이 공개한 'skills'는 AI 에이전트에게 특정 능력을 설치할 수 있게 해주는 패키지 매니저예요.
> npx skills i vercel-labs/agent-skills
이 명령어 한 줄이면, 이제 내 에이전트에게 검증된 지식과 능력을 주입할 수 있게 되는거!!
이게 왜 유용한지 얘기하려면 얼마 전에 저도 정리했던 'React Best Practices' 이거.. 10년치 노하우가 담긴 그 귀한 문서 이거랑 같이 생각해야 합니다.
이전까진 그 내용을 우리가 직접 읽고 학습해서 코드를 짜야 했거나, 프롬프트에 매번 길게 붙여넣어야 했죠.
하지만 이제는 그 노하우를 'Skill' 형태로 에이전트에게 직접 설치할 수 있습니다.
↓
이 툴킷을 사용하면 Cursor나 Claude Code 같은 AI 도구가 코드를 작성할 때, Vercel이 정의한 최적의 표준, Best Practices!!! 이걸 자동으로 참고하게 됩니다.
마치 10년 차 시니어 엔지니어가 내 옆에서 이건 이렇게 짜는 게 성능에 더 좋아~~라고 코칭해 주는 것과 같은 효과를 누릴 수 있는 거죠.
단순 텍스트 생성을 넘어서게 됩니다. '검증된 지식'을 기반으로 행동하는 에이전트가 되는 것이죵.
Agent-agnostic한 생태계..
특정 플랫폼에 종속되지 않고, 다양한 에이전트가 공통적으로 사용할 수 있는 기술 생태계를 지향합니다.
npm이 자바스크립트 생태계를 폭발시킨 것처럼, skills가 AI 에이전트의 활용성을 어디까지 확장시킬지.. 많이 기대됩니다.
🚀 Claude Code 워크플로우 최적화 가이드
아티클을 쓰신 분이 작년에 해커톤에서 우승한 경험을 바탕으로 Claude Code 대한 여러 설명, 설정, 팁을 공유해주셨네요.
📦 이 모든게 포함된 GitHub 저장소
https://t.co/HZnf0Yb3IG
저자가 10개월간 매일 사용한 완전한 설정을 공유하고, 여기에는 Skills, Hook, Subagent, MCP, Plugin, 실용적인 조언.. 이런 다양한 내용이 포함됩니다.
효율적인 워크플로우를 위해 참고해보세요. 정말 훌륭합니다! 저도 몇개만 뽑아봐요.
역시나 먼저 Skills, Commands 📝
이분은 코딩 표준, 백엔드/프론트엔드 패턴, 프로젝트 가이드라인, TDD, 보안 검토 같은 스킬들을 정의하고 있네요.
그리고 커맨드를 활용하고 있다는겁니다. 이건 워크플로우의 빠른 실행을 위한 슬래시 커맨드이구요 단축 프롬프트 역할을 한다고 생각하면 됩니다.
- /tdd: 테스트 주도 개발 시작
- /plan: 기능 구현 계획 처리
- /e2e: 엔드투엔드 테스트 생성
- /code-review: 품질 및 유지보수성 검토 수행
- /build-fix: 빌드 오류 해결
- /refactor-clean: 데드 코드 제거
- /test-coverage: 테스트 커버리지 분석
- /update-codemaps: 코드 문서 새로고침
- /update-docs: 문서 동기화
↓
에이전트를 구성한거~ 서브에이전트는 오케스트레이터가 제한된 범위로 작업을 위임할 수 있는 프로세스예요. 메인 컨텍스트 부하를 줄여줍니다.
- Planner: 기능 구현 계획
- Architect: 시스템 설계 결정
- TDD-Guide: 테스트 주도 개발
- Code-Reviewer: 품질 및 보안 검토
- Security-Reviewer: 취약점 분석
- Build-Error-Resolver: 빌드 문제 수정
- E2E-Runner: Playwright E2E 테스트
- Refactor-Cleaner: 데드 코드 정리
- Doc-Updater: 문서 동기화
저도 그렇고 요즘 많이 서브에이전트 구성해서 쓰죠.
여기서 팁은 규칙을 통해 에이전트에 위임시키고, 비용 최적화를 위해 에이전트별로 다른 모델 사용해야 하는거죠.
(간단한 작업 Haiku/Sonnet, 복잡한 작업 Opus 4.5)
서브에이전트는 스킬과 잘 작동합니다. 스킬의 하위 집합을 실행할 수 있는 서브에이전트는 작업을 위임받아 해당 스킬을 자율적으로 사용할 수 있죠. 특정 도구 권한으로 샌드박스화할 수도 있습니다.
↓
Hooks.. 도구 사용과 같은 이벤트에서 발생하는 트리거 기반 자동화할 수 있어요.
스킬과 다르게 도구 호출, 라이프사이클 이벤트로 제한됩니다.
훅 타입도 참고해보세요.
1. PreToolUse - 도구 실행 전(검증, 리마인더)
2. PostToolUse - 도구 완료 후(포매팅, 피드백 루프)
3. UserPromptSubmit - 메시지 전송 시
4. Stop - Claude 응답 완료 시
5. PreCompact - 컨텍스트 압축 전
6. Notification - 권한 요청
이런걸로 자동으로 포맷팅하거나, 장시간 실행 커맨드 전 tmux 리마인더 같은걸 구성할 수도 있죠.
↓
이 외에도 여러 팁과 트릭들이 있으니 한번 아티클과 GitHub repo. 살펴보면 큰 도움 되실거예요!
마지막으로 이 얘기로..
1. 과도하게 복잡하게 만들지 마세요 - 설정을 아키텍처가 아닌 미세 조정처럼
2. 컨텍스트 윈도우는 소중합니다 - 미사용 MCP와 플러그인 비활성화
3. 병렬 실행을 고려해보세요 - 대화 분기, git 워크트리 사용
4. 반복적인 것을 자동화하세요 - 포매팅, 린팅, 리마인더를 위한 훅
5. 서브에이전트 범위를 지정하세요 - 제한된 도구 = 집중된 실행
참고로 이러한 접근은 Claude Code 에만 국한되지 않아요! 😉
김창준 님이 유튜브에 공개하신 프로그래밍 학습법을 세컨비에게 텍스트로 정리해달라고 해봤어요.
https://t.co/YhAnmPqW9K
효과적인 독서 기법으로 알려진 **SQ3R(Survey, Question, Read, Recite, Review)**은 소스 코드 분석에도 그대로 적용될 수 있습니다.
Vercel, 지난 10년 동안 React / Next.js 최적화하며 쌓은 노하우를 집대성하고 공개한..
> React Best Practices 프로젝트
📑 Introducing: React Best Practices
https://t.co/jVNmiFYwAe
📦 GitHub - React Best Practices
https://t.co/CJsZBe5qgk
이건 단순한 가이드라인을 넘어 Cursor, Claude Code 같은 AI 에이전트가 코드를 분석할 때 바로 참고할 수 있도록 설계된 일종의.. 최적화된 사전이라고 생각하시면 됩니다.
기존의 성능 최적화는 보통 문제가 터진 후에 대응하는 방식이었습니다.
하지만 Vercel은 이를 체계화하여 Impact,, 우선순위에 따라 40개 이상의 규칙을 정리했습니다. 사람이 읽기 좋을 뿐만 아니라, LLM이 이해하기 쉬운 구조로 만들어져 있어서 최곱니다.
↓
이 가이드는 성능 최적화를 8개 영역으로 나눕니다.
1. 비동기 폭포수 제거
2. 번들 크기 최적화
3. 서버 사이드 성능
4. 클라이언트 데이터 페칭
5. 리렌더링 최적화
6. 렌더링 성능
7. 고급 패턴
8. JavaScript 성능
↓
이 프로젝트의 진가는 https://t.co/kKf1nYMQkh 파일에 있습니다.
Vercel은 이 규칙들을 'Agent Skills'로 패키징했습니다.
> npx add-skill vercel-labs/agent-skills
이 명령어를 통해 Cursor, Claude Code, OpenCode 같은 AI 도구에 이 규칙들을 이식할 수 있습니다.
‼️서울 취준생이 서울시 뽕 뽑아먹는 법‼️
(💰세금… 회수하자구여!!)
✅ 정장 대여 필요할 때 > 취업날개서비스
✅ 실무 경험 필요할 때 > 서울형 매력일자리/서울시 청년인턴
✅ 빡센 직무 경험 필요할 때 > 청년취업사관학교(새싹)
✅ 멘탈 갈릴 때 > 서울시 마음 건강 사업
✅ 주머니 비었을 때 > 청년수당, 청년도전지원사업
✅ 이력서 사진 필요할 때 > 지자체 별 사진촬영 프로그램
✅ 커피값 없을 때 > 청년 공간 이용하기
✅ 각종 컨설팅/직무교육 필요할 때 > 지역별 청년센터 이용
테크 쪽으로 호주에서 취업하고 싶은 사람들을 위한 2025년 업종별 평균 연봉 확인해보는 사이트:
https://t.co/dUZBLPCJ8j
참고로 시드니는 호주 평균보다 연봉이 7% 정도 높고 멜번은 5% 정도 높음. 블즈번은 2% 정도 낮음.
저 에이전시의 데이터를 기준으로 한 거니 숫자는 참고만 할 것.
저는 주니어 디자이너 때부터 지금까지 아침에 20분 정도 GDWEB 들어가서 사이트들을 분석하는 버릇이 있어요. 주니어 디자이너 시절에 이 버릇 덕분에 보는 눈을 키웠고, 이제는 웹사이트를 1~2분만 봐도 디자인 스타일이 다 파악 되더라고요.
아침에 단 10분이라도 GDWEB, DBCUT, Awwwards, 유아이볼, 비핸스, WWIT 등 다양한 포트폴리오 사이트에 접속하셔서 보고 또 보세요.
왜 이 디자인이 예쁘게 보이는지부터 시작해서 콘텐츠의 구성과 타이포 위계, 인터랙션 등등을 살펴보시면 정말 많은 도움이 됩니다.
저는 실제로 제가 봤던 사이트나 앱 디자인의 레퍼런스를 머릿 속에 저장해두고 클라이언트와 미팅을 할 때나, 기획할 때, 디자인 아이디어가 필요할 때 꺼내서 내 것으로 재해석 했어요. 보고, 뜯고, 실제로 경험해보면 도움이 되실거에요.