23.11.26~23.12.03

업무

가이드 빌더 패키지 개발

기존 모달 형태의 가이드 빌더에서, 툴팁 템플릿이 추가되어 이를 개발했다.

 

대상 조회 및 툴팁 생성

extension에서 사용자가 선택한 요소의 xPath를 생성해 저장하면

script에서 xPath에 해당하는 요소를 찾아, UI에 맞는 툴팁을 띄워주는 형태로 구현했다.

 

요소를 찾는 것 자체는 간단했지만

사용자가 선택한 방향에 따라 말풍선의 위치를 변경하고,

해당 요소를 클릭하면 다음 툴팁이 뜨면서 동시에 배경이 깔려야 하는데...

 

아래 작성한 반응형 대응과 합쳐지면서, 생각보다는 애를 먹었던 작업!

반응형 대응

xPath로 요소를 조회하는데... 여기에는 치명적인 문제점이 있다.

→ DOM 변경 및 화면 resize시 반응형에 대응해야 한다는 것!

 

xPath요소가 존재하지 않으면 당연히 툴팁을 띄우지 말아야 하는데,

이것이 1) 현재 DOM tree가 완전히 그려지지 않았기 때문일 수도 있고 (고객사의 의도적인 지연)

2) 화면 크기로 인해 사이트의 구조가 달라졌기 때문일 수도 있다.

 

따라서 DOM이 변경되거나, 화면 크기가 달라질 때마다 → xPath 요소가 있는지 검사하고, 그에 맞는 UI를 보여줘야 했다.

 

지난주 작업했던 고객사는 이미지가 포함된 모달이 주된 요구사항이었기 때문에,

script 실행 시 모든 모달에 대한 HTMLElement를 생성하는 형태로 로직이 작성되어 있었다.

(다음 모달로 넘어갈 때, 이미지가 즉시 뜰 수 있도록)

 

이번에도 이러한 논리에서부터 시작을 했는데...

툴팁과 배경의 위치를 잡는데서 난관에 부딪혔다.

→ 툴팁을 요소의 가운데 위치하기 위해서는, 해당 요소의 너비나 높이를 알아야 하는데,

해당 요소의 크기는 DOM에 붙기 전까지는 정해지지 않는다는 것!

(이전 이미지 채팅을 구현할 때도 한번 겪었었다)

 

타깃 요소를 DOM에 생성하기 전에 미리 각 요소들을 생성한다는 로직을 수정해야 했고

1) 요소 생성 단계 2) 요소 스타일링 단계를 분리해

DOM 변경 시에는 요소 스타일링 단계만 재실행해 적절한 타깃 위치를 찾아갈 수 있도록 했다!

 

자동 스크롤

2023.12.01 - [source-code/FrontEnd] - JS 종료 시점 제어되는 ScrollIntoView 구현하기

JS 종료 시점 제어되는 ScrollIntoView 구현하기

 

회고

회사의 모든 사안에 적극적으로 의견을 내는 팀원.

회사를 자기 것처럼 생각하는 팀원.

물론 이상적이지만... 그렇지 않은 이들을 탓할 수는 없다.

 

이해관계, 조직의 분위기, 사안의 중차대함 등.

적극적인 의사 표현에는 여러 요소들이 복합적으로 적용될 수밖에 없기 때문.

 

그러므로, 탓할 것이 아니라 노력해야 한다.

더 큰 권한이 있는 사람들이 끊임없이 의견을 제시하고, 피드백을 구해야 한다.

 

각 팀원들의 책임과 권한을 명확하게 제시하고

적극적으로 의사를 구할 때는, 반드시 그 책임과 권한 안에 있는 사안과 관련되어야 한다.