AEM Component : Dialog UX Part2
Layer 를 이용한 Component ID 선택
안녕하세요~ 하이브랩에서 AEM 개발을 맡고 있는 김태형입니다 :)
지난 포스팅(AEM Component : Dialog UX Part1) 에서 사용성 개선을 통한 경험과 기술을 공유했습니다. Part2에서는 Layer를 이용한 Component ID를 선택하는 내용을 다뤄보겠습니다.>ㅁ<
“작은 Dialog 화면에서 Component 종류를 인식하기 위한 ID 값과 Component를 어떻게 화면에 제공하지…?”
“보통 웹에서 추가적인 내용은 새창을 띄워서 정보를 제공하지 않나?”
“그러면 Layer 를 띄워서 Component 종류와 ID를 제공해볼까?”
사용성 개선을 위한 고민은 계속되었고, 팀회의를 통해서 Layer 를 띄워서 페이지를 로드 시킨 후 Component ID를 선택하는 방향으로 개발을 시작했습니다.
Step 1 ) Layer 띄우기
동료曰 “ 기존 PathBrowser 를 Custom 해서 작업을 하는게 어떨까요? 동일한 UI와 URL을 동시에 입력하면 사용성에 개선이 이루어질꺼같아요~”
“!!!!!”
기존 PathBrowser 는 URL을 선택할 수 있게 만들어져있습니다. 이 기능을 확장해서 하나의 Layer 에서 URL을 클릭하고, 동시에 페이지를 볼 수 있게 작업을 시작했습니다.
Coral UI 6.1 Modal 을 이용해서 Layer 를 구현하려면 먼저 body 영역에 마크업 코드를 추가하고, 버튼을 클릭하면 show() 메서드로 Layer를 띄웁니다.
주목할 점은 Picker Class 의 Instance 를 생성 시 Key 값인 ‘modal’을 이용하여 필요한 data 를 호출하게 합니다.
UI 는 고정 값 비율 4:6 으로 나누어서 구성을 했습니다.
Step 2 ) 페이지 호출
이제 Preview 버튼을 클릭하면 페이지를 호출하는 부분에 대해서 알아보겠습니다. 페이지에 대한 정보를 호출하는 방법은 Ajax 통신을 이용하면 되겠구나 라는 생각을 먼저했습니다.
어떻게 Ajax 통신을 고민하던중 동료분께서 클릭된 페이지 URL 을 요청하라는거였습니다. 그러면 AEM 서버에서 페이지에 대한 Markup Data를 리턴한다는것을 알았습니다. Response Data는 plain text 여서 HTML로 인식할 수 있게 파싱 작업을 했습니다.
페이지 호출 영역에는 Preview Button 이 존재하는 Dimmed 된 영역이 있습니다. Dimmed 영역은 hide() 처리 후 페이지를 호출 하기 위해 비동기 방식으로 작업했습니다.
Component 의 인식을 높이기 위해 header 와 footer 영역을 삭제하고, content 영역만 보여줍니다.
Step 3) Error 잡기!
Ajax 통신을 끝낸 후 기존 데이터를 초기화 하지 않아 다른 페이지를 호출 시 컨텐츠 수가 많지 않음에도 스크롤이 생기는 현상이 일어났습니다.
이 문제를 해결 하기 위해서 jquery 에서 제공하는 Ajax 관련 메소드중 beforeSend 활용해 기존 데이터를 초기화 해줍니다.
페이지 호출 시 빈 화면이 나타나는 문제도 있었는데, 해당 페이지가 존재하지 않거나 권한에 문제가 있을 경우로 확인되었습니다.
이 문제는 error 메소드에서 HTTP 상태코드에 따라 예외처리를 해줌으로써
해결했습니다.
※ Step2)에서 다룬 코드에 관련 내용이 포함되어 있습니다.
Step 4) ID 탐색 하기!
content 영역에서 재귀 함수를 통해 Component ID를 추출합니다.
현재 DOM 객체에 Component ID의 유효성을 검사하고, 존재하면 각 Component 에 Dimmed 영역과 Radio Button을 추가합니다. 유효성 검사가 끝난 Component 는 배열에 담아 Click Event 가 동작 할 수 있게끔 바인딩해줍니다. 재귀함수를 통해 최하위 DOM 객체까지 Component ID 의 유효성 검사로직을 구성했습니다.
마치며..
Part1 에서는 현재 Page 내에 있는 ID 값만을 조회했지만, 사용성을 개선을 위해서 Layer 를 이용하여 Component 종류와 ID 값을 선택 할 수있는 Widget 을 개발해보았습니다.
통일된 UI 구성과 직관적인 비즈니스 로직 처리를 원하시는 고객사가 있다면 만족감을 줄 수 있다고 생각이됩니다.
앞으로도 AEM Dialog 의 사용성 개선을 위해 고민과 개발을 계속 할 것이며, Part1 과 Part2 를 읽어주신 분들께 감사합니다(_ _)
