프론트엔드 개발자

후원 관리 시스템 구축

2025.11 ~ 2025.12

한 줄 요약: 후원자, 후원금, 수혜자 및 물품 관리 기능을 통합하여 복잡한 후원 업무 프로세스를 자동화하고 효율성을 극대화한 관리자 웹 서비스를 구축했습니다.

주요 역할 및 성과:

- React 19 & TypeScript 도입: 최신 React 생태계를 기반으로 타입 안정성이 보장된 견고한 아키텍처를 설계하여 유지보수성을 크게 향상시킴 (상세 보기)
• 데이터 무결성 확보: React Hook Form과 Zod를 활용해 복잡한 후원 데이터의 유효성 검증 로직을 표준화하고, **데이터 입력 오류를 사전에 방지**
• 서버 상태 관리 최적화: React Query(TanStack Query) v5를 도입하여 데이터 캐싱 및 동기화를 효율적으로 처리하고, **사용자 경험(UX)을 개선**
• 모던 디자인 시스템 구축: TailwindCSS v4와 Radix UI를 기반으로 확장 가능한 UI 컴포넌트 시스템을 구축하여 개발 생산성을 높임

React 19 TypeScript Vite React Query TailwindCSS

결제 모듈 개발

2025.09

한 줄 요약: 기존 결제 모듈을 다른 PG사의 결제 모듈로 결제를 모두 처리할 수 있는 신규 결제 기능을 서비스에 안정적으로 도입하는 풀스택 프로젝트입니다.

주요 역할 및 성과:

• 프론트엔드: 사용자가 결제 정보를 입력하고 프로세스를 진행할 수 있는 직관적인 UI/UX 구현
• 백엔드: 결제 API 설계부터 DB 스키마 정의, 결제 내역 저장 및 PG사 연동 검증 로직까지 직접 개발
• 풀스택 개발을 통해 **서비스의 핵심 비즈니스 로직 확장성**을 강화하고 안정적인 결제 시스템을 구축

TypeScript PHP MySQL

급여 계산 로직 테스트케이스 구축

2025.08

한 줄 요약: 복잡한 급여 계산 로직의 정확성을 검증하고 배포 안정성을 높이기 위해 PHP assert를 이용한 테스트 케이스를 구축했습니다.

주요 역할 및 성과:

• 다양한 고용 형태와 근무 조건을 기반으로 **엣지 케이스를 포함한 테스트 케이스를 직접 작성**
• PHP의 `assert` 함수를 활용하여 유닛 테스트를 구성하고, 로직별 정확성을 자동으로 검증하는 시스템을 마련함
• 수동 테스트에 의존하던 기존 방식에서 벗어나 **배포 전 오류를 사전에 방지**하고 서비스 안정성을 크게 확보

PHP

React Native 앱 고도화 및 Expo 마이그레이션

2025.07 ~ 진행중

한 줄 요약: Bare Workflow 기반 앱을 Expo 환경으로 이전하여 **개발 환경의 생산성 향상과 배포 프로세스 자동화**를 목표로 마이그레이션을 진행하고 있습니다.

주요 역할 및 성과:

• Expo 마이그레이션 주도: Bare Workflow의 네이티브 모듈 의존성을 제거하고 Expo SDK로 전환하는 작업을 수행 중
• 개발 환경 표준화 시도: 복잡한 로컬 빌드 환경을 Expo 기반으로 통일하여 협업 효율성을 높이기 위한 기반 마련
• 기존 앱 유지보수 병행: 마이그레이션과 동시에 라이브 서비스의 오류 대응 및 기능 개선을 안정적으로 수행

React Native Expo TypeScript

웹 컴포넌트 라이브러리 및 스토리북 구축

2024.08 ~ 진행중

한 줄 요약: 특정 프레임워크에 종속되지 않는 재사용 가능한 UI 컴포넌트를 개발하고, 스토리북을 통해 디자인 시스템을 구축하는 프로젝트입니다.

주요 역할 및 성과:

• Web Components 표준을 활용하여 캡슐화된 UI 컴포넌트(Button, Icon 등)를 직접 개발하여 기술적 이해도를 높임
- Storybook을 도입 및 설정하여 컴포넌트를 시각적으로 문서화하고, 디자이너 및 동료 개발자와의 협업 효율성을 증대시킴 (상세 보기)
• 반복적인 UI 개발 시간을 단축하여 **프로젝트의 전반적인 생산성 향상**에 기여

Web Components Storybook JavaScript

레거시 프론트엔드 시스템 개선 및 모던화

2024.07 ~ 진행중

한 줄 요약: Vanilla JS 기반의 레거시 시스템에 TypeScript, Webpack 등을 도입하여 모던 개발 환경을 구축하고 안정성을 높인 프로젝트입니다.

