클라이언트 상담 & 요구사항 정리
- 요구사항 인터뷰 및 우선순위 정의
- 기획 의도와 개발 난이도 균형 조율
- 커뮤니케이션 문서화
풀스택 개발 · 디자인 · SEO · 데이터 분석을 하는
웹 개발자 김혜빈입니다
디자인 · 개발 · SEO 컨설팅 경험으로
당근처럼 생활에 스며드는 경험을 만들고 싶습니다
실서비스를 직접 만들며, LCP 28% 단축 · 이미지 최적화 40~70%를 달성했습니다.
Core Strengths
더 쉽고 편한 경험이 되도록 구현하고,
데이터를 바탕으로 개선합니다
김혜빈풀스택 웹 개발자
디자인부터 개발, SEO, 광고 운영까지 직접 경험하며 전 과정을 이해하는 웹 개발자입니다. 다양한 클라이언트와 소통하며 쌓은 패턴을 데이터로 정리하고, 문제를 빠르게 찾아 개선할 때 가장 보람을 느껴요.
1998년생서울 금천구경력 3년 1개월영산대 졸업 (3.98/4.5)
개발 + 디자인 통합 진행
- UI/UX 설계와 프론트엔드 구현 동시 리드
- 컴포넌트 단위 재사용 구조 설계
- 반응형 · 접근성 기준 완성도 관리
광고 세팅 & SEO
- GA4 · Meta Pixel · Google Ads 전환 추적
- 메타데이터 · 구조화 기반 SEO 개선
- Lighthouse · Search Console 성능 개선
경력
㈜글로벌엠아이지2025.03 ~ 재직중포트폴리오 보기 →
웹개발 / 연구개발부
- 클라이언트 상담부터 기획·디자인·개발·SEO·배포까지 단독 수행
- Figma UI/UX 설계 → 퍼블리싱 → 프론트·백엔드 개발 일괄 진행
- 네이버 프리미엄 로그 분석 및 부정 클릭 방지 운영
- 네이버·메타 광고 운영, 서치어드바이저 관리
- 내부 프로그램 UI/UX 설계 및 광고 배너 디자인
요필 디자인2024.06 ~ 2024.08
UI/UX 디자인 인턴
- 네이버 고객센터 UI/UX 개선 작업 참여
- UX 라이팅 제안 및 SVG 아이콘 통일 작업
㈜핸디커뮤니케이션즈2022.07 ~ 2024.02
운영 / 개발 / 그래픽디자인
- 게임 이벤트 배너·마케팅 배너·사전예약 배너 제작
- 아이 러브 버거, 마스터 오브 나이츠 등 모바일 게임 광고 배너 제작
- 운영 업무 및 그래픽 디자인 병행
학력
영산대학교2017.03 ~ 2023.02
게임영상콘텐츠학과 · GPA 3.98 / 4.5
이런 점이 강점이에요
🔧처음 보는 기술도 일단 부딪힙니다
모르는 거 나오면 찾아보면 되죠. 실제로 그렇게 디자인에서 개발까지 왔습니다.
🎨디자인·개발 둘 다 보입니다
'이걸 어떻게 구현해요?'가 없어요. 보이는 것과 동작하는 것 사이에서 직접 결정합니다.
👂클라이언트 말을 잘 구조화합니다
두리뭉실한 요구사항도 정리해서 다시 확인드려요. 방향이 맞아야 개발도 빠릅니다.
솔직히 이런 점은 부족해요
🌙완성도에 집착하는 편이에요
마감 전날 밤새는 건 일상입니다. 줄이려고 노력 중인데 쉽지 않네요.
🤐처음엔 말이 많지 않아요
낯을 좀 가립니다. 친해지면 완전히 달라진다고들 하더라고요.
사용하는 기술 스택
React컴포넌트 기반 UI 설계, 상태 관리(Zustand · React Query)
Next.jsSSR · ISR · App Router, 성능 최적화 및 SEO 대응
TypeScript전 프로젝트 타입 안전성 확보, API 계약 명세
Tailwind CSS유틸리티 기반 반응형 UI, 디자인 토큰 시스템 적용
Node.jsREST API 설계 및 서버 사이드 로직 구현
SupabaseDB 설계 · Auth · Storage, 관리자 기능 연동
MySQL관계형 DB 설계, 동적 콘텐츠 렌더링 쿼리 최적화
AWS / Vercel / Cloudflare배포 자동화, Edge 캐싱, TTFB 최적화
OpenAI · Claude APIAI 기반 기능 구현 및 프롬프트 설계
실서비스 기준
직접 설계하고 배포한 서비스들
실서비스 프로젝트
6개+기획·설계·개발·배포 단독단독 기여도
100%전 프로젝트 기준LCP 개선
~28%3.5s → ~2.5s 단축이미지 최적화
40~70%WebP 전환 기준 번들 감소Projects
실제 운영 중인 사이트를 직접 설계·개발했습니다
Academy기여도 100%
위드빌댄스스튜디오
Next.jsSupabaseVercel
Highlights
- 클래스 소개·상담 CTA를 한 페이지 흐름으로 구성
- 모바일 문의 접근성 최적화
- Supabase 문의 DB 연동 및 관리자 실시간 조회 구현
Corporate기여도 100%
평원산업
Next.jsSupabaseVercel
Highlights
- 제품·공법·시공 사례 정보 구조 재설계
- Supabase Storage 연동 파일 관리 및 동적 다운로드 처리
- EBook PDF 최적화 및 웹 뷰어 구현
Commerce기여도 100%
LG Best Shop 용산전자상가점
Next.jsVercel
Highlights
- 간편 상담 예약 폼 중심 전환 설계
- 전화·방문 정보 원스톱 제공
- Server Action 기반 예약 폼 처리 및 이메일 알림 자동화
Platform기여도 100%
마이크임팩트
Next.jsSupabaseVercel
Highlights
- 키워드·분야·섭외비 기준 탐색 구조
- 탐색 → 문의 CTA 직결 동선
- Supabase 다중 필터 쿼리 최적화 및 무한스크롤 구현
Service기여도 100%
글로벌엠아이지
PHPMySQLCloudflare
Highlights
- 서비스 소개·포트폴리오·견적 신청 전 구간 구현
- PHP 서버 사이드 렌더링 및 MySQL 쿼리 최적화
- 관리자 연동 고려한 DB 설계 및 동적 렌더링
Service기여도 100%
비비드드론
Next.jsSMS APIVercel
Highlights
- Next.js API Route로 서버 사이드 SMS 발송 처리 및 폼 유효성 검증
- SMS API 문의 실시간 알림 연동
- 다크톤 풀스크린 비주얼 구성
AI-Driven Workflow
01
토큰 절약보안 경계 설정작업 범위 제한
# CLAUDE.md 예시
## 작업 방식
- 요청과 직접 관련된 파일만 읽는다
- 전체 프로젝트를 한 번에 스캔하지 않는다
- 답변은 요약 위주로 짧게 작성한다
## 보안 규칙
- .env*, API 키는 읽거나 출력하지 않는다
- 비밀값은 사용자가 직접 설정했다 가정하고 진행02
오류 추적API 스펙 문서화DB 스키마 관리
# errors.md 예시
## Supabase RLS 오류 패턴
- 증상: 데이터 조회 시 [] 빈 배열 반환
- 원인: Row Level Security 정책 미설정
- 해결: auth.uid() 기반 정책 추가
```sql
CREATE POLICY "read_own" ON table
FOR SELECT USING (auth.uid() = user_id);
```03
재작업 감소일관된 코드 품질컨텍스트 누적
# 실제 변화
## 반복 지시 제거
- 이전: 매 대화마다 "보안 주의, 파일 최소화..." 설명
- 이후: CLAUDE.md 한 번 정의 → 이후 대화에서 자동 적용
## 토큰·컨텍스트 절약
- 이전: 전체 파일 스캔 요청 → 불필요한 토큰 소모
- 이후: 탐색 규칙 제한 → 관련 파일만 읽어 비용 절감
## 오류 해결
- 이전: 오류 상황을 매번 재설명하며 원인 탐색
- 이후: errors.md 참조로 재설명 없이 빠르게 접근