도형 속성창에서 테두리 그라데이션 선택 시 입력 영역이 위로 튀는 버그를 수정하고, 이미지 속성에 사용자가 요청한 '오버레이(단색/그라데이션)' 기능을 구현하기 위한 계획입니다.

User Review Required

IMPORTANT

이미지 오버레이 기능은 CSS의 다중 배경(Multiple Backgrounds) 기능인 linear-gradient(rgba, rgba), url(...) 방식을 사용하여 기존 이미지 위에 색상 필터(단색/그라데이션)를 입히는 방식으로 렌더링됩니다. 이 방식은 퍼포먼스에 영향을 주지 않으면서 투명도 및 각도 조절을 완벽하게 지원합니다.

Open Questions

  • 이미지 오버레이가 설정된 경우 기존의 혼합 모드(Blend Mode)는 오버레이된 최종 이미지와 배경 사이에 적용됩니다. 이 동작 방식이 의도와 부합하나요?

Proposed Changes

1. 도형 테두리(Stroke) UI 버그 수정

[MODIFY] 

  • shapeStrokeType이 'gradient'로 변경될 때 rowShapeStroke 컨테이너 전체를 숨기던 코드를 수정합니다.
  • 선 두께(shape-stroke-width) 입력란은 남겨두고 색상 선택란(shape-stroke-color)만 숨기도록 분리 처리하여, UI 요소가 튀어오르거나 선 두께 설정을 할 수 없게 되는 버그를 해결합니다.

2. 이미지 속성창 '오버레이' 패널 추가

[MODIFY] 

  • 이미지 속성 영역에 image-overlay-type (없음/단색/그라데이션) 셀렉트를 추가합니다.
  • 단색 선택 시: 색상 및 투명도 슬라이더가 포함된 패널 추가
  • 그라데이션 선택 시: 시작 색상(투명도 포함), 끝 색상(투명도 포함), 방향 각도 슬라이더가 포함된 패널 추가

[MODIFY] 

  • 새로 추가된 HTML 요소들의 ID를 캐싱하여 DOM 객체에 바인딩합니다.

[MODIFY] 

  • 객체 선택 시 오버레이 관련 속성(타입, 색상, 투명도, 각도 등)을 패널 UI에 동기화하는 로직을 추가합니다.
  • 패널 내의 입력값 변경 시 객체 데이터(selectedObject)를 업데이트하고 캔버스를 다시 그리는 이벤트 리스너를 추가합니다.

3. 오버레이 렌더링 엔진 구현

[MODIFY] 

[MODIFY] 

  • generateObjectInnerHtml의 image 타입 처리 부분에서 imageOverlayType을 확인합니다.
  • 단색인 경우 linear-gradient의 시작/끝 색상을 동일하게 설정하고, 그라데이션인 경우 설정된 각도 및 rgba 값에 맞추어 background-image 속성에 적용합니다.

4. 언어팩 업데이트

[MODIFY]  및 기타 언어팩(en, ja, zh, es)

  • inspector 객체 내에 "image_overlay": "오버레이" 등 새롭게 추가된 UI 라벨에 대한 다국어 번역을 추가합니다.

Verification Plan

Manual Verification

  1. 도형 선택 후 테두리를 그라데이션으로 변경할 때 테두리 두께 설정 항목이 사라지지 않고 UI가 튀지 않는지 확인합니다.
  2. 이미지를 삽입하고 속성 창에서 오버레이를 '단색'으로 변경한 후 투명도를 조절하여 캔버스 렌더링이 즉시 반영되는지 확인합니다.
  3. 오버레이를 '그라데이션'으로 변경하고 시작/끝 색상 및 투명도, 각도를 조절하여 그라데이션 필터가 정확하게 반영되는지 확인합니다.
  4. 언어를 변경하여 오버레이 텍스트가 정상적으로 번역되는지 확인합니다.