전체 글 103

[Frontend] - UI/UX 최적화

서비스한 페이지가 "흔들리고 느리다는" 한 줄 보고에서 시작된 LCP -71% 여정TL;DR사용자 보고 "페이지 이동이 흔들리고 느림"에서 출발 → Chrome DevTools 트레이스로 3가지 핵심 원인(콘텐츠 1초 지연, Hero clip-path/blur 매번, Suspense fallback null) 식별 → 21개 변경 적용 → 모바일 prod 환경에서 Home LCP 10.4초 → 3.1초 (-71%), 데스크톱 페이지 전환 CLS 0.12 → 0.04 (-67%) 도달. CLS 한 지표에선 후퇴(0.09 → 0.21)도 발생, 솔직히 보고하고 다음 PR로 분리.홈페이지에 대해 단 한 문장의 사용자 보고가 들어왔다."페이지 이동이 흔들리고 느림. 모바일에서 더 심함.""흔들림"과 "느림"은 ..

Self Study 2026.04.20

마이리얼트립 AICX - Product Engineer 인턴 합격 후기

직장을 다닌지 5개월 정도 되었을 때 ,스스로 일을 하면서 적성과 흥미를 고려해보았을 때 짧은 기간이지만 내가 하고싶은게 무엇일까? 라는 생각이 드는 찰나에링크드인과 기술 블로그에서 마이리얼트립의 자회사인 AICX 의 공고가 눈에 띄었고, 일을 하면서 흥미와 직무의 전문성 그리고 무엇보다 커리어를 쌓기 위해 지원하게 되었습니다! 서류 합격서류 접수 후 2주 정도 되었을 때 면접 일정을 잡게 되었고, 일정 조율도 자유롭게 되었어서 다행히 일정을 잡게 되었습니다!면접은 대략 40분정도 진행되었던 것 같고, HR 인사 담당자 직원분께서 잘 알려주셔서 쉽게 면접장에 도착했습니다 마이리얼트립과 달리 AICX 면접은 14층에서 진행되었고, 다대일 면접이였습니다저의 경우는 링크드인과 회사에서의 짧지만 맡은 프로젝트에..

카테고리 없음 2026.04.15

[CLAUDE CODE] - 메타 하네스

Claude Code 하네스 엔지니어링 — 29개 훅부터 Meta-Harness 자동 최적화까지TL;DR: Claude Code를 더 잘 쓰려면 모델이 아니라 모델을 감싸는 시스템을 바꿔야 한다. 29개 훅 미들웨어로 B+ (85/100) 등급 하네스를 구축했고, Stanford Meta-Harness 논문(arXiv:2603.28052)을 기반으로 이 하네스를 자동으로 최적화하는 외부 루프 시스템을 만들었다. 전체 소스는 GitHub에 공개되어 있다.왜 이걸 만들었나Claude Code를 쓰다 보면 같은 실수가 반복된다.API 키를 하드코딩하고 커밋 직전에 발견한다테스트를 안 돌리고 "됐겠지" 하고 넘어간다같은 파일을 다섯 번 고치는 동안 점점 엉뚱한 방향으로 간다모델 탓이 아니다. 모델 주변 시스템 ..

[3월23일 ~ 3월 29일] - Contextual Bandit 이커머스 추천: 논문대로 구현했더니 LinUCB가 NeuralUCB를 이겼다

Contextual Bandit 이커머스 추천: 논문대로 구현했더니 LinUCB가 NeuralUCB를 이겼다TL;DR: NeuralUCB(ICML 2020), HybridBandit(2026) 등 최신 논문 알고리즘을 밑바닥부터 구현하고, 5가지 실무 시나리오(비선형 reward, concept drift, cold-start, sparse reward, popularity bias)에서 가설 기반 실험을 돌렸다. 결과: 5개 가설 중 2개가 기각됐고, 10K interaction 규모에서는 LinUCB가 대부분의 시나리오에서 NeuralUCB를 이겼다. 이유는 sample complexity.왜 이 글을 쓰는가이커머스 추천 시스템에 Contextual Bandit을 적용하려고 논문을 읽었다. Neura..

[CLAUDE CODE] - Part 5. 실전 셋업 따라하기

Part 5. 실전 셋업 따라하기지금까지 배운 하네스 엔지니어링을 15분 안에 내 환경에 적용합니다.전제 조건# Claude Code 설치 확인claude --version# 없으면 설치npm install -g @anthropic-ai/claude-codeStep 1: 디렉토리 구조 만들기mkdir -p ~/.claude/hooksmkdir -p ~/.claude/rules~/.claude/├── settings.json # 훅 등록 + 권한 설정├── hooks/ # 자동화 스크립트│ ├── env-context-injector.sh│ ├── dangerous-command-blocker.sh│ ├── secret-detector.sh│ ├── loop-detec..

[CLAUDE CODE] - Part 4. 에이전트 오케스트레이션 — 혼자 다 하지 마라

