와디즈

프론트엔드 개발자 · 2020.11 ~ 2026.08

펀딩·스토어·메이커페이지 스튜디오 등 메이커 서비스 전 영역을 담당하며, 레거시(JSP)에서 모던 스택(React·Vite·pnpm)으로, 국내에서 글로벌로, IDC에서 클라우드로 이어지는 세대 교체를 수행했습니다.

기술 스택

ReactTypeScriptNext.js 16SCSSReduxTanstack-queryReact-hook-formi18nextMSWVitepnpmESLint 9StorybookVitestPlaywrightSentryJavaSpring BootSpring CloudMyBatisMySQLAWS(EKS)KubernetesHelmDockerGitHub Actions(OIDC)Claude CodeQdrantFastAPI

기술내용

FE 개발 프로세스 제안 및 도입

2021.07 ~ 2026.08

기획·디자인·API 검토, 도입기술 검토, 개발 일정 산정, 후속과제 관리를 하나의 개발 프로세스로 정립해 팀에 도입했습니다.
실질적인 개발 일정 산정과 누락 항목 점검을 위해 팀에 직접 제안했고, 현재 프로젝트 진행의 기준으로 활용되고 있습니다.
타부서와 병렬로 업무를 진행하기 위해 스토리북·API 인터페이스 공유·MSW를 도입해 개발 속도와 효율성을 높였습니다.
개발 완료 이후에도 성능 개선·웹접근성 개선 등 후속 작업을 이어가며 서비스 품질과 안정성을 끌어올렸습니다.

Role: 프론트엔드 개발자
Frontend: React, Scss, Redux, React-query, Storybook, Vitest, MSW, Playwright, Typescript
URL: FE 개발 프로세스 아티클

MSW(모킹 서비스) 도입 및 모킹 데이터 체계 구축

2021.11 ~ 2026.08

BE API 완성 전에도 FE가 데이터 연동과 검증을 진행할 수 있도록 FE 전용 모킹 서버를 MSW로 구축했습니다.
개발 단계에서 API 인터페이스를 미리 공유받아 모킹 데이터를 정의하고, BE/FE 병렬 개발과 기획·디자인 조기 검토를 가능하게 했습니다.
동일한 모킹 데이터를 서버 모킹·스토리북·유닛테스트·Playwright에서 공통으로 재사용해 유지 비용을 낮췄습니다.

Role: 프론트엔드 개발자
Frontend: React, Storybook, Vitest, Playwright, MSW
URL: MSW(모킹 라이브러리) 도입 아티클

개발 생산성 향상

2022.01 ~ 2025.12

패키지 업그레이드(React v16.8 → v18.2)로 동시성 렌더링 기반의 최신 생태계를 사용할 수 있게 했습니다.
빌드 시스템을 webpack(CRA)에서 Vite 6.0으로 전환해 개발 서버 기동 및 빌드 속도를 개선했습니다.
yarn classic에서 pnpm으로 전환해 유령 의존성과 저장 공간 문제를 해결했습니다.
FSD(Feature-Sliced Design) 아키텍처를 적용해 레이어 경계를 명확히 했습니다.

Role: 프론트엔드 개발자
Frontend: React, Vite, pnpm, FSD, Typescript
URL: CRA to Vite 마이그레이션 아티클

개발 표준화 및 반복 업무 자동화

2025.01 ~ 2026.07

ESLint 9(flat config)·Prettier·stylelint·husky를 스튜디오 전반에 일괄 표준화해 코드 스타일 논쟁을 제거했습니다.
커밋 컨벤션을 스킬로 자동화해 이슈키·타입 형식을 강제했습니다.
스케줄 워크플로로 반복 업무를 제거했습니다 — 다국어 브랜치 자동 병합, 정기 배포 브랜치 준비.
PR 자동 코드리뷰(Claude Code Action)를 CI에 상주시켜 리뷰 리드타임을 단축했습니다.

Role: 프론트엔드 개발자
Frontend: ESLint 9, Prettier, stylelint, husky, GitHub Actions, Claude Code

서비스 안정성 향상 (테스트 자동화 · 관측성)

2022.08 ~ 2026.08

