devxian96

장석현 · Seokhyun Jang — Full-Stack Engineer @ Cafe24

없으면 만든다.

프레임워크가 없어서 만들었고, 라이브러리가 아쉬워서 만들었습니다. 지금은 코드를 못 쓰는 사람도 자기 웹사이트를 가질 수 있는 도구를 만듭니다.

coolman555@me.comGitHubLinkedIn
장석현. 해질녘 능선 위에서 바다를 등지고 선 옆모습.
개발 경력
6년 11개월
카페24 재직
4년 11개월
직접 만들어 공개한 도구
6종

지금 만들고 있는 것

업종만 고르면, AI가 홈페이지 한 채를 짓습니다.

카페24 AI 홈페이지 빌더. 기획·디자인·프론트엔드·백엔드가 다 함께 AI를 쓰는 협업 프로세스를 세우고 3개월 만에 냈습니다. 전체의 91%를 바이브코딩으로 만들면서도 코드가 무너지지 않도록, 커스텀 ESLint 룰과 Claude Skills를 먼저 깔았습니다.

homebuilder.cafe24.com

만든 것

회사에서, 팀에서, 주말에 만든 서비스.

카페24 AI 홈페이지 빌더 랜딩 화면. 업종을 고르면 AI가 만든 홈페이지 예시가 노트북 목업 안에 떠 있다.
Cafe24 · 2026.03 — 진행중

AI 홈페이지 빌더

AI 채팅만으로 홈페이지를 만드는 완전 관리형 빌더. 기획·디자인·프론트·백엔드가 다 함께 AI를 쓰는 협업 프로세스를 세우고 3개월 만에 냈습니다.

  • 프로젝트 전체 91%를 바이브코딩으로 개발
  • 커스텀 ESLint 룰 · Claude Skills · husky로 스파게티 코드 차단
  • 아토믹 디자인 + DDD 컴포넌트 설계, 온보딩 퍼널 설계
  • 어드민 대시보드 · 예약 · 설정 · 부가서비스 전반
  • 그라파나 통계 화면 구축

Next.js · React · TypeScript · TanStack Query · shadcn · Tailwind · Zustand · Orval

서비스 열기
버즐 랜딩 화면. 격자 배경 위에 "코드는 버즐이, 상상은 내가" 문구가 놓여 있다.
coFound · 프리랜서 · 2022.02 — 진행중

BUZZLE

드래그 앤 드롭으로 홈페이지를 만드는 노코드 서비스. Wix·아임웹과 달리 결과물이 실제 React 웹페이지로 나오도록 만들었습니다. 3인팀을 이끌고 주말마다 짓고 있습니다.

  • 조립한 화면을 VirtualDomTree로 객체화해 React 페이지로 출력
  • 편집 히스토리 되돌리기 · 컴포넌트 제어 툴바
  • 머티리얼 · 레트로 · 뉴모피즘 · 글래스모피즘 디자인 시스템
  • ModuleCSS → BDS → shadcn·Tailwind로 완전 전환
  • tauri로 모바일 · 데스크탑 앱까지 커버

React · Zustand · Vite · Hono · Prisma · MongoDB · tauri 2.0

서비스 열기
카페24 에디봇 화면. 상단 배너 아래로 상품 상세페이지 디자인 템플릿이 격자로 늘어서 있다.
Cafe24 · 2021.10 — 2023.08

에디봇

포토샵 없이 클릭과 드래그만으로 상품 상세페이지를 만드는 WYSIWYG 에디터. 레거시 코드와 팀 스타일에 적응하면서 편집기의 핵심 기능을 만들었습니다.

  • 버추얼돔을 포함한 SPA 라이브러리 직접 개발, 편집영역 미니맵에 적용
  • UI 기반 사용자 활동 추적 에러 트래커 (Sentry.io 유사)
  • HTML · Blob · SVG · Canvas 결합 블러 필터
  • 중첩 SVG를 Canvas에 출력하도록 로직 변경, SVG to JSON 컨버터 개발
  • 크롬 private 메모리 · GPU 렌더러 메모리 최적화
  • 자체개발 번들러를 Vite로 교체

VanillaJS · Canvas · SVG · WYSIWYG · i18n · PHP · AWS

서비스 열기
헤이버디 웹사이트 화면. 골프 장비 분석 리포트와 선수 비교 카드가 놓여 있다.
프리랜서 · 2019.12 — 2020.07

헤이버디

나와 맞는 골프 장비를 찾아주는 서비스. 프로선수 데이터와 골프채 스펙을 사용자 정보와 비교해 추천합니다.

  • Euclidean distance 알고리즘으로 선수 데이터 비교 분석
  • SEO를 위해 CSR → SSR 마이그레이션
  • Route 기반 Sitemap 자동 생성
  • 뉴모피즘 디자인 프레임워크를 만들어 오픈소스로 배포

Nuxt.js · Express · Sequelize · AWS EC2 · RDS · Route53

카페24 애널리틱스 안내 문서 화면. 통합 분석과 방문자 집계 방식, 인사이트 기능이 항목별로 정리되어 있다.
Cafe24 · 2025.05 — 2025.06

Cafe24 Analytics

어떤 고객이 유입되고 어느 연령층이 주 고객인지, 어느 지역에서 매출이 발생하는지를 보여주는 쇼핑몰 통계 서비스.

  • 커서로 100% 바이브 코딩하여 팝업 페이지 100개 제작
  • Figma to React 디자인 정합성 맞추기
  • FE MCP (Figma · Jira · Slack) 개발
  • ADK 멀티에이전트 FE 자동화 연구 개발
  • 2024년 커서 에디터 사용기 발표 후 전사 도입 결정

