01 · About
사용자 경험을 빚는 프론트엔드 개발자
흙을 빚던 도예과 학생에서, 사용자 경험을 빚어내는 프론트엔드 개발자로. 새로운 영역에도 망설임 없이 도전하며, 기능과 디자인, 기술과 감성의 균형을 맞춘 UI/UX를 만듭니다. 빠르게 변하는 기술 환경 속에서도 유연하게 대응하고, 사용자의 일상에 실질적인 가치를 더하는 경험을 만들어갑니다.
01
실행력
고민보단 실행. 작은 실행이 큰 변화를 만든다는 믿음으로 새로운 기술과 영역에 망설임 없이 도전합니다.
02
문제 해결
단순한 기능 구현을 넘어 사용자 경험과 비즈니스 임팩트를 함께 고려하며 주도적으로 문제를 해결합니다.
03
협업
백엔드, 기획자와 적극적으로 커뮤니케이션하며 화면 구조를 설계하고 개선 방향을 함께 제안합니다.
02 · Skills
Skills
Frontend
React
React Native
Next.js
TypeScript
JavaScript
HTML
CSS
Sass
Less
Tailwind CSS
GraphQL
jQuery
PHP
State Management
Redux
Zustand
Recoil
Apollo Client
Tools & Collaboration
Figma
Photoshop
Illustrator
Jira
Confluence
03 · Career
Career
캐치시큐
Front-End Developer
2024.06 ~ 재직중
ReactNext.jsTypeScriptZustandReduxTailwind CSSStyled-componentsChart.js
환경 · AWS / NCP 운영, REST API 연동
협업 방식 · 기능 단위 목적 조직(스쿼드) 내 프론트엔드 파트 주도, 최근에는 백엔드 영역까지 함께 담당하며 풀스택 개발 범위로 확장, 기획/디자인/백엔드와 API 스펙 선제적 조율 및 UI/UX 프로토타이핑 커뮤니케이션 주도. AX 전환에 따라 디자인·구현·테스트·검증·PR·배포 전 과정에 AI를 적극 활용한 업무 자동화 및 효율 극대화 추진 중
01
대규모 레거시 프로젝트 E2E 테스트 자동화 구축 및 핵심 기능 검증
진행 중- 내용
- Playwright 기반 E2E 테스트 자동화 파이프라인 도입으로 방대한 기존 서비스의 안정적인 기능 유지 및 배포 사이클 단축 추진
- 최적화
- 결제/인증 등 주요 비즈니스 영역을 우선순위별로 라벨링하여 리스크가 높은 핵심 로직부터 단계적 테스트 케이스 구축
- 성과
- 대규모 변경 및 신규 기능 배포 시 사이드 이펙트를 사전 감지하는 회귀 테스트 자동화 구현
02
폐쇄망 온프레미스 사내 정책 위키 & RAG 인프라 구축
- 내용
- Docker Compose 기반 온프레미스 환경 구성 및 외부 인바운드 100% 차단 폐쇄망 구현, GitHub 정책 저장소의 PR/Merge 체계와 Wiki.js Git Storage 연동으로 Single Source of Truth 정책 워크플로우 마련
- 최적화
- Read-Only PAT 적용 및 RBAC 권한 분리(전사 Read-Only)로 보안 하드닝
- 성과
- crontab 기반 AWS ECR 자동 백업 구축, CLI 프롬프트 연동 정책 조회 표준화
03
프론트엔드 예외 처리 및 에러 바운더리(Error Boundary) 구축
- 내용
- React Error Boundary 및 폴백 UI 도입으로 런타임 에러로 인한 전체 화면 멈춤(Whiteout) 방지 및 해당 영역만 안전하게 복구되는 UI 구현
- 최적화
- 결제, 라이선스, API 연동 등 주요 비즈니스 모듈별 에러 바운더리 분리 적용으로 장애 파급 범위 최소화, API 요청 실패·네트워크 끊김 등 비동기 예외를 에러 바운더리와 연동하여 일관된 안내 및 재시도(Retry) 버튼 제공
- 성과
- 예외 발생 시 에러 스택 및 맥락 데이터를 모니터링/로깅 서버로 전송하도록 연동하여 빠른 장애 인지 체계 확보
04
결제 및 인증 아키텍처 개선
비즈니스 핵심 로직 담당- 내용
- 라이선스 구매, 정기 구독 관리, PG사(KG이니시스) 결제 및 본인 인증 연동 모듈 개발
- 최적화
- REST API 기반 비동기 결제 처리 흐름 최적화 및 사용자 이탈 방지를 위한 단계별 예외 처리 시나리오 설계
- 성과
- 결제 파이프라인 재구성을 통한 사용자 이탈 구간 최소화, 결제 성공률 및 인증 안정성 대폭 개선
05
SSO 로그인 및 2FA 인증 구현
- 내용
- 고객사 계정 시스템과 연동한 SSO 로그인 기능 개발, EMAIL, OTP 인증번호 기반 2FA 플로우 구현, 세션 연장 로직 개선
- 최적화
- Access/Refresh 토큰 갱신 및 세션 만료 처리 로직 설계, 인증 실패·재시도 상황에 대한 예외 처리 강화
- 성과
- 통합 로그인 환경 구축으로 사용자 접근성 개선 및 이중 인증 도입을 통한 서비스 보안 등급 강화
06
Admin 페이지 개발 및 서비스 대시보드 고도화
- 내용
- 캐치시큐 어드민 페이지 신규 개발, 서비스 대시보드 개선을 위한 Chart.js 기반 통계 대시보드 및 데이터 관리 시스템 구축
- 최적화
- 복잡한 대용량 로그 데이터 탐색(조건별 검색/필터/컴포넌트 추상화) UX 개선 및 엑셀 다운로드 최적화
- 성과
- 어드민 페이지 신규 구축 및 운영 담당자의 데이터 탐색·가시성 효율 극대화, 복잡도 해소
07
대용량 데이터 처리 및 렌더링 성능 최적화
- 내용
- 개인정보 대용량 데이터(CSV 기반 최대 10만 건) 비동기 업로드/파싱 처리 파이프라인 구현
- 최적화
- 브라우저 렌더링 성능 향상을 위한 Reflow/Repaint 최소화 작업(React.memo 및 컴포넌트 격리) 적용, Skeleton UI(HOC) 설계를 통한 API 응답 지연 구간 체감 로딩 속도 최적화
- 성과
- 대용량 핸들링 시 브라우저 메인 스레드 병목 해결, 안정적인 대용량 처리 UI 구현
08
보안 컴플라이언스(ISMS-P, CSAP) 대응 및 인증 구조 고도화
- 내용
- API 요청 헤더 보안 강화, 토큰 기반 웹 스토리지 보안 격리 및 역할 기반(Role-based) 접근 제어 구현
- 성과
- 보안 감사 표준 규격 대응 만족, 유저 인증 흐름의 일관성 및 유지보수성 확보
09
글로벌 확장 대비 다국어(i18n) 아키텍처 전면 도입
- 내용
- i18n 라이브러리 기반 800개 이상 컴포넌트/페이지의 번역 상태 관리 구조 설계 및 자동화 가이드 수립
- 성과
- 다국어 번역 비즈니스 로직 분리로 재사용성 및 글로벌 확장 기반 마련
10
외부 협력사 이기종 통합 보안 솔루션 개발
- 내용
- 타 보안 기업과의 협업을 위한 단일 SSO 연동 및 연합 데이터 시각화 대시보드 개발, API 정합성 조율
- 성과
- 기술 협업 솔루션의 완성도를 인정받아 통합보안 관련 시상식 '은상' 수상 기여
플랫큐브
Front-End Intern
2023.12 ~ 2024.05
ReactNext.jsTypeScriptGraphQL
01
무신사 내부 시스템 개발
- 내용
- 무신사 내부 가상 환경 및 SSO 로그인, GraphQL API 연동 기반 무한 스크롤 시스템 개발
- 성과
- PC/Mobile 반응형 레이아웃 다변화 대응을 포함한 내부 시스템 100% 단독 개발 성과 달성
02
메디컬 소프트 및 패션비즈 웹사이트 리뉴얼
- 내용
- 미디어/의료 정보성 레이아웃 마크업 구조 정비 및 시각적 사용성 개선
- 성과
- 시맨틱 마크업 설계를 통한 웹 접근성(WCAG) 표준 준수 및 개선, 어드민 커스터마이징이 가능한 유연한 레이아웃 구조 구현
04 · Projects
Projects
05 · Contact