PART_2. 인터페이스 디자인 (INTERFACE DESIGN)
*** 멀티 아이프레임 (Multi IFrame) ***
- 페이지내에 다른 페이지를 포함 시키는 기법
- 두개의 프레임으로 만들어진 페이지는 두개의 html문서와 이를 하나로 묶는 html문서가 필요하기 때문에 브라우저는 세개의 html을 인식해야하고 브라우져의 '뒤로가기'버튼이 제대로 작동하지 않는 현상도 나타남
- 이미 XHTML 1.1 버전에서는 프래임 태그가 삭제 되었으며, 아이프레임은 비표준 태그로 브라우져 호환성(browerser compatibility)문제를 야기시켰기때문에 프레임 구조를 권장하지않는 편임
- 스크롤기능의 마우스가 보편화되고 동일 페이지 내에서 더 많은 정보를 제공하고자 하는 UI전략에 의해 아이프레임 사용이 다시 증가
- 아이프레임은 소스 뿐만 아니라 시각적인 측면에서도 복잡성을 가중 시킴
- 아이프레임에 의한 문서와 전체문서를 번갈아가며 스크롤하게되면 사용자 오류가 많이 발생
- 페이지 전환 없이 단일 컨택스트(single context)에서 다양한 정보를 처리할 수 있다는 점과 분할된 화면구조를 독립적으로 제어 가능한 장점이있음
- 여러정보를 비교하는 경우 편리
- 주요정보가 아이프레임으로 제공될 경우 가능하면 전체화면은 스크롤되지않도록 고정하는것이 사용성을 향상
- 아이프레임 화면 스크롤에 스크립트를 이용해 효과를 주는경우보다는 기본설정으로 두는것이 마우스 조작과 정보량 확인에 도움이 됨
벤치마킹
http://www.clipmarks.com/
- 좌측 영역의 리스트를 선택하면 우측영역에 해당정보가 나타나는 이중 아이프레임구조
- 전체 화면은 스크롤 없이 고정되어있으며 각 아이프레임 화면은 컨트롤 패널에 의해 독립적으로 제어
- 우측영역의 하단은 댓글을 제공하는데 고정된 영역처럼 보이지만 댓글이 추가되면 보이지않는 스크롤이 생기는데 위, 아래 버튼을 두어 화면 스크롤을 제어
http://www.a9.com/
- 오픈서치에 의해 수집된 주요 정보를 아이프레임 기법으로 제공
- 전체화면은 스크롤 되지않고 고장 시키고있음
http://www.surfwax.com/
- 프레임을 이용해 검색결과 페이지를 제공
- 좌측 프레임의 'snap' 버튼을 클릭하면 해당 검색결과에 대한 요약정보를 우측에 보여줌
관련이론
시각적 복잡성을 가중시키는 요인들
- 정보량이 많은 경우
- 많은 색상을 사용한 경우
- 기하학적인 도형을 사용한 경우
- 구성요소의 그룹핑이 약한 경우
- 동적요소를 제공한 경우
출처: 웹2.0기획과 디자인(노주환)
*** 멀티 아이프레임 (Multi IFrame) ***
- 페이지내에 다른 페이지를 포함 시키는 기법
- 두개의 프레임으로 만들어진 페이지는 두개의 html문서와 이를 하나로 묶는 html문서가 필요하기 때문에 브라우저는 세개의 html을 인식해야하고 브라우져의 '뒤로가기'버튼이 제대로 작동하지 않는 현상도 나타남
- 이미 XHTML 1.1 버전에서는 프래임 태그가 삭제 되었으며, 아이프레임은 비표준 태그로 브라우져 호환성(browerser compatibility)문제를 야기시켰기때문에 프레임 구조를 권장하지않는 편임
- 스크롤기능의 마우스가 보편화되고 동일 페이지 내에서 더 많은 정보를 제공하고자 하는 UI전략에 의해 아이프레임 사용이 다시 증가
- 아이프레임은 소스 뿐만 아니라 시각적인 측면에서도 복잡성을 가중 시킴
- 아이프레임에 의한 문서와 전체문서를 번갈아가며 스크롤하게되면 사용자 오류가 많이 발생
- 페이지 전환 없이 단일 컨택스트(single context)에서 다양한 정보를 처리할 수 있다는 점과 분할된 화면구조를 독립적으로 제어 가능한 장점이있음
- 여러정보를 비교하는 경우 편리
- 주요정보가 아이프레임으로 제공될 경우 가능하면 전체화면은 스크롤되지않도록 고정하는것이 사용성을 향상
- 아이프레임 화면 스크롤에 스크립트를 이용해 효과를 주는경우보다는 기본설정으로 두는것이 마우스 조작과 정보량 확인에 도움이 됨
벤치마킹
http://www.clipmarks.com/
- 좌측 영역의 리스트를 선택하면 우측영역에 해당정보가 나타나는 이중 아이프레임구조
- 전체 화면은 스크롤 없이 고정되어있으며 각 아이프레임 화면은 컨트롤 패널에 의해 독립적으로 제어
- 우측영역의 하단은 댓글을 제공하는데 고정된 영역처럼 보이지만 댓글이 추가되면 보이지않는 스크롤이 생기는데 위, 아래 버튼을 두어 화면 스크롤을 제어
http://www.a9.com/
- 오픈서치에 의해 수집된 주요 정보를 아이프레임 기법으로 제공
- 전체화면은 스크롤 되지않고 고장 시키고있음
http://www.surfwax.com/
- 프레임을 이용해 검색결과 페이지를 제공
- 좌측 프레임의 'snap' 버튼을 클릭하면 해당 검색결과에 대한 요약정보를 우측에 보여줌
관련이론
시각적 복잡성을 가중시키는 요인들
- 정보량이 많은 경우
- 많은 색상을 사용한 경우
- 기하학적인 도형을 사용한 경우
- 구성요소의 그룹핑이 약한 경우
- 동적요소를 제공한 경우
출처: 웹2.0기획과 디자인(노주환)
