Web 기반 PCB CAD 협업 플랫폼
삼성전자 네트워크사업부 연계 프로젝트
.png&w=3840&q=75)
%EC%88%98%EC%83%81.jpg&w=3840&q=75)
Key Results
연간 1,600시간 업무 효율화
렌더링 성능 98% 개선 (780ms → 12ms)
프로젝트 우수상 수상 (3등)
Project Overview
Situations
삼성전자 네트워크사업부 내 PCB 설계 과정에서 여러 툴(Visio, Excel 등)이 파편화되어 데이터 불일치 및 중복 설계 작업으로 인한 비효율이 발생
웹 브라우저 환경에서 2,000개 이상의 부품(Node)을 캔버스에 렌더링하고 조작해야 했음. 초기 베타 버전에서 부품 다중 선택 및 드래그 시 780ms 이상의 렌더링 지연(Lag) 발생
서버 DB 스키마 수정 없이 프론트엔드 단에서 편의 기능 구현 필요. 6주라는 한정된 기간 내에 실무 적용 가능한 최적화 필요
Actions & Outcomes
기획: VoC 기반 통합 협업 툴 기획
현업 실무자들의 요구사항(VoC)을 수집하여 '중복 설계 제로'를 목표로 통합 협업 툴 기획
매 주 각 팀의 정기 회의에 참여하여 시연을 통해 개발 상황 공유 및 파트장(부장)급 임원의 VoC 수집. 베타 오픈 후 400여 명의 실무자 대상 공청회를 통해 시연과 VoC 수집
요구사항을 ICE Score(Impact, Confidence, Ease) 기준으로 우선순위화하고, 최대 임팩트 기능을 먼저 스프린트에 반영한 주간 정기 배포로 개발 진행
팀 목표 정렬 및 이해관계자 합의 빠르게 도출하여 6주 기간 내 기획부터 개발까지 완료
개발: 캔버스 렌더링 성능 최적화
대량의 객체가 있는 캔버스 환경에서 끊김 없는(60fps) 사용자 경험 제공
클릭, 드래그시 Konva.js 구현체의 나이브 AABB O(N) 전체 순회 방식으로는 2,000개 객체의 충돌 감지 및 렌더링을 감당할 수 없음을 확인
Quad-Tree는 부품 이동이 빈번하여 트리 재구성(Re-balancing) 비용이 과다. Dynamic BVH Tree는 오버엔지니어링 우려로 배제
- Point Query (클릭): O(N) → Amortized O(1)
- Range Query (드래그): O(N) → O(k + M)
도메인 특성상 부품 크기가 균일하고 맵 크기가 고정적이라는 점에 착안, 캔버스를 10x10 격자로 나누는 공간 해싱(Spatial Hashing) 구현
렌더링 지연 780ms → 12ms (98% 단축)
개발: VanillaJS 기반 커스텀 이벤트 아키텍처 설계
캔버스, Table, 패널, 단축키 등 페이지 기능 확장에 따른 상태 변경 경로 복잡성 해결
각 뷰가 서로 직접 참조하며 통신하면 결합도가 급증하므로, 중앙 이벤트 허브 + 단방향 데이터 흐름이 필요하다고 판단
전역 Singleton으로 EventBus(EventEmitter)를 두고, 모든 상호작용을 emit과 on으로 통일. EventBus를 통해 중앙 상태 모델(SSoT)을 갱신, 각 뷰는 이벤트를 구독해 상태 변화만 반영하도록 구성
단방향 통신으로 결합도를 낮추고, 정합성과 유지보수성 개선
Key Learnings
VoC는 '많이 듣기'가 아니라 '우선순위화'가 핵심이다
성능 최적화는 '측정 → 병목 규명 → 가설 검증' 루프로 접근해야 한다
도메인 제약(CAD 특성)이 자료구조 선택을 결정한다
상각 시간(amortized)과 최악 시간(worst-case)을 함께 설명해야 신뢰가 생긴다
클라이언트 상호작용이 복잡해질수록 상태 정합성이 핵심 과제가 된다
코드 보조 도구를 써도 '코드 주권'과 책임은 개발자에게 있다
Full Gallery
CAD 메인 화면 (보안으로 일부 블러처리됨)
CAD 배치 예시 및 편의 기능
삼성전자 임원 발표회
우수상(3등) 수상