홍지상

Jisang Hong

contact

✉️ [email protected]

📱 010-7734-9449

channel

GitHub (https://github.com/jeynes-log)

GitLab (https://gitlab.com/redonearth)

Blog (https://jeynes.me)

최종 수정일

2026-09-08

introduce

웹 프론트엔드를 개발하는 6년차 개발자입니다. 라이브러리를 도입할 때는 공식 문서와 GitHub 소스를 먼저 읽고 트레이드오프를 판단하며, 읽기 쉬운 코드와 정확한 네이밍이 팀 생산성을 결정한다고 믿기에 리팩토링과 API 설계 논의에 적극적으로 참여합니다.

웹 퍼블리셔와 그래픽 디자인으로 커리어를 시작해 프론트엔드로 전향했고, SI 프로젝트를 거쳐 현재 자사 솔루션 제품 개발을 맡고 있습니다. 디자인과 퍼블리싱을 직접 해본 경험은 "사용자 입장에서 이해하기 쉬운 UI"라는 말을 구호가 아닌 실제 판단 기준으로 쓰게 해주었고, SI에서 쌓은 요구사항 대응 경험은 기획자·백엔드와 대화할 때 공통 언어가 되어주고 있습니다.

현재는 폐쇄망 환경의 네트워크 패킷 캡처·분석 솔루션에서 실시간 메트릭을 대시보드와 Top N 뷰로 시각화하는 웹 UI를 담당합니다. React·TypeScript·Tailwind CSS·shadcn/ui로 화면을 구성하고, TanStack Query/Table/Virtual과 Jotai로 서버 상태·대용량 렌더링·클라이언트 상태를 각각의 도구에 맞게 다룹니다. 차트와 테이블이 UI의 중심인 제품이라 ECharts를 React 환경에 통합하는 공통 차트 컴포넌트와 TanStack Table 기반 공통 테이블 컴포넌트를 설계했고, 백엔드 여러 모듈에서 오는 서로 다른 메트릭 스키마는 어댑터 레이어로 추상화해 화면 단 로직이 백엔드 구조 변경에 흔들리지 않도록 했습니다.

도구에 대한 원칙이 하나 있습니다. 도구는 트렌드를 따라 끊임없이 최신화해야 하고, 직접 구현하거나 오래된 도구를 유지하는 선택은 제품의 기술적 특수성 때문에 기성 도구로 해결되지 않을 때에만 정당화된다는 것입니다. AI 개발 도구의 등장으로 이 원칙은 더 중요해졌다고 생각합니다. 생태계 표준에 가까운 스택일수록 AI가 만들어내는 코드의 품질이 높고, 도구 최신화가 곧 팀 생산성으로 직결되기 때문입니다. PrimeReact의 커스터마이징 한계를 겪고 운영 중인 제품에서 shadcn/ui로 점진적 전환을 진행한 것, Vite와 Tailwind CSS v4를 도입한 것 모두 이 원칙을 실행에 옮긴 결과입니다.

skills

React, TypeScript, TanStack Query/Table/Virtual, Jotai, Tailwind CSS, Vite, ECharts

careers

램파드(주)

(구 소울시스템즈)

프론트엔드 개발자

2022년 12월 ~ 현재

[ 재직중 ]

램파드(LAMPAD)

2022년 12월 ~ 현재

http://lampad.co.kr

📊 LAMPAD 네트워크 관리 솔루션의 웹 UI/기능 개발 및 유지보수

팀 구성

• 자사 프론트엔드 개발자 2명 / C++ 백엔드 개발자 2명
• 기술팀 및 QA 인원 1명 → 제품 검증

프로젝트 및 개발 내용

• Vue.js 2 레거시 제품을 React + TypeScript로 컨버전 및 리팩토링
  • 운영 중인 제품의 기능 손실 없이 화면 단위로 점진적 전환 수행
  • 컨버전 과정에서 TanStack Query 기반 서버 상태 관리 도입, 데이터 fetching 로직과 UI 분리
• SSE(Server-Sent Events) 기반 실시간 메트릭 스트리밍 구현 (@microsoft/fetch-event-source 활용, 연결 복구 처리 포함)
  • TanStack Virtual 기반 가상 스크롤로 대용량 세션/패킷 목록 렌더링 성능 확보
  • Apache ECharts를 React 환경에 통합하는 공통 차트 컴포넌트 설계 (Top N, 시계열 등)
  • Skeleton UI 및 optimistic update 적용으로 데이터 로딩 구간의 체감 성능 개선
• PrimeReact → shadcn/ui + Tailwind CSS v4 점진적 마이그레이션
  • PrimeReact 메이저 업데이트마다 내부 DOM 구조 변경으로 커스터마이징이 깨지는 유지보수 비용 발생
  • UI 구조와 스타일을 직접 통제할 수 있는 shadcn/ui 기반으로 전환 결정, 운영 중인 제품에서 두 라이브러리를 공존시키며 화면 단위로 순차 전환
  • shadcn Data Table 패턴을 참고해 TanStack Table 기반 공통 테이블 컴포넌트를 설계, 팀 내 신규 화면 개발 시 재사용
• C++ 백엔드 개발자와 협업하여 API 계약 설계 주도
  • 네트워크 분석/세션 감사 기능의 REST API 스펙을 프론트엔드 관점에서 정의
  • 자기서술적(self-documenting) 필드 네이밍, 실행 상태와 결과 상태의 필드 분리 등 유지보수성을 고려한 계약 설계
• 폐쇄망(오프라인) 환경 배포 대응
  • 외부 CDN 의존 없이 폰트 및 에셋을 포함한 로컬 번들 배포 구성
  • 인터넷 접근이 불가한 고객사 환경 제약을 전제로 라이브러리 선정 및 빌드 파이프라인 설계
• 개발 환경 및 품질 관리 개선
  • Vite 도입 및 지속적인 버전 최신화로 빌드 환경 개선 — Vite 8 전환과 함께 Rolldown(Rust 기반 번들러)이 적용되며 프로덕션 빌드를 5초 이상 → 700~800ms 수준으로 단축
  • Vitest 기반 단위 테스트 도입 — 복잡한 도메인 로직 대비 백엔드 인력이 부족해 설계 변경이 잦은 상황을 고려, 유지비용이 큰 컴포넌트(mock 포함)·E2E 테스트는 보류하고 변경에 안정적인 헬퍼·유틸 함수부터 테스트를 적용해 점진적 확대의 기반 마련
  • React i18next 기반 제품 다국어(i18n) 지원 구현
  • release-it으로 배포 버전·CHANGELOG 자동화, Husky로 commit 시 타입 체크·lint 자동화

기술 스택

• Frontend: React, TypeScript, Vite, shadcn/ui, Tailwind CSS v4
• State / Data: TanStack Query, TanStack Table, Jotai
• UI / Chart: Apache ECharts
• Legacy / Migration: PrimeReact (PrimeFlex → Tailwind CSS 전환)

(주)디피엘

프론트엔드 개발자

2021년 4월 ~ 2022년 8월

[ 1년 5개월 ]

토요타 지게차 한국 웹사이트(Toyota Forklift Korea)

2021년 7월 ~ 2022년 8월

🌐 토요타 지게차 한국 웹사이트 프론트엔드 개발

토요타 지게차 소개와 국내 유일의 총판 회사 홍보를 목적으로 Vue.js 기반의 새로운 사이트를 구축하여 마케팅 효과 상승에 기여 (월평균 구입/렌탈 문의 2건 → 50건)

팀 구성

• 프론트엔드 개발자 1명 / 디자이너 1명

프로젝트 및 개발 내용

• 디자이너와의 협업으로 Adobe XD 시안을 바탕으로 마크업 및 스타일링 작성
• Vue의 속성(watch, computed)과 정규표현식을 활용한 Contact 페이지 form 검증 로직 구현
• 일부 페이지에 Tailwind CSS와 유사한 Windi CSS 적용
• GitHub Action과 AWS S3를 활용한 배포 자동화 적용
• 메타 태그로 SEO 적용

기술 스택

• Vue 2(with Vue CLI 4), Vuex / Sass(SCSS), Windi CSS, RESTful API(Axios)
• AWS S3, CloudFront, Route53
• Prettier, ESLint

온파레트

2021년 4월 ~ 2022년 2월

🌐 온라인 풀필먼트 견적 제공 서비스를 유지보수

팀 구성

• 프론트엔드 개발자 1명 / 디자이너 1명

(주)포엠텍

OD4U

일리오

education

• 스마트웹&콘텐츠 개발자 양성과정(자바) [수료] (2018년 5월 ~ 2018년 11월)
• 스마트웹&콘텐츠 개발(HTML/CSS/JS) [수료] (2015년 12월 ~ 2016년 6월)