Backend Developer

4 분 소요

AI 도구로 상품관리 백오피스를 10일만에 구축한 경험 회고

최근 우리 팀은 PHP 레거시 백오피스를 React + NestJS 기반의 모던 스택으로 마이그레이션하는 프로젝트를 진행하고있다.
프론트엔드 개발자 리소스가 부족한 상황에서,
백엔드 개발자인 내가 AI 도구를 활용해 프론트엔드 애플리케이션을 구축한 경험을 공유하려고 한다.

나는 이 프로젝트로 무엇을 배울 수 있었을까?

프로젝트 컨텍스트

프로젝트 스펙

  • 기간: 영업일 기준 10일
  • 규모: 85개 파일, 수천 줄의 코드
  • 복잡도: 19개 다이얼로그, 다양한 비즈니스 로직 포함
  • 기술 스택: React, TypeScript, TanStack Table, React Query

구현 범위

상품관리 백오피스는 단순 CRUD를 넘어선 복잡한 기능들을 포함했다:

  • 카테고리 트리 관리
  • 기획전 설정 및 관리
  • 상품 상태 일괄 변경
  • 엑셀 업로드/다운로드
  • 할인 및 쿠폰 설정
  • 재고 관리 시스템
  • 가격 정책 일괄 적용
  • 기타 등등등등..

현재_상품_BO

10일간의 성과

달성한 목표

프로젝트의 핵심 목표는 달성했다:

✅ 생산성: 백엔드 개발자가 10일만에 복잡한 React 앱 구축
✅ 완성도: 레거시 시스템의 모든 기능 구현
✅ 안정성: 다양한 브라우저와 환경에서 동작 확인

백엔드 개발자인 내가 프론트엔드 앱을 10일만에 완성시켰다는 것 자체가 놀라운 성과였다. 특히 19개의 복잡한 다이얼로그와 각종 비즈니스 로직을 모두 구현했다는 점에서 AI 도구의 위력을 실감했다.

그런데, React는 배웠을까?

예상과 다른 학습 곡선

백엔드 개발 경험이 프론트엔드 학습에 어떤 영향을 미쳤는지 생각해보면 꽤 흥미롭다.

영역 NestJS (백엔드) React (프론트엔드)
기술 이해도 의존성 주입, 데코레이터 패턴 등 깊은 이해 표면적 구현에 그침
AI 활용 효과 생성된 코드를 분석하고 개선 가능 동작하는 코드 생성에만 집중
학습 성과 프레임워크 철학과 패턴 습득 거의 없음

성장하지 못한 이유 분석

1. 배경지식의 중요성

AI 도구를 효과적으로 활용하려면 해당 기술에 대한 기본 이해가 필수라는 걸 뼈저리게 느꼈다. 백엔드 지식이 있었기에 NestJS 코드는 검증하고 개선할 수 있었지만, React는 그렇지 못했다.

// AI가 생성한 코드를 이해하고 개선하려면
// 다음과 같은 React 패턴을 알아야 한다:

// ❌ 매 렌더링마다 새 함수 생성
const handleClick = () => { ... }

// ✅ useCallback으로 최적화
const handleClick = useCallback(() => { ... }, [deps])

나는 이런 차이를 알아차리지 못했고, 그저 동작하는 것에만 만족했다. (ㅎㅎ..)

2. 일정 압박과 트레이드오프

70% 완성도를 7일만에 달성했지만, 다음과 같은 트레이드오프가 있었다:

  • 코드 리뷰 시간 부족
  • 패턴과 안티패턴 학습 기회 상실
  • 기술 문서 참고 시간 부족
  • 성능 최적화 고려 미흡

놓친 것들

React에 대해 놓친 것들:

  • React 심화 개념 (Hooks, Context, 렌더링 최적화)
  • 컴포넌트 설계 철학
  • 프론트엔드 성능 최적화 기법

개인적으로는 놓친 것들이 더 아쉽다. 특히 React의 핵심 개념을 제대로 이해하지 못한 채 프로젝트를 끝낸 것 같아 찜찜하다.

그래도 AI 활용 역량은 크게 성장했다

프롬프팅 역량의 진화

프로젝트를 진행하며 프롬프팅 기법은 크게 발전했다:

초기 프롬프트 예시 (Day 1):
"상품 목록 테이블을 만들어줘"
"디자인 스펙은 이것을 참고하세요 : {피그마디자인LINK}"

후기 프롬프트 예시 (Day 7):
"TanStack Table v8을 사용해 상품 목록 테이블 구현
- 기존 ProductCard 컴포넌트의 스타일 패턴 적용
- useProductQuery 훅 활용하여 데이터 페칭
- 정렬/필터 상태는 URL 파라미터로 관리
- 에러 바운더리로 감싸서 안정성 확보"

확실히 프롬프트 작성 실력은 늘었다고 생각한다. 이건 앞으로도 유용하게 쓸 수 있을 것 같다.
(예시일뿐 초기 프롬프트는 예시보다 단순하게했고, 후기 프롬프트는 예시보다 더 좁은단위를 상세하게 요청했다.)

활용한 AI 기술들

