AI 주도 개발로 하루 만에 추천 요금제 기능 구현하기

프로젝트를 운영하다 보면 예상치 못한 급박한 요구사항이 생기곤 해요. 특히 사용자 경험과 직결되는 기능일수록 빠른 대응이 필요하죠.

이번 글에서는 렌트카 관련 플랫폼에서 예약률 개선을 위한 요금제 추천 기능을 AI와 함께 단기간에 구현한 사례를 공유합니다. 요구사항은 단순해 보였지만, 실제로는 복잡한 한글 문자열 매칭 로직이 필요했고, 이를 AI의 도움으로 해결한 과정을 자세히 설명합니다.

문제 정의

비즈니스 문제

플랫폼 내 일부 차량의 요금이 사용자 기대 대비 높게 설정되는 경향이 있어 실제 예약 전환율에 영향을 주고 있었어요. 이에 따라 차량 모델에 맞는 추천 가격 정보를 자동으로 제안해주는 기능이 요청되었어요.

기술적 제약사항

시간 제약

• 구현 기한: 단 하루
• 빠른 프로토타입 필요

시스템 제약

• 프론트엔드에서만 구현 가능
• 추천 데이터는 JSON으로 클라이언트에서 관리
• 빠른 개발을 위해 DB 연동 불가

사용자 행동 분석 결과

• 렌트카 업체들은 요금제명을 차량 모델명으로 작성
• 요금제 등록 폼은 이름과 가격만 입력
• 상품 등록 시 차량 모델을 지정하면서 요금제명을 가져옴

핵심 도전 과제

사용자가 입력하는 요금제명과 차량 모델명별 데이터를 매칭하는 것이 가장 큰 문제였어요:

다양한 입력 패턴

• 브랜드명 포함: "현대 아반떼", "기아 K5"
• 세대 정보: "(DL3)", "(24년식)"
• 연료 타입: "LPi", "가솔린", "하이브리드"
• 발음 기반 입력: "아반때", "그렌져"
• 초성 입력: "ㅅㄴㅌ" (쏘나타)

AI와 함께 단계별 문제 해결

급박한 상황에서 AI를 활용해 체계적으로 접근했어요. 각 단계별로 구체적인 질문을 통해 실용적인 해결책을 얻었습니다.

1단계: 전체 구현 방안 설계

AI에게 던진 질문

AI의 답변에서 얻은 핵심 인사이트

다단계 매칭 전략

상품명 정규화 로직

구체적인 매칭 알고리즘

시스템 아키텍처

AI가 제시한 포괄적인 아키텍처(API, 캐싱, 자동완성 등)는 1일 구현에는 과도했지만, 매칭 전략과 정규화 로직은 핵심 아이디어가 되었어요.

2단계: 빠른 구현을 위한 간소화

AI는 제한된 조건(프론트엔드만, 1일 구현)에 맞춰 간단한 유사도 검색 구조를 제안했어요.

AI에게 던진 질문

AI의 실용적 제안

간소화된 매칭 로직

1일 구현을 위한 최적화 팁

• 단순한 문자열 정규화로 빠른 구현
• 포함관계 기반 매칭으로 대부분의 케이스 커버
• React 상태관리로 실시간 반응
• 직관적인 UI로 사용자 경험 개선

이와 함께 React 컴포넌트로 프리뷰를 만들어줬어요.

claude preview

이 방식으로도 대부분의 실사용 입력은 커버할 수 있었어요.

3단계: 초성/유사 발음 대응을 위한 확장

기본 매칭으로는 한계가 있어서 더 정교한 알고리즘이 필요했어요.

• 그렌져 -> 그랜저
• 아반때 -> 아반떼
• ㅅㄴㅌ -> 쏘나타

AI에게 던진 질문

AI가 구현한 핵심 알고리즘

한글 초성 추출

쌍자음 → 단자음 변환

브루트포스 매칭 함수

실제 테스트 결과

• "아반때" → "아반떼" 매칭
• "그렌져" → "그랜저" 매칭
• "k5" → "K5" 매칭
• "ㅅㄴㅌ" → "쏘나타" 매칭

이 때 의도했던 함수와 프리뷰가 성공적으로 만들어졌어요. 테스트 케이스가 의도했던 바와 정확히 일치했고, 이를 기반으로 가장 걱정되었던 핵심 로직은 구현이 완료되었어요.

claude preview

4단계: 데이터 구조 최적화

엑셀로 제공된 추천 가격 데이터를 TypeScript 타입에 맞게 변환하는 작업이 필요했어요.

기존 타입 정의

AI에게 엑셀 데이터 변환 요청

엑셀 데이터는 시트를 단순 드래그 복사 붙여넣기만 하였어요.