Part 4. 에이전트 오케스트레이션 — 혼자 다 하지 마라2026년의 개발자는 코드를 쓰는 사람이 아니라, AI 에이전트 팀을 지휘하는 사람입니다.왜 에이전트가 필요한가?AI 하나가 모든 걸 잘하지는 못합니다.[에이전트 없이]사용자: "결제 기능 만들어줘"AI: 코드 작성 → 보안 허점 있음 → 테스트 부족 → 타입 에러 → 배포 후 사고[에이전트 있을 때]사용자: "결제 기능 만들어줘"planner: 설계도 먼저 작성AI: 코드 작성code-reviewer: "이 부분 리팩터링 필요"security-reviewer: "SQL 인젝션 위험, 파라미터 쿼리로 변경해"tdd-guide: "테스트 커버리지 60%밖에 안 됨, 추가 필요"→ 전부 반영 후 완료비유: 혼자 영화 만들기 vs 감독+촬영+편집+음향..

[CLAUDE CODE] - Part 3. 훅(Hooks) — 자동화의 핵심

https://github.com/hyunseung1119/My_ClaudeCode_SkillPart 3. 훅(Hooks) — 자동화의 핵심"AI가 좋은 코드를 쓰지만, 포맷팅을 까먹고 테스트를 안 돌리고 API 키를 하드코딩합니다. 훅이 그 마지막 10%를 잡습니다."훅이 뭔데?훅(Hook)은 특정 이벤트가 발생했을 때 자동 실행되는 스크립트입니다.AI가 파일을 수정한다 → [자동] Prettier가 코드를 포맷팅한다 → [자동] TypeScript 타입 체크가 돌아간다 → [자동] 같은 파일을 4번 이상 수정했으면 경고한다사람이 "포맷팅 해줘", "타입 체크 해줘"라고 매번 말할 필요가 없습니다. 100% 자동입니다.비유: 공장의 컨베이어 벨트에 있는 품질 검사 센서. 제품(코드)이 지나갈 때마..

[CLAUDE CODE] - Part 2. CLAUDE.md — AI에게 주는 업무 매뉴얼

https://github.com/hyunseung1119/My_ClaudeCode_SkillPart 2. CLAUDE.md — AI에게 주는 업무 매뉴얼회사에 새로 들어온 사람에게 "우리 팀은 이렇게 일해"라고 알려주듯, AI에게도 매뉴얼이 필요합니다.CLAUDE.md가 뭔데?Claude Code는 세션을 시작할 때마다 기억이 리셋됩니다. 어제 "함수는 50줄 이내로 써"라고 말했어도, 오늘은 모릅니다.CLAUDE.md는 매 세션 시작 시 Claude가 자동으로 읽는 파일입니다. 여기에 적힌 규칙은 항상 적용됩니다.[CLAUDE.md 없이]세션 1: "테스트 먼저 써" → OK세션 2: (까먹음) → 테스트 없이 코드부터 작성세션 3: "아 또... 테스트 먼저 쓰라고" → OK세션 4: (또 까먹음)..

[CLAUDE CODE] - Part 1. 왜 하네스 엔지니어링인가?

https://github.com/hyunseung1119/My_ClaudeCode_SkillPart 1. 왜 하네스 엔지니어링인가?AI 코딩 도구를 쓰는데 결과가 들쭉날쭉하다면, 모델을 바꿀 게 아니라 하네스를 바꿔야 합니다.하네스가 뭔데?말(horse)에게 씌우는 고삐를 영어로 harness라고 합니다.AI 코딩에서 하네스는 AI를 감싸는 시스템 전체를 의미합니다. 프롬프트, 도구 설정, 자동 검사 스크립트 — 이 모든 게 하네스입니다.[하네스 없이]개발자: "로그인 기능 만들어줘"AI: (코드 작성) → 테스트 안 함 → 보안 취약점 → 배포 후 사고[하네스 있을 때]개발자: "로그인 기능 만들어줘"AI: (코드 작성) → 자동 포맷팅 → 자동 보안 검사 → 자동 코드 리뷰 → 테스트 통과 확인 →..

[3월16일 ~ 3월 22일] - PulseQ 개발기 Part 2: Micrometer 메트릭으로 프로덕션 버그 3개를 잡은 과정

PulseQ 개발기 Part 2: Micrometer 메트릭으로 프로덕션 버그 3개를 잡은 과정TL;DR: 대기열 SaaS에 프로덕션 수준의 메트릭(P50/P99 레이턴시, 봇 차단률, DB 풀)을 추가하고 4,750명 규모 트래픽 시뮬레이션을 돌렸다. 메트릭 대시보드에서 P99=0.0ms(Timer 설정 오류), 봇 차단=0건(ML 피처 불일치), 토큰 발급=0건(스케줄러 카운터 누락) 세 가지 프로덕션 버그를 발견하고 수정했다. 코드 리뷰가 놓친 버그를 메트릭이 잡아낸 경험을 기록한다.왜 이 글을 쓰는가Part 1에서 대기열 엔진을 만들고 부하 테스트로 처리량을 검증했다. 하지만 실제 서비스 운영에서 필요한 건 처리량 숫자 하나가 아니다.레이턴시 분포(P50/P99)가 어떤가?봇 탐지가 실제로 작동하..