동료와 함께 성장하는 개발자

Careers

포스트매스*, 서울특별시 구로구 (2024.12 ~)*

티맥스 가이아*, 성남시 분당구 (2023.10 ~ 2024.10)*

뇌인지과학 학사

2016.03 ~ 2020.02

Adjust handle 기능 개발 (2023.12 ~ 2024.07)

📄 도형 모양 조정 기능 분석 및 설계 자료
‘도형 모양 조정’ 기능 설명
- 🎥 기능 시연 영상 (0:00 ~ 0:12)
- 사용자가 도형에 있는 노란 점(adjust handle)을 마우스로 조절하여 도형의 모양을 바꾸는 기능.
- 예 : ‘웃는 얼굴’ 도형의 입모양을 조절하여 우는 얼굴로 만듦. 또는 ‘원호’ 도형(부채꼴)의 중심 각도를 조정함.
렌더링 효율화 방법
- 변화 과정 중 도형의 실시간 렌더링은 성능 부담이 큼. 도형의 채우기, 윤곽선 등 스타일 정보를 모두 반영해야 하기 때문.
- 따라서 편집 중에는 도형의 테두리만 남긴 가벼운 컴포넌트로 도형의 변화를 표현함. 편집이 완료되면 기존 컴포넌트에 새로운 모양을 적용하고 편집용 컴포넌트 사라짐.
수학적 계산을 통한 모양 조정 알고리즘 구현
- 도형에 저장되는 데이터는 오피스에서 사용하는 특수 단위로, 사용자의 마우스 이동 거리(픽셀) 또는 각도(벡터)와의 변환 계산이 필요함.
- 예 : ‘원호’ 도형(부채꼴)의 각도 조절 시 ‘외적’으로 두 벡터 사이 각도를 계산하여 단위 변환을 수행하도록 함.

그래픽 요소의 서식 복사/붙여넣기 기능 개발 (2024.02 ~ 2024.03)

‘그래픽 서식복사’ 기능 설명
- 🎥 기능 시연 영상 (0:20 ~ )
- 그래픽(도형, 그림 등) 요소의 서식(채우기, 윤곽선, 그림자 효과 등 스타일)을 다른 그래픽에 동일하게 적용하는 기능
사용자가 서식복사 버튼을 클릭하면 MobX의 DocumentContext에 그래픽의 스타일 정보 저장
이후 다른 그래픽을 클릭하면, context에 저장된 스타일이 해당 그래픽에 자동으로 붙여넣어짐.
기능 개발 시 어려웠던 점과 해결방안
- 붙여넣기 할 도형의 중앙 부분 클릭 시 서식 붙여넣기가 적용되지 않는 버그 발생
- 이벤트 타겟이 도형 안의 ‘텍스트 박스’가 아닌 ‘도형’(그래픽) 자체가 되도록 예외 처리 추가하여 해결.