Image Viewer Usage
사용자에게 이미지 및 이미지 정보를 제공합니다. 또한, 이미지 확대/축소 및 각종 설정이 가능한 액션을 제공합니다.
Layout
Sizing
Image viewer에서 viewer tool bar 또는 footer를 배치하여 사용할 때 420px의 최소 너비를 적용합니다.
Viewer tool bar 또는 footer 없이 image viewer를 사용할 경우에는 420px 이하의 너비로 사용할 수 있습니다.
Content
Image Display
이미지 선택 개수 또는 이미지 상태에 따라 표현되는 정보가 상이합니다.
Viewer Tool Bar
Zoom control은 tool bar 우측 영역에, 기타 요소는 좌측 영역에 배치합니다.
Zoom control을 tool bar 좌측 영역에 배치하지 않습니다.
내용물 없이 viewer tool bar를 단독으로 사용하지 않습니다.
Footer
이미지 이름은 한 줄까지 표기하며, 길이 초과 시 생략 기입합니다. 생략된 텍스트 위 커서를 올리면 전체 내용을 노출합니다.
이미지 간 이동을 제공하는 내비게이션 사용 시 기입하는 이미지 넘버는 최대 8자리 수까지 표기하며, 길이 초과 시 생략 기입합니다. 생략된 숫자 위 커서를 올리면 전체 내용을 노출합니다.
Cursor info는 image container 내 커서가 위치할 때 해당 위치의 xy 좌표와 픽셀의 색상 정보를 나타냅니다.
Behaviors
Interactions
Zoom Control
확대/축소 가능한 배율 범위는 최소 2%, 최대 25600%를 적용합니다. zoom in/out 수행 시 현재 배율을 아래 기준 배율 기반으로 반올림하여 각각 높은 숫자, 낮은 숫자의 비율로 설정합니다.
2, 3, 6, 13, 25, 50, 100, 200, 400, 800, 1600, 3200, 6400, 12800, 25600 (%)
Viewer tool bar 내 각 zoom control 아이콘 버튼에 커서를 올리면 도구 이름과 단축키 정보를 제공합니다.
배율 dropdown에는 현재 설정된 배율이 나타나며, 클릭 시 preset을 통한 배율 설정을 지원합니다.
배율이 fit으로 설정된 경우, 현재 이미지에 적용된 배율을 함께 표기합니다. 단, 여러 이미지가 선택되었거나 이미지가 정상적으로 로드되지 않은 경우는 실 배율을 기입하지 않습니다.
Channels
Footer 우측의 Channels 아이콘 버튼을 통해 채널 설정을 지원합니다. 특정 색상 채널이 선택된 경우 뷰어에서는 해당 채널의 값만 grayscale로 보여집니다.
