사용개선을 위한 fileupload(이미지) Dialog Custom — Part1
- AEM 6.4 버전의 Dialog Custom
AEM 개발을 시작하는 개발자분들의 시선으로 이미지 Dialog 사용 시 발생된 의문과 문제점들을 해결하고 개선해 나가는 경험 공유 입니다 :)
왜, 기본 fileupload(이미지) Dialog Custom을 하려고 하였는가
업무에서 이미지가 들어가는 Component를 자주 사용하였고 잘 개발됐다 느꼈으나 다른 한편으로 개발자와 사용자의 눈으로 보니 자연스럽게 불편한 점이 보여, 개선되면 좋을 것 같았습니다.
그중 가장 크게 생각되는 부분은 아래와 같습니다.
①어서링 시 현재 어서링 된 이미지의 Path를 보려면 개발자도구 사용 [불편]
②이미지 어서링 후 Alternative text(이하 Alt Text)필드 자동화[웹 접근성¹]
┗기본 이미지 Component에 작동하나, 추가적인 액션 필요
따라서 이 두 가지를 개선하는 Dialog Custom을 하게 되었습니다.
그렇다면 어떻게 개선할 생각인가 ?
①어서링 시 현재 어서링 된 이미지의 Path 보기
1–1 : 이미지를 Drag&Drop으로 어서링 시 Path가 필드에 표기
1–2 : 직접 Path를 입력하여도 이미지 표기
1–3 : 직접 Path 입력 시 이미지가 없으면 유저에게 시각효과 알림
1-4 : Clear 시 이미지&Path 필드 모두 초기화
②이미지 어서링 후 Alt text 필드 자동화
2–1 : Assets 등록 시 입력하는 Alt Text는 Placeholder로 기본 제공
2–2 : 저장 후, Dialog 재오픈 시 Assets의 Alt Text가 placeholder로 유지
2–3 : Clear 시 작성한 Alt Text가 있다면 Alert 대화창으로 삭제여부 표기
이 글에서는 ① 어서링 시 현재 어서링 된 이미지의 Path 보기를 를 다룹니다.
하나씩 개선해보기
기본사항
Dialog의 작동은 Front End이며, Dialog 내에서 fileupload 위젯을 여러개 쓰는 것을 고려하여야 합니다.
플러그인화로 진행하면 이벤트간의 중복/간섭을 방지할 수 있습니다.
- fileupload 의 이미지 어서링 로직
① fileupload HTML에<img>태그,<input>태그 존재
② Drag&Drop 어서링
③ Assets의 src, title, alt 값이<img>태그의 value 값으로 추가
④ dialog에서 설정한 name 값과 어서링된 이미지의 Path가<input>태그의 value 값으로 추가
⑤ Clear 버튼 노출
1–1
[이미지를 Drag&Drop으로 어서링 시 Path가 필드에 표기]
Drag&Drop 시의 이벤트를 알아야 어서링 된 이미지의 Path의 정보를 그 순간 얻어 필드에 추가할 수 있습니다.
Drag&Drop시 assetselected 이벤트가 발생되기에
assetselected 이벤트 발생 시 fileupload의 <img> 태그 src 값을 Path 필드에 추가합니다!
1–2
[직접 Path를 입력하여도 이미지 표기]
Path 필드 입력 시 change 이벤트를 감지하여 이미지 유무를 ajax 통신으로 확인 후 <img> 태그를 생성 및 추가해줍니다.
1–3
[직접 Path 입력 시 이미지가 없으면 유저에게 시각효과 알림]
통신이 실패 또는 이미지가 없을 시는 Path 필드를 CSS 처리하여 붉은 테두리가 생기도록 진행합니다.
완성!! 끝!! 이면 정말 좋겠습니다만, 한가지 문제가 있습니다. ㅠㅠ
이미지 유무를 위한 ajax 통신 후 이미지가 존재한다면 또 한번의ajax 통신으로 이미지의 상세 JSON data를 받아 <img> 태그를 만드는 문제입니다.
여기서 잠깐! Assets의 JSON data를 받는 방법은?
[서버주소 + Assets의 Path + .infinity.json]
의 형식으로 작성해주시면 됩니다.※ 예) http://localhost:4512/content/dam/Rnd/northern-lights.jpg.infinity.json
ajax 안에서 ajax 를 사용하면 JSON data를 아직 받지 못해 value가 undefined 상태로 로직이 진행됩니다.
이 부분에선 Promise²를 사용하여 통신이 완료된 후 수신된 데이터를 가지고 다음 로직들이 진행되도록 합니다.
단! 무분별하게 <img> 태그를 매번 만들어 추가하는 것은 최적화에 맞지 않다고 생각하여 기존의 어서링 된 이미지와 통신 후 이미지가 같은 경우는 추가해주지 않는 방향으로 진행하였습니다.
이미지가 없을 때 Clear 되는 것은 다음 내용인 1–4를 참고합니다.
1–4
[Clear 시 이미지&Path 필드 모두 초기화]
Clear 버튼에 ‘클릭’ 이벤트가 일어날 때 이미지 Path 필드 및 fileupload를 초기화를 시킵니다.
①이미지 Path 필드를 다 지울 경우
②해당 Path의 이미지가 없는 경우
위 상황도 Trigger³ 함수를 이용하여 Clear 이벤트가 실행되도록 합니다.
여기까지 ①어서링 시 현재 어서링 된 이미지의 Path 보기 개선 과정을 다뤄보았습니다.
②이미지 어서링 후 Alt text 필드 자동화는 Part2에서 이어집니다.
