Frontend Engineer
Kang JiYeon
화면을 그리는 일에서 시작해, 이제는 그 뒤의 구조까지 설계하는 프론트엔드 개발자입니다.
제로트러스트 접근 관리 플랫폼의 관리자 콘솔을 개발하며 MFE 구조를 React 기반 통합 구조로 전환하는 과정을 전담했고, 여러 관리 화면과 워크플로우 에디터를 구현했습니다.
테스트 자동화와 품질 관리로 오래 잘 유지되는 프론트엔드를 지향합니다.
Career
2019-09 — 현재
Frontend Developer · 이니텍(주)
보안 솔루션 프론트엔드 개발 및 아키텍처 설계·개선 담당.
- Zero Trust 보안 플랫폼(INI-ICAM) 프론트엔드 아키텍처 설계 및 MFE → React 통합 구조 전환 전담
- 통합 인증 플랫폼(INIHUB) Cloud·On-premise 프론트엔드 개발 및 기능 고도화
- 벼룩시장 통합 플랫폼(미디어윌) 구축에 참여해 화면·UI 이슈를 개선하고 공유용 UI 컴포넌트를 Storybook으로 문서화
- E2E 테스트 자동화(Playwright) 및 단위 테스트로 품질 개선
ReactNext.jsVue.jsTypeScriptReact FlowStorybookTailwind CSSSass (SCSS)2019-02 — 2019-06
Web Publisher · 이노브
롯데백화점 통합 앱 UI 개발 및 운영.
- 웹 서비스 UI 구현 및 웹 퍼블리싱
- 서비스 운영에 따른 UI 개선 및 유지보수
HTMLCSSjQuery
Projects
INI-ICAM — 제로트러스트 통합 접근 관리(ICAM) 플랫폼
2025 - 현재Front-end Developer
신원 등록부터 자원 접근까지 사용자 여정 전체를 관리하는 제로트러스트 기반 통합 접근 관리(ICAM) 플랫폼. 인가·지속 평가·거버넌스 영역을 제공하고, 자사 제품·고객의 기존 시스템과 결합해 ICAM 전 영역을 완성한다. 이 플랫폼의 관리자 콘솔 프론트엔드를 개발하고, MFE 구조에서 React 기반 통합 구조로의 전환을 주도했다.
주요 담당
Background
초기에는 기존 Angular 기반 Host의 인증 및 공통 기능을 유지하면서 신규 서비스를 React Widget으로 개발하기 위해 MFE(Micro Frontend) 구조를 적용했습니다.
Challenge
프로젝트가 확장되면서 레거시 Angular 환경의 의존성 충돌 및 호환성 문제 해결에 지속적인 비용이 발생했고, Angular와 React를 함께 운영함에 따라 공통 기능과 개발 환경을 관리하는 복잡도도 증가했습니다.
Solution
기존 구조를 지속적으로 보완하는 것보다 장기적인 유지보수성과 개발 효율성을 고려하여 React 기반의 통합 프론트엔드 구조로 전환했습니다.
- Angular / React 이중 기술 스택을 React로 단일화
- 레거시 Angular 의존성 및 호환성 관리 부담 감소
- 인증·레이아웃 등 공통 기능 관리 구조 단순화
- 프로젝트 개발 환경 및 유지보수 체계 일원화
- 프론트엔드 개발 생산성 및 확장성 개선
Architecture Transition
개선 효과 (Before → After)
- 기술 스택 단일화 (Angular + React → React)
- 레거시 Angular 의존성·호환성 충돌 해소
- 공통 기능(인증·레이아웃) 관리 일원화
- 런타임 프레임워크 중복 로드 제거
- 개발 환경·유지보수 체계 단순화
주요 성과
제품 개발
- 관리자 콘솔 — 정책·사용자·권한 관리 UI 개발
- Workflow Editor — React Flow 기반 노드 에디터로 워크플로우를 시각적으로 구성·편집
- 모니터링 / 데이터 시각화 — 운영 지표 대시보드 및 데이터 시각화 구현
품질 & 자동화
- E2E 테스트 자동화 — Playwright로 핵심 사용자 시나리오 자동화
- 단위 테스트 — 커버리지 80% 이상 유지로 코드 품질 확보
- 문서화 자동화 — Playwright를 활용해 관리자 콘솔 사용 가이드 문서화
- AI 활용 — Claude Code·Codex로 테스트 코드 생성·보강, SonarQube 분석 결과 기반 코드 품질 개선, 데모 데이터 시드 자동화
AI Front-end Harness
2026Personal Project
Markdown 개발 표준을 AI 에이전트가 읽고 컴포넌트·테스트를 일관되게 생성하는 프론트엔드 개발 하네스.
- Markdown 개발 표준(standards · AGENTS.md)을 단일 진실 소스로 수립
- 표준을 강제하는 컴포넌트 스캐폴더 + 재사용 프롬프트 라이브러리 구축
- SonarQube 리포트 → AI 개선 → 재검증 품질 루프 설계
- 본 포트폴리오를 동일 접근으로 구축 (dogfooding)
미디어윌 벼룩시장 통합 플랫폼 구축
2024.06 - 2024.12Front-end Developer
Vue.js 기반 벼룩시장 통합 플랫폼의 프론트엔드 UI 개발 및 서비스 안정화에 참여한 프로젝트.
- 통합 테스트 단계에 투입되어 화면 및 UI 기능 관련 이슈 분석·개선
- 테스트 과정에서 발견된 UI 오류 및 기존 구현 이슈 수정
- 공유용 UI 산출물을 Storybook으로 제작·문서화하여 협업 효율 향상
- 약 6개월간 프로젝트 현장에 참여하여 통합 테스트 및 서비스 안정화 대응
INIHUB — 통합 인증 플랫폼
2022 - 2024Front-end Developer
사설인증·본인인증·2차 인증·전자서명 등 다양한 인증 수단을 하나로 통합하는 인증통합플랫폼의 프론트엔드 UI를 개발한 프로젝트.
- 다양한 인증 수단을 통합하는 모달 형태의 인증 UI 개발
- Cloud 형(Vue 3 / TypeScript)·On-premise 형(Vue 2 / JavaScript)을 각각 개발·출시
- 약 1~2년간 지속 개발 및 기능 고도화