01
수기 정산을 시스템으로
xinno (poppop)회계팀과 정산 기준과 예외 조건을 정의하고, 엑셀 중심의 수기 업무를 서버부터 관리자 화면까지 하나의 시스템으로 전환했습니다.
Next.jsTailwind CSSZustandNestJS
Frontend Developer · Seoul
운영의 문제를
제품과 시스템으로
해결합니다.
8s → 0.1s
모달 렌더링 시간
0 → 10K
월 자연 검색 유입
01 — About
반복되는 수기 작업을 보면
시스템으로 바꿀 방법부터 찾습니다
Frontend Developer (Full-stack Scope) · 서울, 대한민국
기획자와 디자이너가 없는 환경에서도 운영팀·회계팀과 직접 대화하며 상품·주문·정산 업무를 백오피스 제품으로 만들어 왔습니다. 노코드 페이지 빌더와 약관 관리 도구를 개발해 운영팀이 개발자 없이 콘텐츠를 관리하도록 만들고, 수기로 처리하던 정산 기준과 예외 조건을 서버부터 관리자 화면까지 하나의 시스템으로 옮겼습니다. Next.js와 NestJS, Prisma를 활용해 API와 데이터 구조까지 함께 설계하고, 공통 컴포넌트와 API Layer를 정비해 동료들이 더 빠르고 일관되게 개발할 수 있는 환경을 만듭니다.
Core stack
ReactNext.jsReact NativeNestJSPrismaPostgreSQLMySQLRedisTypeScriptZustandReact QueryTailwind CSSVercelGitHub Actions
02 — Selected Work
문제를 해결한 프로젝트
무엇을 만들었는지보다, 어떤 문제를 발견하고 왜 그렇게 해결했는지를 담았습니다.
02
Backoffice 2.0
xinno (poppop)운영팀과 상품·주문·배송 프로세스를 정의하고, 공통 API Layer와 재사용 가능한 UI 구조를 갖춘 이커머스 백오피스를 구축했습니다.
Next.jsZustandShadcn/UINestJS
03
개발 병목을 없앤 No-code Builder
PopPop잦은 프로모션 제작 요청을 마케터가 직접 처리하도록 전환해 반복되는 랜딩페이지 제작의 개발 의존도를 낮췄습니다.
Next.jsTypeScriptBlock EditorResponsive Web
04
배포 없이 관리하는 약관 버전 시스템
PopPop서버에 하드코딩된 약관을 운영 도구로 분리하고, 같은 타입의 전체 개정 이력을 날짜 순으로 탐색할 수 있도록 구현했습니다.
Next.jsHTML EditorVersion HistoryAdmin UX
05
자연 검색 유입 0 → 월 10,000명
BALANCE검색 엔진이 읽을 수 있는 기술 구조와 에디터의 콘텐츠 생산 환경을 함께 개선해 6개월 만에 월 자연 검색 유입을 성장시켰습니다.
Next.jsSemantic HTMLSitemapContent Editor
06
모달 렌더링 8초 → 0.1초
레인트팀에 상태관리 기준이 정립되지 않아 하나의 Context를 공유하던 구조를 분석·개선하고, 기술 공유를 통해 재발 방지 기준까지 만들었습니다.
React 18ZustandMobX
03 — Experience
함께 만든 변화
제가 함께 성장해 온 팀과 제품들입니다.
Frontend Developer (Full-stack Scope)
(주)비단팝팝 | PopPop
2025.07 - 현재
블록체인 기반 서비스에서 이커머스 플랫폼으로 확장되는 과정에 참여해, 운영·회계팀과 상품·배송·정산 요구사항을 정의하고 백오피스 2.0의 프론트엔드 개발을 주도하고 있습니다.
Next.jsTypeScriptNestJSPrismaTanStack QueryTanStack TableZustand
사내 업무 자동화 및 생산성 도구
기여도 100%
- 마케터가 블록을 조합해 반응형 웹을 직접 제작하는 노코드 랜딩페이지 빌더를 개발해 반복되는 프로모션 제작의 개발 의존도를 제거
- 서버에 하드코딩된 약관을 HTML 실시간 편집·미리보기 도구로 전환하고, 동일 타입의 전체 개정 이력을 이전·다음 버전으로 탐색하도록 구현
정산·결제 관리 시스템 초기 인프라
정산 80% · UI/UX 100%
- 구매·교환·선물·취소와 PG·포인트·쿠폰·교환 상품금액을 통합 집계하는 정산 API와 관리자 화면 구축
- Shadcn/UI 기반 관리자 화면과 디자인 기준을 직접 설계하고 Vercel 자동 배포 환경 구축
- 거래 상세 28개 항목과 정산 요약을 엑셀로 제공해 회계팀이 최종 정산금을 검증하는 운영 기반 마련
Frontend Developer
레인트 | Raint
2024.06 - 2024.12
GS리테일 상품/방송 백오피스의 XML 기반 레거시 시스템을 Modern Web(React, Next.js) 환경으로 전환하고, 상태 관리 최적화를 통해 노출 속도를 98% 이상 단축했습니다.
ReactNext.jsZustandMobXStorybookRealGrid
리액트 렌더링 상태 성능 최적화
기여도 100%
- 여러 도메인이 하나의 Context를 공유해 모달 상태 변경에도 페이지 전체가 리렌더링되는 원인을 코드에서 추적
- 상태를 도메인 단위로 분리하고 Zustand selector로 필요한 컴포넌트만 구독하도록 재설계
- 모달 표시 시간을 8초 → 0.1초로 단축해 운영자의 업무 대기 시간 개선
- 개선 후 기술 공유회를 열어 React 렌더링 원리, Context 전파 범위와 상태 분리 기준을 실제 사례로 공유
대규모 레거시 시스템 전환
기여도 100%
- GS리테일 상품 관리의 데이터 집약적인 엔진 페이지와 신규 기능을 React 18로 전담 개발
- 방송 관리 프로젝트의 인프라 제약을 확인한 뒤 Next.js에서 React 16으로 신속히 전환해 일정 준수
- XML 기반 시스템을 컴포넌트 기반 웹 환경으로 이관해 유지보수성과 확장성 확보
프론트엔드 개발자
밸런스 | BALANCE
2022.12 - 2024.03
영양제 커머스 플랫폼의 프론트엔드를 담당하며 SEO 최적화로 자연 유입 1만 명을 달성하고, 모노레포 전환 및 디자인 시스템 구축을 통해 개발 생산성을 혁신했습니다.
Next.jsReactTurborepoStorybookTailwind CSSReact-Tiptap
SEO 최적화 및 검색 가시성 확보
기여도 100%
- 시맨틱 마크업과 동적 사이트맵을 적용해 계속 생성되는 콘텐츠의 검색 엔진 발견·이해 구조 개선
- 모듈형 콘텐츠 에디터를 구축하고 검색 데이터 기반 인기 주제를 제안해 콘텐츠 발행 속도와 검색 수요 대응 강화
- 기술 SEO와 콘텐츠 생산 프로세스를 함께 개선해 적용 6개월 만에 월 자연 유입 0 → 10,000명 달성
인프라 개선 및 디자인 시스템 구축
기여도 60%
- 분리된 Backoffice와 Commerce를 Turborepo로 통합하고 공통 UI·로직을 패키지화
- Storybook으로 UI 명세를 문서화해 디자인·개발 간 싱크와 재사용성 개선
React-Tiptap 기반 에디터 고도화
기여도 100%
- 텍스트·이미지·표·버튼 등 모듈을 조합하고 PC 결과를 미리보는 콘텐츠 에디터 구축
- 임시 저장·불러오기와 메타 정보 입력 흐름을 제공해 에디터의 콘텐츠 제작 생산성 향상
프론트엔드 개발자
요만나 | YOMANNA
2022.05 - 2022.12
소셜 요리 애플리케이션의 프론트엔드 전체 설계와 주요 기능 구현을 담당하며, 기획부터 iOS 앱스토어 출시까지 전 과정을 1인 리드했습니다.
React NativeRedux ToolkitStyled-componentsFCMIamport
React Native 1인 개발 및 출시
기여도 100%
- 서비스 기획 단계부터 참여하여 프론트엔드 아키텍처 설계 및 구현 전 과정 주도
- iOS 앱스토어 심사 및 최종 출시 성공
주요 비즈니스 기능 구현
기여도 100%
- Redux Toolkit을 활용한 정밀한 전역 상태 관리 및 데이터 흐름 설계
- Iamport 결제 모듈 연동을 통한 인앱 결제 시스템 구축
- FCM 기반 푸시 알림 및 실시간 알림 시스템 구현
협업 프로세스 도입
프로세스 제안 및 정립
- 구두 요청으로 수정 사항과 이력이 누락되는 문제를 발견하고 Asana 도입 주도
- 개발 요청을 티켓화하고 우선순위와 이력을 관리해 요청 누락을 방지
04 — Activities
2022.05 - 2022.07
팀스파르타 로켓단 2기 ~ 3기
하이퍼캐주얼 게임 제작 프로젝트
Unity를 사용한 하이퍼캐주얼 게임 제작 경험 · 2D와 3D 두 가지 타입의 게임 기획, 제작 및 배포 경험
2022.01 - 2022.04
스파르타코딩클럽 항해99 5기
웹 개발자 양성 부트캠프 - 프론트엔드 과정
총 5회 팀 프로젝트 진행 (미니 프로젝트 3회, 클론 코딩, 최종 프로젝트) · 마지막 프로젝트에서 팀장을 맡아 팀 리딩 및 개발, 비개발군과의 협업 경험
05 — Contact
함께
이야기해볼까요?
hziny722@naver.com새로운 기회를 찾고 있습니다. 궁금한 점이나 하고 싶은 이야기가 있다면 편하게 연락 주세요.