Developer Portfolio 2026

사용자를 먼저 생각하는 개발자, 성창민입니다.

실제 사용자의 불편과 팀의 반복 비효율을 근본 원인까지 파고들어 개선하는 풀스택 개발자입니다. 금융 스마트뱅킹 현장에서 전자서명과 인증 보안 구조를 설계하고, 확장 가능한 채널 아키텍처를 주도하며 오너십으로 문제를 끝까지 책임집니다.

프로젝트 보기
E-MAIL hys1693359@gmail.com
GITHUB github.com/indaegu
SCROLL

// 나를 정의하는 세 가지

What defines me

01
Ownership

끝까지 책임지는

방식 선택부터 설계와 구현, 운영 배포까지 스스로 자처하고 주도합니다. 사내 최초 React/TypeScript 채널 아키텍처 도입과 인증 방식 전환을 팀 전체의 생산성 관점에서 정당화하고 끝까지 책임진 경험이 있습니다.

02
Fintech Security

금융 보안에 강한

폐쇄망 스마트뱅킹 환경에서 전자서명(PKCS7) 백엔드 재검증 구조와 공동, 금융, 간편 3종 인증 통합을 설계했습니다. 편의성과 검증 신뢰를 함께 설계해야 실질적 개선이 된다는 금융 도메인 감각을 갖췄습니다.

03
Impact-Driven

근본을 개선하는

기능 동작을 넘어 병목의 근본 원인을 찾습니다. 번들러의 동작 원리까지 파고들어 빌드 시간을 약 80% 단축하고, 반복되는 운영 업무를 공통 구조로 추상화해 효율을 끌어올립니다.

// 이력서

Resume

성창민
FULLSTACK DEVELOPER
E-Mailhys1693359@gmail.com
GitHubgithub.com/indaegu
Tech Stack
Languages
JavaJavaScriptTypeScript
Framework / Library
Vue.jsReactSpring BootSpring Cloud
Database
PostgreSQLMySQLOracleRedis
Infra / DevOps
DockerJenkinsGitLabNginxWebpackEurekaZuul
Monitoring
PrometheusGrafana
Awards
ICT&디지털혁신본부 2025 상반기 우수직원
하나저축은행, 2025.07
한국정보산업연합회장상
과학기술정보통신부, 2023.12
마이크로소프트 클라우드 AI 모델 경진대회
한국마이크로소프트 트레이닝 파트너 엘릭서, 2024.10
프로젝트 최우수상
한국소프트웨어기술진흥협회, 2023.12
Career
하나금융티아이
하나저축은행 스마트뱅킹 비대면 채널 웹/서버 풀스택 개발 및 운영
공공마이데이터, 네이버페이 채널, 백오피스 등 채널 서비스 개발 담당
2024.11 ~ 현재
한국전자통신연구원 (ETRI)
복합 측위 데이터 수집 및 분석,
복합 측위 기술 알고리즘 분석 및 비교
2023.01 ~ 2023.02
Projects
네이버페이 채널 신설 (React/TS, 모노레포)
Fullstack		 진행 중
공공마이데이터 연동 및 전자서명 통합 인증
Fullstack		 2026.04 ~ 2026.06
운영자 페이지 자체개선
Fullstack		 2026.02 ~ 2026.03
모바일 신분증 도입 프로젝트
Fullstack		 2025.09 ~ 2025.10
Webpack 빌드 최적화 (라우터 코드 스플리팅 개선)
Fullstack		 2025.04 ~ 2025.05

사이드 프로젝트 (사내 CoP)
SBOM 기반 오픈소스 취약점 관리 플랫폼 (팀장, 프론트엔드 단독, 2026.04 ~ 진행 중)

그 외 개인 / 학습 프로젝트
카드 혜택 극대화 서비스 HANARO (Oracle PL/SQL 최적화로 응답 속도 80% 개선), 통합 여행 플랫폼 Journey Mate, CNN 폰트 추천 웹, 물물교환 가치잇솝, OCR 간편 계좌이체

