AX Engineer
whoami
김성재
13년간 제품을 운영하며 발견한 반복 업무와 맥락 단절을 Agent, RAG, MCP와 자동화 워크플로로 전환하고 있습니다.
커머스, 게임, 플랫폼 서비스에서 13년간 UI를 개발하고 운영했습니다. 복잡한 변경 범위와 검증 기준을 기획, 디자인, 백엔드 담당자와 조율하고 운영 중인 서비스에 안정적으로 반영해왔습니다.
회사에서는 승인된 업무 문맥 연결과 회사 제공 PR Review Agent를 실제 개발 흐름에 도입·설정했습니다. 반복 항목은 AI가 먼저 확인하고, 설계와 영향 범위, 예외는 사람이 최종 검증하도록 운영 기준을 정리했습니다.
개인 프로젝트는 문제와 범위, 완료 기준을 정한 뒤 AI 에이전트를 활용해 구현하고, 실제 실행과 테스트로 검증합니다. AX Doctor와 Agent Bridge는 오픈소스로 공개했고, Obsidian RAG와 BabyPick은 운영하며 확인한 범위와 아직 해결하지 못한 한계까지 기록하고 있습니다.
서비스 UI 개발과 운영 개선
운영 중인 화면을 바꿀 때는 구현뿐 아니라 영향 범위, 협업 대상, 검증 기준과 반영 이후의 결과까지 함께 확인합니다. 여러 도메인이 맞물리는 화면을 맡으며 변경 단위를 나누고 안정적으로 반영하는 경험을 쌓았습니다.
모바일웹 PDP 운영
가격, 옵션, 리뷰, 배송, 프로모션처럼 여러 도메인이 맞물리는 상품상세 UI를 맡으며 기획·디자인·백엔드와 영향 범위를 확인했습니다.
SCSS 구조와 CSS 의존성 개선
2,384개 SCSS 파일을 Dart Sass로 전환하며 CSS 산출물 차이를 확인했습니다. 이후 분산된 CSS를 React 프로젝트 안으로 옮겨 화면 코드와 스타일 변경 맥락을 함께 관리하도록 정리했습니다.
컴포넌트 검증과 문서화
Storybook 기반 확인 환경과 기술 문서로 신규 작업자 온보딩, 기존 화면 수정, 컴포넌트 단위 커뮤니케이션에 필요한 기준을 정리했습니다.
업무 경험을 바탕으로 새로 만든 UI
상품상세 UI를 운영하며 자주 마주친 상태와 예외 케이스를 바탕으로 옵션 선택 흐름을 새로 설계했습니다. 색상·사이즈 조합, 재고, 추가 금액, 모바일 화면 전환을 공개 컴포넌트로 구현하고 확인 결과를 Storybook에 남겼습니다.
색상과 사이즈 조합에 따라 재고와 추가 금액이 달라지는 구매 화면입니다. 데스크톱에서는 우측 구매 패널로, 모바일에서는 바텀시트로 제공하되 같은 선택 상태와 계산 규칙을 사용합니다.
확인한 상태
- 색상 변경 시 기존 사이즈가 품절이면 선택 해제
- 품절, 재고 부족, 옵션 추가 금액, 최대 구매 수량 처리
- 필수 옵션 누락 시 오류 메시지와 해당 그룹으로 포커스 이동
- 320px·390px·1440px 레이아웃과 모바일 하단 안전 영역 확인
- Storybook 접근성 위반 0건, TypeScript·ESLint·테스트·원격 빌드 통과
개발 업무에 적용한 AI 도구와 규칙
회사에서 제공한 도구와 승인된 연동을 실제 개발 흐름에 적용하고, 반복 작업의 규칙과 사람이 최종 판단할 범위를 정리했습니다. 도구 자체 개발과 제가 담당한 도입·설정·운영 범위는 구분해서 기록합니다.
Cursor 규칙과 스킬을 팀의 UI 개발 기준에 맞춰 정리했습니다. PR 설명, 커밋 메시지, 작업 계획, 위키 초안, QA 체크리스트처럼 자주 작성하는 산출물에 공통 형식을 적용했고, 여러 저장소에서 같은 설정을 재사용할 수 있도록 관리와 동기화 흐름을 구성했습니다.
한 일
- Cursor 규칙·스킬 — UI 개발 기준, Git/PR 흐름, 리뷰 기준을 팀에서 재사용할 수 있게 정리
- MCP 연동 — 승인된 업무 범위 안에서 Jira, Confluence, 코드 저장소 문맥을 참고하는 흐름 구성
- 설정 배포 — 여러 저장소에 흩어진 AI 설정을 한 곳에서 관리하고 동기화하는 방식 구성
- 반복 산출물 표준화 — PR 설명, 커밋 메시지, 작업 계획, 위키 초안을 같은 형식으로 생성하도록 정리
- 문서화 — 팀원이 따라 쓸 수 있도록 사용 흐름, 예시, 주의사항을 위키로 정리
바뀐 점
- 개인마다 달랐던 프롬프트와 작성 형식을 팀 공통 규칙으로 정리
- PR, 커밋, 위키, QA 산출물을 일정한 형식의 초안으로 생성
- 반복 항목은 AI의 1차 확인 대상으로 옮기고, 맥락·영향 범위·예외 케이스는 사람이 최종 검증
- 참고할 문맥의 범위와 공개 문서에 남기지 말아야 할 정보를 사용 기준에 포함
AI PR Review Agent 적용
관련 글 ↗UI 개발 리뷰에서는 BEM 네이밍, SCSS 구조, 접근성 속성, 중복 스타일처럼 반복해서 보는 항목이 많습니다. 회사에서 제공한 PR Review Agent를 여러 저장소의 파이프라인에 적용해 이 항목들을 먼저 확인하도록 구성했습니다. Agent 자체를 개발한 것이 아니라 파일 필터, 검토 기준과 실행 방식을 실제 업무에 맞게 설정했습니다. 설계, 영향 범위, 예외 케이스는 기존 코드 리뷰에서 별도로 확인했습니다.
한 일
- 여러 저장소의 파이프라인에 AI 리뷰 스텝 적용
- SCSS, HTML 마크업 중심으로 파일 필터링 규칙 설정
- 팀의 접근성, BEM, SCSS 컨벤션을 리뷰 기준에 반영
- 자동 트리거와 수동 트리거 방식을 나눠 실제 업무 흐름에 맞게 조정
- 반복 컨벤션과 설계·영향 범위 검토 항목을 분리
운영 기준
- 접근성, BEM, SCSS 규칙처럼 명확한 항목부터 확인
- 리뷰 기준을 개인 기억에 의존하지 않고 접근성, BEM, SCSS 규칙으로 명문화
- 리뷰 결과는 머지 조건이 아닌 확인 항목으로 제공
- 과한 코멘트와 오탐은 규칙을 조정하는 기준으로 기록
AI 개발 환경 도입 전 점검 도구
개인 AI 작업 환경을 정리하면서 새 설정을 설치하기 전에 기존 도구와 충돌하지 않는지, 확인하지 못한 영역은 없는지 먼저 점검할 필요가 있었습니다. 설치기와 분리된 읽기 전용 CLI로 문제와 판정 기준을 다시 정의하고, AI 코딩 에이전트를 활용해 구현한 뒤 합성 시나리오와 테스트로 검증했습니다.
현재 환경에 이미 있는 AI 클라이언트와 공용 자산, 개인·조직 정책, 새로 도입할 대상을 나눠 입력받고 충돌과 정책 차이, 미확인 범위를 근거와 함께 보고서로 남기는 도구입니다. 자동 설치나 수정은 하지 않고 도입 진행 여부를 판단하는 데 필요한 정보만 제공합니다.
문제를 나눈 방식
- Profile — 허용할 클라이언트와 파일 접근, 네트워크, 비밀정보 보관 기준을 선언
- Target manifest — 새 패키지가 만들거나 바꾸려는 파일과 설정을 실행 없이 기술
- Read-only preflight — 승인된 범위만 조사하고 현재 상태와 도입 이후 상태를 비교
- Evidence report — 판정뿐 아니라 근거, 검사 범위와 확인하지 못한 항목을 함께 기록
현재 검증한 범위
- Codex, Claude와 공용 자산을 가정한 합성 환경에서 scope → scan → report 흐름 재현
- safe는 READY_WITH_CONDITIONS, risky는 NOT_READY로 판정하는 CLI 데모 구현
- 각 실행 결과는 JSON, Markdown, 검사 범위 기록 세 파일로 생성
- 미지원 입력은 무시하지 않고 중단하며, 확인하지 못한 항목은 통과로 추정하지 않도록 처리
- macOS arm64에서 전체 테스트 게이트와 종료 코드를 재검증하고, 비정규 출력 경로는 AXD-OUTPUT-UNSAFE로 중단되는 동작 확인
- 실제 사용자 환경을 읽는 기능이 연결되기 전까지 일반 실행 명령은 의도적으로 비활성화
직접 만든 제품과 자동화
개인 프로젝트에서는 화면 구현부터 API, DB, 배치 작업과 배포까지 직접 다룹니다. 서비스와 자동화를 직접 운영하면서 사용 흐름을 확인하고 필요한 기능을 보완하고 있습니다.
쇼츠 영상에서 소개한 상품을 한곳에서 확인할 수 있도록 만든 서비스입니다. 랜딩 페이지와 상품 등록·수정 어드민, 통계 화면을 함께 운영하며 노출 상품과 화면 구성을 조정하고 있습니다.
매일 뉴스를 읽고 글로 남기는 과정이 끊기지 않도록 만든 자동화입니다. GeekNews 수집, 텔레그램 후보 발송, 기사 선택, AI 분석, 블로그 MDX 초안과 GitHub PR 생성을 하나의 흐름으로 연결했습니다.
AI 에이전트 작업 환경
기존 로그인·구독 환경을 유지한 여러 AI CLI를 한 작업 단위로 연결하고, Hermes와 Obsidian RAG를 조합해 개인 작업 환경을 구성했습니다. 문서 출처와 접근 범위, 작업 로그를 남겨 결과와 실행 과정을 다시 확인할 수 있게 했습니다.
Claude Code, Codex와 Gemini CLI를 각각 구독·로그인한 상태에서 API 키 기반 모델 라우터 없이 하나의 작업에 함께 사용하기 위해 만든 로컬 오케스트레이션 CLI입니다. 각 도구의 인증과 결제는 그대로 유지하고, 공통 목표와 결정, 실행·리뷰 기록과 인계 문서만 한 작업 폴더에서 관리합니다.
만든 이유
- 각각 로그인된 로컬 CLI를 한 작업 안에서 선택해 실행
- 다음 에이전트에게 요청과 이전 결정을 다시 설명하는 과정 축소
- 여러 에이전트의 실행 결과와 리뷰를 비교 가능한 기록으로 보존
- API 프록시나 구독 우회 없이 기존 도구의 실행 환경 유지
현재 구현 범위
- Task workspace — 목표, 공통 맥락, 결정과 실행 기록을 파일로 관리
- CLI adapter — 명령어 기반 AI 도구를 JSON 설정으로 연결
- Review — 여러 에이전트에 같은 검토 요청을 실행하고 결과 기록
- Handoff — 다음 에이전트가 이어갈 목표, 결정과 최근 실행을 문서로 생성
- 공개 GitHub 설치부터 Codex CLI 실행과 handoff 생성을 재검증하고, 기록에 포함된 홈 경로를 v0.1.1에서 마스킹
- 컨텍스트 자동 압축이나 에이전트별 파일 선별은 아직 구현하지 않음
OpenClaw로 시작한 개인 에이전트 환경을 Hermes 중심으로 정리하고, Obsidian 문서를 로컬 RAG로 인덱싱했습니다. 답변에 사용된 문서와 작업 과정을 함께 남겨 이후에도 출처와 실행 내용을 확인할 수 있게 했습니다.
운영하며 정한 기준
- 문서 출처 — 답변에 사용한 원본 문서를 함께 반환하도록 설계
- 접근 범위 — 읽을 수 있는 파일과 실행할 수 있는 도구를 각각 제한
- 작업 로그 — 판단 근거, 실패 지점, 다음 액션을 함께 기록
- 결과 확인 — 코드, 문서, 체크리스트 초안을 실행 전후에 확인할 수 있도록 기록
- 로컬 검색 — 외부 전송 범위와 로컬 처리 범위를 구분