오래된 레거시 시스템을 새로운 기술 스택으로 전환하는 프로젝트에 Claude 활용성을 검증해보기로 했습니다.
기술 스택 선택
Frontend: React Vue와 비교했을 때 학습 곡선이 높다는 것은 알고 있었습니다. 하지만 Claude를 함께 사용한다면 그 장벽이 크게 낮아질 것이라 판단했고, 고민 없이 React를 선택했습니다.
Backend: Python Java와 Python 사이에서 고민했습니다. Java는 유지보수 측면에서 강점이 있고, Python은 Frontend와 동일한 IDE에서 개발할 수 있다는 편의성이 있었습니다. 이번 프로젝트는 대규모 트래픽이나 특별한 성능 요구사항이 없었기 때문에, Claude 활용 검증이라는 목적에 맞게 다루기 편한 Python을 최종 선택했습니다.
작업 방식: 비즈니스 로직과 디자인의 분리
처음부터 비즈니스 로직과 디자인 요소를 철저히 분리해서 작업했습니다. 이렇게 나눈 이유는 Claude의 결과물을 단계별로 꼼꼼하게 검증하기 위해서였습니다.
비즈니스 로직 분석 흐름
- 기존 레거시 소스 전체를 폴더에 정리
- Claude 터미널에서 소스 분석 수행
- 분석 결과를 별도 파일로 저장
여기서 중요한 포인트가 하나 있습니다. 레거시 시스템에는 주석 처리된 코드가 매우 많습니다. 이 주석들을 분석 대상에 포함시키면 불필요한 내용이 섞여 설계가 흐려집니다. 반드시 주석 처리된 코드는 분석 대상에서 제외하도록 Claude에게 명확히 지시해야 원하는 분석 결과를 얻을 수 있었습니다.
로직 변환 시에는 매 작업마다 아래 문구를 프롬프트에 포함시켰습니다.
"기존 소스 코드의 정상 작동을 보장하면서 변환할 것"
이 한 줄이 생각보다 큰 역할을 합니다.
디자인 구현 흐름
- 기존 화면을 캡처하여 Claude.ai에 이미지로 업로드
- 와이어프레임 코드로 변환 요청
- 변환된 코드를 Claude 터미널에서 React 컴포넌트로 변환
- 공통 디자인 요소 적용을 위한 style.md 생성 및 관리
style.md는 처음부터 만들어두시는 것을 강력히 권장합니다. 작업 초반에 공통 스타일 기준을 잡아두지 않으면, 나중에 화면마다 일관성이 무너지는 상황이 반드시 생깁니다.
### 와이어프레임 예시
+-------------------------------------------------------------+
| Toolbar [ 조회 ] [ 저장 ] [ 삭제 ] [ 복사 ] [ 엑셀 ] [ 닫기 ] |
+-------------------------------------------------------------+
| Header 항목A v | 항목B v | 항목C v | 항목D v | 상태 Badge |
+-------------------------------------------------------------+
| Tab: [ 기본 정보 ] [ 수량/사이즈 ] [ 소재 정보 ] |
+--------------+----------------------------------------------+
| Left Panel | 수량 Grid |
| | |
| 기본 정보 | 구분 | 시작일 | 종료일 | 수량 | 금액 |
| - 콤보 A | ------------------------------------------- |
| - 콤보 B | Row |
| - 콤보 C | Row |
| - 텍스트 | Row |
| - 체크박스 | |
| ----------- | |
| 옵션 그룹 | |
| ----------- | |
| 소재 정보 | |
| ----------- | |
| [ 이미지 ] | |
+--------------+----------------------------------------------+
실제로 느낀 Claude의 강점
상용 라이브러리 없이 구현 가능
대부분의 시스템 개발에서는 Chart, Grid 같은 컴포넌트를 상용 라이브러리로 해결합니다. 코드로 직접 구현하기 어렵기 때문에 라이선스를 구매하는 것입니다.
그런데 Claude를 활용하면 이야기가 달라집니다. 필터, 정렬, 조회 등 복잡한 Grid 기능을 모두 코드로 직접 구현할 수 있었습니다. 라이선스 비용을 절감하면서도 요구사항에 딱 맞는 커스텀 구현이 가능하다는 점은 실질적으로 큰 메리트였습니다.
향후 계획: 서브에이전트 병렬 처리
이번 검증에서는 로직과 디자인을 순차적으로 직접 확인하며 진행했지만, 실제 프로젝트에서는 다르게 접근할 계획입니다.
- subagent-style — 디자인 구현 전담
- subagent-logic — 비즈니스 로직 변환 전담
이 두 에이전트를 병렬로 실행하면 작업 속도를 크게 높일 수 있습니다.
시니어 엔지니어로서의 솔직한 평가
3~4일이라는 짧은 기간이었지만, Claude의 활용 가능성은 충분히 확인했습니다. 다만 한 가지 분명히 말씀드리고 싶은 것이 있습니다.
React와 Python을 모르는 분께는 추천하지 않습니다.
Claude가 빠르게 결과물을 만들어주는 것은 맞습니다. 하지만 그 결과물을 제대로 관리하려면 언어의 특성, 폴더 구조, 컴포넌트 설계에 대한 이해가 반드시 필요합니다. 이 배경 지식 없이 프롬프트만으로 개발을 진행하면, 초반에는 빠른 것처럼 보여도 공통 컴포넌트 관리와 코드 스타일 일관성이 무너지는 시점이 반드시 찾아옵니다.
결국 Claude는 도구입니다. 개인의 노하우가 담긴 프롬프트 설계와 아키텍처 지식이 결합될 때, Claude의 진짜 활용 능력이 발휘된다는 것을 이번 작업을 통해 분명하게 느꼈습니다.
개발 환경 - Frontend
| 구분 | 기술 | 버전 | 용도 |
| 언어 | JavaScript (JSX) | ES2022+ | 주 개발 언어 |
| 프레임워크 | React | 18.3 | UI 구성 |
| 빌드 도구 | Vite | 5.2 | 번들링/개발서버 |
| 스타일 | Tailwind CSS | 3.4 | 유틸리티 기반 스타일링 |
| 라우팅 | react-router-dom | 6.23 | 페이지 라우팅 |
| HTTP 클라이언트 | Axios | 1.7 | API 통신 |
| 폼 | react-hook-form | 7.51 | 폼 상태 관리 |
| 테이블 | @tanstack/react-table | 8.17 | 데이터 그리드 |
| 가상스크롤 | @tanstack/react-virtual | 3.5 | 대용량 리스트 렌더링 |
| 인증 상태 | React Context + localStorage | - | 전역 로그인 상태 관리 |
개발 환경 - Backend
| 구분 | 기술 | 버전 | 용도 |
| 언어 | Python | 3.11+ | 주 개발 언어 |
| 프레임워크 | FastAPI | 0.111 | REST API 서버 |
| ASGI 서버 | Uvicorn | 0.29 | 비동기 서버 실행 |
| DB 드라이버 | pyodbc (ODBC Driver 17) | 5.1 | SQL Server 연결 |
| 인증 | python-jose + HTTPBearer | 3.3 | JWT 발급/검증 |
| 설정 관리 | pydantic-settings + python-dotenv | - | 환경변수 관리 |
| 스키마 검증 | Pydantic v2 | 2.7 | 요청/응답 유효성 검사 |
| 압축 | GZipMiddleware | - | 응답 압축 |
'IT 기술 > AI' 카테고리의 다른 글
| BriefStock 개발기 #1 - Claude Code로 하루 만에 풀스택 골격 + CI/CD 완성하기 (0) | 2026.04.10 |
|---|---|
| AI 코딩 효율 — 프롬프트 계약서(Prompt Contracts) (0) | 2026.03.27 |
| Claude 기본 활용 방법 2 - 서브에이전트(SubAgent) (0) | 2026.01.15 |
| Claude 기본 활용 방법 1 (0) | 2026.01.15 |
| Claude 개발 환경 구축 가이드 (Windows 기준) (0) | 2026.01.14 |