PART_2. 인터페이스 디자인 (INTERFACE DESIGN)
*** 포틀릿 기반의 인터페이스 (Portlet-based Interface) ***
- 포틀릿(portlet)은 기업 포털(enterprise portal) 또는 웹 포털(webportal) 사이트의 페이이를 구성하는 인터페이스 요소(user interface components)
- 포털은 다양한 서비스를 통합하기 위한 서비스 포맷(service format)인 만큼 다양한 서버와 어플리케이션에 의해 운영되는데 운영에서 발생할수 있는 이질적인 사용자 인터페이스 문제를 포틀릿이 해결해 주고 있다
- 포털의 초기화면을 뉴스 포틀릿, 검색 포틀릿, 이메일 포틀릿 등르로 구성한 경우, 뉴스 포틀릿은 뉴스 서버, 검색 포틀릿은 검색서버, 이메일 포틀릿은 이메일 서버와 각각 연동됨
- 포틀릿은 기능과 내용 측면에서 이질적인 정보를 개별적으로 제공할 수 있기 때문에 포틀릿기반의 인터페이스는 한화면에서 다양한 사용자 경험을 제공함
- 기존에는 포틀릿에서 이벤트가 발생하면 전체페이지가 로딩되었지만 Ajax기술로 해당 포틀릿만 로딩이 가능해져 포틀릿의 가치를 제대로 구현할 수 있다.
- 일반적으로 포틀릿은 수직적으로 펼쳐지거나 접힘(expand & collapse)
- 포틀릿의 가로 크기는 규격화되어 있지때문에 주요내용이 가로로 확장되는경우가 있는지 사전에 확인해야함
- 가로 확장의 경우가 많다면 포스트잇 타입의 인터페이스가 효과적임
벤치마킹
http://host.sonspring.com/portlets/
- 자바스크립트기반의 포틀릿이 가지는 전형적인 UI를 보여줌
http://lovento.com
- 이질적인 정보를 한 화면에 담기위해 포틀릿을 이용
- 시각적 통일감을 위해 고아고를 포함한 화면내 모든 요소를 포틀릿에 담고 있음
관련이론
직접조작(Direct Manipulation)
- 인터페이스 상의 대상을 직접 조작하는것을 말함
- 바탕화면의 아이콘을 마우스로 직접 드래그 앤 드롭하는 행위는 직접 조작이고, 우측버튼의 바로가기를 사용해 복사하거나 정렬하는것은 간접조작(indirect manipulation)이다
- 직접조작은 학습하기 쉽고 편하기 때문에 기술적문제를 해결할 수 있자면 직접조작방식을 채택하는것이 좋다
- 직접조작은 조작행위를 시각적으로 알 수 있게 해야 하므로 인터랙션 디자인에 세심한 신경을 써야 좋은 성과를 얻을수 있다.
출처: 웹2.0기획과 디자인(노주환)
*** 포틀릿 기반의 인터페이스 (Portlet-based Interface) ***
- 포틀릿(portlet)은 기업 포털(enterprise portal) 또는 웹 포털(webportal) 사이트의 페이이를 구성하는 인터페이스 요소(user interface components)
- 포털은 다양한 서비스를 통합하기 위한 서비스 포맷(service format)인 만큼 다양한 서버와 어플리케이션에 의해 운영되는데 운영에서 발생할수 있는 이질적인 사용자 인터페이스 문제를 포틀릿이 해결해 주고 있다
- 포털의 초기화면을 뉴스 포틀릿, 검색 포틀릿, 이메일 포틀릿 등르로 구성한 경우, 뉴스 포틀릿은 뉴스 서버, 검색 포틀릿은 검색서버, 이메일 포틀릿은 이메일 서버와 각각 연동됨
- 포틀릿은 기능과 내용 측면에서 이질적인 정보를 개별적으로 제공할 수 있기 때문에 포틀릿기반의 인터페이스는 한화면에서 다양한 사용자 경험을 제공함
- 기존에는 포틀릿에서 이벤트가 발생하면 전체페이지가 로딩되었지만 Ajax기술로 해당 포틀릿만 로딩이 가능해져 포틀릿의 가치를 제대로 구현할 수 있다.
- 일반적으로 포틀릿은 수직적으로 펼쳐지거나 접힘(expand & collapse)
- 포틀릿의 가로 크기는 규격화되어 있지때문에 주요내용이 가로로 확장되는경우가 있는지 사전에 확인해야함
- 가로 확장의 경우가 많다면 포스트잇 타입의 인터페이스가 효과적임
벤치마킹
http://host.sonspring.com/portlets/
- 자바스크립트기반의 포틀릿이 가지는 전형적인 UI를 보여줌
http://lovento.com
- 이질적인 정보를 한 화면에 담기위해 포틀릿을 이용
- 시각적 통일감을 위해 고아고를 포함한 화면내 모든 요소를 포틀릿에 담고 있음
관련이론
직접조작(Direct Manipulation)
- 인터페이스 상의 대상을 직접 조작하는것을 말함
- 바탕화면의 아이콘을 마우스로 직접 드래그 앤 드롭하는 행위는 직접 조작이고, 우측버튼의 바로가기를 사용해 복사하거나 정렬하는것은 간접조작(indirect manipulation)이다
- 직접조작은 학습하기 쉽고 편하기 때문에 기술적문제를 해결할 수 있자면 직접조작방식을 채택하는것이 좋다
- 직접조작은 조작행위를 시각적으로 알 수 있게 해야 하므로 인터랙션 디자인에 세심한 신경을 써야 좋은 성과를 얻을수 있다.
출처: 웹2.0기획과 디자인(노주환)