Jin's | 웹 포트폴리오

반복되는 비효율을
AI와 자동화로 걷어내는

탄탄한 마크업을 기본으로,

도구가 필요하면 직접 만드는 개발자 진승열입니다.

JIN's WEB PORTFOLIO 💻

About

화면 구현에서 시작해, 지금은 서비스 전반의 비효율을 자동화로 해결하고 있습니다.

웹 표준을 준수한 탄탄한 마크업을 기본으로, React 환경 퍼블리싱부터 AI 도구를 활용한 Django·NestJS 백엔드 구현, 데이터 수집 자동화까지 폭넓게 다룹니다. 필요한 도구는 직접 만들어, 문제를 끝까지 해결하는 데 집중합니다.

항상 프로젝트의 목표를 중심에 두고 다양한 직군과 협업합니다. 최근에는 Claude Code 등 AI 도구를 실무 워크플로에 적극 도입해, 반복 작업을 효율화하고 1인으로 멀티브랜드 운영까지 수행하고 있습니다.

자기소개 더보기

WORK EXPERIENCE

2025.09 ~ ing
닥터블릿헬스케어
2021.10 ~ 2025.08
로움아이티

EDUCATION & CERTIFICATIONS

2021. 09
웹디자인기능사 - 한국산업인력공단
2021. 03 ~ 2021.08
UI/UX 반응형 웹디자인&웹퍼블리셔 - 그린컴퓨터아카데미

Skills

HTML5

웹 표준을 준수한 시멘틱 마크업을 활용하여 웹 페이지의 구조를 명확하게 정의하고, 웹 접근성을 고려한 요소를 구현한 경험이 있습니다. SEO(검색 엔진 최적화)를 고려한 마크업으로 검색 엔진에서의 노출을 최적화했으며, 크로스브라우징 호환성을 보장하여 다양한 브라우저에서 일관된 사용자 경험을 제공한 경험이 있습니다.

CSS3

CSS3를 활용한 스타일링과 반응형 웹 디자인을 통해 다양한 디바이스에서 최적화된 UI를 구현한 경험이 있습니다. 미디어 쿼리 및 Flexbox, Grid 시스템을 활용한 레이아웃 설계에 능숙하며, CSS 애니메이션 및 트랜지션을 통해 웹 페이지의 사용자 경험을 향상시켰습니다. 또한 크로스브라우징 호환성 문제를 해결하여 모든 브라우저에서 일관된 디자인을 제공한 경험이 있습니다.

JavaScript

스크롤 위치에 따라 동적으로 변화하는 인터랙션을 바닐라 자바스크립트만으로 구현하여, 라이브러리에 의존하지 않고도 사용자 경험을 높일 수 있는 UI 구성 능력을 갖추고 있습니다.

jQuery

공통 함수와 슬라이드 팝업 등 모듈화된 함수로 구성하여 재사용성과 유지보수성을 높인 경험이 있습니다. 또한, Ajax 통신을 활용해 신청 폼 데이터를 서버에 전송하고, 가입자 정보를 실시간으로 사용자에게 제공했습니다.

React

컴포넌트 기반 UI 설계에 익숙하며, React를 활용한 재사용 가능한 퍼블리싱 구조를 구현할 수 있습니다. 디자이너와 프론트엔드 개발자와의 협업을 고려해 마크업을 작성하고, Props 흐름과 기본적인 상태 관리에 대한 이해를 바탕으로 퍼블리싱을 유연하게 수행할 수 있습니다.

TypeScript

interface로 props·데이터 타입을 명확히 정의해 컴포넌트 간 데이터 흐름의 안정성을 높였습니다. 이 포트폴리오를 포함한 React 프로젝트와 NestJS 백엔드까지 TypeScript 기반으로 작성하며, 타입이 문서 역할을 하는 코드를 지향합니다.

Python

Playwright 기반 봇 차단 우회 크롤링, 공식 API 연동, BigQuery append-only 적재 파이프라인, 다층 정합성 검증, 실패 자동진단 디스패처까지 — 수집부터 검증·운영까지 이어지는 데이터 자동화를 구현했습니다.

Django

ORM, Middleware, F expression 등을 활용해 방문자 통계 집계, 관리자 기능, 엑셀 다운로드 등 서버 기반 데이터 처리 기능을 구현했습니다.

NestJS