Next.js · React · TypeScript · TanStack Query · shadcn · Tailwind · Zustand · Axios

서비스 열기
유튜브 쇼핑 제휴 제품 검색 화면. 상단 배너 아래로 카테고리 아이콘과 제휴 상품 목록이 놓여 있다.
Cafe24 · 2024.10

유튜브 샵스 어필리에이트

유튜버가 쇼핑몰 상품 링크를 채널에 올려 홍보하면 판매수익을 함께 나누는 서비스. 5일 안에 완성해야 하는 조건에서 진행했습니다.

  • 레이어 시프트 문제 해결
  • Bundle Analyzer로 vite 최적화
  • 반응형 모달 · 텍스트 복사 HOC · carousel 컴포넌트 개발

React · TypeScript · React Query · Cafe24 Design System · Recoil · react-hook-form

서비스 열기
카페24 서비스 메인 화면. "PRO와 함께라면" 문구와 쇼핑몰 시작 버튼이 놓여 있다.
Cafe24 · 2023.09 — 2024.08

EC 어드민

상품 등록, 재고 관리, 쇼핑몰 설정, 매출 그래프를 담당하는 쇼핑몰 관리 대시보드. PHP로 작성되어 있던 화면을 React·TypeScript로 점진 전환했습니다.

  • 멀티쇼핑몰 설정 페이지 개발
  • 재입고 알림 설정 및 알림 기능 개발
  • Pn룰로 GitLab MR 비동기 커뮤니케이션
  • AI Review로 리뷰 정확도 향상, One Click Man으로 커밋 메시지 자동생성
  • Figma to Code 토스터로 React 컴포넌트 자동 생성

React · TypeScript · React Query · CDS · TanStack Router · Recoil · vite · i18n

서비스 열기
카페24 헬프센터 메인 화면. "무엇을 도와드릴까요?" 검색창과 추천 키워드, 쇼핑몰 가이드 카드가 놓여 있다.
Cafe24 · 2023.11 — 2023.12

AI 헬프센터

단순 사용성 문의는 AI 챗봇이 해결하고, 복잡한 문의는 AI가 필요한 정보를 먼저 모아 CS 처리를 가속하는 서비스.

  • 아토믹 디자인 패턴 컴포넌트 적용
  • 병렬 네트워크 호출 및 AI 응답 로딩 화면 전환 애니메이션
  • SSE로 실시간 도착하는 AI 응답을 채팅 화면에 구현
  • 스켈레톤 UI 구현

Next.js · React · TypeScript · React Query · MUI 기반 CDS · Framer Motion · Zustand

서비스 열기
이지픽 랜딩 화면. "쇼핑몰 사장님들의 목소리로 만든 가장 쉬운 사입" 문구와 가입 버튼이 놓여 있다.
Cafe24 · 2022.08 — 2023.02

이지픽

발품을 팔지 않아도 의류 사입 절차를 처리하는 서비스. 사입·물류·배송·세금계산·거래명세서를 한 번에 다룹니다. 소매상용, 사입삼촌용, 관리자용 세 가지를 개발했습니다.

  • 검색 필터 추가 작업
  • 버그 수정 및 PC·모바일 화면 유지보수

jQuery · PHP

서비스 열기
npm에 배포된 @buzzle/bds 패키지 페이지. README와 설치 명령, 주간 다운로드 그래프가 함께 보인다.
coFound · 프리랜서 · 2022.02 — 진행중

Buzzle BDS

MUI 기반으로 만든 버즐 디자인 시스템. 일관된 사용자 경험과 개발 생산성을 위해 도입했고, 새 인원이 합류해도 적응 허들이 낮도록 설계했습니다.

  • MUI 오버라이드
  • NPM 패키지 배포
  • Next.js SSR을 지원하도록 컴포넌트 래핑

React · motion · d3 · TanStack Table · MUI · emotion

서비스 열기
대학 통합 설문조사 시스템 설계 및 구축 논문 페이지. 저자 목록에 장석현이 포함되어 있다.
피타그래프 · 인턴 · 2019.07 — 2019.08

우리마을가게 상권분석 설문조사 시스템

서울 신용보증센터의 소상공인 방문 이후 수요 조사와 상권분석 서비스에서 쓰이는 설문조사 시스템을 개발했습니다.

  • 대학 통합 설문조사 시스템을 변경·적용
  • 카드 방식 설문 문항 추가 개발
  • 구세대 Oracle에서 비효율적으로 동작하는 쿼리 개선

Spring MVC · Vue.js · Oracle

서비스 열기
만든 것 전체 보기

지나온 길

지금 몸담고 있는 두 곳.

  1. 2021.10 — 재직중

    카페24 주식회사정규직

    AI 홈페이지 빌더, 사내 AI 플랫폼, 애널리틱스, EC 어드민, 에디봇. 프론트엔드에서 시작해 렌더 서버와 AI 자동화 연구까지 넓혔습니다.

  2. 2022.02 — 진행중

    BUZZLEcoFound · 프리랜서

    노코드 웹빌더와 디자인 시스템 BDS. 3인팀을 이끌고 주말 프로젝트로 짓고 있습니다.

전체 경력 보기

쓴 것

만들면서 걸렸던 것, 고치면서 알게 된 것.

이 사이트를 다시 지었습니다MUI와 Recoil을 걷어내고 Next 16 · Tailwind v4 · 커스텀 ESLint 룰 25개 위에 포트폴리오를 다시 올린 기록.
글 전체 보기

그래서, 다음은
무엇을 만들까요.

어려운 프로젝트일수록 좋습니다. 아직 아무도 만들지 않은 것이면 더 좋고요.

coolman555@me.comGitHubLinkedIn