Frontend · Creative · Engineer
몰입감 있는 인터랙션과 견고한 아키텍처를 함께 설계합니다.
비즈니스 임팩트를 수치로 증명해 온 프로젝트들을 소개합니다.
STICPAY
메인 웹사이트 & 마이페이지
빌드 파이프라인 66% 단축으로 배포 민첩성을 확보하고, SEO 98점 달성으로 오가닉 유입을 극대화한 글로벌 핀테크 서비스의 프론트엔드 현대화
글로벌 E-Wallet 서비스 STICPAY의 메인 페이지와 마이페이지를 3년 4개월간 전담하며, 두 차례 메이저 마이그레이션과 핵심 서비스 신규 구축을 통해 서비스의 기술 부채를 해소하고 비즈니스 확장 기반을 마련했습니다.
Key Achievements
- Pages Router → App Router 전환 주도 — RSC 도입으로 클라이언트 번들 감소, 초기 로딩 속도 개선
- webpack → Vite 마이그레이션 — HMR 즉시 반영으로 개발 생산성 향상, 빌드 시간 66% 단축
- 빌드 파이프라인 통합 최적화 — 번들 1.2GB→250MB, Docker 2GB→1.2GB, 빌드 6분→2분으로 배포 주기 단축
- Monorepo(Turborepo) + 공통 라이브러리 구축 — 6개 패키지로 프로젝트 간 코드 중복 제거, 동일 버그 반복 방지
Technical Challenges
빌드 파이프라인 경량화 — Docker + Vite 통합 최적화
webpack 기반 레거시 환경에서 번들 1.2GB, 빌드 6분, Docker 이미지 2GB로 CI/CD 전체가 병목이었습니다. 배포 한 번에 시간과 비용이 과도하게 소모되어 핫픽스 대응이나 빠른 기능 릴리스가 어려웠습니다.
Vite 마이그레이션으로 ESM 기반 개발 서버와 Rollup 빌드를 도입하고, Tree-shaking 최적화로 번들을 250MB로 감소시켰습니다. Next.js standalone 모드와 WebP 전환으로 Docker 이미지를 1.2GB로 감축하고, 레이어 캐싱 + Turborepo Remote Cache를 적용하여 배포 주기를 대폭 단축했습니다.
App Router 전환 시 CDN 캐싱 정합성 문제
Pages Router에서 App Router로 전환하는 과정에서, 정적 자산과 동적 페이지의 캐시 정책이 일치하지 않아 사용자에게 이전 버전 데이터가 노출되었습니다. 금융 서비스 특성상 잘못된 정보 노출은 사용자 신뢰에 직접적인 영향을 미치는 문제였습니다.
Cache-Control 헤더를 페이지 유형별로 세분화하고, 배포 시 캐시 무효화 전략을 조정했습니다. 정적 자산은 장기 캐싱, 동적 페이지는 적절한 revalidate 값을 적용하여 데이터 정합성과 성능의 균형을 확보하고 사용자 신뢰를 회복했습니다.
실시간 번역 동기화 시스템 구축
12개 이상 언어를 지원하는 글로벌 서비스에서, 번역 리소스가 빌드 시점에 고정되어 긴급 번역 수정에도 전체 재배포가 필요했습니다. 마케팅팀의 번역 수정 반영까지 개발팀 리소스가 소모되어 양쪽 모두 비효율적이었습니다.
next-intl 기반 다국어 시스템 위에 실시간 번역 동기화 모듈을 자체 설계·구현했습니다. 원격 번역 데이터 fetch → 메시지 동기화 → 팩킹/언패킹 파이프라인을 구축하여, 마케팅팀이 개발팀 도움 없이 번역을 즉시 반영할 수 있게 되었습니다. @sticpay/i18n 패키지로 분리하여 모노레포 내 다른 서비스에서도 재사용 가능하게 만들었습니다.
공통 라이브러리 모노레포 및 디자인 시스템 구축
여러 프론트엔드 프로젝트(메인, 마이페이지, 어드민, 결제)에서 동일한 유틸리티, 컴포넌트, 타입, 다국어 로직을 각각 중복 구현하고 있었습니다. 프로젝트 간 일관성이 떨어지고 동일한 버그가 여러 곳에서 반복 발생했습니다.
직접 제안하고 주도하여 Turborepo + Yarn 4 Workspaces 기반 공통 라이브러리 모노레포를 구축했습니다. @utils(쿠키·암호화·포맷팅), @design-system(공통 UI), @i18n(실시간 번역), @icons 등 6개 패키지를 개발하고, Changeset 기반 시맨틱 버저닝과 ESM/CJS 듀얼 빌드를 설정하여 팀 전체의 코드 일관성과 재사용성을 확보했습니다.
AI(MCP) 기반 개발 자동화로 팀 생산성 혁신
블로그·프로모션 페이지 제작이 반복적인 작업임에도 매번 수작업으로 진행되어, 개발 리소스가 비효율적으로 소모되고 마케팅팀의 요청 대응 속도가 느렸습니다.
MCP(Model Context Protocol)를 활용하여 블로그·프로모션 페이지를 빠르게 제작할 수 있는 워크플로우를 구축했습니다. 팀원들이 공통으로 활용할 수 있도록 프로세스를 표준화하여 페이지 제작 시간을 대폭 단축했습니다. 이 성과를 바탕으로 "AI를 활용한 개발 활용사례" 사내 세미나를 주최하여 팀 전체의 AI 도구 도입을 주도했습니다.
STICPAY
C2M 결제 & Payment Gateway
Strategy Pattern 기반 결제 아키텍처로 신규 결제 수단 연동을 구조화하고, 빌드 91% 경량화로 CI/CD 속도를 확보한 글로벌 결제 인프라
STICPAY의 결제 처리 웹 애플리케이션을 초기 설계부터 지속적으로 고도화하며, C2M·PG·P2P 등 다양한 결제 방식과 SSO·2FA·QR·다국어·실시간 환율 등 복합 금융 플로우를 안정적으로 운영할 수 있는 구조를 만들었습니다.
Key Achievements
- 전략 패턴(Strategy Pattern) 기반 결제 모듈 — 신규 결제 수단 추가 시 기존 코드 수정 없이 전략만 추가하는 확장 구조 확립
- C2M + PG 모듈 분리 — 결제 방식별 독립 배포·테스트가 가능한 아키텍처로 장애 영향 범위 최소화
- 2FA/OTP 기반 인증 보안 시스템 — 금융 서비스 수준의 사용자 자산 보호 체계 구축
- Vite 마이그레이션 — 번들 772MB→67MB(91% 감소), 빌드 8분→3분으로 배포 효율 확보
Technical Challenges
전략 패턴 기반 결제 모듈 설계
결제 수단(QR, URL redirect, 글로벌 PG사 등)이 추가될 때마다 if-else 분기와 코드 중복이 증가하여, 신규 연동 시 수정 범위가 넓고 결제 장애 위험이 높았습니다. 글로벌 확장에 따라 PG사 연동 빈도가 늘어나면서 개발 병목이 심화되는 구조였습니다.
전략 패턴(Strategy Pattern)을 적용하여 결제 수단별로 독립적인 전략 클래스를 두고, 공통 인터페이스로 결제 플로우를 추상화했습니다. 신규 결제 수단 추가 시 기존 코드 수정 없이 전략만 추가하면 되어, 글로벌 PG사 연동 속도와 안정성을 동시에 확보했습니다.
// 결제 전략 타입 정의
type PaymentStrategy = {
execute: (params: PaymentParams) => Promise<PaymentResult>;
validate: (params: PaymentParams) => boolean;
};
// 전략을 Record로 관리 — 신규 결제 수단은 여기에 추가만 하면 됨
const paymentStrategies = {
qr: {
execute: async (params) => { /* QR 결제 로직 */ },
validate: (params) => Boolean(params.qrCode),
},
redirect: {
execute: async (params) => { /* URL redirect 로직 */ },
validate: (params) => Boolean(params.redirectUrl),
},
} satisfies Record<string, PaymentStrategy>;
type PaymentMethod = keyof typeof paymentStrategies;빌드 성능 개선 및 Vite 마이그레이션
Webpack 기반 레거시 번들링에서 빌드 아티팩트 772MB, 빌드 시간 평균 8분으로 CI/CD 속도가 저하되었습니다.
Vite로 마이그레이션하고 불필요한 모듈을 제거하며 Tree-shaking을 최적화했습니다. 빌드 아티팩트를 67MB(91% 감소)로 축소하고, 빌드 시간을 3분으로 단축하여 CI/CD 파이프라인 속도를 확보했습니다.
LOLLIBACK
핀테크/크립토 웹 서비스
Braze 통합으로 마케팅팀의 리텐션 캠페인 운영 기반을 마련하고, GTM 행동 트래킹과 2FA 보안 강화로 핀테크 서비스의 비즈니스·보안 양면을 고도화
Next.js 기반 핀테크/크립토 웹 서비스에 빠르게 온보딩하여, 마케팅 자동화(Braze)·사용자 행동 트래킹(GTM)·보안 강화(2FA) 등 비즈니스 핵심 기능을 구현하고 서비스 성장 기반을 확보했습니다.
Key Achievements
- Braze SDK 통합 — 마케팅팀이 리텐션 캠페인·개인화 푸시를 직접 운영할 수 있는 기반 구축, 법적 요구사항(opt-in) 충족
Technical Challenges
Braze 마케팅 자동화 플랫폼 통합
사용자 행동 데이터를 마케팅팀이 활용할 수 없어, 리텐션 캠페인이나 개인화 푸시 알림을 보낼 수 없었습니다. 회원가입 시 마케팅 수신 동의 흐름도 부재했습니다.
Braze SDK를 프론트엔드에 통합하여 유저 행동 이벤트를 트래킹하고, 타입 안전성을 강화한 이벤트 유틸리티를 설계했습니다. 회원가입 흐름에 마케팅 동의(opt-in) 체크박스를 통합하여 법적 요구사항도 충족했습니다.
STIC-Cashback
Cashback Web · 파트너 리뉴얼
(주)아데나소프트웨어 · 페이먼츠개발팀
파트너 목록·상세 페이지 전면 리뉴얼, 수수료 상세 페이지 신규 개발, UID 등록 가이드 시스템
1.5개월 만에 파트너·수수료·가이드 4개 페이지를 리뉴얼·신규 개발하여, 사용자의 브로커 비교·가입 전환율 개선 기반을 마련
STICPLAY Cashback 서비스의 파트너 목록·상세 페이지를 전면 리뉴얼하고, 10,401줄 규모의 CSV 수수료 데이터를 비교할 수 있는 페이지를 신규 개발했습니다. 16개 브로커별 UID 등록 가이드를 구축하여 사용자의 서비스 온보딩 허들을 낮추었습니다.
Key Achievements
- 파트너 목록 페이지 전면 리뉴얼 — 단일 파일(677줄)을 7개+ 모듈로 분리하여 기능 추가·버그 수정 속도 향상
- CSV 기반 수수료 비교 시스템 — 10,401줄 데이터를 파싱·필터링하여 사용자가 브로커별 수수료를 직관적으로 비교 가능
- 16개 브로커별 UID 등록 가이드 — 단계별 안내로 사용자 온보딩 이탈 감소
- Gemini AI 기반 husky hooks — 커밋 메시지·MR 설명 자동화로 팀 코드 리뷰 효율 향상
Technical Challenges
레거시 단일 파일 구조 → 모듈화 아키텍처 전환
기존 파트너 목록 페이지가 677줄짜리 단일 파일로 구성되어, 새 기능 추가나 버그 수정 시 영향 범위 파악이 어렵고 수정 한 곳이 다른 곳을 깨뜨리는 문제가 반복되었습니다.
역할별로 7개+ 모듈을 분리하고 재사용 가능한 공통 컴포넌트를 설계했습니다. 반응형 디자인을 전면 적용하여 데스크탑/모바일 모두 최적화하고, 이후 기능 추가 시 수정 범위가 명확해져 개발 속도와 안정성이 향상되었습니다.
대규모 CSV 수수료 데이터 처리
12개 브로커의 캐시백 수수료 데이터(10,401줄)를 효율적으로 파싱하고 필터링하여 사용자에게 비교 가능한 형태로 제공해야 했습니다.
CSV 파싱 유틸리티를 구현하고, 브로커별 개별 CSV 파일과 통합 수수료 테이블을 분리 관리했습니다. 반응형 필터 UI와 7개 언어 다국어를 적용하여, 글로벌 사용자가 브로커별 수수료를 직관적으로 비교하고 최적의 선택을 할 수 있는 환경을 구축했습니다.
DICOM Web Viewer
CT 이미지 뷰어 · 11개 병원 협업
서울대학교병원 · 영상의학과
서비스 기획·UI/UX 설계·풀스택 개발·배포
CD/USB 택배 기반이던 11개 병원 간 CT 이미지 공유를 웹으로 전환하여, 미국 MD.ai · Gradient Health의 협업 제안으로 이어진 의료 영상 뷰어를 기획부터 배포까지 단독 구축
11개 병원의 의료진이 CD/USB를 택배로 주고받던 CT 이미지 공유 방식을 웹 기반으로 전환했습니다. 의료진의 실제 워크플로우를 관찰하고 UX를 최우선으로 설계한 결과, 11개 병원이 동시 사용하고 미국 헬스테크 기업으로부터 협업 제안을 받는 성과로 이어졌습니다.
Key Achievements
- 서비스 기획부터 배포까지 End-to-End 단독 구축 — 병원 간 CT 공유 프로세스를 택배에서 웹으로 전환
- 의료진 워크플로우 관찰 기반 UX 설계 — 개발자 관점이 아닌 실사용자 중심 인터페이스로 채택률 확보
- PWA 도입 — 의료진이 여러 병원을 오가며 네이티브 앱 수준으로 접근할 수 있는 환경 제공
- Redux Toolkit 기반 상태관리 표준화 — CT 뷰잉·레이어·설정 등 복잡한 상태를 예측 가능한 흐름으로 관리
Technical Challenges
PWA 도입으로 접근성 확대
의료진은 기존에 데스크톱 소프트웨어(ITK-SNAP 등)로 CT 이미지를 열람해왔기 때문에, 웹 기반 뷰어만으로는 설치 경험과 오프라인 접근성 면에서 기존 워크플로우를 대체하기 어려웠습니다.
PWA(Progressive Web App)를 도입하여 홈 화면 추가, 오프라인 캐싱, 네이티브 앱과 유사한 UX를 제공했습니다. 의료진이 여러 병원을 오가며 기존 소프트웨어 없이도 CT 이미지에 접근할 수 있게 되어, 서비스 채택률을 높이는 핵심 요인이 되었습니다.
Redux Toolkit 기반 상태관리 표준화
CT 이미지 뷰잉, 레이어 제어, annotation, 사용자 설정 등 상태가 복잡하게 얽혀 있어, 의료진의 조작이 예상과 다른 결과를 내는 버그가 발생하기 쉬운 구조였습니다.
Redux Toolkit을 도입하여 보일러플레이트를 줄이고, Flux 패턴 기반의 예측 가능한 단방향 데이터 흐름을 구축했습니다. slice 단위로 상태를 분리하여 기능 추가 시 영향 범위를 명확히 하고, 의료 데이터의 정확성을 보장했습니다.