// 회사 주요 프로젝트

Selected Work

01
진행 중   Fullstack Developer

네이버페이 채널 신설 및 React/TypeScript 도입

스마트뱅킹에 네이버페이 채널을 신규 구축하며 사내 최초로 React/TypeScript와 모노레포 아키텍처를 도입하고, 하나의 Spring 서버가 다채널을 수용하도록 어댑터 기반 구조를 주도적으로 설계한 프로젝트.

Background / Problem
  • 신규 채널을 추가할 때마다 프론트와 서버가 채널별로 중복 구현되어 확장과 유지보수 비용이 누적
  • 기존 스택만으로는 타입 안정성과 컴포넌트 재사용성 확보에 한계
  • 채널마다 다른 연동 규격을 서버 로직에 직접 녹이면 결합도가 높아져 변경에 취약
Solution / Process
  • 사내 최초로 React/TypeScript를 도입하고 pnpm/Turborepo 기반 모노레포로 채널 간 코드와 타입 공유 체계 구축
  • 하나의 Spring 서버가 다채널을 수용하도록 채널별 어댑터를 공통 인터페이스로 추상화해 결합도를 낮춘 확장 구조 설계
  • 타입과 목(MSW)을 먼저 확정하는 contract-first 방식으로 프론트와 백엔드 병렬 개발 진행
Result
  • 신규 채널을 어댑터 추가만으로 확장할 수 있는 구조 확보
  • TypeScript 도입으로 타입 안정성과 컴포넌트 재사용성 향상
  • 목과 테스트를 우선하는 개발로 프론트와 백엔드 동시 개발이 가능해져 일정 단축
  • 배운 점: 새 기술 도입은 학습 곡선이 아니라 팀 전체의 생산성과 유지보수 관점에서 정당화해야 한다는 리더십
Period
진행 중
Tech Stack
React TypeScript pnpm / Turborepo MSW Spring Boot Java
Key Outcome
사내 최초 React/TS 도입
다채널 어댑터 구조
주도적 설계
02
2026.04 ~ 2026.06   Fullstack Developer

공공마이데이터 연동 및 전자서명 통합 인증

공공마이데이터를 스마트뱅킹 수신/여신 상품 가입 흐름에 연동하고, 공동, 금융, 간편 인증서 3종 경로를 하나의 통합 인증 플로우로 묶어 고객 편의성과 보안 신뢰도를 동시에 높인 프로젝트.

Background / Problem
  • 인증서 종류(공동, 금융, 간편)마다 서명과 검증 경로가 제각각이라 화면과 로직이 분기되어 유지보수 부담 증가
  • 상품 가입에 필요한 공공기관 정보를 고객이 직접 준비하고 제출해야 해 이탈이 발생하는 구조
  • 전자서명 데이터의 위변조 방지와 신뢰 검증을 클라이언트에만 의존할 수 없는 보안 요구
Solution / Process
  • 공동, 금융, 간편 3종 인증서 경로를 공통 인터페이스로 추상화해 하나의 통합 인증 플로우로 정리
  • 전자서명(PKCS7) 결과를 백엔드에서 재검증하는 서버 사이드 라운드트립 구조로 설계해 위변조 방지와 신뢰 검증을 아키텍처 수준에서 보장
  • 공공마이데이터로 수집한 정보를 수신/여신 상품 가입 페이지에 연동해 고객 입력 부담 최소화
Result
  • 분기되어 있던 인증서 경로를 단일 플로우로 통합해 화면과 유지보수 복잡도 감소
  • 전자서명 검증을 서버에서 최종 확인하는 구조로 금융 보안 신뢰 수준 강화
  • 공공마이데이터 연동으로 상품 가입 과정의 고객 입력 단계 간소화
  • 배운 점: 인증과 보안 도메인에서는 편의성과 검증 신뢰를 함께 설계해야 실질적 개선이 된다는 관점
