Jin's Web Portfolio

반복되는 비효율을

AI와 자동화로 걷어내는

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

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

JIN's WEB PORTFOLIO 💻
JIN's WEB PORTFOLIO 💻
about

About

화면 구현에서 시작해, 지금은 AI 코딩 도구로 개발부터 배포와 운영까지 자동화합니다.

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

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

자기소개 더보기
자기소개 더보기
WORK EXPERIENCE

  • 2025.09 ~ ing

    닥터블릿헬스케어

  • 2021.10 ~ 2025.08

    로움아이티

EDUCATION & CERTIFICATIONS

  • 2021. 09

    웹디자인기능사 - 한국산업인력공단

  • 2021. 03 ~ 2021.08

    UI/UX 반응형 웹디자인&웹퍼블리셔 - 그린컴퓨터아카데미

CASE STUDIES

실무에서 만든 시스템 4건의 아키텍처, 기술 선택 이유, 트러블슈팅 과정을 문서로 정리했습니다. 회사 코드의 사본이 아니라 일반화해 재구성한 문서입니다.

설계 원칙과 트러블슈팅 문서
설계 원칙과 트러블슈팅 문서

Skills

Claude Code
Claude Code
카페24 13개 브랜드의 운영을 Claude Code로 돌립니다. 브랜드마다 디자인 시스템과 처리 절차를 스킬로 정의하고, 반복되는 요청은 어느 파일 어느 줄을 고치면 되는지 레시피로 쌓아두어 자연어 요청이 곧 수정과 배포로 이어집니다. 절대 규칙과 변경 범위 상한을 프롬프트와 설정 양쪽에 걸어, 판단이 흔들려도 staging 밖으로는 나가지 못하게 막았습니다. 이 위에서 Slack 요청을 처리하는 에이전트와 크롤링 실패를 진단하는 에이전트를 헤드리스로 돌리고 있고, Figma는 MCP로 연결해 디자인 원본에서 값을 직접 읽습니다.
NestJS
NestJS
카페24 상품 이미지 WebP 변환 앱의 백엔드를 NestJS로 설계하고 구현했습니다. 스캔과 변환, 서빙, 드리프트 스캔을 모듈 단위로 분리하고, Prisma와 PostgreSQL 기반 장부 설계와 pg-boss 작업 큐로 대량 변환을 안정적으로 처리했습니다.
TypeScript
TypeScript
interface로 props와 데이터 타입을 명확히 정의해 컴포넌트 간 데이터 흐름의 안정성을 높였습니다. 이 포트폴리오를 포함한 React 프로젝트와 NestJS 백엔드까지 TypeScript 기반으로 작성하며, 타입이 문서 역할을 하는 코드를 지향합니다.
Python
Python
Playwright 기반 봇 차단 우회 크롤링, 공식 API 연동, BigQuery append-only 적재 파이프라인, 다층 정합성 검증, 아침 자동 슬랙 리포트까지, 수집부터 검증과 운영으로 이어지는 데이터 자동화를 구현했습니다.
React
React
컴포넌트 기반 UI 설계에 익숙하며, React를 활용한 재사용 가능한 퍼블리싱 구조를 구현할 수 있습니다. 디자이너와 프론트엔드 개발자와의 협업을 고려해 마크업을 작성하고, Props 흐름과 기본적인 상태 관리에 대한 이해를 바탕으로 퍼블리싱을 유연하게 수행할 수 있습니다.
배포와 운영
배포와 운영
만든 것을 직접 배포하고 운영합니다. pnpm 모노레포는 멀티스테이지 빌드로 묶어 이미지 하나로 만들고, 로컬에서는 docker-compose로 같은 파이프라인을 검증합니다. 13개 브랜드 스킨은 GitHub Actions로 배포하는데, main에 올리면 staging까지는 자동으로 가고 운영 반영은 수동 트리거로 따로 떼어 검증을 거친 뒤에만 올립니다. GCP에서는 Cloud Build로 빌드한 이미지를 Cloud Run 리비전으로 교체해 배포하거나 되돌리고, 인증정보는 Secret Manager로 코드에서 분리했습니다. 정기 점검은 별도 스케줄러 없이 앱에 내장한 pg-boss로 새벽에 돌립니다.
웹 표준 마크업
웹 표준 마크업 (HTML5, CSS3, JavaScript, jQuery)
시멘틱 마크업으로 문서 구조를 명확히 정의하고, 웹 접근성과 SEO를 고려해 작성합니다. 크로스브라우징 호환성을 확보해 어느 브라우저에서도 같은 화면을 제공합니다. 미디어 쿼리와 Flexbox, Grid로 반응형 레이아웃을 구성하고 CSS 애니메이션과 트랜지션으로 인터랙션을 다듬습니다. 스크롤 위치에 따라 변하는 인터랙션은 라이브러리 없이 바닐라 자바스크립트로 구현했고, jQuery에서는 공통 함수와 슬라이드, 팝업을 모듈화해 재사용성과 유지보수성을 높였으며 Ajax로 신청 폼 전송과 실시간 가입자 정보 제공을 처리했습니다.
Django
Django
ORM, Middleware, F expression 등을 활용해 방문자 통계 집계, 관리자 기능, 엑셀 다운로드 등 서버 기반 데이터 처리 기능을 구현했습니다.