서비스 확장으로 늘어난 라이브 이슈를 빠르게 파악·대응하기 위해 Vitest 유닛/통합 테스트와 Playwright E2E 테스트를 도입했습니다.
QA팀 검증 시나리오를 기반으로 테스트 코드를 작성하고, 개발자 검증 Flow를 자동화 서버로 구축했습니다.
GitHub Actions 스케줄 실행·라이브 환경 실행 가드·Slack 알림을 연동해 실패를 즉시 감지하도록 했습니다.
Storybook에 MSW·react-query를 통합 구성해 API 없이도 화면 검증이 가능한 개발 환경을 마련했습니다.
Cypress sanity 테스트로 출발해 Playwright E2E로 전환하고, 앱별 독립 E2E 워크스페이스를 구축했습니다.
테스트 견고성을 개선했습니다 — data-testid 의존 셀렉터를 role 쿼리·로케일 무관 라벨 매처로 전환하고, 즉시 검사를 waitFor 기반 대기로 변경해 다국어·다환경에서 깨지지 않게 만들었습니다.
ts-ignore 제거로 타입 안정성을 개선하고, i18n 다국어 키 존재 여부 검증 장치를 추가해 번역 키 누락으로 인한 런타임 오류를 사전에 차단했습니다.
Sentry 기반 프론트엔드 에러 모니터링을 운영하며 릴리스 속성을 코드 기반으로 관리하고 환경별 속성을 분리했습니다.

Role: 프론트엔드 개발자
Frontend: Vitest, Playwright, Cypress, Storybook, MSW, Sentry, Typescript
URL: Playwright 도입 아티클

성능 최적화

2022.08 ~ 2025.06

이미지 지연 로딩·프리로딩·리플로우 방지로 로딩 속도와 CLS(Cumulative Layout Shift)를 개선했고, 그 과정을 기술블로그에 기고했습니다.
gif를 mp4로 변환하고 뷰포트·iOS 저전력 모드 기반 재생 제어를 적용해 미디어 비용을 절감했습니다.
탭별 렌더링 최적화와 디자인시스템 청크 병합 등 번들 분할 전략을 개선했습니다.

Role: 프론트엔드 개발자
Frontend: React, Vite, Web Performance, Core Web Vitals
URL: gif to mp4 변환 아티클

AI 개발 워크플로 구축 (Claude Code 기반 플러그인 · 스킬 · 하네스)

2025.06 ~ 2026.07

개발 전 과정을 실행 가능한 파이프라인으로 코드화했습니다 (research → prd → develop → review → verify 오케스트레이터).
비용 최적 순서를 설계했습니다 — 정적 분석 5종을 병렬 선행하고, 통과한 경우에만 비용이 큰 E2E 검증을 실행합니다.
meta-harness — 하네스 자체(문서·에이전트·훅)의 결함을 진단·개선하는 메타 루프를 만들었습니다. 신호를 요약 없이 원형 trace로 보존하고, 실패 진단을 병렬 팬아웃하며, 기존을 후퇴시키지 않는 가산적(additive-first) 패치와 사용자 승인 게이트를 강제합니다.
product-spec — 기획 초안 → PRD → 적대적 검증 → 인수조건(Given-When-Then)에 이르는 7단계 하네스로 개발 착수 전 기획 품질을 검증합니다.
결정론적 가드레일을 hook으로 강제했습니다 — 위험 명령 차단·민감 파일 생성 차단·자동 린트. "판단이 필요한 것은 rule, 반드시 지켜야 하는 것은 hook"이라는 분기 원칙을 적용했습니다.
design-to-code 자동화 — Figma에서 디자인 시스템 컴포넌트와 이메일 템플릿을 자동 생성하는 스킬을 만들었습니다.
사내 코드 RAG — 시맨틱+키워드 하이브리드 검색(RRF 결합)과 리랭커 재순위화, 함수/클래스 단위 구조적 청킹, Git diff 기반 증분 동기화, REST·MCP 이중 인터페이스로 구성했습니다.

Role: 프론트엔드 개발자 / AI 워크플로 엔지니어
Frontend: Claude Code, MCP, FastMCP, Qdrant, FastAPI, Docker Compose
URL: Frontend 하네스 엔지니어링 아티클

레거시 모놀리스(Spring MVC + JSP) 유지보수 및 점진적 현대화

2020.12 ~ 2026.07

JSP 화면 안에 React 컴포넌트를 얹는 하이브리드 구조를 운영했습니다.
법무·정책 개정의 상시 반영(약관 버전 관리 포함)을 5년간 담당했습니다.
레거시에서 신규 프론트엔드/클라우드로 URL 매핑을 넘기는 이관을 마무리하고 JSON-LD 기반 SEO 정비를 병행했습니다.

Role: 프론트엔드 개발자
Frontend: JSP, Spring MVC, React, Typescript, JSON-LD

풀스택 / DevOps 확장

2024.01 ~ 2026.07

Spring Boot 백엔드 API를 직접 개발했습니다 — 관리자 권한을 등급화하고 변경 전/후 스냅샷 감사 로그를 적재해 추적성을 확보했습니다.
위험 API를 제거해 공격 표면을 축소하고 계정 발급 창구를 통제된 절차로 일원화했습니다(보안을 "기능 추가"와 "위험 제거" 양면으로 처리 / ISMS 대응).
IDC 환경에서 AWS EKS 클라우드로 이전했습니다 — Spring Cloud Kubernetes Config로 공통/서비스별 ConfigMap을 분리 주입했습니다.
GitHub Actions OIDC 기반 다환경 배포 파이프라인을 구성해 장기 액세스 키를 제거했습니다.
Helm 차트로 서비스 환경을 구성하고 시크릿을 코드에서 걷어내 환경변수로 외부화했습니다.
프론트 측 클라우드 대응으로 호스트 URL을 환경변수로 외부화하고 CORS를 정비했습니다.