AI가 생성한 정확한 데이터 구조

아래 데이터는 예시용입니다.

테스트 결과 및 검증

구현한 한글 매칭 알고리즘의 신뢰성 확보를 위해 테스트 케이스를 작성했어요. 테스트 코드 작성도 Cursor의 claude-4-sonnet 모델을 활용했어요.

• 100% 테스트 통과 (42/42)
• 커버리지: 정규화, 유사도, 계산, 매칭, 검증

최종 구현 결과

AI의 도움으로 얻은 알고리즘들을 실제 프로덕션 코드에 적용했어요.

핵심 매칭 로직 적용

• useCallback과 debounce로 사용자 입력에 따라 실시간 추천 결과 제공
• 사용자 입력에 따라 요금제를 매칭하여 제시
• 모달을 통한 전체 리스트 제공

해당 컴포넌트 코드와 구조는 실무 예시를 단순화한 예제입니다. 실제 서비스 구조와는 무관합니다.

추천 목록 모달 구현

AI 주도 개발의 핵심 전략

이번 프로젝트를 통해 얻은 AI 활용 노하우를 정리했어요.

1. 단계별 구체적 질문하기

잘못된 접근

올바른 접근

2. 제약사항을 명확히 전달하기

각 단계마다 현실적인 제약사항을 추가로 알려주며 실용적인 해결책을 유도했어요:

• 1단계: 전체적인 아키텍처 파악
• 2단계: "프론트엔드만, 1일 구현" → 간소화된 방안
• 3단계: "브루트포스 검색, 1초 로딩 허용" → 성능보다 정확도 우선
• 4단계: "TypeScript 타입에 맞게" → 실제 코드 적용 가능

3. AI 답변의 선택적 활용

AI가 제시한 모든 방안을 사용하지 않고, 상황에 맞는 부분만 선택적으로 활용했어요:

사용한 부분

• 매칭 전략과 알고리즘
• 정규화 로직
• 데이터 구조 변환
• 핵심 구현 코드

제외한 부분

• 복잡한 아키텍처 (API, Redis 캐싱)
• 자동완성 UI (시간 부족)
• 머신러닝 기반 학습 (오버엔지니어링)

4. 반복적 개선 과정

AI와의 대화를 통해 점진적으로 해결책을 개선해나갔어요:

결과 및 배운 점

구현 성과

기능적 성과

• 하루 만에 복잡한 한글 매칭 알고리즘 구현 완료
• 다양한 입력 패턴에 대한 높은 매칭 정확도 달성
• 직관적인 UI로 사용자 경험 개선

기술적 성과

• 한글 초성 추출 및 유사도 매칭 알고리즘 학습
• TypeScript 타입 안정성 확보
• 재사용 가능한 매칭 유틸리티 함수 구축

AI 주도 개발의 장점

1. 빠른 프로토타이핑

• 복잡한 알고리즘도 단시간에 구현 가능
• 다양한 접근 방식을 빠르게 검토 가능

2. 학습 효과

• 새로운 기술이나 알고리즘을 실전에서 바로 적용
• 단순 복사가 아닌 원리 이해를 통한 응용

3. 품질 보장

• AI가 제시한 코드는 대부분 동작하는 수준
• 타입 안정성이나 에러 처리도 고려됨

주의할 점

1. 맹신하지 말기

• AI 답변을 그대로 사용하지 말고 상황에 맞게 선택적 활용
• 복잡한 아키텍처는 오버엔지니어링일 수 있음

2. 제약사항 명확히 하기

• 프로젝트의 현실적 제약사항을 구체적으로 전달
• 단계별로 피드백하며 방향 조정

3. 테스트와 검증

• AI가 생성한 코드도 반드시 테스트 필요
• 엣지 케이스나 성능 이슈 확인

마무리

급박한 요구사항 앞에서 AI를 활용한 개발은 매우 효과적이었어요. 특히 복잡한 알고리즘이나 생소한 기술을 빠르게 학습하고 적용해야 할 때 AI의 도움이 컸습니다.

하지만 AI는 도구일 뿐이고, 명확한 문제 정의와 단계적 접근이 성공의 핵심이었어요. 제약사항을 구체적으로 전달하고, AI의 답변을 선택적으로 활용하며, 실제 프로덕션에 맞게 조정하는 과정이 중요했습니다.

AI는 빠른 문제 해결에 있어 강력한 도구였지만, 그보다 더 중요한 건 문제를 정확히 정의하고, 제약조건을 분명히 전달하는 사용자 스킬이였어요.

이번 경험은 단순한 코드 구현을 넘어, AI를 활용한 실무 중심 개발 사고방식을 체득하는 기회가 되었습니다.