Works

카페24 자사몰 통합 운영
카페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 검증→운영 배포를 잇는 무인 요청 처리 파이프라인 구축. GA4 구매 이벤트 누락과 외부 추적 스크립트를 찾아 수정

프로젝트 소개
프로젝트 소개
기술 문서
기술 문서
커머스 채널 데이터 수집 자동화
커머스 채널 데이터 수집 자동화

  • 참여

    |

    100%

  • 역할

    |

    데이터 파이프라인 설계 및 개발 (크롤러 / API 연동 / 적재 / 정합성 검증)

  • 기술

    |

    Python, Patchright, BigQuery, Google Sheets API

  • 환경

    |

    쿠팡 WING, 네이버 스마트스토어, GCP

  • 성과

    |

    API가 이미 주문 관리 솔루션에 연결돼 추가 연동이 막힌 쿠팡은 화면 수집, 공식 API가 있는 네이버는 직접 연동해 13개 브랜드 광고비와 매출을 자동 수집, 수기 집계 대비 일 2~3시간 절감. 적재 전 여러 겹의 검증 게이트로 틀린 값을 막고, 매일 아침 슬랙 자동 리포트로 상태 확인

프로젝트 소개
프로젝트 소개
기술 문서
기술 문서
카페24 상품 이미지 WebP 자동 변환 앱
카페24 상품 이미지 WebP 자동 변환 앱

  • 참여

    |

    100%

  • 역할

    |

    풀스택 설계 및 개발

  • 기술

    |

    NestJS, Next.js, PostgreSQL, Prisma, pg-boss, sharp, Cafe24 API, Docker

  • 환경

    |

    pnpm 모노레포, GCP(Cloud Run, Cloud Build, Cloud SQL), Cafe24 D2C

  • 성과

    |

    상품 본문 이미지 WebP 자동 변환으로 평균 84% 용량 절감(PageSpeed Insights API 전후 측정으로 검증), 운영 9개 몰 확장 적용. 라이브 이미지 장애를 경로, CDN 캐시, 클라이언트 폴백 3계층으로 규명해 수정하고, 회귀 테스트 하네스와 실서빙 자동 점검으로 재발 방지

프로젝트 소개
프로젝트 소개
기술 문서
기술 문서
칼로리바
칼로리바

  • 참여

    |

    65%

  • 역할

    |

    프론트엔드 및 백엔드 신규개발 및 유지보수

  • 기술

    |

    HTML, CSS, JavaScript, Django, MySQL

  • 환경

    |

    Django 웹 서비스, MySQL

  • 성과

    |

    홈쇼핑 신청 시스템 개발 및 다채널 확장, 미들웨어를 활용한 일별 방문자 집계 시스템 구축, 지점별 그룹 관리 CRUD 기능 설계 및 개발, 엑셀 다운로드 기능 개발, 광고 유입 파라미터 수집 구조 개발

프로젝트 소개
프로젝트 소개
기술 문서
기술 문서

Frontend Side Projects

디즈니플러스 클론 웹앱

  • 기술

    |

    React, Styled Components, Firebase, Axios

  • 설명

    |

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

Demo
Demo
소스 코드
소스 코드
여행 상품 주문 웹앱

  • 기술

    |

    React, Context API, Axios, Express

  • 설명

    |

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

Demo
Demo
소스 코드
소스 코드