👤 Summary
신태일
Frontend Engineer150개 이상의 컬럼이 포함된 그리드처럼 데이터 복잡도가 높은 화면을 안정적으로 구현하는 과정에 집중합니다.
사업비 24억 원 규모의 엔터프라이즈급 차세대 시스템 구축에 참여하여, 초기 아키텍처 설계부터 단독 유지보수까지 전 과정을 책임지며 시스템의 지속 가능한 성장을 위한 기술적 대안을 고민합니다.
💼 Career
(주)클라모스
Main Frontend Developer / Maintenance Lead
공공기관 대상의 대규모 엔터프라이즈 시스템 통합(SI) 전문 기업
한국환경공단 올바로 차세대 시스템 구축
- ✨ 비표준 라이브러리의 React 생명주기 통합 및 상태 동기화로더 기반으로 동작하는 IBSheet8 인스턴스와 React 간의 상태 불일치 및 렌더링 타이밍 이슈를 해결하기 위해 커스텀 훅 기반의 Lifecycle 래퍼를 설계했습니다. 시트 객체를 React 상태로 캡슐화하여 중복 렌더링과 데이터 유실을 방지하고, 50여 종의 서식이 현장 배포 환경에서도 동일하게 제어될 수 있는 안정성을 확보했습니다.
- 🚀 Zustand 기반 동적 서식 엔진 구현 (50여 종 서식 대응)권한, 서식 상태(임시저장/보완/반려 등), 수출입 여부에 따라 실시간으로 변하는 50여 가지 인허가 서식 로직을 처리했습니다. Zustand를 활용해 분기별로 필요한 컬럼 스키마를 런타임에서 동적으로 주입하는 구조를 설계하여, 대규모 비즈니스 요구사항에도 유연하게 대응 가능한 유지보수 환경을 구축했습니다.
- 📊 디버깅 리드타임 단축을 위한 실시간 JSON Viewer 개발150개 이상의 컬럼 대조 시 발생하는 수동 검증의 비효율을 해결하고자 클라이언트 사이드 데이터 시각화 도구를 제작했습니다. 요청값의 트리 구조를 직관적으로 확인하게 함으로써 데이터 정합성 오류 포착 시간을 획기적으로 단축하고 백엔드와의 소통 리소스를 절감했습니다.
- 🛠️ 현장 네트워크 제약 해결 (WebtoB Reverse Proxy)보안 정책이 엄격한 현장 배포 환경에서 발생하는 외부 API 통신 장애를 WebtoB 리버스 프록시 설정으로 해결했습니다. 프론트엔드 웹 서버를 경유하는 프록시 계층을 직접 구성하여 로컬 환경과 배포 환경 간의 통신 정합성을 확보했습니다.
해양경찰 장구류 관리 시스템 고도화
FSD 아키텍처 기반의 병합 효율화 및 주도적 공통 UI 시스템 구축
- ✨ 주도적인 공통 UI 시스템(Modal/Overlay) 설계 및 표준화독립적인 도메인 개발 중심의 FSD 구조 하에서 누락되었던 공통 모달 및 오버레이 시스템을 주도적으로 구축했습니다. 다양한 API 응답 모델에 유연하게 대응할 수 있도록 인터페이스를 설계하고 실제 API 연동을 통해 기능을 검증하여, 팀원들이 도메인 로직에만 집중할 수 있는 협업 기반을 마련했습니다.
- 🤝 리드 협의를 통한 기술 지식 자산화 및 문서화설계한 시스템의 범용성을 기술 리드(Lead)에게 직접 제안하여 표준으로 채택시켰습니다. 특히 외부 인터넷 사용이 제한적인 폐쇄망 환경을 고려하여 개발 폴더 내에 인터랙티브한 기술 문서(Docs)를 구축함으로써, 별도의 외부 참조 없이도 전 팀원이 공통 컴포넌트를 즉각 활용할 수 있도록 기여했습니다.
🛡️ 기술적 강점
도구의 사용법에 매몰되지 않고, 엔지니어링의 본질적인 문제 해결에 집중하며 얻은 실무적 역량입니다.
AI 에이전트 협업 및 실전 기술 구현
AI를 파트너로 활용하여 기술 리서치 및 프로토타이핑 시간을 단축하고, 생성된 코드의 정합성을 직접 검증하여 개발 효율을 극대화합니다.
지속 가능한 구조와 개발 표준화
FSD 아키텍처 기반의 확장성 있는 시스템을 설계합니다. 특히 위젯 단위의 컴포넌트화를 통해 팀 전체의 개발 생산성을 상향 평준화합니다.
데이터 가공 및 런타임 성능 최적화
150개 이상의 컬럼과 50여 종의 복잡한 서식 환경에서도 브라우저 성능 병목을 수학적 로직과 상태 관리 전략으로 해결합니다.
경계를 두지 않는 능동적 문제 해결
프론트엔드 개발에 국한되지 않고, 개발 도구 직접 제작 및 인프라 제어(Reverse Proxy)를 통해 비즈니스 가치를 확보합니다.
🛠️ 기술 스택
단순한 도구의 나열보다 각 기술 계층의 유기적인 결합을 통해 문제를 해결합니다. 레이어를 클릭해 기술 구성을 확인해보세요.
Layer 1: 프론트엔드 핵심 & BFF
Next.js(App Router) 기반의 BFF 구조를 설계하여 최적화된 데이터 인터페이스를 구축합니다. 엄격한 타입 시스템을 통해 안정적이고 확장 가능한 아키텍처를 지향합니다.
Layer 2: 데이터 및 상태 관리
서버 상태 동기화와 클라이언트 전역 상태의 역할을 명확히 구분하여 관리합니다. 아키텍처에 따라 TanStack Query나 Apollo Client를 선택적으로 운용하며, 데이터 무결성을 위해 Zod와 Hook Form을 연계합니다.
Layer 3: 인프라 및 협업 환경
Vercel, EC2 등 적합한 배포 인프라를 구축합니다. 실무 대다수의 협업 도구를 경험하여 새로운 툴 도입에도 즉시 적응하며, 기획/디자인과 기민하게 소통하여 팀 워크플로우를 최적화합니다.
Layer 4: 특화 기술 및 UX 고도화
실시간 비전 연산 최적화와 같이 기술 난도가 높은 문제를 해결하는 데 즐거움을 느낍니다. i18n 확장성 확보와 Framer Motion 설계를 통해 사용자가 몰입할 수 있는 완성도 높은 결과물을 만듭니다.
🎓 Education & Awards
Education & Activity
서경대학교
2019.03 — 2025.08소프트웨어학과
자료구조, 알고리즘 등 CS 기초 역량을 다졌으며, 배움에 대한 집요함으로 꾸준한 성적 향상을 이뤄냈습니다.
구름톤 유니브 3기
2024.09 — 2025.01구름과 카카오 주관 전국 대학생 IT 연합 동아리
- • 서경대 구름톤 유니브 프론트엔드 '미르미' 참여
- • KDC 47기 AI 웹 개발 과정 수료
- • 단풍톤 프로젝트 '소확행' 팀 리드 수행
서경 SW 아카데미
2024.02 — 2024.06기업 맞춤형 클라우드 기반 AI/빅데이터 소프트웨어 교육
- • 8주간의 AI 및 빅데이터 집중 교육 수료
- • 기업 현직자 멘토링 기반 프로젝트 개발
- • 프로그래머스 코딩 교육 프로그램 수료 (PCCP)
UMC 5기
2023.09 — 2024.02실무형 앱/웹 프로젝트 IT 연합 동아리
Awards
서경 SW 헥토 파이낸셜 프로젝트 성과 발표대회
2024.06.25프로젝트의 기획적 가치와 기술 실현 가능성 부문에서 12개 팀 중 가장 높은 점수를 획득하여 1위를 기록했습니다.
✉️ CONTACT
흩어져 있는 정보를 정리하고 기록으로 남기는 과정을 즐깁니다. 혼자 아는 지식보다 서로의 경험이 맞물려 팀의 실력이 될 때 비로소 일하는 재미를 느낍니다. 기술적인 고민을 스스럼없이 나누며 함께 몰입할 수 있는 동료를 찾고 있습니다.
