김용범 포트폴리오

웹 개발자 김용범의 포트폴리오

구직 상태
구직 중

최종 사용자와 개발자 모두를 만족시키는 제품 구현을 지향합니다.

Gmail에서 메일 쓰기GitHub 프로필이력서 PDF 다운로드
이메일dczwtu12b+portfolio@gmail.com

프로젝트

공개 프로젝트

개인 프로젝트

portfolio-ybkim

Astro 정적 사이트 구조, 문서 기반 기획, 아키텍처 결정 기록, 제품 백로그와 품질 검증 절차를 함께 살펴볼 수 있는 포트폴리오 제품입니다.

역할
기획 · 구현
  • 아키텍처 설계
  • 하네스 구축
  • 문서 기반 개발
상세 설명GitHub 저장소

회사 비공개 프로젝트

회사에서 비즈니스 목적으로 수행한 실무 프로젝트입니다. 비공개 소스 코드를 포함한 내부 정보는 제외하였습니다.

학원 정보·상담 웹 서비스

학원 정보 탐색과 상담 신청을 잇는 공개 서비스에서 기획, 화면 구성, API·데이터 연동, 배포 준비와 인수인계까지 맡았습니다.

  • 기획 및 제품 설계
  • 아키텍처 구현
  • 1인 유지보수성 확보
공개 서비스 보기

과학 문항 개념·풀이 논리 구조화 도구

인증 흐름과 초기 UI mockup을 포함한 프론트엔드 구조 전반을 구축 후, 다음 작업자가 프론트엔드 작업을 이어나갈 수 있도록 인계했습니다.

  • 프론트엔드 구축
  • 로그인 흐름 설계
  • API 응답·도메인 타입 분리

과학 교육 콘텐츠 제작·검수 플랫폼

기존 내부 업무 플랫폼을 인수받아 운영 안정성을 보강하고, 트러블 슈팅 도구를 만들어 운영상 발생하는 문제들을 해결하였습니다. 또한 제품 인계를 위한 문서 작업 등을 진행하였습니다.

  • 인수인계
  • 풀스택
  • 트러블 슈팅

Gmail에서 테스트 계정 요청

Gmail에 로그인하지 않았다면 Google 로그인 화면이 먼저 열리고, 로그인 후 요청 내용이 이어집니다.

역량

사용한 기술과 실제 저장소에서 확인할 수 있는 구현 역량을 함께 보여드립니다.

기술 스택

제품 구현과 운영 과정에서 사용한 기술을 역할별로 정리했습니다.

언어
  • TypeScript
  • Python
  • SQL
  • Solidity
프론트엔드
  • Next.js
  • Tailwind CSS
  • TanStack Query
  • Framer Motion
  • jQuery
  • Bootstrap v5
백엔드 · API
  • Django
  • FastAPI
  • SQLAlchemy
  • Alembic
데이터베이스 · 스토리지
  • Amazon S3
  • PostgreSQL
클라우드 · 인프라
  • Amazon EC2 (Linux)
  • Docker
  • Terraform
  • Nginx
  • Amazon Route 53
DevOps · CI/CD
  • GitHub Actions
  • Amazon CodeDeploy
테스트 · 품질
  • Vitest
  • Playwright
  • Mock Service Worker
  • ESLint
  • Husky
보안 · 소프트웨어 공급망
  • Certbot
  • Dependabot
  • CycloneDX
버전 관리 · 협업
  • GitHub
  • Notion
  • Slack
  • Storybook

구현 역량

실천 항목마다 대표 설계 기준, 핵심 특징, 자동화 경로와 공개 근거를 연결했습니다.

역량대표 설계 기준핵심 특징자동화 경로확인 근거
기계적인 품질 피드백개발 규칙을 편집, commit, CI 단계에서 반복 확인하는 feedback loop로 연결합니다.파일 성격별 line budget · 중첩 depth 2 경고, depth 3 오류
  • 개발 단계별로 강화되는 품질 기준
  • Agent 완료는 warning-free, 일반 lint는 예외 대응용으로 분리
ESLint · pre-commit hook · warning-free 품질 게이트
ESLint 품질 규칙품질 게이트 설계
개발 규칙과 작업 완료·commit·push·CI 단계별 품질 게이트를 공개합니다.
안전한 Agent 개발 환경반복 작업은 Agent guideline을 따라 일관되게 실행하고, 외부 연결·비밀 정보·파괴적 작업은 sandbox와 명시적 승인 경계 안에서 통제합니다.작업별 guideline · sandbox 격리 · 명시적 승인
  • 반복 작업과 고위험 작업의 실행 경계 분리
Agent guideline harness · sandbox · 승인 절차
Agent 운영 기준Terraform 구성
Agent 실행 규칙과 GitHub ruleset·update 정책을 저장소에서 관리합니다.
문서 Architecture와 작업 추적요구사항에서 구현 근거까지 이어지는 문서 구조로 개발자 본인·Agent·recruiter가 작업 맥락과 의사결정을 추적할 수 있게 합니다.요구사항 → Phase roadmap → PBI backlog
  • 요구사항부터 구현 근거까지 이어지는 추적성
Docs lint · traceability matrix
문서 구조
ADR과 content boundary로 결정 책임을 분리
웹 표준과 접근성Semantic markup을 기준으로 구현하고, 표준 validator와 접근성 검사를 저장소의 반복 가능한 검증 절차에 포함합니다.Semantic HTML · WCAG A·AA
  • 표준 적합성과 실제 browser 동작을 함께 검증
vnu · html-validate · Playwright · axe
접근성 검증
Heading, landmark와 pointer target까지 browser test로 확인
자동화된 회귀 검증브라우저와 단위 검증을 필요한 품질 영역에 배치해 agent coding 결과가 기존 동작과 layout을 깨뜨리지 않는지 확인합니다.사용자 동작 · responsive layout · validator 경계 조건
  • 변경 위험에 맞춘 browser·unit 검증
Playwright browser test · Node unit test
Test suite
Wide·narrow layout과 custom validator를 회귀 검증