1편: 레거시 시스템 현대화 - Oracle Forms에서 모던 웹으로의 여정

🚀 프로젝트 배경

최근 많은 기업들이 오래된 Oracle Forms 기반 시스템의 한계를 느끼고 있습니다. 사용자 경험이 떨어지고, 모바일 지원이 어려우며, 확장성에 제약이 있죠. 저희도 렌탈 주문관리 시스템에서 이런 문제들을 겪고 있었습니다.

주요 문제점들:

• 📱 모바일/반응형 지원 불가
• 😰 복잡하고 직관적이지 않은 UI
• 🔄 중복 입력으로 인한 비효율성
• 🔍 비효율적인 상품 검색 방식

🎯 해결 전략 수립

1. 사용자 경험 개선

기존 Forms의 복잡한 입력 과정을 분석해보니, 주문자·계약자·설치자·결제자 정보가 대부분 동일한데도 매번 따로 입력해야 했습니다.

핵심 아이디어: 일괄 적용 시스템

// 고객 정보 일괄 적용 핵심 로직
function applyToAllSections(customerData) {
    const sections = ['orderer', 'contractor', 'installer', 'payer'];
    
    sections.forEach(section => {
        applyToSection(section, customerData);
    });
    
    showToastMessage('고객 정보가 일괄 적용되었습니다 ✓', 'success');
}

2. 상품 검색 개선

기존의 단순 목록 방식에서 단계별 필터링 시스템으로 개선했습니다.

검색 플로우: 툴구분 → 모델명 → 상품명

// 단계별 상품 필터링 시스템
function filterProducts(searchQuery, tabType) {
    let results = [...allProducts];
    
    switch (tabType) {
        case 'tool':
            // 툴구분별 그룹화
            return createToolGroups(results);
        case 'model':
            // 선택된 툴의 모델명 필터링
            if (selectedTool) {
                results = results.filter(p => p.filter1 === selectedTool);
            }
            return createModelGroups(results);
        case 'product':
            // 최종 상품 목록
            return applyAllFilters(results);
    }
}

🏗️ 아키텍처 설계

모듈화된 JavaScript 구조

성능과 유지보수성을 고려해 모듈별로 분리했습니다:

// 의존성 체크 시스템
function checkDependencies() {
    const requiredModules = [
        'AlertManager', 'CustomerInfo', 'ProductSearch', 
        'AddressSearch', 'FormDataCollector'
    ];
    
    const missingModules = requiredModules.filter(module => 
        typeof window[module] === 'undefined'
    );
    
    if (missingModules.length > 0) {
        throw new Error(`필수 모듈 누락: ${missingModules.join(', ')}`);
    }
}

백엔드 API 설계

RESTful API로 데이터 처리를 분리했습니다:

@RestController
public class RentalController {
    
    @PostMapping("/api/rental/salesman/search")
    public ResponseEntity<?> getSalesmanInfo(@RequestBody SalesmanSearchDto searchDto) {
        Map<String, Object> result = rentalService.getSalesmanBySearchDto(searchDto);
        return ResponseEntity.ok(result);
    }
    
    @GetMapping("/api/rental/codes/{codeType}")
    public ResponseEntity<?> getCodes(@PathVariable String codeType) {
        String codeId = mapCodeTypeToCodeId(codeType);
        Map<String, Object> result = rentalService.getCodesByCodeId(codeId);
        return ResponseEntity.ok(result);
    }
}

📊 성능 최적화 전략

1. 디바운싱으로 검색 최적화

// 검색 입력 디바운싱
function debouncedSearch(tabName, searchValue) {
    clearTimeout(searchDebounceTimer);
    showSearchingIndicator(tabName);
    
    searchDebounceTimer = setTimeout(() => {
        performTabSearchOptimized(tabName, searchValue);
    }, 300);
}

2. 가상화된 리스트 렌더링

대량의 상품 데이터를 효율적으로 처리하기 위해 가상 스크롤링을 구현했습니다.

🎨 UI/UX 개선사항

상태 표시 시스템

각 섹션의 입력 상태를 시각적으로 표현:

.status-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.status-filled { background-color: #4CAF50; }
.status-copied { background-color: #2196F3; }
.status-editing { 
    background-color: #FF9800;
    animation: pulse 1s infinite;
}