Role: 풀스택 개발자
Backend: Java, Spring Boot, Spring Cloud, MyBatis, MySQL
DevOps: AWS EKS, Kubernetes, Helm, Docker, GitHub Actions(OIDC)

와디즈 스토어 상세페이지 신규 구축

2021.05 ~ 2021.08

백지 상태에서 컴포넌트 설계부터 API 연동, 결제 동선, 반응형·이미지 최적화, 출시 후 안정화까지 완결한 첫 대형 오너십 프로젝트입니다.
스토어 상세페이지 메인 UI와 탭(스토리·만족도평가·반품/교환) 기능을 개발했습니다.
상품 옵션 선택과 재고수량 관리를 포함한 구매 프로세스를 구현했습니다.

Role: 프론트엔드 개발자
Frontend: React, Scss, Redux, Redux Toolkit, React-query, Storybook, Jest, MSW
URL: 와디즈 스토어 오픈 뉴스

와디즈 멤버십(서포터클럽) 신규 오픈

2022.02 ~ 2022.05

와디즈 서비스 안에서 다양한 멤버십 콘텐츠와 혜택을 제공하는 서포터클럽 UI와 서포터 사이드 전반을 담당했습니다.
펀딩/스토어 결제, 서포터클럽 가입 프로세스, 서포터클럽 이벤트 페이지를 개발했습니다.

Role: 프론트엔드 개발자
Frontend: React, Scss, React-query, React-hook-form, Storybook, Jest, MSW
URL: 와디즈 멤버십(서포터클럽) 소개

상품 3 depth 서브옵션 및 리워드 옵션 개선

2022.07 ~ 2023.06

기존 1depth 서브옵션을 3depth까지 지원하도록 확장하고, 단일/세트 구성 상품의 추가·변경·삭제를 구현했습니다.
옵션 없는 상품·직접입력 등 레거시 기능과 디자인을 React 및 디자인시스템 기준으로 개편했습니다.
리워드 선택·펀딩 결제·결제 예약 동선을 P1~P3 3단계에 걸쳐 개편했습니다.

Role: 프론트엔드 개발자
Frontend: React, Scss, React-query, Storybook, Jest, Playwright, MSW
URL: 와디즈 상품 옵션 개선 뉴스

펀딩/스토어 메이커 스튜디오 운영

2020.12 ~ 2026.08

펀딩 프로젝트 개설에 필요한 메이커스튜디오 기능과 UI를 개발했습니다.
서포터(펀딩·스토어) / 메이커(스튜디오) 서비스의 유지보수와 운영 이슈 대응을 상시 담당했습니다.

Role: 프론트엔드 개발자
Frontend: React, Scss, React-query, Redux(Redux Toolkit), React-hook-form, Storybook, Vitest, Playwright, MSW, Typescript
URL: 리워드 메이커 스튜디오 개편 안내

업무내용

글로벌 서비스 전환

2025 ~

국내 전용 서비스를 i18next 기반 글로벌 다국어 서비스로 전환했습니다 (한글 추출 → AI 번역 → 다국어 반영, 번역 자동 동기화 파이프라인 운영).
글로벌 메이커 스튜디오를 신규 구축했습니다 — 환율·화폐·국가 전역 설정, 리워드 설계, 정산정보/정산내역, 메이커 정보, 글로벌 1:1 문의.

요금제 개편 및 메이커 홈(대시보드) 개편

2025

메이커 요금제 체계와 메이커 홈 대시보드를 전면 개편했습니다.

커머스 운영 도구 구축

2023 ~ 2024

위탁 배송 서비스(홈·판매관리·입고요청)를 신규 구축하고 엑셀 일괄 등록을 지원했습니다.
배송 일괄 관리와 상품금액 일괄 수정 기능을 구현했습니다.
"펀딩 없이 스토어 입점하기" 신규 동선을 스튜디오·어드민·서포터 전반에서 구현했습니다.

스토리 도메인 신규 구축

2025

스토리 상세/홈, 스토리 번역, 다국어 대응을 포함한 스토리 도메인을 신규 구축했습니다.

예약구매(프리오더) 및 글로벌·앵콜 펀딩 신규 구축

2021 ~ 2022

예약구매(프리오더)와 글로벌/앵콜 펀딩 서비스를 신규 구축했습니다.

클라우드 이전 대응

2026

도메인 전환과 동적 URL 생성을 포함한 프론트엔드 클라우드 이전 작업을 대응했습니다.