Period
2026.04 ~
2026.06
Tech Stack
Vue.js Spring Boot Java PostgreSQL 전자서명 / PKCS7
Key Outcome
3종 인증서 경로를
단일 인증 플로우로
통합
03
2026.02 ~ 2026.03   Fullstack Developer

운영자 페이지(백오피스) 자체개선

채널별로 각각 작성해야 했던 공지사항과 팝업 등록 방식을 공통 템플릿 구조로 개선해, 현업의 반복 업무를 줄이고 운영 효율을 높인 프로젝트.

Background / Problem
  • 공지사항과 팝업 등록 시 채널마다 작성 방식이 달라, 같은 내용을 각각 반복 입력해야 함
Solution / Process
  • 채널별로 분리된 등록 방식을 분석해 하나의 데이터로 전 채널에 공통 반영되는 구조 설계
  • 채널 분기 처리로 모바일웹, 인터넷 PC, 모바일앱 화면에 각각 맞게 렌더링하는 크로스채널 대응
Result
  • 한 번의 작성으로 전체 채널 반영이 가능해져 반복 입력 횟수 대폭 감소
  • 요청받은 기능을 넘어 반복 비효율을 스스로 발견해 개선한 오너십
  • 배운 점: 기능 추가보다 반복 업무를 줄이는 방향으로 문제를 바라봐야 더 큰 개선 효과
Period
2026.02 ~
2026.03
Tech Stack
Vue.js Spring Boot JavaScript Java PostgreSQL
Key Outcome
1회 작성으로
전 채널 동시 반영
운영 효율 극대화
04
2025.09 ~ 2025.10   Fullstack Developer

모바일 신분증 도입 프로젝트

하나저축은행 원큐앱 내부에 모바일 신분증 기반 인증 방식을 추가 도입한 개발. 기존 실물 신분증 단독 방식에서 확장해 고객 편의성을 높이는 인증 채널을 구축했습니다.

Background / Problem
  • 기존 인증 방식이 실물 신분증 하나로 제한되어 고객 불편을 야기
  • App2App 방식은 네이티브 개발자 2명 공수가 필요하고, 앱 심사로 운영 배포에 제약 발생
Solution / Process
  • 개발 공수와 운영 유연성, 대응 속도를 고려해 App2App 대신 Web2App(웹뷰) 방식을 자처하여 구현
  • OS별로 상이하게 동작하는 브릿지를 각 OS 네이티브 개발자와 협업해 통합
Result
  • 앱 심사 없이 즉각 대응 가능한 운영 배포 환경 구성
  • 네이티브 2명의 공수 없이 웹 개발자 1명으로 운영 개발이 가능한 구조 확보
  • 인증과 개발 흐름을 웹으로 통일해 개발 난이도를 낮춤
  • 배운 점: 구현 방식을 스스로 자처하고 도입까지 끝까지 책임진 오너십
Period
2025.09 ~
2025.10
Tech Stack
Vue.js Spring Boot JavaScript Java PostgreSQL
Key Outcome
웹 개발자 1명으로
전체 운영 개발 가능한
구조 확보
05
2025.04 ~ 2025.05   Fullstack Developer

Webpack 빌드 최적화: 라우터 코드 스플리팅 개선

Vue 라우터 lazy-load의 변수 기반 동적 import가 Webpack context 모듈을 만들어 폴더 전체를 스캔하고 파싱하던 구조를, 정적 경로와 고정 청크명으로 리팩터링해 풀빌드 시간을 5분대에서 1분대로 단축한 프로젝트.

Background / Problem
  • 라우터 lazy-load에서 변수로 경로와 청크명을 구성해, Webpack이 context 모듈을 생성하고 해당 폴더의 모든 후보 파일을 스캔하고 파싱
  • 풀빌드에 약 5분이 소요되고, 청크 경계와 이름이 자주 바뀌어 캐시 적중률이 낮음