핵심 도구 스택

프로젝트에서 활용한 주요 AI 도구와 기법들:

  • Claude Code: 메인 코드 생성 도구
  • Figma MCP: 디자인-코드 변환
  • Few Shot Learning: 패턴 기반 코드 생성
  • Chain of Thought: 복잡한 로직 단계별 구현

Few Shot Learning 실전 적용

Few Shot Learning은 기존 코드 패턴을 학습시켜 일관성 있는 코드를 생성하는 기법이다. 실제로 이렇게 활용했다:

[실제 사용한 프롬프트]

기존 다이얼로그 컴포넌트들을 참고해서 새로운 다이얼로그를 만들어주세요.

예시 1) ProductDeleteDialog.tsx
- 선택된 상품 ID 배열을 props로 받음
- 삭제 확인 메시지 표시
- 확인 시 API 호출 후 목록 새로고침
- 디자인 스펙은 이것을 참고하세요 : {피그마디자인LINK}

예시 2) CategoryEditDialog.tsx  
- 카테고리 ID를 props로 받음
- 폼 필드 validation 처리
- 저장 시 mutation 실행
- 디자인 스펙은 이것을 참고하세요 : {피그마디자인LINK}

이제 위 패턴을 참고해서 DiscountSettingDialog.tsx를 만들어주세요.
- 선택된 상품들에 대한 할인 설정
- 할인율/할인금액 선택 가능
- 기간 설정 포함
- 디자인 스펙은 이것을 참고하세요 : {피그마디자인LINK}

이 방식으로 19개의 다이얼로그 컴포넌트를 일관된 패턴으로 생성할 수 있었다. 솔직히 처음엔 이게 이렇게 잘 동작할 줄 몰랐다.

Chain of Thought (CoT) 활용

복잡한 컴포넌트는 단계별로 분해하여 체계적으로 접근했다:

[상품 목록 테이블 구현 프롬프트]

1단계: 요구사항 분석
- 정렬 기능 (가격, 등록일, 재고 등)
- 필터링 기능 (카테고리, 상태, 가격대)
- 페이지네이션 (20개씩 표시)
- 다중 선택 체크박스

2단계: 기술 스택 결정
- TanStack Table v8 사용 (이유: 성능과 타입 안전성)
- React Query로 서버 상태 관리
- Tailwind CSS로 스타일링

3단계: 컴포넌트 구조 설계
ProductTable/
├── ProductTable.tsx (메인 컴포넌트)
├── ProductTableColumns.tsx (컬럼 정의)
├── ProductTableFilters.tsx (필터 UI)
└── ProductTablePagination.tsx (페이지네이션)

4단계: 구현 시작
위 구조대로 컴포넌트를 구현해주세요.

이렇게 단계를 나누니 Claude Code가 훨씬 체계적으로 코드를 생성했다.
하나를 크게 계획해서 한번의 프롬프팅으로 진행하기도 했고,
하나를 작게 나눠 여러번의 프롬프팅으로 진행하기도했다.

그 외 활용한 기능들

  • Sub-agent: 복잡한 작업을 여러 전문 agent가 분담 처리
  • Super Claude: Super Claude가 만들어놓은 agent를 활용
  • 다양한 Claude Code 옵션: 상황에 맞는 최적 설정 (다른 레포 참조, 허가 받지 않음, 등 ..)

실무 적용을 위한 제언

AI 도구 활용 시 고려사항

경험해보니 이런 점들을 고려해야 할 것 같다:

  1. 기본기의 중요성
    • AI는 도구일 뿐, 기술 이해 없이는 한계가 명확
    • 생성된 코드를 검증할 수 있는 역량 필수
  2. 프로젝트 규모와 일정의 균형
    • 학습과 구현의 트레이드오프 고려
    • 기술 부채 관리 전략 수립
  3. 팀 차원의 접근
    • AI 도구 사용 가이드라인 수립
    • 코드 리뷰 프로세스 강화
    • 지식 공유 체계 구축

마무리하며

이번 프로젝트는 AI 도구의 가능성과 한계를 동시에 보여준 사례라고 생각한다.

압도적인 생산성은 달성했지만, 깊이 있는 기술 습득은 놓쳤다. 이게 AI 시대 개발자가 직면한 새로운 딜레마인 것 같다. “빠르게 만들 것인가, 제대로 배울 것인가”

하지만 분명한 것은, AI 도구를 활용한 개발이 이제 선택이 아닌 필수가 되었다는 점이다. 중요한 건 이 도구를 어떻게 현명하게 활용하느냐라고 생각한다.

다음 프로젝트에서는 이번 경험을 바탕으로, 생산성과 학습의 균형을 더 잘 맞출 수 있을 것 같다. 적어도 React의 기본 개념 정도는 공부하고 시작해야겠다는 생각이 든다.

이 글이 AI 도구를 활용한 개발을 고민하는 개발자들에게 실질적인 도움이 되었으면 좋겠다. 특히 백엔드 개발자가 프론트엔드 작업을 해야 하는 상황이라면, 내 실수들을 반면교사로 삼아 더 나은 선택을 하길 바란다.

댓글남기기

참고