1) 프로젝트 개요 - 프로젝트: 트레드링스(Tradlinx), 짐고(ZimGo), OV(Ocean Visibility) 등 트레드링스의 물류 서비스 플랫폼 프론트엔드 리팩토링 및 신규 기능 개발 - 목표: 레거시 코드(Angular, Node.js)의 유지보수성 및 성능 개선, 글로벌 확장을 위한 다국어(i18n) 지원, 결제(PayPal) 연동 등을 통해 사용자 편의성 및 매출 증대 2) 역할 및 담당 업무 - FE 개발팀 매니저로서 팀원 3명 관리(코드 리뷰·일정 조율·기술적 이슈 해결) - 레거시 코드 분석 및 리팩토링: Angular 8 기반의 노후화된 구조를 모듈별로 재설계 - Ocean Visibility(Next.js + React) 개발: 다국어(i18n), PayPal 결제 등 신규 기능 기획·개발 - SSR(서버 사이드 렌더링) 최적화 및 SEO 개선: 검색 엔진 노출도 상승 및 페이지 로딩 속도 단축 3) 사용 기술 - 프론트엔드: Angular, NgRx, MUI, Next.js, React, TypeScript, Recoil, React Query, zustand, zod - 백엔드/인프라: Node.js, Docker, Azure, Git, NestJS, prisma, gRPC - 결제/배포: PayPal API 연동, SSR 환경에서 SEO 메타 태그 자동 생성, CI/CD 파이프라인 구축 4) 어려움과 해결 과정 - 이슈 1: 레거시 코드 모듈화 난이도 - 문제점: 단일 모듈에 복잡도가 높은 로직이 밀집되어, 유지보수 시 장애 발생 확률 증가 - 해결 방법: 단일 모듈을 도메인별(화주, 포워더, 관리자, 선적, 견적, UI 컴포넌트 등)로 분할하고, 공통 컴포넌트 라이브러리를 개발해 코드 재사용률 극대화 - 결과: 모듈화 이후 신규 기능 추가 시 코드 충돌 건수가 40% 감소하고, 유지보수 속도가 30% 단축 - 이슈 2: 글로벌 대응(i18n)과 SEO 충돌 - 문제점: Next.js SSR 환경에서 다국어 라우팅과 SEO 메타 태그 설정이 복합적으로 얽혀 예기치 않은 빌드 에러 발생 해결 방법: - Next.js의 getStaticProps와 getStaticPaths를 활용해 빌드 시 다국어 페이지를 미리 생성, - 언어 리소스를 작은 단위로 분할하고 웹팩의 코드 스플리팅 기능을 활용하여 최적화, - next-seo 라이브러리를 사용하여 언어 및 페이지별 SEO 메타데이터 최적화, - CI/CD 파이프라인에서 언어별 빌드를 병렬로 실행하고 증분 빌드 기능 활용 - 결과: 빌드 에러 해소, SEO 최적화 개선, 페이지 로딩 속도 향상, 사용자 경험 개선 및 검색 엔진 크롤링 효율성 증대 5) 성과 - 레거시 코드 리팩토링: 개발 속도 30% 향상, 버그 핫픽스 주기가 기존 1주 3~4일로 단축 - SSR 및 SEO 개선: 페이지 로딩 속도 20% 향상, 검색 엔진 유입량 15% 증가 - 결제 기능 안정화: PayPal 결제 모듈 통합으로 결제 성공률 10% 상승, 사용자 이탈률 감소 - 글로벌 사용자 확장: i18n 적용으로 영어를 사용하는 해외 사용자 유입, 월간 사용자 수 15% 증가 6) 서비스 링크 - Tradlinx: https://www.tradlinx.com/kr - Ocean Visibility: https://www.tradlinx.com/en/services/ocean-visibility - ZimGo: https://www.tradlinx.com/service-zimgo

更多

