Backend Developer

드래그앤 드랍 ui 순서(order) 관리

문제 원인

레이아웃을 환자(Patient) 기준으로 순서를 지정해야 하는 기능이 있었음. 초기에는 Layout 엔티티 안에서 layoutOrder 필드를 0, 1, 2, 3… 이런 식으로 순차적으로 부여하며 관리했음. 문제는 레이아웃 삽입이나 순서를 바꾸는 경우였음. 이런 경우 기존 레이아웃 전체의 layoutOrder를 다시 정렬해야 했음. 즉, 하나의 요소만 바꾸기 위해 모든 데이터를 업데이트해야 했음.


해결을 위한 과정

처음엔 layoutOrder 자체를 독립된 매핑 엔티티(PatientLayoutMapping)로 분리하는 방식으로 문제를 풀려고 했음. Patient, Layout과 별개로 매핑 테이블을 두고, 순서는 그 테이블에서 관리하는 구조였음. 이렇게 하면 각 Layout의 순서를 독립적으로 변경할 수 있을 거라고 판단했음.

그러던 중 좋은 레퍼런스를 하나 찾았고, 그 접근법은 다음과 같았음:

  • 각 순서를 상대적 간격을 두고 관리함
  • 예를 들어, 처음 5개의 레이아웃이 있을 경우 순서는 1024, 2048, 3072, 4096, 5120처럼 설정함
  • 순서를 바꿔야 할 경우, 앞뒤 순서의 평균값을 사용해 새로운 순서를 부여함 예: 20483584 (앞이 3072, 뒤가 4096일 때)
  • 이러한 방식은 다른 요소들의 순서를 변경하지 않고도 삽입이나 이동이 가능하다는 장점이 있음
  • 단, 중간 값의 간격이 1 이하로 줄어들 경우, 한 번의 리밸런싱(rebalancing)이 필요함
  • 리밸런싱은 기존 순서를 1024 간격으로 다시 부여하는 간단한 작업임

결과

전체 업데이트 없이 레이아웃의 순서를 변경하거나 삽입할 수 있는 구조를 만들 수 있었음. 불필요한 업데이트 없이 삽입과 이동이 가능해졌고, 기존에 고민하던 매핑 테이블 구조도 필요 없게 되었음. 특정 상황에서만 리밸런싱이 일어나므로 성능상 이점도 큼. 최종적으로는 복잡한 순서 변경 로직 없이, 유지보수성과 성능을 모두 확보할 수 있었음.