안녕하세요,
프론트엔드 개발자 김재현 입니다.
사용자와 개발자 모두가 만족할 수 있는 코드 작성을 지향합니다.
LinkedIn: https://www.linkedin.com/in/harryk-im/
github: https://github.com/harryk-im
Blog: https://hanyugeon.tistory.com/
E-Mail: hanyugeon@naver.com
"좋은 사용자 경험을 제공합니다." 프론트엔드 개발자는 UI/UX 구현을 통해 사용자에게 신뢰와 편의를 제공하는 것이 중요하다고 생각합니다. 퍼널을 도입하여 사용자 입력 과정을 단계화하고 UX를 개선한 경험이 있습니다.
"견고한 코드 작성에 노력합니다." 재사용 가능한 컴포넌트 시스템 제작을 통해 코드 재사용성과 확장성을 확보 했으며, e2e 테스트 코드 작성을 통해 신규 단축키 기능의 버그를 사전에 발견하여 핫픽스를 진행했습니다.
"기술 학습에 흥미가 많습니다." AI Native 개발을 실험하고 있습니다. 역할별 AI 페르소나 라우터 설계와 AI 코드리뷰 자동화를 도입하여, 품질 관리 비용을 낮추고 코드 신뢰도를 높였습니다.
"커뮤니케이션을 중요시합니다." 존중을 바탕으로 협업합니다, 근거 있는 코드 작성과 피드백을 통해 서로가 만족할 수 있는 결과물 도출을 지향합니다.
토스코어 소속 인터랙션팀 어시스턴트로 합류하여, Deus(사내 디자인 툴)에서 Rally(인터랙션 라이브러리)를 활용할 수 있도록 개발된 플러그인의 기능 개발과 유지보수 에 기여했습니다.
초기 작성된 E2E 테스트는 중복된 실행 흐름이 존재하여, 테스트가 늘어날수록 실행 시간이 과도하게 증가했습니다.
실행 구조를 직렬 + 병렬 실행 구조로 재설계하여 E2E 테스트 시간을 개선했습니다.
(37초 → 26초, 약 30% 단축)
관련된 글이에요. [테스트 코드] 어떻게 하면 효율적인 E2E를 작성할 수 있을까?
사내 디자인 툴에서 ‘레이어 선택’ 시, ‘최상위 레이어 코드’만 제공되어 작업 흐름이 자주 끊기는 문제가 있었습니다.
‘선택된 레이어 코드’와 ‘최상위 레이어 코드’를 함께 제공하도록 UI를 개선하여 불필요한 탐색 비용을 제거하고 개발자의 작업 흐름 단절을 줄였습니다.
사내 디자인 툴에서 정해진 토큰 값만 사용 가능한 제약이 있어 섬세한 인터랙션 구현에 제한이 있었습니다.
트랜지션 easing 값을 직접 조정할 수 있도록 커스텀 패널을 구현 하여 인터랙션 디자이너의 표현 자유도를 확장했습니다.
재사용 가능한 컴포넌트 시스템 제작 경험을 확장하기 위해 진행하게 된 프로젝트입니다. 모노레포 구조로 @harryk-ds/ui와 @harryk-ds/motion 두 가지 패키지를 개발 및 배포하고 있으며, AI Native 환경 구축 실험도 함께 진행하고 있습니다.
SSOT(단일 진실 공급원) 구조를 적용하여 디자인 토큰 중앙화하고, 스타일 구현체 기반 타입 자동 추론 구조를 설계하여 변경 시 영향 범위를 최소화하고 유지보수 비용 절감을 실현했습니다.
사용자 요청(기능 구현 · 문서화 · 코드 리뷰)에 따라 AI의 역할을 분기하는 페르소나 라우터를 설계하여, 요청 맥락에 일치하는 결과물을 도출하도록 작업 흐름을 표준화했습니다.
페르소나 라우터를 기준으로 각 AI 룰 파일 자동 동기화 스크립트를 작성하여, AI 도구가 달라도 일관된 기준으로 작업할 수 있는 환경을 구축했습니다.
관련된 글이에요. [AI] 역할별 AI Persona Harness 구축기
“프로그래머스 데브코스”에서 진행한 프로젝트로, 교육과정 종료 후에도 프론트엔드 팀원들과완성도를 높이기 위해 장기간 몰입하며 사용자 경험 개선, 코드 구조 개선, 기술적 도전을 이어간 프로젝트입니다.
초기 개발 직후UI 일관성 부족에 대한 유저 피드백과 코드 파편화에 대한 문제가 존재했습니다.
피그마를 활용하여 재사용 가능한 컴포넌트 시스템을 설계 및 도입했습니다. 이를 통해 UI 일관성과 개발 생산성을 개선했습니다.
“도서 검색” 페이지에서 다른 페이지 이동 시 검색결과가 초기화되는 문제가 존재했습니다.
URL 파라미터 제어 로직을 useQueryParams로 추상화하고, 검색 상태를 URL 파라미터와 동기화하여 문제를 해결했습니다.
단일 페이지 내 과도한 입력 정보로 인한 사용자 부담감 및 높은 이탈률이 우려됐습니다.
Funnel을 도입하여 입력 과정을 단계화하고, 사용자의 시각적 부담을 줄여 UX를 개선했습니다.
관련된 글이에요. [React] 많이 늦은 toss의 useFunnel 적용기
프로젝트 리디자인과 컴포넌트 시스템 설계를 선행한 뒤, Chakra-UI에서 TailwindCSS로 교체하며 마이그레이션을 진행했습니다.
서버 컴포넌트 작성을 기본값으로 불필요한 useState, useEffect 사용을 지양했으며, 이를 통해 초기 로딩 JS 번들 크기가 223kB에서 80.1kB로, 약 64% 축소됐습니다.
관련된 글이에요. [Next.js] 서버 컴포넌트에 대한 오해 (2)
모바일 전용 서비스의 사용성 확보를 위해 PWA를 적용했습니다. 동시에 iOS 환경에서 발생하는 UX 관련 이슈들을 해결했습니다.
safe-area-inset 미처리로 인한 UI 이슈, input[type="date"] 스타일링 이슈, 키보드 노출시 body 영역 스크롤 이슈를 해결했습니다.
Next/Image의 이미지 캐싱 한도 초과(월 1,000개)로 인한 이미지 로드 실패 문제를 경험했습니다.
API Routes와 Sharp를 활용한 서버단 이미지 최적화를 구현했습니다.
관련된 글이에요. [이미지 최적화] 02. Next/Image의 한계점, 그에 대한 대책
“프로그래머스 프론트엔드 데브코스 3기”에서 진행한 프로젝트로, 책장 기반 독서 소셜 플랫폼의 프론트엔드 개발에 기여했습니다. 사용자 직군에 따른 인기도서 추천, 인기책장 큐레이팅, 북 코멘트, 독서 모임 기능을 제공합니다.
특정 이미지의 주요 색상을 추출하는 과정에서 CORS 에러가 발생했습니다.
CORS 문제를 API Routes를 활용한 서버 프록시 방식으로 해결했습니다.
“유저 책장” 페이지에 무한 스크롤을 구현했습니다.
“책장 좋아요” 버튼에 낙관적 UI 업데이트를 적용하여 사용자 경험을 개선했습니다.
교육과정 수료 (22.10 - 23.03)
전과 및 졸업(학사) (20.03 - 23.02)
이전학과 (17.03 - 18.02)