// 안녕하세요, 저는

김요한Yohan Kim

스타트업부터 대기업까지, 사용자 경험을 설계하는 엔지니어

about.ts

const developer = {
  experience: "8년차",
  focus: ["React", "Vue", "Performance"],
  passion: "사용자 경험 최적화"
};

8년차

프론트엔드 경력

83%

성능 개선

4.9/5.0

멘토 평가

250만+

월간 사용자

프로젝트 보기 연락하기

01. About Me

월간 250만+ 사용자 서비스에서 대규모 트래픽을 고려한 UI/UX 설계 및 성능 최적화를 수행했습니다.
Vue 2 → Vue 3 → React 18까지 점진적 마이그레이션을 설계하고 실행한 경험이 있으며,
모노레포 기반 아키텍처 설계로 팀의 개발 생산성을 향상시켰습니다.

주요 강점

▹대규모 트래픽 서비스의 성능 최적화 경험
▹Vue → React 점진적 마이그레이션 설계 및 실행
▹모노레포 기반 프론트엔드 아키텍처 설계
▹E2E 테스트 자동화 시스템 구축

경력

롯데이커머스

2023 - 현재

Product 개발팀

롯데ON 상품상세 프론트엔드 개발

클레온

2022 - 2023

웹팀

AI 휴먼 생성 플랫폼 개발

프리티소프트

2021 - 2022

IT팀 (프론트엔드)

카타르 월드컵 공식 홈페이지 제작

이노부스트

2018 - 2020

IT팀

웹 서비스 개발

프로그래머스 프론트엔드 멘토

2021-2023 (1기, 2기, 4기) · 4.9점 최고 평가 획득

02. Featured Projects

롯데이커머스 · 2025.05 - 2025.07

롯데ON 여행 MSA 신규 런칭

롯데ON 신규 여행 서비스의 상품상세 페이지 프론트엔드 아키텍처를 설계하고 리드했습니다.

Challenge

기존 모놀리식 구조에서 첫 콘텐츠 표시까지 27.3초가 소요되는 심각한 성능 문제가 있었습니다. 또한 향후 항공권, 해외숙박 등 신규 도메인 확장을 고려한 유연한 구조가 필요했습니다.

Solution

FSD(Feature Sliced Design) 패턴을 적용한 모듈화된 아키텍처를 설계했습니다. HTTP 인프라 계층화, 도메인별 라우팅 분리로 독립 배포 가능한 구조를 구축했습니다.

Impact

FCP 27.3초 → 4.7초 (83% 개선)
LCP 58% 개선
빌드 시간 23분 → 2분 30초 (87% 단축)
향후 도메인 확장 시 재사용 가능한 구조 확보

Vue 2.7
Composition API
Vite
FSD Pattern

롯데이커머스 · 2024.02 - 2024.06

E2E 테스트 자동화 시스템

롯데ON 주요 페이지의 E2E 테스트 스케줄러를 구축하여 장애를 사전에 감지하는 시스템을 개발했습니다.

Challenge

수동 QA에 의존하여 크리티컬한 장애(장바구니 담기 실패, 이미지 누락 등)가 프로덕션에서 발견되는 경우가 있었습니다.

Solution

Playwright 기반 E2E 테스트 러너와 CronJob 스케줄러를 구축하고, WebSocket으로 실시간 상태를 동기화했습니다. Slack API를 연동하여 자동 알림 시스템을 구현했습니다.

Impact

4건의 크리티컬 장애 사전 감지
롯데온 대표이사에게 우수사례로 채택
QA 시간 50% 이상 절감

Next.js
Express.js
Playwright
WebSocket
Slack API
CronJob

롯데이커머스 · 2024.12 - 2025.01

ts-pinch-zoom 라이브러리

모바일 상품 상세 이미지의 핀치 줌 기능을 위한 TypeScript 라이브러리를 개발하고 NPM에 배포했습니다.

Challenge

기존 솔루션사 의존으로 커스터마이징이 어렵고 라이선스 비용이 발생했습니다. 또한 모바일 브라우저의 기본 제스처와 충돌 문제가 있었습니다.

Solution