Solution / Process
  • 변수 경로 동적 import를 정적 파일 경로로, 변수 섞인 청크명을 고정 webpackChunkName으로 통일해 정적 분석이 가능하도록 변경
  • 라우트별 독립 청크 그래프를 안정화해 모듈 스캔과 파싱량, 해시 변동을 최소화하고 캐시 적중률 상승
  • 동적 페이지가 필요한 경우 화이트리스트 매핑 객체로 한정된 집합만 로드하도록 제한
Result
  • 정적 분석이 가능해져 필요한 파일만 빌드하고, 캐시 적중률 상승으로 재빌드 시간 감소
  • 풀빌드 시간 약 80% 단축 (5분대에서 1분대로)
  • 배운 점: 번들러의 동작 원리(context 모듈, 정적 분석)를 이해하고 근본 원인을 제거하면 큰 성능 개선으로 이어진다는 점
Period
2025.04 ~
2025.05
Tech Stack
Vue.js Webpack JavaScript
Key Outcome
풀빌드 시간
약 80% 단축

// 사이드 프로젝트 (업무 외, 사내 CoP)

Side Project

S
Side Project (사내 CoP)
2026.04 ~ 진행 중   Team Lead, Frontend

SBOM 기반 사내 오픈소스 취약점 관리 플랫폼

업무 외 사내 학습 모임(CoP)에서 팀장을 맡아 진행하는 사이드 프로젝트. 사내 오픈소스(OSS) 자산을 SBOM으로 가시화하고, AI를 활용해 취약점을 조기 탐지하여 Slack과 이메일로 자동 알림하는 보안 플랫폼의 프론트엔드를 단독으로 설계하고 개발하고 있습니다.

Background / Problem
  • 사내에서 사용하는 오픈소스 의존성의 취약점을 수작업으로 추적하기 어렵고, 자산 현황과 위험을 한눈에 파악할 수단이 부재
  • 취약점 공개 시점과 사내 인지 시점의 간극으로 대응이 지연되는 문제
Solution / Process
  • SBOM(SPDX/CycloneDX) 기반으로 OSS 구성요소를 수집하고 자산 현황을 대시보드로 가시화
  • OSV, GitHub Advisory 등 취약점 DB와 매칭하고 AI(Claude/OpenAI API)로 영향도를 분석해 조기 탐지, Slack과 이메일로 자동 알림
  • 팀장으로서 개발 컨벤션(브랜치 전략, 커밋/PR 규칙, 네이밍)과 마일스톤을 수립하고, TypeScript와 Next.js 프론트엔드를 단독으로 설계하고 구현
Result
  • SBOM으로 사내 OSS 자산과 취약점 현황을 한눈에 파악하는 가시성 확보
  • AI 기반 조기 탐지와 자동 알림으로 취약점 대응 리드타임 단축
  • 팀장으로서 협업 규칙과 개발 프로세스를 정립하고 프론트엔드 아키텍처를 주도
  • 배운 점: 도메인 복잡도가 높은 보안 문제도 표준(SBOM)과 자동화, AI를 결합하면 실질적 운영 효율로 이어진다는 관점
Period
2026.04 ~
진행 중
Tech Stack
TypeScript Next.js TanStack Query Claude / OpenAI API AWS / Docker
Key Outcome
팀장 겸 프론트엔드
단독 개발로
OSS 보안 플랫폼 구축

// Let's build something great

더 나은 서비스를 위해
끊임없이 고민하겠습니다.

사용자 친화적인 시각, 문제를 근본까지 개선하는 오너십, 그리고 팀의 자산이 되는 문서화 습관으로 함께하는 모든 조직의 성장에 기여하는 개발자가 되겠습니다. 새로운 기회와 협업에 항상 열려 있습니다.

이메일 복사하기 GitHub 방문하기