About
소통하는 개발자,
김광림입니다.
React와 TypeScript를 중심으로 관리자 도메인, 이커머스, 실시간 토너먼트 플랫폼을 구현해 왔습니다.
기술 선택의 이유를 팀이 이해할 수 있게 공유하고, 실제 사용자의 불편을 제품 흐름과 인터페이스로 해결하는 일을 중요하게 생각합니다.
반려동물 경매장 운영 웹에서 Flutter → React 전환을 단독으로 주도하며 렌더링 지연·UI 깨짐이라는 현장 불만을 직접 듣고 기술 선택의 근거로 삼았고, 전국 10개 경매장 중 2곳 파일럿 테스트에서 긍정적인 피드백을 확인했습니다. FSD 아키텍처로 도메인(경매·좌석·입찰)별 독립성을 확보한 경험도 있습니다.
Working Style
일하는 방식
소통이 먼저
현장 사용자와 운영자의 불편을 먼저 듣고 기술 선택의 근거로 삼습니다.
개발·기획·디자인 팀원이 이해할 수 있도록 선택 이유와 트레이드오프도 함께 공유합니다.
설계 후 실행
복잡한 플로우를 커스텀 훅과 데이터 구조로 분리해 유지보수 가능한 UI로 정리합니다.
빠른 개발보다 올바른 구조를 먼저 잡으면 나중에 고치는 비용이 훨씬 줄어듭니다.
사용자 중심
기술은 수단, 목적은 사용자 경험입니다.
현장 반응을 직접 확인하고 개선하는 피드백 사이클을 반복합니다.
계속 성장
프론트엔드에 머물지 않고 Java·Spring·AWS까지 배우고 있습니다.
풀스택 시야를 가질수록 더 나은 협업이 가능하다고 생각합니다.
Skills
기술 스택
Core
- React
- TypeScript
- Next.js
- TailwindCSS
- React Query
- Zustand
- React Hook Form
- FSD Architecture
Also worked with
- Recoil
- Emotion
- Framer Motion
- Storybook
- React Native
- i18next
- Shadcn/ui
- TanStack Router
Tools
- Git
- Figma
- Claude Code
Experience
경력· 총 3년 8개월
LG CNS AM Inspire Camp 4기 (현재 재직 중)
Fullstack (교육)
2025.12 – 2026.03 · 4개월
- StudyHub (스터디 매칭 서비스)
- BARI (동네 유통기한 임박 상품 예약 서비스)
- Java
- Spring Boot
- React
- MySQL
- AWS
- Docker
- k8s
- Kafka
에이티링크(ATlink)
Frontend Developer (Solo)
2025.05 – 2025.09 · 3개월
- 반려동물 경매장 운영 웹 Flutter → React 마이그레이션
- React
- Next.js
- TypeScript
- TailwindCSS
- Zustand
- React Query
- TanStack Router
- Shadcn/ui
- FSD
앵커스(Anchors)
Frontend Developer (SI/Outsourcing)
2023.08 – 2024.09 · 1년 1개월
- 현대엔지니어링 토탈건물관리플랫폼앱·관리자웹(현지니)
- 현대자동차 사내 정보 관리시스템 웹
- React
- React Native
- TypeScript
- Zustand
- React Query
- Styled-Components
- Storybook
미트파트너스(MeatPartners)
Frontend Developer (Solo)
2022.07 – 2023.07 · 1년
- 축산물 이커머스 앱 웹뷰 (MeatLover)
- MeatLover CMS
- React
- TypeScript
- TailwindCSS
- Recoil
- React Query
- React Hook Form
- Emotion
만랩·테크노블러드(ManLab · TechnoBlood)
Frontend Developer
2020.12 – 2022.04 · 1년 4개월
- E-Sports 토너먼트 플랫폼 (PlayPot)
- React
- TypeScript
- GraphQL
- Recoil
- Emotion
- i18next
- SSE
- WebSocket
Projects
주요 프로젝트
01 / 04
에이티링크(ATlink) · 2025.05 – 2025.09 · 3개월
반려동물 경매장 운영 웹
Flutter → React 마이그레이션 · 프론트 1인
Flutter 렌더링 지연·UI 깨짐 문제로 React 전환이 확정된 프로젝트에 1인으로 합류해, CSR 채택 근거 정리부터 FSD 아키텍처로 경매·좌석·입찰 도메인의 독립성 확보까지 단독으로 주도했습니다. 파일럿 2곳에서 긍정적인 현장 반응을 확인했습니다.
주요 성과
문제
- Flutter 기반 운영 웹에서 렌더링 지연과 UI 깨짐이 반복되어 경매장 현장 사용성이 떨어졌습니다.
선택
- SEO 불필요한 폐쇄형 관리자 도메인임을 고려해 CSR 기반 React를 선택하고, 기능 단위 독립성이 중요한 구조라 FSD 패턴을 도입했습니다.
구현
- 경매·좌석·입찰 도메인 경계를 분리해 변경 영향 범위를 최소화했습니다.
- Funnel Hook으로 3단계 초기 설정 흐름을 하나의 단위로 추상화했습니다.
- 행·열·통로·제외 번호를 반영한 좌석표 생성과 드래그앤드롭 배치를 구현했습니다.
- 수기 종이·엑셀 흐름을 분석해 키보드 네비게이션·엑셀 불러오기 인터랙티브 테이블을 만들었습니다.
성과
- 전국 10개 경매장 중 2곳 파일럿에서 UI 깨짐·렌더링 지연이 해결되고 현장 사용자로부터 긍정적인 피드백을 받았습니다.
- 5주 일정 우선의 판단으로 좌석 배치 데이터를 JSON으로 빠르게 구현했고, 파일럿·내부 테스트 기간 동안 안정적으로 작동하며 실용적 선택이 유효했음을 확인했습니다.
기술 스택
02 / 04
앵커스(Anchors) · 2023.08 – 2024.09 · 1년 1개월
현대 시스템 구축 2종
건물관리 앱 + 사내 정보 관리시스템 · 프론트 2~4인
현대 엔지니어링 건물관리 앱과 현대자동차 사내 정보 관리시스템 웹 2건의 SI 프로젝트를 수행했습니다. 복잡한 네비게이션 패턴 개선, 룸 예약 캘린더, JWT 인증/권한 관리, 7단계 혼합 프로세스 구현 등을 담당했습니다.
주요 성과
현대엔지니어링 건물관리플랫폼앱·관리자웹
- 앱 네비게이션 전체가 Stack으로 쌓이던 구조 → Drawer·Stack 역할 분리로 일반 앱 흐름으로 재정비
- 관리자 웹 중복 렌더링·데이터 불일치 → 불필요한 useEffect 제거·호출 순서 정리·React Hook Form 도입
- useDebounce Hook으로 검색 API 반복 호출과 로딩 깜빡임 제거
- mousedown·mouseover 이벤트 조합으로 드래그 다중 날짜·시간 선택 미팅룸 예약 시스템 구현
- Profiler·React DevTools로 중복 렌더링 컴포넌트를 시각적으로 확인, 최적화 적용 후 렌더링 횟수 감소 확인
- 고객사로부터 앱 네비게이션·관리자 웹 사용성 개선 피드백 수신
현대자동차 사내정보관리시스템웹
- JSP 기반 레거시를 참고해 디자인·화면·기능을 React로 전면 재설계
- 7단계 혼합 프로세스 UI → 공통 Hook으로 전 단계 데이터 일관성 확보
- JWT 인증·Wrapper Component로 권한별 페이지 접근 제어 및 메뉴 관리 구현
- 공통 컴포넌트·Storybook 자체 제안 → 인수인계 시 고객사로부터 긍정적 피드백
기술 스택
03 / 04
미트파트너스(MeatPartners) · 2022.07 – 2023.07 · 1년
축산물 이커머스(미트러버)
앱 웹뷰 + CMS · 프론트 1인
축산물 이커머스 앱의 웹뷰(스토어·장바구니·결제·마이페이지)와 CMS를 1인 개발했습니다. Android/iOS 브릿지 함수, IntersectionObserver 무한스크롤, ErrorBoundary+Suspense 에러 처리를 구현했습니다.
주요 성과
문제
- 상품 탐색부터 결제·배송 추적까지 이어지는 앱 웹뷰와 운영팀용 CMS가 모두 필요했습니다.
선택
- 웹뷰 특성을 고려해 Android·iOS 브릿지 유틸을 공통화하고, 비로그인 장바구니 유지를 위해 localStorage를 활용했습니다.
구현
- 스토어·장바구니·결제·마이페이지 핵심 플로우를 처음부터 1인 구현했습니다.
- Android·iOS 브릿지 호출을 공통 유틸로 통합해 앱과의 안정적 통신 및 유지보수성을 높였습니다.
- 상품·품목 관리, 메인·카테고리 진열, Text Editor 기반 상품 상세 편집이 포함된 CMS를 구현했습니다.
- ErrorBoundary·Suspense로 에러 처리를 모듈화하고, IntersectionObserver 기반 무한 스크롤을 도입했습니다.
- Drag&Drop 기반 메뉴 순서 조작으로 관리자 사용 편의성을 강화했습니다.
성과
- 앱 웹뷰와 CMS를 동시에 개발·운영하며 사용자와 운영자 양쪽 요구사항을 하나의 제품 흐름으로 연결했습니다.
기술 스택
04 / 04
만랩·테크노블러드(ManLab · TechnoBlood) · 2020.12 – 2022.04 · 1년 4개월
PlayPot E-Sports 토너먼트
실시간 토너먼트 플랫폼 · 프론트 2인
E-Sports 토너먼트 플랫폼으로 64/128강 대형 브라켓의 줌/패닝/드래그를 react-zoom-pan-pinch로 해결했습니다. SSE(실시간 단방향)와 WebSocket(양방향 채팅)을 적용하고, i18next로 한국어·영어·일본어 3개국어를 지원합니다.
주요 성과
문제
- 64·128강 규모의 토너먼트에서 전체 브라켓을 한눈에 파악하기 어렵고, 경기 정보와 채팅의 실시간성이 중요했습니다.
선택
- 브라켓 탐색은 확대·축소·드래그 이동으로 해결하고, 대회 정보 최신화와 채팅은 통신 방향에 맞춰 SSE와 WebSocket으로 분리했습니다.
구현
- react-zoom-pan-pinch를 도입해 확대·축소·드래그 이동이 가능한 토너먼트 브라켓 탐색 UI를 구현했습니다.
- 대회 정보 최신화는 단방향 SSE로, 실시간 채팅은 양방향 WebSocket으로 분리해 용도에 맞는 기술을 선택했습니다.
- 커스텀 훅·Context API로 실시간 대회 데이터와 UI 상태를 동기화했습니다.
- i18next로 한국어·영어·일본어 다국어를 지원해 글로벌 사용자 접근성을 강화했습니다.
성과
- 대규모 대진표 탐색성과 실시간 정보 전달을 동시에 확보해 글로벌 사용자를 위한 토너먼트 경험을 개선했습니다.
기술 스택
Projects
주요 프로젝트
01 / 04
01 / 04
에이티링크(ATlink) · 2025.05 – 2025.09 · 3개월
반려동물 경매장 운영 웹
Flutter → React 마이그레이션 · 프론트 1인
Flutter 렌더링 지연·UI 깨짐 문제로 React 전환이 확정된 프로젝트에 1인으로 합류해, CSR 채택 근거 정리부터 FSD 아키텍처로 경매·좌석·입찰 도메인의 독립성 확보까지 단독으로 주도했습니다. 파일럿 2곳에서 긍정적인 현장 반응을 확인했습니다.
주요 성과
문제
- Flutter 기반 운영 웹에서 렌더링 지연과 UI 깨짐이 반복되어 경매장 현장 사용성이 떨어졌습니다.
선택
- SEO 불필요한 폐쇄형 관리자 도메인임을 고려해 CSR 기반 React를 선택하고, 기능 단위 독립성이 중요한 구조라 FSD 패턴을 도입했습니다.
구현
- 경매·좌석·입찰 도메인 경계를 분리해 변경 영향 범위를 최소화했습니다.
- Funnel Hook으로 3단계 초기 설정 흐름을 하나의 단위로 추상화했습니다.
- 행·열·통로·제외 번호를 반영한 좌석표 생성과 드래그앤드롭 배치를 구현했습니다.
- 수기 종이·엑셀 흐름을 분석해 키보드 네비게이션·엑셀 불러오기 인터랙티브 테이블을 만들었습니다.
성과
- 전국 10개 경매장 중 2곳 파일럿에서 UI 깨짐·렌더링 지연이 해결되고 현장 사용자로부터 긍정적인 피드백을 받았습니다.
- 5주 일정 우선의 판단으로 좌석 배치 데이터를 JSON으로 빠르게 구현했고, 파일럿·내부 테스트 기간 동안 안정적으로 작동하며 실용적 선택이 유효했음을 확인했습니다.
기술 스택
02 / 04
앵커스(Anchors) · 2023.08 – 2024.09 · 1년 1개월
현대 시스템 구축 2종
건물관리 앱 + 사내 정보 관리시스템 · 프론트 2~4인
현대 엔지니어링 건물관리 앱과 현대자동차 사내 정보 관리시스템 웹 2건의 SI 프로젝트를 수행했습니다. 복잡한 네비게이션 패턴 개선, 룸 예약 캘린더, JWT 인증/권한 관리, 7단계 혼합 프로세스 구현 등을 담당했습니다.
주요 성과
현대엔지니어링 건물관리플랫폼앱·관리자웹
- 앱 네비게이션 전체가 Stack으로 쌓이던 구조 → Drawer·Stack 역할 분리로 일반 앱 흐름으로 재정비
- 관리자 웹 중복 렌더링·데이터 불일치 → 불필요한 useEffect 제거·호출 순서 정리·React Hook Form 도입
- useDebounce Hook으로 검색 API 반복 호출과 로딩 깜빡임 제거
- mousedown·mouseover 이벤트 조합으로 드래그 다중 날짜·시간 선택 미팅룸 예약 시스템 구현
- Profiler·React DevTools로 중복 렌더링 컴포넌트를 시각적으로 확인, 최적화 적용 후 렌더링 횟수 감소 확인
- 고객사로부터 앱 네비게이션·관리자 웹 사용성 개선 피드백 수신
현대자동차 사내정보관리시스템웹
- JSP 기반 레거시를 참고해 디자인·화면·기능을 React로 전면 재설계
- 7단계 혼합 프로세스 UI → 공통 Hook으로 전 단계 데이터 일관성 확보
- JWT 인증·Wrapper Component로 권한별 페이지 접근 제어 및 메뉴 관리 구현
- 공통 컴포넌트·Storybook 자체 제안 → 인수인계 시 고객사로부터 긍정적 피드백
기술 스택
03 / 04
미트파트너스(MeatPartners) · 2022.07 – 2023.07 · 1년
축산물 이커머스(미트러버)
앱 웹뷰 + CMS · 프론트 1인
축산물 이커머스 앱의 웹뷰(스토어·장바구니·결제·마이페이지)와 CMS를 1인 개발했습니다. Android/iOS 브릿지 함수, IntersectionObserver 무한스크롤, ErrorBoundary+Suspense 에러 처리를 구현했습니다.
주요 성과
문제
- 상품 탐색부터 결제·배송 추적까지 이어지는 앱 웹뷰와 운영팀용 CMS가 모두 필요했습니다.
선택
- 웹뷰 특성을 고려해 Android·iOS 브릿지 유틸을 공통화하고, 비로그인 장바구니 유지를 위해 localStorage를 활용했습니다.
구현
- 스토어·장바구니·결제·마이페이지 핵심 플로우를 처음부터 1인 구현했습니다.
- Android·iOS 브릿지 호출을 공통 유틸로 통합해 앱과의 안정적 통신 및 유지보수성을 높였습니다.
- 상품·품목 관리, 메인·카테고리 진열, Text Editor 기반 상품 상세 편집이 포함된 CMS를 구현했습니다.
- ErrorBoundary·Suspense로 에러 처리를 모듈화하고, IntersectionObserver 기반 무한 스크롤을 도입했습니다.
- Drag&Drop 기반 메뉴 순서 조작으로 관리자 사용 편의성을 강화했습니다.
성과
- 앱 웹뷰와 CMS를 동시에 개발·운영하며 사용자와 운영자 양쪽 요구사항을 하나의 제품 흐름으로 연결했습니다.
기술 스택
04 / 04
만랩·테크노블러드(ManLab · TechnoBlood) · 2020.12 – 2022.04 · 1년 4개월
PlayPot E-Sports 토너먼트
실시간 토너먼트 플랫폼 · 프론트 2인
E-Sports 토너먼트 플랫폼으로 64/128강 대형 브라켓의 줌/패닝/드래그를 react-zoom-pan-pinch로 해결했습니다. SSE(실시간 단방향)와 WebSocket(양방향 채팅)을 적용하고, i18next로 한국어·영어·일본어 3개국어를 지원합니다.
주요 성과
문제
- 64·128강 규모의 토너먼트에서 전체 브라켓을 한눈에 파악하기 어렵고, 경기 정보와 채팅의 실시간성이 중요했습니다.
선택
- 브라켓 탐색은 확대·축소·드래그 이동으로 해결하고, 대회 정보 최신화와 채팅은 통신 방향에 맞춰 SSE와 WebSocket으로 분리했습니다.
구현
- react-zoom-pan-pinch를 도입해 확대·축소·드래그 이동이 가능한 토너먼트 브라켓 탐색 UI를 구현했습니다.
- 대회 정보 최신화는 단방향 SSE로, 실시간 채팅은 양방향 WebSocket으로 분리해 용도에 맞는 기술을 선택했습니다.
- 커스텀 훅·Context API로 실시간 대회 데이터와 UI 상태를 동기화했습니다.
- i18next로 한국어·영어·일본어 다국어를 지원해 글로벌 사용자 접근성을 강화했습니다.
성과
- 대규모 대진표 탐색성과 실시간 정보 전달을 동시에 확보해 글로벌 사용자를 위한 토너먼트 경험을 개선했습니다.
기술 스택
Contact
같이 만들어볼까요?
언제든지 연락주세요.
© 2026 Kim Gwanglim. All rights reserved.