주요 역할 및 성과:

• 주도적으로 TypeScript를 도입하여 컴파일 단계에서 잠재적 오류를 사전에 차단하고, **런타임 에러를 감소시킴**
• IDE의 자동 완성 및 타입 추론 기능을 활용하여 **코드 가독성과 유지보수 효율성을 증대**시킴
• Webpack과 Babel 환경을 직접 구축하여 모듈 기반 개발 환경을 마련하고 최신 문법 도입의 기반을 다짐

TypeScript Webpack Babel

퇴직금 계산 기능 구현

2024.04 ~ 2024.06

한 줄 요약: 사용자가 퇴직금을 정확하게 계산하고 그 결과를 PDF로 저장 및 출력할 수 있는 기능을 개발했습니다.

주요 역할 및 성과:

• Vanilla JS로 복잡한 퇴직금 계산 로직을 구현하고, 사용자가 쉽게 정보를 입력할 수 있는 UI를 개발
• PHP와 Mpdf 라이브러리를 이용해 계산 결과를 PDF 문서로 동적 생성하는 기능을 구현
• 수동 계산으로 발생하던 **인적 오류를 줄여 계산 정확도를 높이고** 신고 및 관리 효율성을 향상시킴

Vanilla JS PHP Mpdf

Notion 스타일의 블록 기반 웹 에디터 개발

2023.12 ~ 2024.01

한 줄 요약: `contenteditable` 속성을 활용하여 사용자가 직관적으로 문서를 편집할 수 있는 블록 기반의 웹 에디터를 개발했습니다.

주요 역할 및 성과:

• Vanilla JS만으로 블록 생성/수정/삭제 로직을 직접 구현하며 브라우저 동작 원리에 대한 깊은 이해를 얻음
• 코드 블록, 자동 번호, 구분선 기능등을 개발하여 **사용자의 문서 작성 생산성을 크게 향상**시킴
• 다양한 콘텐츠 블록을 구현하여 **서비스의 핵심 경쟁력 확보**에 기여

Vanilla JS HTML(contenteditable) PHP

휴램프로 (노무사 플랫폼) 신규 개발

2023.10 ~ 2023.12

한 줄 요약: 노무사의 복잡한 업무를 효율적으로 관리할 수 있는 React 기반의 SaaS 플랫폼을 신규 개발했습니다.

주요 역할 및 성과:

• React Query를 활용하여 서버 상태를 관리하고, 비동기 데이터 처리 로직을 효율화하여 서비스 안정성을 높임
- CRA에서 Vite로 마이그레이션을 주도하여 빌드 시간을 **약 67% 단축(90초 → 30초)** 시키고 개발 생산성을 대폭 향상시킴 (상세 보기)
• Ant Design과 TailwindCSS를 조합하여 재사용 가능한 컴포넌트를 설계하고, **UI 개발 시간을 단축**함

React React Query Vite Ant Design

전자계약 시스템 구축

2022.11 ~ 2022.12

한 줄 요약: 전자 서명 및 카카오 알림톡을 연동하여 계약 프로세스를 디지털화하고 사용 편의성을 높였습니다.

주요 역할 및 성과:

• 계약서 생성부터 서명 요청, 완료 알림까지 이어지는 전체 프로세스의 사용자 인터페이스(UI)를 설계 및 개발
• 기존 오프라인 계약 방식의 번거로움을 해소하고 **계약서 관리 편의성 및 프로세스 효율성을 크게 향상**시킴

Vanilla JS PHP

휴램 홈페이지 리뉴얼 및 프로그램 리디자인

2022.07 ~ 2022.10

한 줄 요약: 노후화된 기존 서비스의 디자인 시스템을 전면 개편하여 사용자 경험과 브랜드 일관성을 향상시켰습니다.

주요 역할 및 성과:

• 새로운 디자인 시스템을 도입하고, 서비스 전반의 UI/UX를 개선하여 사용성을 높임
• **디자인 일관성을 확보**하고 브랜드 이미지를 제고하는 데 기여

Vanilla JS PHP

더존 아마란스 전자노무계약서 메뉴 구현

2021.04 ~ 2022.06

한 줄 요약: 더존 ERP 내에 연동되는 전자계약 서비스를 Micro-Frontend 아키텍처를 적용하여 개발한 첫 React 프로젝트입니다.

주요 역할 및 성과:

• **React 클래스형 컴포넌트**와 생명주기 메서드를 사용하여 메뉴의 전체 UI와 상태 관리 로직을 구현
• **Micro-Frontend 아키텍처를 적용**하여 ERP 환경에 독립적으로 배포 및 실행될 수 있는 메뉴를 성공적으로 설계함

React 16 Micro-Frontend

정희현