1) 프로젝트 개요 - 프로젝트: Bemily Messenger & Accounts System - 목표: 크로스플랫폼(Web, Windows, Mac, Linux) 지원 메신저 시스템 구현, 보안 강화(MFA, Keycloak 연동), 계정 관리 효율화 2) 역할 및 담당 업무 - Messenger System 분석 및 설계: PoC 단계부터 설계 총괄, 프로젝트 UML·워크플로우 정의 - Electron 기반 데스크톱 앱 개발: Windows·Mac·Linux 환경에 맞춰 빌드 프로세스 자동화 - Angular Worker Service 적용: 비동기 요청·응답 처리 구조 설계, 렌더링 최적화 - Keycloak 인프라 설정: 사내 Figma, Jira, Confluence, SonarQube 등 SaaS 보안 강화 및 SSO 적용 3) 사용 기술 - 프론트엔드: Angular, NgRx, Electron, TypeScript, Worker Service, axios - 인프라/보안: Git, Docker, Keycloak, MFA, SSO(SAML, OAuth) - 설계 도구: Enterprise Architect(UML), Git, Jenkins 4) 어려움과 해결 과정 - 이슈 1: Electron 환경에서 다중 웹뷰 사용 시 렌더링 성능 저하 - 문제점: - Desktop 메신저를 Electron 기반으로 구현하면서 다양한 웹뷰(WebView)가 동시에 실행되는 경우, UI 스레드가 과부 하를 받아 렌더링 속도가 크게 저하 - 백엔드와의 통신 로직도 동일한 쓰레드에서 처리하다 보니, 대화방 전환 시 메시지 로딩이 지연되고 UI 프레임이 끊기는 현상이 발생 - 해결 방법: - 브라우저 워커 서비스(Worker Service) 활용: 백엔드 통신 및 데이터 처리를 별도의 워커에서 수행함으로써, 메인 UI 스레드(렌더러)가 오로지 렌더링 작업에 집중할 수 있도록 분리 - 웹뷰마다 독립된 워커 서비스를 적용하여, 데이터 페칭·처리와 렌더링이 병행될 때도 성능 저하를 최소화 - 결과: - UI 반응 속도가 눈에 띄게 개선되었으며, 대화방 전환·메시지 로딩 시 프레임 드롭이 크게 줄어듦 - 백엔드와의 통신 로직이 안정적으로 수행됨에 따라, 실시간 메시지 수발신 품질 및 사용자 경험이 향상 - 이슈 2: Keycloak 연동 시 SaaS별 인증 방식 상이 - 문제점: Figma, Jira, Confluence 등 SaaS마다 SAML/OAuth 설정이 달라 통합 인증에 혼란 - 해결 방법: Keycloak 어댑터를 각 SaaS별로 커스터마이징해 권한 맵핑을 통일 - 결과: 사내 사용자 계정 관리 효율 40% 향상, LDAP에 생성한 계정으로 모든 툴 접속 가능 5) 성과 - PoC 완료: Web, Windows, Mac, Linux 전체 플랫폼에서 동일 기능 구현 - 보안 향상: MFA 적용 후 외부 침입 시도로 인한 계정 잠금 건수가 50% 감소 - 구현 속도: Angular Worker Service 도입으로 렌더링 지연율 15% 개선 - 유지보수성: 공통 컴포넌트·모듈화로 신규 기능 추가에 따른 코드 변경 범위 30% 감소

更多

1) 프로젝트 개요 - 프로젝트: LG U+ CRM Pro, LG CNS UCAP 메신저, 대상 메신저, LF 메신저 - 목표: 기업 내부 통화/메신저 기능 통합, Angular+Electron 기반 데스크톱/웹 메신저 시스템 구현 2) 역할 및 담당 업무 - Node.js 소켓 모듈 개발: IP 전화기 제어(OCX 소켓통신) 기능 구현 - Angular 라우트/모듈 구조 재설계: NgRx 상태 관리 도입으로 상태 관리 체계화 - 프로젝트 일정 관리 및 납품: 개발팀 스프린트 조정, 릴리즈 계획 수립 3) 사용 기술 - Angular, Electron, Node.js, NgRx, RxJS, Socket 통신, Git 4) 어려움과 해결 과정 - 이슈1: IP 전화기 연동 시 실시간 상태 동기화 - 문제점: 전화 수신 이벤트와 CRM 상 고객정보 연동 지연 통화 시점에 고객정보가 늦게 표시 - 해결 방법: Node.js 소켓 서버와 Angular 간의 WebSocket/Polling 전략을 병행 적용 - 결과: 고객정보 표시 속도 약 30% 개선, 상담 효율 상승 - 이슈 2: Electron 메모리 누수 - 문제점: 장시간 대화방을 열어 두거나 대용량 파일 전송 시 메모리가 제대로 해제되지 않음 - 해결 방법: BrowserWindow 객체와 IPC 통신에서 불필요한 이벤트 리스너를 제거하고, GC 주기를 조정 - 결과: 누적 실행 12시간 후에도 메모리 사용량 25% 이상 감소 5) 성과 - 통화 제어 자동화: 고객센터 상담원이 IP 전화를 수동으로 제어하던 과정을 80% 자동화 - 일정 준수: 6개월 계획했던 프로젝트를 5개월 만에 완수, LG U+ 측 만족도 높음 - 코드 품질: NgRx 도입 후 사이드 이펙트 제어가 수월해져, 신규 버그 발생률 20% 이상 감소 6) 서비스 링크 LG Uplus CRM Pro: https://crmpro.uplus.co.kr/company/home LG CNS UCAP Messenger: 사내 솔루션으로 외부 링크 없음 LF Meseenger: 사내 솔루션으로 외부 링크 없음 Daesang Meseenger: 사내 솔루션으로 외부 링크 없음

