미리보기

도메인(BackOffice, CMS 등) 신규 개발 및 유지보수

레거시 프로젝트 마이그레이션

레거시 프로젝트 마이그레이션을 통해 Route Handler, Loading UI, Error Boundary의 최적화를 통해 사용자 경험과 웹서비스 안정성 향상

• Nextjs 메이저 버전업(12v to 14v)을 통한 pages router 구조에서 app router 구조로 마이그레이션

• React 프로젝트에서 Next.js로의 마이그레이션

GraphQL & REST API 연동 및 상태관리

전역상태관리 라이브러리(Zustand) 활용

• Slice pattern을 이용하여 모듈성, 재사용성, 유지보수성 향상

비동기 상태관리 라이브러리(Apollo-client)를 사용하여 효율적인 상태관리(데이터 캐싱 및 상태 업데이트)

Websocket을 활용한 개발

Websocket을 활용하여 실시간 데이터 통신이 가능한 Subscription 기능 개발로, 기존에 여러 외부 도구를 사용하던 업무 방식을 백오피스 시스템 내 단일 데이터 화면으로 통합. 이로 따라 데이터 접근성과 처리 속도가 크게 향상되며, 업무 자동화와 효율성 기존 대비 141% 증가

B2B 프로젝트 개발

• java, 스프링 프레임워크와 RDB(MariaDB)를 활용한 VoC(Voice of the Customer) 프로젝트 개발
  • jQuery와 Ajax를 활용하여 동적 데이터를 활용한 UI 개발
  • Ajax를 활용해 페이지 새로고침 없이 필요한 데이터만 비동기적으로 패치 및 업데이트 UX 향상
  • 스프링 JDBC를 사용하여 데이터베이스 SQL CRUD 개발

목적

• 프로젝트별 분산된 UI/UX를 통합하고 재사용성을 높이기 위한 디자인 시스템 구축

• Design Token 파이프라인 자동화를 통한 디자인-개발 워크플로우 최적화

담당 구현 기능

Design Token 파이프라인 자동화를 통한 디자인-개발 워크플로우 최적화

• Figma to JSON 자동화를 통한 디자인 토큰 동기화 구현

• Github 기반 단일 레포 및 버전 관리 통합

결과

디자인 토큰 관리 구축

• 디자인 토큰 자동 변환으로 휴먼에러 제거

• 토큰 네이밍 자동화로 디자인-개발 간 커뮤니케이션 효율 향상

워크플로우 최적화

• Github 기반 실시간 동기화로 버전 관리 용이

• 중앙화된 토큰 관리로 디자인 시스템 일관성 확보

목적

• 기존 백오피스 기능 중 불편한점을 피드백받아 CS처리팀 업무 효율화

담당 구현 기능

고객 특이 사항 초기화

• 목표 - 수동 작업 자동화

• 성과 - 500건을 기준으로 처리 시간이 83분에서 1분으로 단축되어 처리 속도 98.8% 향상

글 수정 시 유효성 추가로 수정 데이터 손실 방지

• 목표 - 글 수정 중 페이지 이동 시 수정 중인 글이 있음을 경고하는 유효성 검사를 추가하여 휴먼 에러 방지

• 성과 - 데이터 손실을 방지하여 시스템의 신뢰성 향상

결과

• 총 7일간 4개의 기능 배포로 CS 처리팀 전체적인 업무 효율화 5% 증가

• 관련 링크

목적

• pages router 구조에서 app router 구조로 마이그레이션

• 14버전 기능(Pages and Layouts, Error Handling, Route Handlers 등)을 활용한 서비스 품질 증가 및 DX 개선

담당 구현 기능

• pages router 구조에서 app router 구조로 마이그레이션

• headlessUI(radix 및 shadcn), Tailwindcss를 활용한 문서화 대체 및 시스템 활용

• Middleware를 활용한 라우트 프로텍트 설정

결과

• 라우트 이동 속도 85% 향상 (최대 16초에서 평균 2.4초)

• headlessUI, Tailwindcss 도입하여 DX 개선 (문서화 대체 및 시스템 활용)

목적

• 신청 조건에 따른 학생과 선생님의 과외 매칭 시스템 개발

• 기존 외부툴을 사용하여 진행했던 업무 사내 백오피스 내재화

담당 구현 기능

• Websocket을 활용한 실시간 통신 상태 변경 시 트리거 없이 유저 목록 변경

• 5가지 매칭 목록(메인, 대기, 준비, 매칭 중, 보류) 페이지 조회 및 검색

• 유저 상세정보 조회

• 상태 업데이트 및 메모 등록 및 수정

결과

• 업무 자동화와 효율성 기존 대비 141% 증가

목적

• 유저의 매칭 수락 및 거절 선택에 따른 카카오톡 알림톡 발송 업무 자동화

담당 구현 기능

• 매칭정보 조회 및 매칭 성사 화면 개발

결과

• 업무 처리 시간 95% 감소(20분에서 1분)

• 과외 대기 시간 단축으로 매출 상승

목적

• 모두싸인 계약서 유저 상세정보 연동 및 계약서 진행 자동화 구축

• 기존 외부 툴을 사용하여 진행했던 업무 사내 백오피스 내재화

담당 구현 기능

• 유저목록 조회 및 검색

• 엑셀 다운로드

결과

• 업무 처리 시간 83% 단축(2시간에서 20분)으로 인한 업무 효율 향상

목적

• PDF 및 교재 판매를 전문으로 하는 전자상거래 플랫폼 '설탭북스'를 개발, 런칭

담당 구현 기능

• 장바구니 담기

• 결제 및 배송 정보(배송 주소 등록 및 수정, 신용카드 등록)

• 결제

결과

• 오픈 후 당월 328권/206명 구매를 통한 수익 증대 및 과외 전환율 2% 증가

• 구매 고객 패스(멤버십) 전환율 28%

목적

• 통합 백오피스 VoC(Voice of Customer) 구축

• 랜딩 홈페이지 구축 (멤버십의 종류 안내, 가입 및 쿠폰 사용)

팀 구성

• 총 6명 (PM 및 기획 1명, 풀스택 개발 5명)

담당 구현 기능

• 백오피스

  • 회원목록 조회 및 등록 및 수정 화면 및 CRUD

  • 엑셀 다운로드

• 랜딩

  • 멤버십 안내 목록 화면

  • 쿠폰 사용 바코드 인식 기능

도전과제 및 솔루션

• 개발의 A-Z를 경험
  프로젝트 초기에는 명세 문서를 기반으로 요구 사항을 분석하고 기획하는 과정에서 팀원들 간의 의사소통과 협업이 중요했습니다. 함께 명세 문서를 검토하고 역할을 분배하며 개발 진행 상황을 확인하는 스크럼 미팅을 주기적으로 진행하여 개발 프로세스에 대한 경험과 이해를 높였습니다. 배포 단계에서도 팀원들 간의 소통과 협업이 필수적이었습니다. 각 업무를 명확히 분담하고 문제 발생 시 빠르게 대응하며 배포 일정을 준수하기 위해 노력했습니다. 이러한 경험을 통해 전체 개발 사이클을 경험하고 자신감을 키웠으며, 개발자로서의 역량을 향상할 수 있었습니다.

결과

• 기존 호텔별 각 로컬 DB로 관리하던 데이터를 통합 DB를 구성하여 전국 지점 데이터를 연동