선 도형 관련 기능 개발
2024.05 - 2024.08
기존 제품에서 도형 간 연결선 기능을 지원하지 않아, 외부 오피스 문서의 연결 정보가 누락되거나 선 도형 형태에 제약이 생기는 문제가 있었습니다. MS PowerPoint, Google Slides 등에서 제공하는 기능과 유사한 동작을 적용하는 것을 목표로, 해당 기능을 전담하여 개발하였습니다.
💻 기술 스택
🧩 상세 설명
도형 간 위치 관계에 따른 최적 경로의 연결선 생성을 위한 분석 및 계산 로직 구현
레퍼런스 제품 분석을 통해 다양한 조건에 따른 선 형태 분석
분석 결과를 토대로 선 도형의 위치 및 형태(꺾이는 횟수 및 지점, 사이즈, 회전 각도) 값을 계산하는 로직 구현
레퍼런스 제품에서 발견한 일부 비직관적인 케이스는 배제하여 더 일관적인 UX 제공
선 도형을 직접 조작할 때와 연결된 도형이 변경됨에 따라 선 도형이 업데이트되어야할 때 모두 대응할 수 있게, 로직을 공통화하여 재사용 가능하게 구현
선 도형 조작 시 연결 가능한 도형 및 지점을 표시
마우스 오버된 도형을 전역 상태에 저장하고, 이를 구독하는 컴포넌트가 자동으로 연결 가능한 지점을 도형의 위치/형태에 맞게 조정하여 표시
도형 변경에 따른 연결선 자동 업데이트
도형 간 연결 관계를 맵 형태로 저장하여, 연결된 모든 선 도형을 조회하고 업데이트될 수 있는 구조 설계
도형 이동/회전/리사이즈 시 연결선 형태가 재계산되어 도형에 붙어 있도록 계산 및 적용
MVVM 아키텍처에 따라 Command 패턴 기반의 연결/해제 동작 처리 → Undo/Redo 이력 관리 가능
Cucumber, Puppeteer을 사용한 UI 테스트 코드를 작성하여 안정적인 기능 동작 확인
🌱 배운점
초기 설계의 중요성을 깊이 깨달았습니다. 부실한 설계는 개발 과정에서 많은 시간을 소모하게 하며, 팀 내 피드백을 통해 탄탄히 다지는 과정이 필수적임을 배웠습니다. 좋은 설계가 개발 속도와 품질을 결정한다는 점을 실감하게 되었습니다
코드의 가독성을 높이기 위해 컴포넌트와 커스텀 훅으로 분리하고, 또한 반복적인 로직을 재사용 가능한 형태로 분리하여 최소화하는데 집중했습니다. 대규모 프로젝트에서는 확장성과 유지보수를 고려해 코드의 구조를 고민하는 것이 매우 중요하다는 것을 다시 한 번 깨달았습니다.