페이지 유형별 예시와 구현 전후 검수를 활용한 AI 개발 방식

관리자 화면에는 조회·상세·등록/수정처럼 반복되는 유형이 많았습니다. 전에는 비슷한 페이지를 복사한 다음 필터와 테이블 필드 등을 바꿔 가며 개발했습니다.

이번에는 반복 구현을 AI에 맡기고, 개발자는 요구사항 확인과 코드 리뷰를 하려고 했습니다. 문제는 같은 유형의 페이지라도 문구, 필드, 필터 구성이 서로 다르고, 기존 공통 컴포넌트로 만들 수 없는 페이지 전용 UI도 있다는 점이었습니다.

AI 작업의 기준은 페이지 유형별 예시와 공통 규칙으로 잡았습니다. 도구는 Claude Code와 Codex를 썼고, 입력으로는 페이지 유형과 대상 Figma 디자인 이미지를 줬습니다.

필터·셀 유형은 사전 디자인 시스템 작업에서 이미 준비돼 있었고, 이를 쓰는 공통 컴포넌트와 예시 페이지는 제가 만들어 공유했습니다.

AI가 디자인 이미지에서 뽑은 문구와 필드 유형은 요구사항에 맞는지 사람이 먼저 확인한 뒤 구현에 썼고, 구현 뒤에는 코드 규칙과 실제 화면 동작을 따로 확인했습니다.

작업 순서는 다음과 같았습니다.

1. 페이지 유형과 작업 대상 Figma 디자인 이미지를 프롬프트로 전달했습니다.
2. AI가 추출한 문구·필드 유형을 요구사항과 대조했습니다.
3. 잘못 해석한 부분을 고치고, 요구사항이 정리되면 구현을 진행했습니다.
4. 리스트 페이지는 공통 레이아웃을 바탕으로 검색 필터와 테이블 필드를 디자인에 맞게 바꿨습니다.
5. 구현된 코드가 기존 코드 순서와 규칙을 따르는지 리뷰했습니다.
6. 개발 모드에서 직접 실행해 화면 동작을 수동으로 확인했습니다.

두 명이 개발하면서 기존 규칙에 맞춘 AI 작업과 추가 컴포넌트 개발을 나눠 맡았습니다. 같은 유형으로 분류한 페이지라도 별도 UI가 필요하면 추가 개발 대상으로 뺐습니다.

반복 구현에 드는 시간이 크게 줄었다고 느꼈고, AI가 코드 순서나 규칙을 더 잘 지킬 때도 있었습니다.

기능 검증은 개발 모드에서 직접 실행하는 수동 QA로 했고, 구현 전 요구사항 검수, 구현 후 코드 리뷰, 실행 확인을 단계별로 나눠 진행했습니다.

이후에는 예시 페이지 없이도 작업할 수 있도록 라이브러리별 규칙과 공통 컨벤션을 더 잘게 나누고, 페이지 요청에 맞는 규칙을 에이전트가 찾아 적용하게 하는 방식을 고민했습니다.