사용개선을 위한 fileupload(이미지) Dialog Custom — Part2
- AEM 6.4 버전의 Dialog Custom
앞서 소개한 Part1 ①어서링 시 현재 어서링 된 이미지의 Path 보기 개선 과정에 이어서 Part2 ②이미지 어서링 후 Alt text 필드 자동화를 시작하겠습니다!
2–1
[Assets 등록 시 입력하는 Alt Text는 Placeholder로 기본 제공]
AEM 6.4 의 Assets는 이미지에 대한 속성값을 입력할 수 있습니다.
(ex : Alt Text)
어서링 시에 Description 속성값이 있다면 <img> 태그에 alt값이 자동으로 들어가게 됩니다.
만약 Description이 없다면? 아래와 같이 파일명이 alt 값으로 삽입됩니다.
Alt Text의 적용은 이미지를 어서링하는 두 가지 행위(Drag&Drop 어서링, Path 필드 입력)에서 모두 일어나기 때문에 이 점을 고려해 작성하도록 합니다.
2–2
[저장 후, Dialog 재오픈 시 Assets의 Alt Text가 placeholder로 유지]
AEM에서 한번 이미지를 어서링 한 후에 Dialog를 다시 열게 되면 fileupload의 <img>태그의 alt 값이 Assets의 주소 명으로 노출되어, 이미지 Alt 필드에 placeholder 적용이 불가능합니다.
이를 해결하고자 어서링할 때 사용자에게는 노출되지 않는 숨겨진 필드에 Alt 값을 저장 후, Dialog를 다시 열 때 값을 읽어 이미지 Alt 필드의 placeholder를 적용합니다.
2–3
[Clear시 작성한 Alt Text가 있다면 Alert 대화창으로 삭제여부 표기]
Clear 버튼을 눌렀을 시 이미지와 이미지 Path 필드를 모두 초기화시킵니다.
하지만 이미지 Alt 필드는 사용자가 입력한 값일 경우(Placeholder로 들어가는 alt는 제외) 유지를 하고자 할 수 있으므로 Alert 창을 보여주어 결정하도록 합니다.
Coral 6.4 Doc¹을 참고하여, Dialog가 실행될 때 HTML이 document에 추가되도록 합니다.
설정이 종료된 후 Clear버튼에 이벤트가 실행될 시 Alert을 노출하며 이미지 Alt 값을 파라미터로 넘겨줍니다.
이벤트에 따라 Alert 창이 작동되며, Dialog를 종료할 시 Document에 추가해주었던 Alert HTML이 존재한다면 중복 생성을 막기 위해 삭제하도록 합니다.
위와 같은 과정으로 Alert창이 완성됩니다.
결과물
글을 마치며
Custom을 진행하면서, 업무에서는 겪지 못했던 장애물과 새로운 지식을 알 수 있었습니다.
- fileupload.js
이미지를 업로드하기 위해 막연하게 사용하는 fileupload 위젯의 JS 코드를 파악하여 세부적인 로직들을 경험할 수 있습니다. - Coral UI
개발하면서 처음으로 적용하여 사용법을 익혔습니다.
Doc에 다양한 UI가 있어서 차 후 Dialog 작성 시 이번 Custom에 사용된 것 외에 다른 UI도 적용할 수 있습니다. - AEM Dialog 이벤트
1번과 연결되는 주제로, fileupload 시에 일어나는 이벤트들에 대해 알 수 있습니다. Dialog가 실행될 때 일어나는 ‘dialog-ready’ 이벤트, Drag&Drop 어서링될 시 일어나는 ‘assetselected’ 이벤트, Dialog 가 닫히기 전 일어나는 ‘dialog-beforeclose’ 이벤트 등등 많은 이벤트가 있습니다. - JavaScript의 Promise
비동기 처리를 하는 JavaScript를 다시 한 번 상기시킬 수 있고, 상황에 따라서 Promise를 사용이 필요함을 느껴 이에 대한 사용법을 익힙니다. - AEM JSON data 요청 및 가공
Assets의 JSON data를 받기 위해선, URI 뒤에 .infinity.json 텍스트가 필요하며, Assets의 JSON data 구조를 확인할 수 있습니다.
겪었던 문제점과 해결법을 작성하였는데 이글을 읽으시는 분이 같은 벽을 만났을 때 참고가 되셨길 바랍니다.
