#AI

Product Engineer: 전직 백엔드 개발자, AI와 함께한 프론트엔드 도전기

Summary

"코딩보다 환경 설계!" 백엔드 개발자의 AI 기반 프론트엔드 정복기

단순 프롬프트를 넘어 AI가 잘 일할 수 있는 '컨텍스트 허브'를 구축하는 실전 전략

이 아티클은 마이리얼트립의 엔지니어가 AI 도구 커서(Cursor)를 활용해 낯선 프론트엔드 영역의 관리자 페이지를 개발하며 얻은 인사이트를 다룹니다. 코드 생성을 요청하는 기술보다 AI에게 최적의 맥락을 제공하기 위한 '작업 허브' 설계가 프로젝트 성공의 핵심임을 강조합니다. 개발자가 직접 코드를 작성하는 역할에서 AI 시스템의 오케스트레이터로 진화하는 과정을 생생하게 보여줍니다.

01Figma 정책서에서 위키, 그리고 코드로 이어지는 AI 친화적 단계별 빌드 프로세스
02멀티 레포지토리를 한곳에 묶어 AI의 인지 범위를 확장하는 'AI 작업 허브' 구조 제안
03AI의 초기 생성 코드에서 발견된 N+1 API 호출 문제와 이를 해결하기 위한 설계 문서 업데이트 과정
04Git Worktree를 이용한 병렬 작업 시도의 실패를 통해 배운 '단일 맥락 집중'의 중요성
05MCP(Model Context Protocol)를 활용해 회사 지식과 개인 목표를 연결하는 '데브 워크스테이션' 비전

RECOMMENDATION

새로운 기술 스택에 도전해야 하는 풀스택 지향 개발자나 AI 코딩 도구의 효율을 극대화하고 싶은 시니어 엔지니어에게 강력히 추천합니다. AI에게 좋은 질문을 던지는 법보다 'AI가 일하기 좋은 구조'를 만드는 설계 역량의 중요성을 배울 수 있습니다.

The Problem

프론트엔드 숙련도가 낮은 백엔드 개발자가 관리자 페이지의 프론트엔드와 백엔드를 동시에 개발해야 하는 상황에서, 컨텍스트 전환 비용과 코드 품질 유지에 대한 문제에 직면했습니다. 특히 서로 다른 레포지토리 간의 API 스펙을 동기화하고 에디터를 오가며 작업하는 과정에서 발생하는 비효율을 해결해야 했습니다.

The Solution

AI 코딩 도구인 커서(Cursor)를 도입하고, 피그마에서 추출한 정책서를 위키에 단계별로 구조화하여 AI가 점진적으로 작업을 수행할 수 있도록 설계했습니다. 또한, 여러 레포지토리를 하나의 에디터에서 참조할 수 있는 'AI 전용 작업 허브'를 구축하여 AI가 프론트와 백엔드의 맥락을 동시에 이해하고 코드를 작성하도록 환경을 개선했습니다.

The Result

프론트엔드 지식이 부족함에도 디자인 요구사항이 완벽히 반영된 관리자 페이지를 성공적으로 구축했으며, 위키 기반 설계를 통해 작업의 연속성을 확보했습니다. 효율적인 AI 협업 구조를 통해 개인의 업무 스타일과 기술 스택이 통합된 '데브 워크스테이션' 개념으로 확장하는 성과를 거두었습니다.

Trade-off

AI가 생성한 초기 코드가 다수의 아이템을 개별 API로 호출하는 N+1 성능 비효율을 발생시켜 직접적인 코드 리뷰와 수정 과정이 동반되었습니다. 또한, 생산성 향상을 위해 시도했던 Git 워크트리 기반의 병렬 작업은 인간 엔지니어가 여러 맥락을 관리하고 병합하는 과정에서 인지 부하가 커져 실패로 돌아갔습니다.