방문해 주셔서 감사합니다!

잠시만 기다려 주세요...

0%

ABOUT ME

프로필 이미지 입니다.

Introduce

4년간 스타트업부터 솔루션 기업까지 다양한 환경을 거치면서, 기능 하나를 완성하는 데는 코드만 있는 게 아니라 배포, 운영, 팀 간 협의가 모두 맞물려야 한다는 걸 경험으로 알게 됐습니다. 배포 흐름이 정비되고, 이슈가 생겼을 때 누구든 빠르게 파악할 수 있을 때 서비스가 더 단단해진다고 느낍니다. 그 생각을 바탕으로 팀과 함께 우리 환경에 맞는 방식을 직접 만들어왔습니다. Jenkins 기반 CI/CD 파이프라인을 도입해 흩어진 배포 기준을 하나로 모았고, GlitchTip으로 오류 감지 체계를 잡아 문제가 생겼을 때 팀 누구든 즉각 인지할 수 있는 흐름을 만들었습니다. 운영 흐름이 자리를 잡아가면서, 코드 구조도 함께 개선해야 할 필요를 느꼈습니다. React 프로젝트를 팀원들과 방향을 맞춰가며 모노레포 기반으로 재정비했고, 공통 컴포넌트는 Storybook으로 문서화해 서로 설명하는 비용을 줄였습니다. API 스펙 정의 단계부터 백엔드와 함께 맞춰갈 수 있도록 Hoppscotch를 사내 배포해 공유 환경을 직접 구축하기도 했습니다. 도구와 구조를 정비하는 것과 함께, 팀 안에 지식이 제대로 쌓일 수 있도록 Wiki.js로 온보딩 자료, 개발 가이드, 운영 매뉴얼을 포함한 260개 이상의 문서를 아카이빙했습니다. 현재 사내 3개 팀 30명 이상이 상시 활용하는 협업 인프라로 자리잡았습니다. 환경이 갖춰지길 기다리기보다 직접 만들어온 편이었고, 앞으로도 그런 방식으로 팀에 기여하고 싶습니다.

Sign Image

career

아이페이지온

(2025. 01 ~ 진행 중)

FMC-ADMIN 설계 및 제품화

(2025. 05 ~ 2026. 01)

유·무선 통화 서비스의 기업·라이선스·운영 정책 통합 관리 어드민

제품 초기 설계부터 배포까지 주도하며 제품화 기준 정립
GlitchTip·Grafana 기반 자체 모니터링 환경으로 전환해 운영 비용 절감
Discord Webhook과 연동해 ±10초 로그 스냅샷 자동 알림 체계 구축
shadcn/ui 기반 공통 컴포넌트를 모노레포로 분리하고 Storybook 문서화·배포 흐름 연결
Technologies
React
TypeScript
Shadcn/ui
Storybook
GlitchTip
Grafana

사내 위키(Wiki.js) 기반 협업 시스템 구축 및 운영

(2025. 03 ~ )

Wiki.js 자체 호스팅 환경을 구축하고 제품 이력·운영 지식 통합 관리

Wiki.js를 온프레미스로 구축해 외부 SaaS 의존도 축소
20+ 제품군의 배포 버전과 변경 이력을 한곳에서 관리
주간 보고를 Word 문서에서 Wiki CMS로 전환하고 공통 템플릿 적용
온보딩 자료·개발 가이드·운영 매뉴얼을 위키에 아카이빙해 지식 전파 체계화
Technologies
Wiki.js
Docker

프론트엔드 빌드 Jenkins 기반 CI/CD 구축

(2025. 01 ~ 2025. 05)

분산된 제품 레포의 빌드/배포 Jenkins 통합 관리 및 운영

20+ 분산 레포의 빌드·배포 체계를 Jenkins로 통합해 운영 일관성 확보
개발·스테이징·운영 환경별 스크립트와 실행 방식을 정비해 배포 흐름 표준화
RPM 수동 배포(yum/rpm)를 권한 기반 CI/CD 파이프라인으로 전환
Technologies
Jenkins
Docker
Discord Webhook

EMS 제품군 프론트엔드 스택 고도화 및 유지보수

(2025. 01 ~ )

시스템 통신 장비를 제어하고 발생 알람을 실시간으로 수집·모니터링하는 관제 시스템

CRA/Craco에서 Vite로 전환해 느린 빌드 환경 개선
React 16 · Node 16 기반 레거시 환경을 React 19 · Node 2x.x로 마이그레이션하며 의존성 이슈 정리
Kendo UI 의존도를 줄이고 shadcn/ui 중심으로 UI 구조 재정비
Husky 도입과 ESLint·Prettier 설정 재구성으로 개발 규칙 표준화
Technologies
React
Vite
TypeScript
Web Worker
Shadcn/ui
TailwindCSS

스마트스코어

(2023. 09 ~ 2024. 09)

스마트스코어 앱 5.0 리뉴얼

(2023. 12 ~ 2024. 09)

MY스코어 신규 개발과 큐박스 공통 컴포넌트/관리자 구축을 포함한 앱 5.0 리뉴얼

MY스코어 6개 핵심 기능을 개발하고 콘텐츠·사용자 데이터 관리 페이지 구축
큐박스/큐레이션 공통 컴포넌트를 설계하고 광고 등록·노출 조건 설정 관리자 페이지 구축
Highcharts·Chart.js로 사용자 활동과 통계 데이터 시각화
Technologies
Vue.js
Vuex
Highcharts
Chart.js

라이브커머스 솔루션 도입

(2023. 09 ~ 2023. 12)

실시간 라이브 방송 중 상품 소개와 구매를 연결해 고객 참여와 전환을 높이는 라이브커머스 서비스

레거시 Vue · Node 기반 WebView 환경에 샵라이브 솔루션 연동
레거시 환경과 SDK 간 Vue 버전 충돌을 해결하고 기존 구조에 맞게 기능 커스터마이징
외부 업체와 협의하며 API 연동 이슈를 조율하고 내부 적용 방향 정리
Technologies
Vue.js
Vuex
WebView
Hls.js

위시모바일

(2021. 11 ~ 2023. 02)

다크 슬레이어:방치형 RPG 어드민 툴 구축

(2022. 12 ~ 2023. 02)

액션 방치형 RPG 모바일 게임 운영, 통계 어드민

50+ 요구사항을 정리하고 화면 설계 기반으로 관리자 기능 구조 정의
모바일 게임 운영에 필요한 관리자·통계 툴 전반 개발
초기 구현은 JavaScript로 빠르게 진행하고 이후 TypeScript로 점진 전환
사용자 역할에 따라 페이지 접근 권한을 분리해 운영 제어 강화
Technologies
React
TypeScript
Redux Toolkit
Tailwind CSS

Creta (NFT 마켓 플레이스)

(2022. 03 ~ 2022. 11)

MetaMask 지갑을 이용한 NFT 판매 웹사이트 (Polygon)

Next.js·Tailwind 환경에서 UI를 구현하고 Web3.js 기반 NFT 거래 기능 개발
민팅 테스트 케이스를 반복 검증해 가스비 산정 로직을 보완하고 거래 비용 최적화
Redux 기반 전역 상태를 적용하며 복잡한 데이터 흐름 정리
Technologies
Next.js
Web3.js
Redux
Tailwind CSS
Framer-motion

New SSEM

(2021. 11 ~ 2022. 03)

서울 비대면 온라인 교육플랫폼, 화상 수업 웹사이트

처음으로 프론트엔드 개발을 맡아 Vue 기반 화면과 기능 구현
라이프사이클을 활용해 동적 데이터 처리와 화면 반응성 개선
Axios·Vuex 기반 API 통신 구조를 파악하며 서버 연동 흐름 정리
Technologies
Spring Framework
Vue.js
JQuery

skills

실무에서 직접 다뤄본 기술과 도구들입니다

Frontend Stack

JavaScript
TypeScript
React
Vite
Next.js
Vue.js
Playwright
TailwindCSS
TanStack Query: React Query
Storybook

React·Next.js를 단순 UI 구현 도구로 사용하는 것을 넘어, 페이지 구조와 상태 흐름이 명확하게 드러나는 아키텍처 설계를 지향합니다.

TypeScript를 기반으로 도메인 모델과 API 계약을 타입 수준에서 정의하며, 명확한 타입 설계가 곧 협업 비용을 줄이는 구조적 장치라고 생각합니다.

Webpack·Vite 번들러를 모두 다뤄본 경험을 바탕으로 빌드 구조를 이해하고, 개발 생산성과 사용자 경험 사이의 균형을 고려합니다.

TailwindCSS·Storybook을 활용해 디자인 일관성을 유지하고, 컴포넌트 단위의 사용 기준과 상태 정의를 문서화합니다.

TanStack Query(React Query) 기반 서버 상태 관리 패턴을 일관되게 적용하며, 예측 가능한 데이터 흐름과 명확한 책임 분리 구조를 설계합니다.

Playwright 기반 E2E 테스트로 핵심 사용자 시나리오를 검증하고, 유닛 테스트·크로스 브라우저 호환성 체크까지 포함해 안정성을 개인 감각이 아닌 구조로 확보하고자 합니다.

Infra & Tools

Jenkins
Sentry
GlitchTip
Hoppscotch
Wiki.js
Git
Slack
Jira
Confluence
Notion

Jenkins 기반 CI/CD 파이프라인을 설계해 다수 레포지토리의 빌드·배포 흐름을 표준화하고, 배포 과정을 수작업이 아닌 시스템 책임으로 전환하는 것을 지향합니다.

GlitchTip·Discord Webhook 연계를 통해 예외 발생 시점의 로그와 알림 흐름을 자동화하고, 장애 대응이 개인의 감각이 아닌 구조 위에서 이루어지도록 설계합니다.

Wiki.js·Confluence 기반 문서화로 제품 이력·패키지 관리·온보딩 자료·기술 공유까지 구조화하고, 지식이 개인이 아닌 팀 자산으로 축적되는 환경을 만듭니다.

Hoppscotch를 사내 배포해 백엔드와 API 스펙을 공유 환경에서 함께 정의하고, 모호한 구간을 구현 전에 합의해 협업 비용이 코드가 아닌 설계 단계에서 줄어드는 구조를 지향합니다.

Slack Webhook·봇을 직접 구성해 배포 결과·모니터링 알람을 팀 채널로 연결했고, 적용 경험과 설정 방식을 팀에 공유해 함께 활용할 수 있는 기반을 만들었습니다.

Jira 기반 이슈 티켓과 WBS 관리로 기능 단위 작업을 구조화하고, Git 브랜치·PR과 티켓을 연결해 작업 맥락이 코드 수준까지 추적 가능한 흐름을 지향합니다.

AI & IDE

Claude
codex:openai
Antigravity
GitHub Copilot
Cursor
Kiro

AI 결과물 검증 프로세스를 두어 제안 코드를 그대로 수용하지 않고, 맥락·안정성·성능 기준으로 재검토합니다.

신기술 도입에 열린 태도로 MCP 등 새로운 기술을 직접 테스트하고, 실무 적용 가능성을 검토하는 과정을 즐깁니다.