사용자 경험을 중심으로 UI를 설계하고 개발하는

4년차 퍼블리셔 김경화 입니다.

<aside>

다양한 디바이스에서 최적의 경험을 제공하는 4년 차 웹 퍼블리셔입니다. 사용자 인터페이스의 전반적인 구조와 스타일을 설계하고, 이를 vue.js, scss, javascript 등을 사용해 실제 환경에 적용합니다.

SaaS B2B 솔루션, B2C(C2M) 플랫폼 서비스, 모바일 앱, 백오피스 등 다수의 프로젝트 수행 경험을 바탕으로 화면 정의서와 디자인 시안을 완벽하게 웹 페이지로 전환할 수 있습니다.

작업의 효율성과 완성도를 높이기 위해 기획팀과 디자인팀, 개발팀과 협력하는 데 탁월하며, 직관적이고 효과적인 웹 경험을 만들기 위해 늘 사용자의 요구를 이해하고자 합니다.

저는 평생 배우는 사람이고 제 기술을 향상시킬 새롭고 혁신적인 방법을 항상 찾고 있습니다. 꾸준히 성장하고 발전하며 함께 일하고 싶은 동료가 되기를 바랍니다.

</aside>

☑️ 경력사항

루벤티스 (2024.04 ~ )

UI/UX팀, 전임

<aside>

B2B SaaS 솔루션의 유지보수 및 신규 프로젝트 퍼블리싱을 담당하고 있습니다. 다양한 디바이스에서도 일관되고 최적화된 UI 경험을 제공하기 위해 기존의 적응형 레거시 코드를 반응형으로 개선하고 있습니다. 데이터 바인딩을 고려한 컴포넌트 설계를 통해 유지보수성과 확장성을 높이는 데 기여했습니다.

</aside>

• SaaS 솔루션 퍼블리싱 및 UI 인터랙션 구현, 프로모션 홈페이지 신규 구축
• 웹/앱 화면 퍼블리싱 및 UI 인터랙션 구현
• 데이터 바인딩을 고려한 컴포넌트 설계 및 구현

[StockFlow

프로모션 홈페이지](https://www.stockflow.kr)

2024.12 ~ 2025.02

• 기여도: 퍼블리싱 및 UI 개발 100%
• 사용 기술: Vue, Nuxt.js, SCSS, JavaScript, GSAP, GitLab

주요업무 및 성과

• WordPress 기반 프로젝트를 Vue.js로 전환
  • 로딩 속도 향상과 유지보수를 위해 WordPress 프로젝트를 Vue.js로 전환하며 초기 빌드부터 설계
  • 반응형 디자인 적용 및 GSAP 인터랙션 적용
• SEO 최적화 및 SSR 환경 구축
  • Nuxt.js 도입으로 서버사이드 렌더링 환경 구축, 페이지별 메타태그 최적화
  • SSG(Server Side Generation) 방식을 적용하여 서버 리소스 절감과 페이지 로드 속도 개선
• 웹사이트 성능 최적화
  • Lighthouse 분석을 기반으로 이미지 최적화 등 불필요한 리소스 제거
  • 최적화 작업을 통해 페이지 로딩 속도를 2.5초 → 1.3초로 단축 (45% 개선)
• 다국어(i18n) 지원
  • 글로벌 사용자 대응을 위해 다국어 환경 구축 및 실시간 언어 전환 기능 추가
  • 동일한 소스를 Git 미러링하여 멀티 도메인 배포 환경에서, 각 도메인의 기본 언어를 환경변수로 설정하여 자동 적용

대성투어 예약 App

2024.10 ~ 2024.11

• 기여도: 퍼블리싱 및 UI 개발 100%
• 사용 기술: Vue, SCSS, JavaScript, Vite, Lottie, GitLab

주요업무 및 성과

• 컴포넌트 기반 UI 설계
  • 데이터 바인딩이 필요한 UI 요소를 분석하고 재사용성을 고려한 Vue 컴포넌트 설계
• SVG 스프라이트 기법 활용
  • 항공사별 아이콘을 SVG 스프라이트로 통합하여 이미지 리소스 50% 감소
  • DB 기반 항공사 순으로 클래스를 지정하고 문서화하여 공유
  • 네트워크 요청 수 최적화로 페이지 로딩 속도 개선 (3.2초 → 1.8초)

포항산업단지

배차시스템 App

2024.09 ~ 2024.11

• 기여도: 퍼블리싱 및 UI 개발 100%
• 사용 기술: Vue, SCSS, JavaScript, Vite, GitLab

주요업무 및 성과

• 모바일 UX 개선
  • 배송중 사용하는 특수성을 고려하여 터치 영역 확장으로 사용자 조작 편의성 35% 증가 (고객사 피드백)
  • 버튼 크기 조정 및 가독성 향상으로 클릭당 오류율 감소
• Skeleton UI 도입
  • 대량 데이터 로딩 시 Skeleton UI 적용하여 사용자 체감 로딩 시간 40% 단축 (고객사 피드백)

Hotail Cloud

2024.06 ~ 2024.09

• 기여도: 퍼블리싱 100%, UI 개발 40% (총 작업 인원 3명)
• 사용 기술: Vue, SCSS, JavaScript, Vite, GitLab, Storybook

주요업무 및 성과

• 공통 컴포넌트 및 UI 개발
  • Vue 기반으로 전체 UI 컴포넌트의 80%를 개발
  • Atomic Design 원칙을 적용하여 컴포넌트를 모듈화
• 디자인 시스템 도입
  • 색상, 폰트, 버튼 및 공통 컴포넌트 가이드라인을 표준화하여 디자인 시스템을 구축
  • 일관된 UI 가이드를 적용함으로써 유지보수 시간을 30% 단축
  • 신규 기능 개발 시 UI 컴포넌트 재사용이 가능하도록 설계하여 개발 효율성을 향상