更多

1) 프로젝트 개요 - 프로젝트: 던킨도넛츠 KIOSK 개발 - 목표: 매장 내 무인 주문·결제 프로세스 구축, POS와 실시간 연동해 운영 효율 극대화 2) 역할 및 담당 업무 - 데이터 통신 모듈 설계/개발: POS KIOSK 간 주문·결제 데이터 실시간 교환 - WPF·Nexacro UI 개발: 사용자 친화적 KIOSK 전용 UI 설계, MVVM 패턴 적용 - Redux(내부 C# 버전) 라이브러리 개발: 상태 관리를 일관성 있게 유지해 다양한 기기 환경에서 동일한 동작 보장 3) 사용 기술 - 프론트엔드/UI: C#, WPF, Nexacro, MVVM, Redux - 백엔드/인프라: POS 연동 모듈(C#), SQL Server(데이터 관리), 이벤트 기반 통신 4) 어려움과 해결 과정 - 이슈: 주말·피크 타임에 POS와 KIOSK 간 비동기 통신 지연 주문 누락·중복 처리 위험 - 해결 방법: 통신 프로토콜을 이벤트 기반으로 재설계하고, 메시지 큐를 통한 재시도 로직을 도입 - 결과: 통신 오류 70% 이상 감소, 주문 누락률 크게 낮아져 고객 불만이 대폭 줄어듦 5) 성과 - 프로젝트 성공적 완료: 파일럿 매장 적용 후 전국 매장 단계적 확대 - 매장 운영 효율 개선: 고객 대기시간 평균 20% 단축, 피크 타임 인력 투입 부담 25% 감소 - 코드 품질 향상: MVVM+Redux 구조 도입으로 화면·로직 분리 명확, 유지보수성 30% 향상

更多

1) 프로젝트 개요 - 프로젝트: overFlow 네트워크 및 서비스 모니터링 시스템 - 목표: 대규모 트래픽 및 서버 자원 모니터링, 장애 감지·알림 자동화, CI/CD와 연계된 지속적인 배포 환경 구축 2) 역할 및 담당 업무 - 패킷 제어 모듈 개발: 멀티스레드 환경에서 `pcap` 기반 패킷 캡처, ARP/TCP Handshake 분석 - 모니터링 데이터 수집 및 자동화: WMI, JMX, SNMP, Shell Script 등을 통해 서버/서비스 상태를 자동 수집 - Angular+Electron+D3 UI/UX: 네트워크 트래픽, 오류 로그 실시간 시각화 - MSA 환경 설정: Docker 기반 마이크로서비스 아키텍처 구축, Jenkins+Nexus+Git 기반 CI/CD 파이프라인 운영 3) 사용 기술 - 프론트엔드: Angular, Electron, D3 - 백엔드: Go, Java, gRPC, REST API, Docker - DevOps: Jenkins, Nexus, Git, Shell Script 4) 어려움과 해결 과정 - 이슈 1: 대규모 패킷 동시 처리 문제 - 해결 방법: 패킷 버퍼링 전략 적용, Go루틴 및 자바 멀티스레드 간 경합 최소화 - 결과: 패킷 처리량 20%, 누락·오탐률 10% 미만 유지 - 이슈 2: 다양한 데이터 소스 통합(WMI, JMX, SNMP 등) - 해결 방법: 데이터를 gRPC/REST API로 통합 가공 후 단일 DB에 저장 - 결과: 단일 대시보드에서 모든 리소스 조회 가능, 모니터링 정확도 30% 5) 성과 - 수상 실적: 2018 글로벌 SW 공모대전 국무총리상, KOSA 글로벌 SW 공모대전 금상 - 배포 효율 및 안정성: Docker 기반 MSA 도입으로 신규 배포 시간 1일수시간 단축, 장애 복구 시간 50% - UI 혁신: 실시간 트래픽 맵·상태 차트 구현, 관리자 모니터링 만족도 40% 6) 관련 링크 서비스 실행 동영상: https://www.youtube.com/watch?v=FvvK0c0l82Y 2018 글로벌 SW 공모대전 국무총리상 수상 기사 링크: https://m.etnews.com/20181211000184?obj=Tzo4OiJzdGRDbGFzcyI6Mjp7czo3OiJyZWZlcmVyIjtOO3M6NzoiZm9yd2FyZCI7czoxMzoid2ViIHRvIG1vYmlsZSI7fQ%3D%3D

更多