경력기술서 (Professional Experience)
다음 미디어뷰— 뉴스 · 콘텐츠 · 동영상 뷰
다음 미디어뷰의 프론트엔드 아키텍처를 새로 세우고, 그 위에서 댓글과 광고 영역을 이어서 개편하고 있습니다. daum-ui 리액트 컴포넌트 체계로 전환하면서 마크업 외주 개발 프로세스를 AI 기반으로 바꿨습니다.
- • 신규 프론트엔드 아키텍처와 daum-ui 리액트 컴포넌트 체계를 도입하고, 마크업 외주 개발 프로세스를 AI 기반으로 재설계
- • 타임톡을 폐지하고 댓글 기능을 다시 도입해 뉴스·콘텐츠 영역을 개편
- • 26.01–02 미디어뷰 프론트엔드 아키텍처 구축 — 다음 미디어뷰의 신규 프론트엔드 아키텍처를 구축하고, daum-ui 리액트 기반 컴포넌트 개발로 전환하면서 마크업 외주 개발 프로세스를 AI 기반으로 대체
- • 26.03 댓글 도입 및 타임톡 폐지 — 타임톡을 폐지하고 다음 댓글 기능을 다시 도입 관련 기사
- • 26.05 댓글 1차 개편 — 댓글 영역 디자인을 개선하고 광고 슬롯을 추가
Next.js · React · daum-ui · turborepo · pnpm · Docker · ArgoCD · k8s
동영상 수익화 TF— 카카오TV 폐지 대비
카카오TV 폐지에 대비해 동영상 시청 경로를 다음 안으로 흡수하는 TF 에 참여했습니다. 다음앱과 PC·Mobile 첫화면의 루프탭 프론트엔드를 개발했고, 그 결과 카카오TV 종료 이후에도 다음이 단독으로 동영상 서비스를 운영할 수 있게 되었습니다.
- • 카카오TV 서비스 종료 이후에도 다음만의 별도 동영상 서비스를 운영할 수 있도록 시스템 분리
- • 첫화면 루프탭 광고 영역 최적화 수행
- • 다음앱 및 PC·Mobile 첫화면 루프탭 개발로 동영상 시청 경로 확보
- • 26.01–06 첫화면 루프탭 개발 — 다음앱과 PC·Mobile 첫화면의 루프탭 프론트엔드를 개발 카카오TV 종료 기사
Next.js · React · daum-ui · turborepo · pnpm · Docker · ArgoCD · k8s
아모레몰— 아모레퍼시픽 공식 이커머스
2년간 아모레몰 프론트엔드를 총괄했습니다. 주문 내재화 TF의 기술 리더로 외주사가 관리하던 주문·결제를 사내로 가져와 Next.js 10 레거시에서 사내 DevOps(EKS) 위의 Next.js 14/15 환경으로 다시 세웠고, 그 위에서 반기 최대 행사인 아모레 세일 페스타를 다섯 번 치렀습니다.
- • 주문·장바구니 전 페이지 내재화 완료, 주문 관련 버그 및 VOC 발생률 50% 이상 감소
- • 아모레 세일 페스타 5회 연속 무중단 수행, 직전 행사 대비 매출 초과 달성
- • 장바구니를 신규 프로젝트로 전환해 성능 및 빌드 속도 50% 이상 향상
- • BY25 디지털서비스개발팀 초과성과 우수사원 선정
- • 24.10–11 주문 페이지 1차 — 비회원 주문/완료 페이지를 외주사에서 인계받아 사내 EKS 로 이관하고, Next.js 14 기반으로 재구성하며 Tailwind 디자인시스템을 설계
- • 25.01–04 주문 페이지 2차 — 회원 케이스까지 확장해 주문 관련 전 페이지 내재화를 완료하고, 로그 수집과 웹 바이탈 측정으로 결제 에러 대응 체계를 수립
- • 24.01–02 아모레몰 선물하기 — 단일 상품 선물하기를 신규 도입해 선물 수신자를 통한 신규 유저 확보 경로를 추가
- • 24.03–04 디지털 분석 도구 고도화 — GA3 지원 종료에 대응해 GA4 로 마이그레이션하고, GTM 기반 추적 도구를 통합 모듈화
- • 24.04–05 2024 여름 아모레 세일 페스타 — 럭키드로우와 멤버십플러스 이용권을 신규 개발해 행사용 BM 과 제휴 혜택을 확대
- • 24.12 2024 겨울 아모레 세일 페스타 — 라이브방송에서 바로 쿠폰을 발급·사용하는 기능을 추가하고, DataDog 으로 VOC 유입 전 선제 대응 체계를 구성
- • 25.05–06 2025 여름 아모레 세일 페스타 — 새로 내재화한 주문 페이지로 첫 대형 행사를 수행하고, 주문 프로세스 리팩토링으로 안정성과 속도를 확보
- • 25.11–12 2025 겨울 아모레 세일 페스타 — 마이파우치 페이지를 개편해 성능 25% 향상, 장바구니를 신규 프로젝트로 전환하고 신규 프로모션 처리 구조를 설계
TypeScript · React 17→19 · Next.js 10→16 · Tailwind · Storybook · Redux · Docker · EKS · DataDog · GA4 / GTM
뷰티피드 · 스킨노트— 신사업
아모레몰과 별개로 신사업 두 건의 프론트엔드를 2년간 총괄했습니다. 신규 유저 확보를 목표로 AI 사진 분석 등 아모레몰에는 없던 기능을 신규 유저에게 제공했습니다.
사내 프론트엔드 플랫폼— 전사 프론트엔드 개발·운영 환경 (DX · AX)
관측 체계가 없던 조직에 모니터링을 먼저 깔고, Node.js 14 시대의 yarn workspace 프로젝트를 turborepo 로 옮기는 이관 경로를 설계해 고객센터를 첫 타겟으로 운영에 적용했습니다. 베트남 개발자센터 이관에 대비한 구조 정리까지 포함합니다.
- • 프로젝트별 빌드 속도 3배 이상 단축, 웹 바이탈 2배 이상 향상 및 메모리 누수 해결
- • Web/Native 인터페이스 재설계로 매주 반복되던 동일 원인 버그 발생률 0건 달성
- • 클라이언트 에러 웹훅 알림 체계 구축으로 고객 VOC 유입 전 선제 대응 가능
- • 베트남 개발자센터로 지식 이전 및 협업 가능한 저장소 구조 확보
- • 24.06–07 데이터독(DataDog) 도입 — 웹 바이탈 수집·분석 환경을 구성하고, 클라이언트 에러 발생 시 웹훅 알림으로 대응 시간을 단축
- • 24.08–09 Web/Native 인터페이스 리팩토링 — 아모레몰 웹과 iOS·Android 웹뷰 사이 인터페이스를 선언적으로 재설계하고, 외주사에도 동일 기능을 JS 라이브러리로 제공
- • 25.07–08 DX 개선 : 모노레포 구조 개선 및 베트남 개발자센터 이관 — Node.js 14 기반 yarn workspace 를 멀티레포로 분리하고 SystemJS 로 코드 공유를 유지, 베트남 개발자센터 이관에 대비
- • 25.09–10 AX : 터보레포 운영환경 적용 및 AI MCP 활용 — turborepo 기반 신규 모노레포를 설계해 고객센터를 첫 타겟으로 운영에 적용하고, Figma × Cursor MCP 기반 디자인시스템을 도입
turborepo · SystemJS · Rollup · React 19 · Next.js 15 · TypeScript · Tailwind · Storybook · Docker · DataDog · Figma MCP with Cursor
딜리헙— 오픈 웹툰·소설 플랫폼 (US · KR)
창작자용 스튜디오와 독자용 스토어를 0에서 만들어 US·KR 동시 서비스로 띄우고, 웹앱 하나로 Android·iOS 앱까지 출시했습니다. 이후 에디터·갤러리·디지털 상품 판매로 창작과 수익 기능을 넓히고, 마지막에는 전체 코드를 TypeScript 로 포팅하며 구조를 정리했습니다.
- • 창작자용 스튜디오와 독자용 스토어를 0에서 구축해 US·KR 동시 서비스 오픈
- • JS Interface 설계로 웹앱 하나에서 Android·iOS 앱 출시 대응
- • 디지털 상품 판매와 도네이션(Meow) 기능으로 신규 BM 추가
- • 전체 코드 TypeScript 포팅 및 Vite·Vitest·Storybook 도입으로 테스트 가능한 구조 확보
- • 21.01–02 스튜디오 웹 개발 — 창작자용 웹앱을 0에서 개발 — 웹툰 생성 위자드, 에디터, 폼, 커스터마이제이션, 디자인시스템, 소셜 로그인
- • 21.03–05 스토어 웹 개발 — 독자용 웹앱 개발 — 웹툰 뷰어, 커스터마이제이션 뷰어, 알림, 디자인시스템, 소셜 로그인
- • 21.06–10 스토어/스튜디오 추가 업데이트 — GTM·Mixpanel 애널리틱스를 적용하고 Hackle 기반 A/B 테스트로 마케팅·분석 기능을 강화
- • 21.11–12 Android App 출시 — 웹앱을 웹뷰로 렌더링하는 구조와 네이티브 연동용 JS Interface 를 설계해 Android 앱 출시
- • 22.04–05 iOS App 출시 — 동일한 아키텍처로 iOS 앱을 출시하고 Apple 로그인 지원을 추가
- • 22.01–03 Product 기능 추가 — 폰트·이미지 등 디지털 콘텐츠 판매 기능과 Quill 에디터를 도입해 신규 BM 을 추가
- • 22.06–10 갤러리 개발 — 이미지 업로드·편집·피드·댓글과 도네이션(Meow) 기능으로 유저 간 소통 경로를 확장
- • 22.11–23.02 텍스트 에디터 및 뷰어 개발 — ProseMirror 기반으로 확장 가능한 텍스트 에디터를 개발해 스튜디오·스토어에 적용하고 뷰어에 댓글 기능을 추가
- • 23.03–06 프론트엔드 리팩토링 — 전체 코드를 TypeScript 로 포팅하고 Vite·Vitest·Storybook 을 도입, 배포·브랜치 전략을 수립
React · TypeScript · Vite · Vitest · Webpack · Tailwind · SCSS · Storybook · ProseMirror · Quill Editor · Node.js · Express · JS Interface
딜리뷰— 국내 만화·웹툰 프랑스 유통 플랫폼 · 퇴사 후 외부 협업
콘텐츠진흥원과 협업해 국내 만화·웹툰을 프랑스어권에 유통하는 플랫폼을 만들었습니다. 3개월 만에 개발을 마치고 2023년 12월 서비스를 오픈했습니다.
- • 국내 만화·웹툰 50작품을 선정해 프랑스어로 번역하고 2023.12 서비스 오픈
- • 오픈 이후 프랑스어권에서 실제 매출 발생
GCP 마이그레이션— 딜리헙 인프라 · 퇴사 후 외부 협업
AWS k8s 환경의 비용 문제를 해결하기 위해 GCP 컨테이너(docker run) 환경으로 마이그레이션했습니다.
- • 25.01–02 Google Cloud Platform 마이그레이션 from AWS — AWS k8s 환경을 분석해 비용 구조를 개선하고 GCP 컨테이너 환경으로 이관
K8s · AWS · GCP
Home-in— 홈 서비스 플랫폼
프로젝트 중반에 합류해 퍼블리싱과 프론트엔드 개발을 하나 의 흐름으로 묶고, 웹뷰 기반 iOS·Android 개발환경을 구축했습니다. 퍼블리셔를 대상으로 Vue 컴포넌트 구현 교육을 직접 진행했습니다.
- • 하나의 로직(index)에서 PC·Mobile UI 를 각각 렌더링하는 구조로 개선
- • 퍼블리셔 대상 VueJS 컴포넌트 구현 교육 진행으로 개발·퍼블리싱 협업 체계 확립
- • 웹뷰 기반 iOS·Android 개발환경 구축 및 인터페이스 테스트 진행
- • 20.10–12 Home-in 프론트엔드 프로젝트 — 프로젝트 중반 합류해 프론트엔드 개발을 총괄하고, 퍼블리싱 통합과 웹뷰 개발환경 구축을 함께 진행
Vue.js · JS Interface · JavaScript · Tailwind
카닥 앱— 자동차 수리 견적 · 마이카 서비스
React Native POC 로 앱 개편 방향을 검증하는 것에서 시작해, 카닥 4.0 전면 개편과 마이카·커뮤니티 탭까지 앱 내 웹뷰 영역 전반을 담당했습니다.
- • 커뮤니티 탭 신규 구현으로 데일리 접속자 증가
- • 보유·관심 차종 기반 게시물 설계로 유저 관심도 및 사업 데이터 활용도 증가
- • 19.01–03 카닥 앱 React Native POC — Adobe XD 프로토타입과 React Native 샘플로 앱 개편 방향을 기술 검증
- • 19.03–06 카닥 앱 마이카 업데이트 — 차량 등록 기반 마이카 기능을 웹뷰 전제로 개발하고 백오피스까지 연동
- • 19.07–10 카닥 4.0 업데이트 — 앱 전면 개편에 맞춰 웹뷰 디자인을 재구성하고 쿠폰함·쇼핑탭을 연동, Storybook 도입
- • 20.05 마이카 프로필 업데이트 — 신규 UI 적용과 함께 레거시를 개선하고 컨테이너 패턴·DeBounce 로 렌더링 최적화
- • 20.06–07 카닥 커뮤니티 탭 구현 — 앱에 커뮤니티 탭을 신규 구현하고 서버·웹·앱 데이터 구조와 인터페이스를 정의
React · Next.js · TypeScript · React Hooks · React Router · Context · Storybook · React Native · Expo
카닥몰— 자동차 용품 커머스
워드프레스에 의존하던 커머스를 첫 랜딩 페이지부터 3차 업데이트까지 React 로 다시 세우고, 흩어져 있던 결제창을 결제 로비로 일원화했습니다.
- • 결제 로비 일원화로 서비스별 결제수단 추가·삭제 시 일괄 적용 가능
- • 워드프레스 의존 페이지를 React 로 재구현해 장바구니·결제하기 등 주요 페이지 로드 속도 대폭 감소
- • 20.02–03 카닥 통합결제, 신용카드등록 프로젝트 — 서비스별로 흩어진 결제창을 결제 로비로 일원화하고 신용카드 등록 기능을 추가
- • 20.03 카닥몰 첫 랜딩 페이지 프로젝트 — 워드프레스 view 를 걷어내고 프론트엔드를 별도 구성해 로딩 속도와 UX 를 개선
- • 20.04 카닥몰 2차 업데이트 — 상품 검색·목록·상세·후기·문의까지 장바구 니 이전 단계의 흐름을 구현
- • 20.08 카닥몰 3차 업데이트 — 마이페이지·장바구니·체크아웃을 React 로 재구현하고 DB 직접 연동, 주요 페이지 로드 속도 대폭 감소
React · TypeScript · Context · Hooks · SCSS · Express · Node.js
프론트엔드 개발 환경— 전사 공통
흩어져 있던 프론트엔드 프로젝트를 모노레포로 합치고 CI/CD 와 배포 자동화를 구축했습니다. 프로젝트 생성 CLI 와 README·세미나로 팀 내 컨벤션을 맞췄습니다.
- • 모노레포 전환으로 배포 시간 단축 및 저장소 수 대폭 감소
- • Jenkins 에서 GitHub Actions 로 전환해 CI/CD 개선
- • CLI 툴과 프로젝트 생성기로 코드 컨벤션 통일 및 신규 프로젝트 착수 시간 단 축
- • 19.11–12 테크샵, 워시, admin 툴 업데이트 — 신규 서비스를 100% 웹뷰로 구성하고 네이티브와 JS 인터페이스로 통신, 공통 디자인 컴포넌트를 정리
- • 19.12–20.01 프론트엔드 모든 프로젝트 모노레포(Monorepo) 전환 및 CI/CD 개선 — MSA+모놀리식 구조를 yarn workspace 모노레포로 전환하고 Jenkins 를 GitHub Actions 로 교체, 배포를 시스템화
- • 20.05 cardoc react generator 업데이트 — 프로젝트 생성 CLI 를 개선해 페이지·엘리먼트 자동 생성과 프로젝트 언어 자동 감지를 지원
Yarn Workspace · GitHub Actions · Docker · AWS · Node.js · Next.js · React · TypeScript
Play-ce RoRo— On-Premise → Cloud 자동 전환 솔루션
On-Premise 서버 환경을 AWS 등 클라우드로 자동 전환하는 웹 콘솔을 개발했습니다. 기획·프로토타입·샘플 디자인부터 개발환경 구성까지 맡았고, Angular 4 로 시작한 프로젝트를 React 로 리팩토링했습니다. 이후 관리자 대시보드와 콘솔까지 이어서 개발했습니다.
- • Angular 4 에서 React 로 리팩토링하며 Redux 기반 Flux 구조 정착
- • Code Splitting 등 앱 최적화 및 Jest 기반 테스트 환경 구성
- • 협력사 프론트엔드 개발 교육 및 지원
- • 17.07–18.08 Play-ce RoRo 웹 콘솔 개발 — 서버·클라우드 인 증정보 입력부터 환경 분석, 클라우드 자동 마이그레이션까지의 웹 콘솔을 개발하고 Angular 4 를 React 로 리팩토링
- • 18.09–12 Play-ce RoRo Admin 업데이트 — 관리자 대시보드와 콘솔을 개발하고 Code Splitting·Jest 테스트 환경을 구성
React · Styled Component · React Router · Redux · Mobx · Context · Jest · Angular 4 · AWS
공식 제품 소개 페이지— 사내 제품 소개 사이트
Gatsby 기반 정적 사이트로 제품 소개와 한/영 번역, 마크다운 블로그를 구성했습니다.
- • 17.09–10 공식 제품 소개 페이지 개발 — Gatsby 정적 사이트로 제품 소개와 한/영 번역, 마크다운 기반 소식 페이지를 구성
Gatsby · Styled Component
박차— LPG 중고차 거래 · 양수도 서비스
중고차 양수도 전용 웹사이트를 AngularJS 로 개발하고, 이어서 LPG 중고차 구매 하이브리드 앱을 iOS·Android 동시 배포했습니다.
- • 좌측 필터 기반 목록 전환 UX 로 차종·색상·연식·주행거리 탐색 경험 개선
- • 하이브리드 앱으로 계약·탁송 등 거래 프로세스를 모바일에서 완결
- • 16.06–09 박차 비즈 웹사이트 개발 — 중고차 양수도 전용 웹사이트를 AngularJS 로 개발하고 좌측 필터 기반 목록 전환 UX 를 구현
- • 16.10–17.01 박차 모바일 앱 업데이트 — LPG 중고차 구매 하이브리드 앱을 iOS·Android 동시 배포하고 계약·탁송 프로세스를 구현
AngularJS · Framework7 · Cordova · SCSS · PHP
차팡— 딜러용 차량 경매
딜러용 차량 경매 하이브리드 앱을 iOS·Android 동시 배포했습니다. 경매와 차량 상태·사고·보험·가격정보, 낙찰 후 서류 처리까지 구현했습니다.
- • d3.js 로 가격 변동 그래프 구현
- • 플레이스토어·앱스토어 등록 및 인증서 작업 직접 수행
- • 17.02–05 차팡 모바일 앱 개발 — 딜러용 차량 경매 하이브리드 앱을 iOS·Android 동시 배포하고 d3.js 로 가격 변동 그래프를 구현
Framework7 · Cordova · d3.js · SCSS · PHP
CCN— IoT 태양광 압축 쓰레기통 관리 플랫폼
커리어의 출발점이자 3년 반을 함께한 서비스입니다. 지도 기반 데이터 시각화 웹 콘솔을 1.0 부터 만들고 PhoneGap 하이브리드 앱까지 개발했으며, 신규 제품군 추가에 맞춰 2.0 으로 전면 리워크했습니다.
- • 지도 기반 데이터 시각화 콘솔과 하이브리드 앱을 프론트·백엔드 모두 직접 구축
- • 2.0 리워크로 구글맵 마커 그룹화 및 실시간 필터링 제공
- • PHP 기반 HTTP 포트를 활용한 서버-제품 간 프로토콜 개발
- • 12.11–14.08 CCN 웹사이트 1.0 개발 — 태양광 압축 쓰레기통 관리 웹 콘솔을 지도 기반 데이터 시각화로 구축하고 PhoneGap 하이브리드 앱과 서버-제품 간 프로토콜까지 개발
- • 15.08–16.03 CCN 웹사이트 2.0 개발 — 신규 제품군 추가에 맞춰 전면 리워크하고, 구글맵 기반 마커 그룹화와 실시간 필터링을 제공
AngularJS · jQuery · jQuery Mobile · PhoneGap · SCSS · Node.js · CodeIgniter · MariaDB · AWS
시크릿차트— 병원 마케팅 플랫폼
후기 게시·공유, 병원 정보 검색과 추천, 관리자 페이지까지 프론트엔드와 백엔드를 모두 개발하고 네이티브 앱용 API 를 제공했습니다.
- • 14.08–15.08 시크릿차트 웹사이트 개발 — 후기 게시·공유, 병원 정보 검색·추천, 관리자 페이지를 프론트·백엔드 모두 개발하고 네이티브 앱용 API 를 제공
jQuery · SCSS · CodeIgniter · MariaDB
외주 · 개인 프로젝트— 기획부터 인프라까지 단독 수행
요구사항 정리와 프로토타입부터 개발, Docker 기반 개발·배포 환경과 AWS 인프라 설계까지 혼자 맡아 진행한 프로젝트들입니다.
- • 귀금속 백오피스는 현재도 간헐적으로 유지보수 중
- • 17.11–12 백오피스 — 귀금속 주문→발주→입고→배송 내부 업무 프로세스 웹앱과 매출 대시보드를 구축
- • 18.07–08 베트남 쇼핑몰 — 영카트5 기반 쇼핑몰을 커스터마이징하고 AWS 글로벌 인프라(EC2·RDB·S3·CloudFront)를 설계·구축
- • 외주 트윈클링 — 외주 프로젝트 기획 및 관리
Angular 4 · Lumen · PHP · jQuery · SCSS · Docker · Docker-compose · AWS · GitLab