Introduce
안녕하세요. 웹 서비스의 기획과 설계부터 개발, 배포 및 운영까지 전반적인 과정을 두루 경험하며 꾸준히 성장해온 프론트엔드 개발자입니다.
누구나 쉽게 이해하고 유지보수할 수 있는 명확한 코드를 작성하는 것을 중요하게 생각하며, 항상 견고하고 효율적인 코드 작성에 노력하고 있습니다. 또한, 언젠가는 프론트엔드 개발 분야의 정점에 오르겠다는 목표를 가지고 끊임없이 학습하고 있습니다.
현재 F-4 비자로 한국에 거주하며, 개발자로서 소통이 성장에 큰 역할을 한다고 생각해, 평소에도 동료들과의 기술적 대화나 커뮤니티 활동을 통해 꾸준히 배우고 함께 성장하기 위해 노력하고 있습니다.
Experiences
4년 2개월2024.01 ~ 현재
이에이트
잠실, 대한민국
플랫폼 개발팀 프론트엔드 개발자 | 주임 연구원
ReactTypeScriptRecoilZustandTanstack QueryTanstack VirtualTailwind CSSStorybookMotionSentryDockerJenkins
- CRA와 NPM 환경을 Vite와 Yarn Berry(PnP)로 전환하여 Docker 기반 CI 빌드 시간을 기존 10분에서 1~2분 수준으로 대폭 단축
- Sentry를 사내 리눅스 서버에 Self-Hosted 방식으로 구축하여 오류 추적 체계 중앙화 및 운영 안정성 강화
- 사내 프론트엔드 공통 템플릿(i18n, Prettier/ESLint, 필수 라이브러리, Storybook 기반 디자인 시스템 포함) 제작 및 배포 → 초기 세팅 시간 단축 및 개발 환경 표준화
- 코드 리뷰 및 기술 세션을 통한 팀 내 기술 품질 향상과 지식 공유 문화 확산
- NIPA(정보통신산업진흥원) 주관 GSMP 프로그램에 선정되어 워싱턴 D.C. 현지 행사 참가 → 팀 대표로서 글로벌 파트너 대상 기술 소개 및 협업 기회 발굴
NDXPRO PMIS
프로젝트 전체적인 관리를 통합한 웹 솔루션
WBS 기반 Gantt Chart 개발
- 복잡한 프로젝트 데이터를 시각화하기 위해 Gantt Chart 아키텍처를 직접 설계 및 구현
- 구현된 인터랙션에 Optimistic UI 적용으로 실시간 구조/일정 수정 기능 구현
- Virtualization 및 Lazy Loading를 적용하여 수천 개 Task 데이터의 렌더링 성능을 최적화하고, DOM 렌더링 성능 40% 개선
도서 관리 시스템 개발
- 폴더 구조 탐색기 아키텍처 설계 및 재귀 구성
- 키보드 입력 기반 범위/다중 선택 커스텀 훅 개발
- 파일 업로드 및 버전 관리 시스템 연동
- 단계별 피드백을 제공하는 문서 등록/변경 이력 UI 구현
NDXPRO EPC
설계, 조달, 시공 전 과정을 1D·2D·3D 데이터로 통합 시각화하는 웹 솔루션
2D 도면 뷰어 및 대시보드 레이아웃 개발
- SVG 기반 2D 도면 뷰어 및 마크업 기능 설계 및 구현 → 확대/축소 상태에서도 마크업 위치 유지
- 사용자 맞춤형 대시보드 레이아웃 구현 → 탭별 Layout을 Recoil Persist 로 상태 유지
- iframe + postMessage API를 활용해 외부 협력사 3D Viewer와 연동하여 실시간 데이터 통신 지원
NDXPRO ADMIN WEB
NGSI-LD 기반 디지털 트윈 데이터를 정제하고 모델링·운영하는 NDXPRO 핵심 플랫폼
Data Manager V3 기능 개발 및 고도화
- 데이터 모델 기반의 Attribute, Data Model, Relationship 생성 및 관리 기능 담당
- React Flow를 활용하여 데이터 모델과 관계를 직관적으로 시각화
- 대규모 데이터를 효율적으로 등록 하기 위한 Excel Import/Export 기능 구현
- 인증 세션 자동 관리 시스템 구축 → 토큰 만료 시 자동 갱신 및 예외 시 일관된 로그아웃 처리
Samsung Thync
상일동 삼성물산 BEMS 시스템의 Unreal 앱 내 사용자·자산 관리를 위한 웹뷰 기반의 관리 시스템
Unreal 연동 로그인 및 사용자 등록/관리 시스템 개발
- SSO 및 일반 로그인을 통합 지원하는 인증 흐름 설계
- 최초 로그인 시 자동 사용자 등록, 권한 승인 프로세스 UI/서버 로직 설계 및 구현
- 백엔드 리소스 부족 상황에서 NestJS 기반 로그인/회원가입/권한 API 서버 직접 구축
2023.07 ~ 2023.10
Flashee
밴쿠버, 캐나다
프론트엔드 개발자
ReactReduxTailwind CSSSupabaseShopify MarketplacesShopify PaymentsAWSFly.io
- 통합 의류 쇼핑 마켓플레이스(E-Commerce) 스타트업
- 첫 번째 개발자로 입사하여 사내에 필요한 모든 프론트엔드 서비스 기획/개발/배포/운영
- Shopify Marketplaces가 원활하게 통합된 정교한 E-Commerce 플랫폼 개발
- Supabase 및 서드파티(Instagram, TikTok 등) 로그인 키트를 통해 플랫폼 보안 및 사용자 접근성 향상
- Shopify Payments를 사용한 결제 게이트웨이 통합, 카트 포기 감소 및 성공적인 거래 증가
2022.07 ~ 2023.06
iClinic Systems Inc.
밴쿠버, 캐나다
풀스택 개발자
AngularThree.jsWebGLGSAPMotionNode.jsExpress.jsMongoDBAWSGitHub Actions
- 병원 및 클리닉 네트워크를 대상으로 하는 EMR(Electronic Medical Records) SaaS 스타트업
- WebGL 기술을 적극 활용하여 사내 마케팅 프로젝트 전체를 독자적으로 설계 및 구현, 현대적인 웹 경험 제공
- Framer Motion과 GSAP 기반의 인터랙션 및 애니메이션 구현으로 직관적이고 몰입감 있는 사용자 경험 제공
- 기술적 지식이 없는 경영진도 사용 가능한 사내 인력 및 근태 관리 어드민 포털 개발 및 운영, 효과적인 직원 관리 지원
- 전반적인 백엔드 구현, AWS 인프라 및 NoSQL 데이터베이스 설계 및 구축, CI/CD 파이프라인 구축
2021.01 ~ 2022.05
Catalx Management Ltd.
밴쿠버, 캐나다
프론트엔드 개발자
ReactGraphQLAWS
- 캐나다에 위치한 암호화폐 거래소 스타트업
- React 기반의 컴포넌트 아키텍처 설계로 기업의 기술 기반 강화
- 다양한 외부 시스템을 성공적으로 통합, 고객이 신용카드를 이용해 암호화폐를 구입할수 있는 기능 구현
- AWS Lambda@Edge와 Facebook Open Graph를 사용해 소셜 미디어용 URL 미리보기 기능 구현
- 디자이너 팀원들과 협력하여 전체적인 UI/UX 개선
Projects
- 기존 Gantt 차트 솔루션들은 커스터마이징이 제한적이거나 유료 서비스가 많아, 직접 개발하게 된 오픈 소스 프로젝트입니다.
- 경량화와 확장성을 중심으로 설계하여, 개인 프로젝트부터 실무 환경까지 유연하게 활용할 수 있도록 구현했습니다.
- 현재 오픈 소스로 배포하여 지속적으로 개선하고 있으며, 커뮤니티 피드백을 반영해 기능을 확장하고 있습니다.
ReactViteZustand
- 제가 만든 프로젝트와 글을 한 곳에 정리한 개인 포트폴리오 웹사이트입니다.
- 다양한 애니메이션과 3D 요소를 더해 보는 재미를 높였고, 반응형으로 최적화했습니다.
- 직관적인 구조와 깔끔한 디자인에 신경 썼으며, 퍼포먼스 최적화도 함께 고려하여 개발했습니다.
Next 15 (App)Tailwind CSSi18nGSAPFramer MotionThree.js
- BC 주정부에서 주최한 IS24 Full Stack Competition 과제로 개발한 직원 관리 시스템입니다.
- 조직 내 직원과 팀 정보를 효율적으로 관리할 수 있도록 사용자 친화적인 인터페이스와 기능을 구현했습니다.
- 프론트엔드부터 백엔드, 데이터베이스까지 풀스택으로 개발하였으며, Docker를 이용해 배포 환경을 구성했습니다.
ReactTailwind CSSNode.jsExpress.jsMongoDBDocker
- Lost Ark를 플레이하면서 매번 파티원을 구하는 과정이 번거롭다고 느껴 직접 개발한 Discord 파티/레이드 모집 봇입니다.
- 간단한 명령어만으로 파티를 생성하고 팀원을 모집할 수 있어 빠르고 편리한 매칭이 가능합니다.
- 개발 이후 실제 커뮤니티에서 사용되며, 피드백을 반영해 기능을 개선하고 유지보수했습니다.
Node.jsDiscord.jsHerokuJavaScript
- 웹에서 3D 인터랙션을 실험하기 위해 만든 프로젝트입니다.
- 사용자 상호작용에 반응하는 3D 씬을 구현하고 다양한 효과를 테스트했습니다.
ReactThree.jsWebGLGSAPMotion
- UBC 학생들을 위한 교내 하우징 및 부동산 검색 플랫폼입니다.
- 학교 근처에서 집을 구하는 것이 어렵다는 문제를 해결하고자 캡스톤 프로젝트로 개발했습니다.
- 학생들이 직접 매물을 등록하고 검색할 수 있으며, 간단한 UI와 필터 기능을 통해 쉽게 원하는 정보를 찾을 수 있습니다.
PHPMySQLJavaScriptHTMLCSSTravis CI
Skills
Frontend
- React
- Next.js
- React Query
- Recoil
- Zustand
- Redux
- JavaScript
- TypeScript
- WebGL
- Three.js
- GSAP
- Tailwind
- Storybook
- Figma
Backend
- Node.js
- Nest.js
- Express.js
- PostgreSQL
- MongoDB
DevOps
- AWS
- NGINX
- Docker
- Jenkins
Misc.
- Java
- Agile/Scrum
- Jira
- Confluence
- Git
- GitHub
- GitLab
- BitBucket
- Slack
- VS Code
Education
2020.04
University of British Columbia
Bachelor of Science - Major in Computer Science