About Me
디자인 감각과 구조적 사고를 바탕으로,
브랜드의 감성과 기술적 완성도를 함께 구현하는 웹퍼블리셔 김민지입니다.
웹 표준과 접근성을 기반으로 시멘틱한 UI를 설계하고,
React 환경에서 반응형·유지보수에 강한 퍼블리싱 구조를 구축합니다.
Skills
- Figma / Adobe XD – 사용자 여정 분석 및 인터랙션 중심 와이어프레임 설계
- React / Zustand – 컴포넌트 설계 및 상태 관리, 협업 경험
- Node.js / Prisma – API 명세 작성 및 백엔드 연동 구조 기획 경험
Career Summary
㈜아이커머
2022.10 ~ 재직 중R&D 기술연구소 · 선임연구원
- React 기반 사내 CMS UI 퍼블리싱 및 스타일링(SCSS 컴포넌트 구조 설계)
- 웹표준·접근성 준수한 마크업 및 반응형 레이아웃 구현
- 공통 컴포넌트 제작과 UI 가이드 정립으로 유지보수 효율화
- 이벤트·알람 관리 화면 UX 리뉴얼로 탐색 시간 15% 단축
- 기획·디자인·백엔드 협업 기반으로 업무 플로우 문서화 및 UI 개선
주요 성과: 중복 알람 UI 통합 → 이벤트 호출량 30% 감소 · 실시간 데이터 렌더링 개선으로 시스템 안정성 향상
비비안 (SBW그룹)
2020.05 ~ 2021.07온라인사업부 · 웹퍼블리셔
- 카페24 기반 자사몰 운영 및 모듈 커스터마이징
- 프로모션·이벤트 페이지 기획 → 디자인 → 퍼블리싱 전 과정 담당
- 반응형 웹 및 접근성 고려한 UI 구축과 유지보수
- 카페24 어드민 구조 분석을 통한 효율적 UI 관리
주요 성과: 카페24 테마 커스터마이징으로 리뉴얼 기간 30% 단축 · 시즌성 배너 클릭률 25% 상승
Flow First
MVP First
Design Together
Flow
First
기능보다 중요한 것은 사용자 흐름입니다.
유저가 왜 멈췄는지 고민하고, 흐름 속에서 문제를 정의합니다.
사용자 여정 중심 사고
문제 탐색 기반의 기획
데이터에서 흐름의 단서 찾기
MVP
First
완벽한 설계보다, 빠른 실행과 학습을 우선합니다.
작게 시작해 피드백을 받고, 빠르게 개선하며 성장합니다.
작은 단위로 실험하기
사용자 피드백 기반의 개선
빠른 실행과 결정으로 학습 가속
Design
Together
설계는 혼자가 아닌 팀의 결과입니다.
협업의 과정을 통해 더 나은 사용자 경험을 만들어갑니다.
역할을 이해하는 커뮤니케이션
협업 중심의 기획 산출물
개발자·디자이너가 함께 설계하는 팀 구조
My Projects
다양한 기술스택으로 구현한 프로젝트들을 소개합니다
DataCenter CMS (Containment Monitoring Systems)
데이터센터 주요 자산의 상태를 3D 환경에서 실시간으로 시각화하고, 이상 감지 및 알림 기능을 제공하는 통합 모니터링 시스템입니다.
역할: UI 구조 설계 · 반응형 퍼블리싱 · 컴포넌트 기반 스타일 시스템 구축 · UX 개선 및 협업 문서화
기간: 2025.01 ~ 2025.10 (팀 프로젝트)
주요 기능: 대시보드 정보 구조화 · 3D/데이터 UI 연동 · 사용자 흐름 개선 · 시각적 일관성 확보
기술:
ReactNext.jsTypeScriptTailwind CSSPrismaR3FZustand
WebGL 3D 신발 커스텀 페이지
사용자가 신발의 색상과 재질을 자유롭게 변경하며 실시간 미리보기를 확인할 수 있는 인터랙티브 3D 커스터마이징 웹 페이지입니다.
역할: UI/UX 설계 · 반응형 퍼블리싱 · WebGL 렌더링 환경 최적화 · 인터랙션 구조 정비
기간: 2025.02 ~ 2025.03 (개인 프로젝트)
주요 기능: 3D 객체 렌더링 · 사용자 선택 흐름 개선 · 반응형 인터랙션 · 일관된 스타일 시스템 적용
기술:
ReactNext.jsTailwind CSSR3F
환전 직구 계산기
해외 직구 시 복잡한 결제 금액(환율, 배송비, 관세)을 직관적으로 계산할 수 있는 실시간 환율 계산 서비스입니다.
역할: 화면 기획 · UI 디자인 · 퍼블리싱 · 실시간 데이터 연동 구현
기간: 2024.01 ~ 2024.02 (개인 프로젝트)
주요 기능: 실시간 환율 API 연동 · 반응형 UI 구성 · 사용자 입력 검증 및 자동 계산 · 명확한 시각 구조 설계
기술:
ReactNext.jsTailwind CSSAPI
Get In Touch
더 나은 사용자 경험과 디자인을 함께 만들어갈 이야기를 기다립니다.