배영현
Frontend Developer
About Me
커뮤니케이션 능력과 배우려는 태도, 그리고 긍정적인 자세를 바탕으로 성장 중인 프론트엔드 개발자 배영현입니다. 사용자 경험과 성능 최적화에 진심이며, 코드 리뷰를 통한 코드 개선을 좋아합니다. 경제금융에서의 직종전환 그리고 C#에서 프론트엔드로 전환한 과정을 통해 얻은 시야를 바탕으로, 지금은 프론트엔드 분야에서 성장하고자 하는 의지가 큽니다. 앞으로도 팀원들과의 적극적인 소통과 협업을 통해 시너지를 극대화하고, 최고의 사용자 경험을 제공하는 프론트엔드 개발자로 거듭나고자 합니다.
Experience
Tmax Soft
Frontend Developer
- JEUS 9, JEUS 21, JEUS 8.6 및 WebtoB 6 WebAdmin 프론트엔드 개발을 담당하며 엔진 관리 도메인의 복잡한 설정, 모니터링, 운영 플로우를 사용자 중심 화면으로 구조화
- Feature-Sliced Design 기반으로 도메인, 기능, 공통 UI 계층을 분리하여 신규 엔진 버전 대응과 유지보수에 유리한 프론트엔드 구조 설계 및 개선
- UI/UX 디자이너와 화면 정책, 인터랙션, 상태 표현, 오류 및 빈 값 케이스를 조율하며 운영 관리 도구의 사용성과 일관성 개선
- 각 엔진 개발자와 API 스펙, 설정 모델, 예외 케이스를 지속적으로 맞추며 프론트엔드와 엔진 간 데이터 계약 안정화
- Jest, React Testing Library 기반 테스트 코드를 작성해 주요 폼, 상태 전환, 검증 로직의 회귀를 방지하고 안정적인 배포 흐름에 기여
Tmax Gaia
Frontend Developer
- 컴포넌트의 확장성, 유연성, 재사용성, 개발자 편의성, 리액트 디자인 패턴, 웹 접근성, 성능 최적화에 신경쓰며 개발
- Type을 중요시 여겨 무작정 새로 만들지 않고 omit, pick, extends 등을 최대한 활용하고, 타입단언을 지양하며 개발
- 컴포넌트, 커스텀 훅 그리고 실제 비즈니스 로직이 담긴 Mobx 컨테이너의 로직 분리성을 중시하며 개발
- Jest, React Testing Library를 이용하여 테스트 코드를 중시하여 개발
- 레거시 코드 및 성능 관련 다양한 버그를 식별하고 해결하여 성능 최적화와 유지보수성 향상
Tilon
C# Developer -> Frontend Developer
- 입사 후 9개월 간 : 응용 프로그램 개발 + 서버 시스템 개발 및 관리
- 9개월 ~ 1년 : 위 업무 및 프론트엔드 개발 병행
- 이후 : 프론트엔드 개발
- 다양한 업무를 해본 만큼 프로그래밍적 사고 및 리서치 능력이 뛰어남
세경 하이테크
인사총무
- 개발 외 경험이지만, 이 경험을 통해 커뮤니케이션 능력을 많이 향상시킴
Personal Product
- 사용자가 이미지를 업로드하고 스타일을 선택해 AI 이미지를 생성할 수 있는 웹 기반 SaaS를 기획, 개발, 배포
- 이미지 업로드, 스타일 선택, 생성 요청, 결과 확인, 생성 히스토리까지 이어지는 핵심 사용자 플로우 구현
- 인증, 결제, 크레딧 차감, 실패 환불, 중복 요청 방지 등 실제 서비스 운영에 필요한 상태 관리 및 예외 처리 구현
- 다국어 지원과 모바일 사용성을 고려하여 글로벌 사용자를 대상으로 한 웹 서비스 구조 구성
- 배포 이후 API 비용, 결제 흐름, 사용자 행동을 고려하며 운영 가능한 제품 형태로 개선
Next.jsReactTypeScriptSupabasePaymentAI APIVercel
Projects
WebtoB 6 WebAdmin 개발
Tmax Soft- WebtoB 6 WebAdmin의 설정, 관리, 운영 화면을 개발하며 웹 서버 엔진 도메인에 맞는 프론트엔드 플로우 구현
- FSD 기반으로 엔진 도메인 로직과 공통 UI 로직을 분리하여 기능 확장과 유지보수가 쉬운 구조로 개선
- 목록, 상세, 편집, 검증 플로우에서 반복되는 Form, Table, Modal 패턴을 공통화해 화면 간 사용성과 개발 생산성 향상
- 엔진 개발자와 설정 모델, API 계약, 예외 응답을 맞추며 WebAdmin 화면에서 신뢰도 높은 상태 표현과 오류 처리가 가능하도록 개발
- 주요 사용자 시나리오에 대한 테스트 코드를 작성해 설정 변경, 입력 검증, 상태 전환 과정의 회귀 리스크를 낮춤
ReactTypeScriptFSDJestReact Testing Library
JEUS 9, 21, 8.6 WebAdmin 개발 및 유지보수
Tmax Soft- JEUS 각 버전의 WebAdmin 화면을 개발 및 유지보수하며 버전별로 다른 설정, 상태, 운영 모델을 도메인 단위로 정리
- 엔진 개발자와 API 응답 구조, 설정 검증 규칙, 서버 상태 및 에러 표현 방식을 협의하여 운영자가 이해하기 쉬운 UI 상태로 매핑
- UI/UX 디자이너와 협업해 복잡한 서버 관리 플로우를 단계적 폼, 명확한 피드백, 일관된 컴포넌트 패턴으로 개선
- Jest와 React Testing Library를 활용해 폼 입력, validation, 비동기 상태, 예외 케이스 중심의 테스트 코드를 작성하여 회귀 안정성 확보
ReactTypeScriptJestReact Testing LibraryFigma
UI 라이브러리 개발
Tmax Gaia- 개발 환경 구축(ESLint, Prettier, tsconfig, Vite, Storybook) 및 GitLab CI/CD 파이프라인 설정
- Jest 및 React Testing Library 기반의 테스트 환경 구축 및 테스트 커버리지 100% 확보
- 트리쉐이킹 적용을 통한 빌드 최적화
- 디자인 시스템 구현 회의 참여 및 개선사항 연구
- WAI-ARIA 가이드를 준수해 접근성 향상, Compound Component 패턴 등 리액트 디자인 패턴을 연구 및 이용하여 개발
ReactTypeScriptESLintPrettierViteStorybookGitLab CI/CDFigma
UI 컨트롤 컴포넌트 고도화
Tmax Gaia- 기존 BEM 네이밍 방식을 개선해 CSS Modules 도입, 클래스 충돌 문제 제거 및 코드 복잡도 감소
- WAI-ARIA 가이드를 준수해 접근성 향상
- 불필요한 리렌더링을 수정하여 UI 응답 속도를 눈에 띄게 향상
- 컴포넌트, 커스텀 훅, mobx 컨테이너를 이용하여 관심사 분리, 유지보수 시간 절약
- 컴포넌트별 테스트 코드 작성 및 시나리오 커버리지 개선
ReactTypeScriptCSS ModulesWAI-ARIAJestReact Testing Library
툴팁 컨트롤 고도화
Tmax Gaia- 툴팁 컨테이너 클래스 모듈별로 추상화(word, cell, point, common)
- 코드 가독성 대폭 향상, 툴팁 Types를 string union 타입으로 변환하여 유연성 확보
- 각 모듈(cell, point, word)에서 사용하는 툴팁을 분리하여 모듈별로 관리할 수 있는 구조로 개선
TypeScriptReact
단축키 기능 고도화
Tmax Gaia- 자체 프레임워크를 기반으로 서식 복사 및 REDO 단축키 구현
- KeyTip 개발을 통한 웹 접근성 개선
- accesskey 속성이 아닌 자체 프레임워크를 이용하여 구현
JavaScriptTypeScript
커서 고도화
Tmax Gaia- 서식 복사 커서: 리렌더링 문제를 해결하여 성능 최적화
- chromium 신·구 버전 모두에서 동작하도록 자체 커서 프레임워크 개선
- progress 커서: 자체 프레임워크의 이벤트 흐름 사이에 렌더링 되도록 브라우저 렌더링 사이클 분석 및 구현
SCSSJavaScriptTypeScriptReact
오피스 Default GUI 변경
Tmax Gaia- 스크롤바 수정: padding-box 속성을 활용하여 Google Docs와 유사한 스타일로 구현
- ribbon, toolpane, dialog, statusBar 등 전체 오피스 GUI 개선
- GUI 변경으로 사용자 경험 대폭 개선
SCSSReactTypeScript
오피스 드래그 시 프레임워크 고도화
Tmax Gaia- 문서 바깥 영역이나 앱 외부에 커서가 드래그 상태로 위치할 때 자동 스크롤 및 블록 셀렉션이 가능하도록 프레임워크 고도화
- 자체 프레임워크 개선과 이벤트 리스너, 각종 훅, 쓰로틀링을 이용하여 성능 최적화
- 성능 최적화와 시맨틱한 네이밍을 통해 유지보수성 향상
JavaScriptTypeScriptReactlodash
Dstation 웹 포털 CenterPost 개발
Tilon- SPA 구조 최적화: Vue와 Vuex 및 페이지별 모듈화를 통해 대규모 프로젝트를 효율적으로 관리
- API 통신 오류 해결: QA 과정에서 통신 관련 주요 버그를 식별하고 수정, 안정적인 운영을 보장
- Vuex 모듈화: 전역 관리와 컴포넌트 모듈화를 통해 유지보수성을 크게 향상
- UI/UX 개선: HTML 시맨틱 태그 활용 및 레이아웃 컴포넌트화를 통해 사용자 경험을 최적화
- 프론트엔드, 백엔드 팀원 14명과 협업하여 SPA 구조를 최적화
HTMLCSSJavaScriptVueVuexGitHub
엔지니어 전용 웹 포털 개발
Tilon- 소규모 팀 리드: 4명으로 구성된 팀에서 프로젝트의 설계와 개발을 리드
- 커스터마이징 포털 구현: 자사 솔루션을 엔지니어들이 현장에서 쉽게 커스터마이징할 수 있도록 설계 및 구현
- 프로젝트 관리 및 협업: 팀 리딩을 통해 일정 100% 준수 및 주요 기한 내 성공적 출시
HTMLCSSJavaScriptVueVuexGitHub
자사 화상회의 솔루션 CenterFace, MeetingTown 개발
Tilon- 화상회의 솔루션 퍼블리싱 및 서버 구성 담당
- 서버 배포 및 네트워크 구성 성공적 완료
- 틸론 협력사 (SNA, PndINC)에 CenterFace 성공적 구축
LinuxHTMLCSSJavaScriptNginxGitHubSSL Certification
자사 공식 홈페이지 개발 및 배포
Tilon- 새로운 디자인에 맞춰 홈페이지 개발
- 서버 배포 및 네트워크 구성 성공적 완료
LinuxHTMLCSSJavaScriptVueVuexGitHubNginx
MDM 솔루션 개발
Tilon- 오픈소스 MDM API 분석 및 통신 구현 (Headwind MDM)
- 서버 구축 후 API 통신 성공
- 프론트엔드 웹페이지 구축
LinuxVueVuexNginxGitHub
Estation vGPU 솔루션 개발
Tilon- RockyLinux 기반 vGPU 서버 구축으로 고사양 엔지니어링 원격 작업 환경 구현
- vGPU 관련 기능 개발 및 라이선스 서버 이중화 구성
- 자사 TechDay 성과 발표 및 코스닥 상장 감사 시연 담당
- 다양한 Linux 배포판에서 NVIDIA vGPU 테스트 및 가이드 문서 작성
LinuxOpenStackAWSKVMC++
블록체인 네트워크 구축
Tilon- Hyperledger Besu를 이용한 블록체인 네트워크 구축 및 시연
- 코스닥 상장 감사 시 성공적 시연
- 제주대 인턴 4명의 블록체인 프로젝트 리드
- 프로젝트 로드맵 제시 및 문서화 주도
LinuxGrafanaHyperledger Besu
Skills
Language
HTMLCSSJavaScriptTypeScript
Framework & Library
React.jsVue.jsNext.jsTailwind CSSMobx
Infrastructure & Database
AWSnginxLinuxPostgreSQLMySQL
Tools & IDEs
VimGitHubGitLabVS CodeWebpackBabelJestVite
Etc
CommunicationWeb AccessibilityWeb Performance
Education
- 2021.03 ~ 2021.10
한국폴리텍대학교 강서캠퍼스
스마트금융과 (직종 전환)
- 2013.03 ~ 2020.02
한양대학교
경제금융학부 학사 졸업
- 2010.03 ~ 2013.02
사우고등학교
인문계 졸업