본문 바로가기
2026년 학습 패턴: AI 활용 스킬 따라가기 AI 활용 패턴을 익히려면, 바로 행동하기가 어렵다. 몇개월전에 나온 강의는 이미 옛것이 되어있다. 해외 유튜브 영상은 크게 와닿지 않는다. 국내 유튜브 영상은 대중적이고, 한번 필터된 내용이라 제대로 알았다는 느낌이 들지 않는다.그러다 다음과 같은 패턴을 찾았는데, 잘 맞는 것 같다. 패턴(1) 평일: 자료 수집인터넷에서 AI 관련 아티클이나 자료를 발견하면 Instapaper에 북마크만 해둔다. 읽지도 않는다. 그냥 모아둔다. 출퇴근길에 패스트캠퍼스 AI 강의도 틈틈이 듣는다. 아래 강의를 보면서, LLM을 어떻게 활용하고 질문해야하는지 감을 잡았다! https://fastcampus.co.kr/biz_online_gemini https://fastcampus.co.kr/biz_online_devc..
claudecode + whisper을 활용한 보이스 코딩 (aka. 입개발) IT 스터디에서 화상 미팅을 통해 음성 기반 페어 프로그래밍을 진행해보기로 했다. 관련 자료를 조사해보자.시작하며해외 IT 커뮤니티에서 타이핑이 AI을 활용한 코드 구현에 제약을 준다는 의견들이 많이 보인다. 그러면서 wisprflow.ai 이 많이 언급되고 있다. 어떤 한 회사는 클로드코드 에이전트를 25개 띄워놓고, wisprflow.ai 으로 제어한다는 사례도 보였다. https://x.com/sxmawl/status/2012028001861685578?s=20 시연 claudecode와 whisper을 사용하여, 프로젝트 설명과 기능 변경을 요청해봤다. 진짜 코드도 잘 구현했다! 기타 설치 및 실행 # 1. UV 패키지 매니저 설치curl -LsSf https://astral.sh/uv/inst..
Claude 똑똑하게 사용하기 프롬프트트러블슈팅에 유용한 되묻기 기술 AskUserQuestion Tool을 사용하라 일하다 갈피를 잡기 어려울 때 유용하다. 참고: stdy.blog/claude-code-ask-user-question 스킬 찾기 필요한 역량에서 필요한 스킬을 물어보고, 설치해서 사용하기 1. find-skills 설치 2. 페르소나에 맞는 스킬 물어보기예시 프롬프트: "스태프엔지니어에게 유용한 skill을 5개 추천해줘" MCP MCP 호출 프롬프트use sequential thinking use context7MCP 클로드 설정{ "mcpServers": { "context7": { "command": "npx", "args": ["-y", "@upstash/context7-mcp@lat..
프로메테우스로 이상 트래픽 감지하기 - 이동평균선, Z-Score, 표준편차 서비스를 운영하다 보면 API 트래픽이 갑자기 튀거나 급감하는 상황을 종종 만나게 된다.하지만 단순히 “현재 트래픽이 어느 기준보다 크다/작다”로만 알림을 울리면, 서비스는 노이즈성 알럿에 시달리게 되고 운영자는 금세 피로에 빠진다.이 문제를 해결하기 위한 대표적인 방법이 바로 이동평균선(Moving Average)과 표준편차 기반 (Z-Score 방식) 을 활용한 알럿 설정이다. 1. 트래픽은 “요동치는 값”API 요청 수, 초당 호출 수(rate), 에러율 등은 초 단위로 흐름이 급격히 변한다.예를 들어 어떤 순간에는 갑자기 요청이 쏟아지고, 어떤 때는 잠깐 줄어든다.이런 “순간값”에 바로 알럿을 걸면 아래 문제가 생긴다.순간 피크 → 불필요한 알럿 폭탄순간 감소 → 실제 장애가 아닌데 알럿 발생일..
Server Driven UI: SDUI 1. SDUI의 등장 배경과 정의왜 SDUI인가?기존의 앱 개발 방식은 UI 로직이 클라이언트(App)에 종속되어 있다.기능을 수정하려면 [코드 수정 -> 빌드 -> 스토어 심사 -> 유저 업데이트]라는 긴 과정을 거쳐야 한다.하지만 비즈니스는 실시간으로 변한다."갑작스러운 이벤트 배너를 상단에 배치해야 한다면?""A/B 테스트를 위해 특정 유저에게만 다른 레이아웃을 보여주고 싶다면?"이런 요구사항에 즉각 대응하기 위해 등장한 것이 바로 Server-Driven UI이다.정의SDUI는 이름 그대로 서버가 UI의 구조와 데이터를 결정하고, 클라이언트는 이를 해석하여 화면에 그리는(Rendering) 방식을 의미한다. 서버는 "어떤 데이터를 보여줄지"뿐만 아니라 "어떤 컴포넌트를 어떤 순서로 배치할지"에 대..
아고다 사례로 살펴본 예약 엔진: Dynamic Graph, Risk Profiler 아고다에서는 Multi-Product Booking Engine (MPBE)이라고 부르는 예약 엔진을 운영하고 있다. 포스팅에 언급된 Dynamic Graph, Risk Profiler 기능을 정리하고자 한다.Multi-Product Booking Engine아고다는 여행 상품 종류가 점점 다양해지면서, 이를 똑같은 방식으로 처리하는 기존 예약 엔진으로는 한계가 있었다고 한다. 그래서 속도나 안정성을 포기하지 않으면서도, 복잡한 흐름을 유연하게 제어할 수 있는 구조가 필요했다고 한다. 이에 아고다는 비동기 에이전트가 동작하는 그래프 기반 아키텍처를 도입했다고 소개한다.예약 과정에서 발생하는 재고 확인, 사기 탐지, 결제 승인 같은 절차를 작은 단계로 분리하고, 각 상품의 특성에 따라 다른 방식으로 조합할..
웹 위젯과 Shadow DOM 이해하기 웹 위젯은 독립적인 UI 컴포넌트로, 외부 사이트에 쉽게 삽입할 수 있는 형태를 말한다. 마치 YouTube 영상을 embed하듯이, 간단한 태그 하나로 복잡한 기능을 추가할 수 있다. 요런 태그로 컴포넌트를 쉽게 삽입할 수 있다. 코드 살펴보기 1. 커스텀 엘리먼트 정의class AmericanopeopleWidget extends HTMLElement { constructor() { super(); this.attachShadow({ mode: 'open' }); // Shadow DOM 생성 }}Shadow DOM은 DOM 트리 안에 숨겨진 또 다른 DOM 트리를 만드는 기술이다. 웹 위젯에서는 다음과 같은 문제를 해결하기 위해 Shadow DOM을 사용한다. 스타일 격..
백엔드 개발자의 MCP (Model Context Protocol) 조금 아는 척 하기 본 글은 mcp architecture을 읽고, 학습한 내용을 정리한 문서입니다. 👩🏻‍🏫MCP이란?AI 애플리케이션에 외부 시스템을 연결하기 위한 오픈소스 표준이다. MCP를 사용하면, AI 애플리케이션 (Claude Desktop 등)에서 데이터소스 (로컬 파일, 데이터베이스 등), 도구 (브라우저 등) 등에 접근하여 작업을 실행할 수 있다.MCP 구성요소MCP은 Client-Server 아키텍처를 따른다. MCP 아키텍처는 크게 MCP Host, MCP Client, MCP Server으로 구성된다. 각 요소의 역할은 다음과 같다.Layer MCP 아키텍처는 크게 2가지 계층으로 나뉜다. Data Layer, Transport Layer이다. Data layerData Layer은 JSON-R..

티스토리툴바