터치 이벤트를 직접 핸들링하여 줌 중심점 계산, 방향 잠금 등의 로직을 구현했습니다. 팩토리 패턴으로 환경별 로직을 추상화했습니다.

Impact

솔루션사 의존도 완전 제거
NPM 배포로 재사용성 확보
기술 내재화 목표 달성

TypeScript
Vite
NPM

NPM GitHub

클레온 · 2022.09 - 2023.06

클론 스튜디오 React 마이그레이션

AI 휴먼 생성 플랫폼의 에디터를 Vue 3에서 React 18로 마이그레이션하고 Canvas 기능을 고도화했습니다.

Challenge

Vue 3 기반 스파게티 코드로 신규 기능 추가 시 기존 코드와 충돌이 빈번했고, 팀 내 React 통합 전략이 결정되어 마이그레이션이 필요했습니다.

Solution

Amplify 서브디렉토리 기능으로 Vue/React 라우팅을 분리하여 점진적 마이그레이션을 진행했습니다. Konva 기반 Canvas에 팩토리/컴포지트 패턴을 적용하여 객체별 동작 규칙을 유연하게 관리했습니다.

Impact

Vue → React 마이그레이션 성공적 완료
객체 다중 선택/삭제, 단축키 기능 추가
유지보수성 및 확장성 대폭 개선

React 18
TypeScript
Konva
Redux Toolkit
React Query

Service

롯데이커머스 · 2024.08 - 2024.10

프론트엔드 개발환경 Docker 통합

팀 전체의 개발환경을 Docker로 통합하여 환경 설정 시간을 획기적으로 단축하고 개발 생산성을 향상시켰습니다.

Challenge

신입 개발자 온보딩 시 개발 환경 구축에 평균 3일이 소요되었고, 로컬 환경 차이로 인한 버그 재현이 어려웠습니다.

Solution

Docker Compose로 프론트엔드 개발 서버, API Mock 서버, Redis를 통합했습니다. Makefile로 주요 명령어를 추상화하여 팀원들이 쉽게 사용할 수 있도록 했습니다.

Impact

환경 설정 시간 3일 → 15분 (92% 단축)
로컬 환경 이슈 90% 이상 감소
팀 전체 생산성 향상

Docker
Docker Compose
Makefile
Node.js

클레온 · 2023.01 - 2023.06

Editor Canvas 고도화 (Konva)

AI 휴먼 에디터의 Canvas 기능을 고도화하여 객체 다중 선택, 정렬, 단축키 등 고급 기능을 구현했습니다.

Challenge

Canvas에서 다양한 객체 타입(텍스트, 이미지, 배경)마다 다른 동작 규칙을 효율적으로 관리해야 했습니다.

Solution

팩토리 패턴으로 객체 생성 로직을 통합하고, 컴포지트 패턴으로 다중 선택 시 그룹 동작을 구현했습니다. Konva의 Transformer API를 활용하여 회전, 크기 조절을 자연스럽게 처리했습니다.

Impact

객체 다중 선택/삭제 기능 구현
단축키(Ctrl+Z, Delete 등) 추가
사용자 편의성 대폭 향상

Konva
TypeScript
React 18
Factory Pattern
Composite Pattern

03. Skills & Tools

Frontend

⚛️Reactexpert

💚Vue.jsexpert

▲Next.jsadvanced

📘TypeScriptexpert

Build & Tools

⚡Viteadvanced

📦Webpackadvanced

🔷Turborepointermediate

🐳Dockerintermediate

Testing

🎭Playwrightadvanced

🃏Jestintermediate

DevOps & Others

🔀Gitexpert

🔄CI/CDadvanced

☁️AWSintermediate

skills.sh

$ cat core_competencies

→ 대규모 서비스 성능 최적화 (FCP 83% 개선)
→ 프레임워크 마이그레이션 설계 (Vue → React)
→ 모노레포 기반 아키텍처 설계
→ E2E 테스트 자동화 시스템 구축

$ _

04. What's Next?

Get In Touch

새로운 기회나 협업에 열려 있습니다.
프로젝트 문의, 기술 토론, 또는 그냥 인사도 환영합니다.

이메일 보내기 GitHub

yohankim.pro@gmail.com