안녕하세요 웹 표준과 접근성을 준수하는 UI 구현에 집중하는 개발자 김남규입니다.
웹 개발의 전반적인 흐름을 이해하기 위해 8개월간의 개발 교육을 이수했으며,
이후 프론트엔드 분야의 전문성을 기르기 위해 6개월간 UI/UX 웹 퍼블리셔 과정을 수료했습니다.
꼼꼼한 마크업과 JavaScript를 활용한 동적인 웹 구현 역량을 키우고 있습니다.
| 기술 분류 | 기술 스택 | 설명 & 경험 | 숙련도 (자기평가) |
|---|---|---|---|
| Markup & style |      |
웹 표준과 접근성을 준수한 시맨틱 마크업 설계. 순수CSS(Flexbox ,Grid 등) 기반 반응형 레이아웃 구현에 능숙합니다 또한, Sass를 사용해 유지보수성이 높은 CSS 아키텍처 설계가 가능합니다. 이를 바탕으로 Bootstrap을 커스터마이징하거나 Tailwind CSS를 이용한 유틸리티-퍼스트 기반의 커스텀 UI 제작 경험을 보유하고 있습니다. | ★★★★☆ |
| Frontend Core |  |
순수 JS 기반 동적 DOM 조작 / 이벤트 처리 , fetch/async/await 활용 AJAX 통신 및 Json 데이터처리, 재사용성 고려 코드 작성 지향. |
★★★☆☆ |
 |
jQurey를 이용한 다양한 동적 UI 기능 및 이벤트 구현 경험. | ★★☆☆☆ | |
| Data & API |  |
fetch API 등을 활용한 비동기 데이터 요청 및 JSON 파싱 / 처리 경험. |
★★★☆☆ |
| Baas |  |
실시간 DB 연동 (CRUD), 스토리지 (이미지 업로드) 등 Supabase 핵심 기능 활용 경험. |
★★☆☆☆ |
| Framework |  |
SPA 구조, 컴포넌트 기반 UI 구축, 기본 상태관리 (useState/useEffect), API 연동(axios) 경험 (ERP 프로젝트) |
★★☆☆☆ |
| Backend |   |
Java , Spring Boot 기반 REST API 설계 및 CRUD 구현 경험, Repository 패턴등 백엔드 아키텍처 흐름을 이해 하고 있습니다. | ★★☆☆☆ |
| Database |   |
기본 CRUD 쿼리 작성 및 DB 설계 경험 (MyBatis , JPA 연동 경험 포함) | ★★★☆☆ |
| Versiion Control |   |
SourceTree 활용 , 기본적인 버전 관리 및 팀 협업(브렌치, 병합) 경험. | ★★★☆☆ |
| Tools |    |
Figma 시안 해석/제작 , Postman API 테스트, Phostoshop 기본 이미지 편집 가능 |
★★★★☆ |
-
소개: 순수 JavaScript(SPA)와 JSON 기반 반응형 웹사이트.
144개 이미지,GIF파일을 AVIF 변환 및 WEBM 변환 , Intersection Observer API 최적화로 Lighthouse 97점 달성
및 애니매이션 라이브러리 최소화 사용 및 직접 CSS 효과사용 하여 구현 하였습니다. -
기술: HTML5, CSS3 (Grid, Media Queries, Animation), 순수 JavaScript (ES6+), JSON, Swiper.js, Lighthouse.
-
LINKS:
-
소개: Flexbox/Grid 기반 모바일 최적화 레이아웃. BaaS 연동 등 PC 버전 동적 기능을 모바일 환경에 적용하고 Swiper.js로 터치 UX 강화.
-
기술: HTML5, CSS3 (Flexbox/Grid), JavaScript (ES6+), jQuery, AJAX, JSON, BaaS (Supabase), Swiper.js.
-
LINKS:
(PC에서는 F12 → 모바일 화면으로 보시길 권장합니다)
-
소개: 웹 표준/접근성 기반 퍼블리싱 위에 BaaS(Supabase) 실시간 CRUD, 다중 JSON 처리(AJAX) 등 프론트엔드 기술을 주도적으로 적용.
-
기술: HTML5, CSS3, JavaScript (ES6+), jQuery, AJAX, JSON, BaaS (Supabase).
-
LINKS:
-
소개: React 기반 맥주 제조 공정(생산계획~출하) 관리 ERP 프론트엔드 개발. LOT 기반 10단계 공정 데이터 연동 및 상태 시각화 구현.
-
기술: React, JavaScript, HTML5, CSS3, React Router, axios, REST API (백엔드: Java, Spring Boot, JPA, ORACLE).
-
LINK:
-
소개: 보험사 업무 효율화를 위한 그룹웨어. DB/계약 관리 파트 담당하여 고객/계약/상품 CRUD, 실시간 실적 대시보드, 만기 고객 필터링 등 구현.
-
기술: HTML5, CSS3, JavaScript, Bootstrap, Chart.js, AJAX, JSON, REST API (백엔드: Java, Spring Boot, MyBatis, MySQL).
-
LINK: