그동안 디자인 모드를 이용하시면서 가장 많이 전달해 주신 의견은 아래와 같았어요.
“설정창 내부 용어나 설명이 어려워 설정을 변경하기가 어려워요.”
“설정값을 바꾸면 화면이 어떻게 달라지는지 바로 보고 싶어요.”
이런 불편을 개선하기 위해, 위젯 설정창을 기존 ‘모달’ 형태에서 ‘우측 사이드패널’ 형태로 변경했어요.이제 설정창이 화면을 가리지 않아, 값을 바꾸는 즉시 페이지가 어떻게 바뀌는지 더 쉽게 확인하실 수 있습니다.
또한 위젯 안의 설정 항목을 더 빠르게 찾을 수 있도록, 설정을 아코디언 구조로 분류했어요.필요한 항목만 펼쳐서 볼 수 있어, 복잡하게 느껴지던 설정 과정이 한결 간단해졌습니다.
기존에는 위젯 설정창이 화면을 가리는 모달 형태였어요. 사이드패널로 변경되면서 설정을 변경한 결과를 화면에서 즉시 확인할 수 있어요.
모든 위젯의 애니메이션 설정은 사이드패널 상단에 위치해 있어, 한 곳에서 편리하게 관리할 수 있어요.
(Before) 위젯 설정 > [링크]
이미지, 이미지맵, 텍스트, 갤러리 위젯 등 클릭 시 동작을 설정하는 항목이에요. 기존에는 ‘링크’라는 명칭으로 인해 단순 링크 이동만 가능한 것처럼 느껴질 수 있었어요.
하지만 실제로는 이메일 발송, 파일 첨부, 소셜 공유 등 다양한 동작을 설정할 수 있어요.
(After) 위젯 설정 > [클릭 시 동작]
클릭 시 다양한 동작을 설정할 수 있음을 더 직관적으로 전달하기 위해 명칭을 변경하고, 사이드패널 내로 이동했어요.
1) 기본 이미지와 롤오버 이미지를 사이드패널 내 각각의 탭에서 설정할 수 있어요. 이미지를 참고해 변경되는 위치를 확인해 주세요.
2) 기존에 혼용되던 ‘롤오버’, ‘hover’ 표현을 ‘마우스 오버’로 통일했어요.
3) [설명 > 감추기] 항목은 [이미지 대체 텍스트]로 분리되었어요. 대체 텍스트를 입력하면 검색 엔진이 이미지를 이해해 검색 결과 노출에 도움이 돼요.
설정값의 위치를 일부 변경했어요. 아래 이미지를 참고해 주세요.
이해하기 어려웠던 용어를 보다 직관적으로 변경했어요.
(Before) [기본 그리드] 체크 해제 시 여백 설정 가능
(After) [외부 여백] 사용 클릭 → 상·하 여백 숫자 조절
설정값 위치를 일부 변경하고, 용어를 더 직관적으로 개선했어요.
(Before) 라이트 박스 → (After) 클릭 시 확대 후 재생
(Before) hover 시 자동 재생 → (After) 마우스 올렸을 때 자동 재생
설정값의 위치를 일부 변경했어요.
설정값의 위치를 일부 변경했어요.
기존 [정렬 > 블록 스타일] 항목은 [탭 버튼] 설정으로 분리되었어요. 탭 버튼을 설정하면 아래와 같은 디자인을 만들 수 있어요.
설정값의 위치를 일부 변경했어요.
설정값의 위치를 일부 변경했으며, 향후 상세 주소까지 노출될 예정이에요.
기존과 동일하게 코드를 삽입할 수 있어요.
1) 상단의 [크게 보기] 버튼을 클릭하면 더 넓은 화면에서 편집할 수 있어요.
2) 이제는 코드 위젯에 메모를 추가해 관리할 수 있어요.
설정값의 위치를 일부 변경했어요.
