[GAIA Office] 선도형 기능 고도화

선 도형 관련 기능 개발

2024.05 - 2024.08

'티맥스가이아'에서 문서 편집 도구 GAIA Office를 개발하며 수행했던 프로젝트입니다. 기존 제품에서 도형 간 연결선 기능을 지원하지 않아, 외부 오피스 문서의 연결 정보가 누락되거나 선 도형 형태에 제약이 생기는 문제가 있었습니다. MS PowerPoint, Google Slides 등에서 제공하는 기능과 유사한 동작을 적용하는 것을 목표로, 해당 기능을 전담하여 개발하였습니다.

💻 기술 스택

React
Typescript
MobX
Sass
Gitlab
Java
Cucumber
Puppeteer

🧩 구현 기능

1. 연결점 표시

  • 선 도형 조작 중 다른 도형에 가까이 접근하면 해당 도형 위 연결 가능한 점들이 나타남

2. 연결선 생성

  • 연결점에 접근하면 해당 점과 연결되며, 도형을 가로지르지 않고 우회하는 연결선이 만들어짐

  • 연결선의 한 쪽 끝에 연결 여부를 표시

3. 도형의 변화에 따른 연결선 업데이트

  • 특정 도형에 대해 이동/크기 조정/회전 등 편집이 발생하면 해당 도형에 연결된 선 도형도 함께 변화

📌 이슈

연결 관계 구조 설계

연결선 모양 계산

➕ 기타 내용

연결점 컴포넌트 개발

  • 도형 종류에 따라 달라지는 연결점 위치 정의

  • 실제 요소보다 조금 더 큰 투명 이벤트 영역을 바로 위에 띄워, 연결점 바로 위에 마우스를 올려놓지 않고 가까이 접근만 해도 연결되도록 함

자유형 도형 대응

  • 사용자가 그린 도형의 path를 세그먼트 단위로 분리하고 끝점을 추출

  • 도형 삽입 시 연결점으로 등록해 사용자 정의 도형에서도 기능이 동작하도록 처리

관련 컨텍스트 메뉴 기능 추가

  • 연결선 종류 변경: 선 도형의 타입(직선/꺾인/곡선) 변경

  • 연결선 바꾸기: 두 도형 사이 만들어질 수 있는 모든 연결선 중 가장 짧은 연결선으로 재연결

다양한 시나리오에서도 일관성 유지

  • 함께 복사한 도형끼리는 기존 연결 관계 유지

  • 도형 삭제 시 관련 연결 정보 정리

  • 실시간 협업 환경에서 다른 사용자의 연결 작업을 현재 화면에 반영되도록 처리

🌱 배운점

초기 설계의 중요성을 깊이 깨달았습니다. 부실한 설계는 개발 과정에서 많은 시간을 소모하게 하며, 팀 내 피드백을 통해 탄탄히 다지는 과정이 필수적임을 배웠습니다. 좋은 설계가 개발 속도와 품질을 결정한다는 점을 실감하게 되었습니다

코드의 가독성을 높이기 위해 컴포넌트와 커스텀 훅으로 분리하고, 또한 반복적인 로직을 재사용 가능한 형태로 분리하여 최소화하는데 집중했습니다. 대규모 프로젝트에서는 확장성과 유지보수를 고려해 코드의 구조를 고민하는 것이 매우 중요하다는 것을 다시 한 번 깨달았습니다.