ksungz

Career

김성재

AX Engineer · 커머스·게임·플랫폼 서비스 UI 개발·운영

About

13년간 커머스, 게임, 플랫폼 서비스에서 UI를 개발하고 운영해왔습니다. 웹 표준, 접근성, 마크업 구조화, SCSS 설계, 반응형 UI 구현을 바탕으로 서비스 화면의 구조와 유지보수성을 개선했습니다.

현재는 모바일웹 상품상세(PDP)를 포함한 핵심 서비스 UI를 담당하면서, AI 도구를 도입해 반복 작업을 줄이고 제품 개발 과정으로 역할을 넓히고 있습니다. SCSS 마이그레이션, PR Review Agent, 커밋·PR·QA 체크리스트 자동화 흐름을 정리했습니다.

개인 프로젝트에서는 문제와 범위, 최종 판단 기준을 직접 정하고 AI 에이전트를 활용해 AX Doctor, Agent Bridge, Obsidian RAG, News Automation과 BabyPick AI를 구현·검증하고 있습니다. 공개 코드와 운영 기록에는 확인한 범위와 한계를 함께 남깁니다.

Experience

2020.12 ~ 현재

11번가 · UI개발팀

UI 개발자

모바일웹 상품상세(PDP)를 포함한 핵심 서비스 UI 개발·운영. 기존 HTML/SCSS 구조를 React 환경으로 전환하고, AI 도구를 도입해 반복 작업을 자동화.

Dart Sass 마이그레이션 — 2,384개 파일, 3주 완료

자세히 →
Action

AI 코딩 도구(Cursor, Claude)로 패턴별 변환 스크립트를 만들고, 폴더 단위로 나눠 적용. 변환 전후 CSS 산출물 비교로 운영 영향 최소화.

Impact

빌드 오류 없이 운영 반영. 이후 다른 저장소에도 동일 방식 적용해 SCSS 환경 통일.

AI PR Review Agent — 8개 저장소 적용

자세히 →
Action

사내 제공 AI Agent를 파이프라인에 연결. SCSS/HTML 중심 파일 필터링, 접근성·BEM·SCSS 컨벤션 리뷰 기준 정리.

Impact

반복 컨벤션은 Agent의 1차 확인 항목으로 옮기고, 설계·영향 범위와 예외는 개발자가 최종 검증하도록 운영.

React 기반 PDP 컴포넌트 전환 및 CSS 내재화

자세히 →
Action

HTML/SCSS 산출물을 React 컴포넌트+CSS Modules로 이관. CDN 의존 CSS를 프로젝트 내부로 단계적 내재화(7편 시리즈). Storybook 기반 확인 환경 구축.

Impact

화면 코드와 스타일 변경 맥락을 하나의 저장소에서 관리. 신규 작업자 온보딩 기준 정리.

2019.10 ~ 2020.12

스마일게이트 알피지 · 웹팀

UI 개발자

로스트아크 공식 사이트 및 이벤트 페이지 구축·운영. 매주 정기배포를 담당하며 고빈도 운영 경험 축적.

로스트아크 이벤트 페이지 구축·운영

Action

출석체크, 룰렛, 투표형 인터랙티브 프로모션 페이지 구축. API 연동 기반 동적 콘텐츠 구현.

Impact

매주 정기배포 전담. 게임 서비스 특성에 맞춘 빠른 운영 대응 체계 구축.

공식사이트 콘텐츠 업데이트

Action

정기 콘텐츠 업데이트, CSS/이미지 배포, 게임정보 API 연동.

Impact

서비스 안정성 유지. 고빈도 배포 경험 축적.

크로스브라우저 이슈 대응

Action

iOS/Android 모바일 환경별 렌더링 차이 대응.

Impact

모바일 웹 크로스브라우저 대응 역량 확보.

2012.07 ~ 2019.06

하이브랩 · FE개발팀

UI 개발자 → 팀장 (약 3년)

네이버, 블리자드, PUBG, 스마일게이트 등 대형 클라이언트 UI 프로젝트 전담. 팀장으로 업무 분배, 공수 산정, 클라이언트 커뮤니케이션 총괄. i-award 3개 부문 수상.

네이버 웨일 브라우저 공식사이트 — i-award 최우수상

자세히 →
Action

브라우저 공식사이트 UI 개발 전담.

Impact

i-award 최우수상 수상.

배틀그라운드 공식사이트 구축 — i-award 대상

자세히 →
Action

PUBG 공식사이트 구축 참여.

Impact

i-award 대상 수상.

팀장 역할 — 업무 분배·품질 관리·클라이언트 커뮤니케이션

Action

여러 프로젝트 동시 진행 시 팀원 경험 차이로 품질이 흔들리는 문제를 해결. 업무 난이도·일정 위험도 분류 후 팀원별 배분, 중간 확인 시점 설정. 반복 이슈는 공통 기준으로 정리.

Impact

수정이 마지막에 몰리는 일 감소. 새 팀원도 기준 이해 후 업무 진입 가능. 리더는 기준을 만드는 사람이라는 교훈.

AX Doctor, Agent Bridge, Obsidian RAG, BabyPick AI

문제 정의부터 AI 활용, 구현, 배포, 운영까지 직접 만든 제품들을 확인하세요.