카페24 상품 이미지 WebP 변환 앱의 백엔드를 NestJS로 설계·구현했습니다. 모듈 단위로 스캔·변환·서빙·드리프트 스캔 도메인을 분리하고, Prisma·PostgreSQL 기반 장부 설계와 pg-boss 작업 큐로 대량 변환을 안정적으로 처리했습니다.

Claude Code

Claude Code를 실무 운영의 중심에 도입했습니다. 카페24 13개 브랜드의 처리 절차를 브랜드별 스킬로 정의하고 반복 요청을 recipe로 축적해 자연어 → 수정 → 배포 파이프라인을 운영하며, 가드 프롬프트와 권한 격리를 설계해 헤드리스 에이전트 2종(Slack 요청 접수 처리, 크롤링 실패 자동진단)을 구축했습니다. MCP 연동으로 Figma·디자인 작업과도 연결했습니다.

Works

카페24 자사몰 통합 운영

참여
|
100%
역할
|
퍼블리싱 + AI 보조 워크플로우·디자인 토큰 체계 설계
기술
|
HTML, CSS, JavaScript, GSAP, GitHub Actions, Google Apps Script, Figma, Tokens Studio
환경
|
Cafe24 13개 브랜드 monorepo
성과
|
퍼블리셔 3인이 4개 브랜드씩 분담하던 운영을 Claude Code 기반 파이프라인 설계로 1인 전담 전환. Slack 접수→AI 처리→staging 검증→운영 배포를 잇는 무인 요청 처리 파이프라인 설계·MVP 구축

Notion

GitHub

커머스 채널 데이터 수집 자동화

참여
|
75%
역할
|
데이터 파이프라인 설계·개발 (크롤러 / API 연동 / 적재 / 정합성 검증)
기술
|
Python, Patchright, BigQuery, Google Sheets API
환경
|
쿠팡 WING, 네이버 스마트스토어, GCP
성과
|
API를 제공하지 않는 쿠팡은 크롤링, 공식 API가 있는 네이버는 직접 연동해 13개 브랜드 광고비·매출을 자동 수집, 수기 집계 대비 일 2~3시간 절감. 실패 알림을 Claude Code 자동진단 봇으로 연결해 원인 분석까지 슬랙 DM으로 회신

Notion

GitHub

카페24 상품 이미지 WebP 자동 변환 앱

참여
|
100%
역할
|
풀스택 설계 및 개발
기술
|
NestJS, Next.js, PostgreSQL, Prisma, pg-boss, sharp, Cafe24 API
환경
|
pnpm 모노레포, GCP, Cafe24 D2C
성과
|
상품 본문 이미지 WebP 자동 변환으로 평균 84% 용량 절감

Notion

GitHub

칼로리바

참여
|
65%
역할
|
프론트엔드 및 백엔드 신규개발 및 유지보수
기술
|
HTML, CSS, JavaScript, Django, MySQL
환경
|
Django 웹 서비스, MySQL
성과
|
홈쇼핑 신청 시스템 개발 및 다채널 확장, 미들웨어를 활용한 일별 방문자 집계 시스템 구축, 지점별 그룹 관리 CRUD 기능 설계 및 개발, 엑셀 다운로드 기능 개발

Notion

GitHub

Frontend Side Projects

디즈니플러스 클론 웹앱

2개월 소요

기술
|
React, Styled Components, Firebase, Axios
설명
|
TMDB API를 활용해 인기 콘텐츠를 실시간으로 제공하는 OTT 플랫폼 클론 프로젝트입니다. Firebase 인증으로 로그인·회원가입을 구현하고, 반응형 UI로 다양한 디바이스에서 동일한 경험을 제공합니다.

Demo

GitHub

틱택토 게임

1개월 소요

기술
|
React
설명
|
React 기반의 틱택토 게임으로, 컴포넌트와 상태 관리를 통해 턴 변경과 승리 조건 체크 등 기본 기능을 구현했습니다.

Demo

GitHub

여행 상품 주문 웹앱

기술
|
React, Context API, Axios, Express
설명
|
Context API로 주문 상태를 전역 관리하는 여행 상품 주문 웹앱입니다. 상품·옵션 선택부터 주문 요약, 완료까지 3단계 흐름을 구현했고, 상품·주문 API를 제공하는 Express 서버를 직접 만들었습니다. 데모는 서버 응답을 내장한 정적 빌드로 동작합니다.

Demo

GitHub

반복되는 비효율을AI와 자동화로 걷어내는

About

Skills

Works

Frontend Side Projects

반복되는 비효율을
AI와 자동화로 걷어내는