Project Details

0→1→100을 만드는 풀스택 개발자

기간: 2023년 12월 ~ 현재운영중

B2B 출장 예약 시스템(비즈플레이)

한정된 시간과 자원으로 최선의 결과를 도출, 현대자동차 및 대기업 고객 유치

Project Photo 1
Project Photo 2
Project Photo 3
Project Photo 4
Project Photo 5

배경

출장 정산 시스템에 예약 기능 추가 요청. 고객사의 일방적이고 무리한 일정 통보와 빈번한 요구사항 변경으로 매번 새로 개발해야 하는 상황

해결한 문제들

촉박한 일정과 빈번한 요구사항 변경

상황:
  • 고객사의 일방적이고 무리한 일정 통보
  • 빈번한 요구사항 변경으로 매번 새로 개발해야 하는 상황
  • 신규 고객사 추가 시마다 전체 코드 수정 필요
해결방안:

  • 전략 패턴(Strategy Pattern) 적용으로 예약 로직을 유연하게 확장

  • Angular 컴포넌트 상속 구조 설계로 설정 파일만 수정해 신규 고객사 대응

성과:

  • 30개 고객사의 다양한 니즈 충족

  • 신규 고객사 추가 시 1~2일 내 커스터마이징 완료

  • 촉박한 일정 내 프로젝트 완료

레거시 항공 예약 시스템의 유지보수성 문제

상황:
  • 스파게티 코드로 구성된 V1 시스템
  • 간헐적인 버그 발생으로 고객 컴플레인 증가
  • 신규 기능 추가 시 과도한 시간 소요
해결방안:

  • 항공 예약 시스템 V2 전면 재개발로 구조 개선

  • 모듈화 및 컴포넌트 단위 분리로 유지보수성 향상

  • 타입 안전성 강화 (TypeScript, RxJS)

성과:

  • 운영한지 1년이 다되어 가지만, 기존 예약 시스템과 비교해서 압도적으로 버그 없이 운영 중 입니다.

  • 신규 기능 추가 및 유지보수 시간 단축

프로젝트별로 흩어진 API

상황:
  • 다수의 프런트 서비스에서 API 응답을 조작하여 사용하는 복잡한 데이터 조작이 많음
해결방안:

  • Backend for Frontend 서버 도입

  • NestJS로 중간 서버 개발하여 API 통합 및 구글맵/네이버맵 프록시 역할

성과:

  • 여러 프로젝트에서 중복된 API 응답 조작 코드를 BFF에 넣어서 프로젝트 마다 있던 중복 코드를 제거하여 유지보수성 향상

핵심기술구현

전략 패턴으로 다양한 결제 플로우 선택 기능 설계

기술적 도전:

30개 고객사마다 다른 결제 플로우

구현 방법:

전략 패턴을 적용하여 각 고객사별 ReservationStrategy 인터페이스 구현

Code Snippet

// 전략 패턴 적용 예시
interface ReservationStrategy {
  validateBooking(): boolean;
  getApprovalFlow(): ApprovalFlow;
  checkBudget(): BudgetStatus;
}

class HyundaiReservationStrategy implements ReservationStrategy { ... }
class PoscoReservationStrategy implements ReservationStrategy { ... }

효과/성과:

  • 신규 결제 플로우 추가 시 새로운 Strategy 클래스만 작성

컴포넌트 상속 구조로 고객사별 커스터마이징 시간 단축 및 안정한 코드 작성

기술적 도전:

고객사별 UI/UX 요구사항이 제각기 다름 & 복잡한 요구사항을 당일에 완료하라고 통보받는 상황이 자주 발생 -> 잦은 배포로 인한 많은 버그 발생

구현 방법:

BaseReservationComponent를 만들고 고객사별로 상속하여 필요한 부분만 오버라이드하여 기존의 시스템에 영향이 없는 안정한 코드 작성

Code Snippet

// 베이스 컴포넌트
@Component({ ... })
export class BaseReservationComponent { ... }

// 고객사별 확장
@Component({ ... })
export class HyundaiReservationComponent extends BaseReservationComponent {
  // 필요한 부분만 오버라이드
}

효과/성과:

  • 공통 로직은 상속, 차이점만 오버라이드

  • 코드 중복 최소화

정량적 성과

  • 30개 B2B 고객사 맞춤형 시스템 구축 (현대자동차, 포스코, 기아자동차 등)

  • 신규 고객사 추가 시 기존 시스템에 영향이 없어 안정적인 운영 중

  • 항공 예약 시스템 V2 재개발로 기아 복지몰 항공예약시스템 버그 발생 0건 유지중 (운영 1년 차)

  • BFF 서버 도입으로 복잡한 api 가공 후, 여러 프로젝트에 제공하여 중복 코드 제거 및 생산성 향상

기술스택

Frontend

Angular 2+, TypeScript, RxJS, NgRx

복잡한 예약 플로우와 복잡한 form의 input, selectbox, checkbox 등의 얽혀 있는 요구사항을 관리하기 위해 Angular를 선택

Backend For Frontend

NestJS, TypeScript

API 통합 및 구글맵/네이버맵 프록시 서버

담당업무

아키텍처설계

  • 전략 패턴 기반 확장 가능한 결제 시스템 설계

  • 컴포넌트 상속 구조 설계로 고객사별 커스터마이징 배포시에 기존의 시스템에 악영향 없는 안정한 코드 작성

개발

  • 항공 예약 시스템 V2 전면 재개발

  • 30개 고객사별 맞춤형 UI/UX 구현

  • NestJS BFF 서버 개발

  • B2B Admin, B2C Admin, 복지몰 프론트엔드 개발

팀리딩

  • 프런트엔드 팀 3명 리딩

  • 코드 리뷰 및 개발문서 작성

  • 신규 팀원 온보딩 및 기술 공유 미팅 주도

  • 고객사와의 기술 협의 및 일정 관리

핵심 성과 요약

복잡하고 다양한 요구사항과 매우 짧은 개발 기간에도 불구하고, 많은 고민을 하며 요구사항에 유연하게 대처할 수 있는 시스템을 위해 개선하며 운영하고 있습니다.

B2B 출장 예약 시스템(비즈플레이)
B2B 출장 예약 시스템(비즈플레이)

프로젝트 상세 문의가 있다면 연락주세요!