자주 사용되는 ui 패턴(컴포넌트) 과 ui 레이아웃

Fasoo ED Team

UI Pattern & Layout

효과적인 제품 UI/UX 개발을 위해 꼭 알아야 할 사항들

Fasoo ED TeamDongsik Yang

Fasoo ED Team

자주 사용되는 UI pattern 의 유형 분류

UI pattern 이란 ?

UI pattern 이란 유저 인터페이스를 구성하는 구성요소 중 그 쓰임새에 따라서 패턴화 된 UI 컴포넌트나 그 컴포넌트가 조합된 형태를 의미합니다 . 사용자들은

인터페이스를 매개로 각자의 목표를 수행하기 위해 여러 가지 행동 ( 데이터 입력 , 데이터 출력 , 길 찾기 , 검색 등 ) 을 하게 되는데 해당 행동을 인터페이스

상에서 가장 효과적으로 구현할 수 있도록 패턴화 된 것이 UI pattern 이며 이러한 UI pattern 을 사용 맥락에 맞게 선택하고 배치 (UI 레이아웃 ) 하고

커스터마이징 하는 것이 UI 설계 및 디자인 작업입니다 .

보통 이러한 UI pattern 은 다양한 유저 인터페이스에서 특정 목적을 위해 반복 사용되어 사용자들이 큰 노력 없이 직관적으로 이해하고 사용할 수 있는 경우가

많습니다 . 즉 사용자가 직관적으로 이해할 수 있고 쉽게 목적에 도달할 수 있는 효과적인 UI 설계 및 개발을 위해서는 이미 널리 사용되고 있는 UI pattern 에 대해

숙지하고 기본을 이해하는 선에서 활용법을 고민하는 것이 필요합니다 . 언어를 배우기 위해 우선 문법을 숙지 하는 것처럼 말이죠 . 그리고 무엇보다도 동일한 패턴에 대한 호칭을 각자 다르게 알고 있는 것 역시 문제가 되기 때문에 원활한 소통을 위해서라도 UI pattern 의 명칭은 알아둡시다 !데이터 입력 (Input Data) 데이터 출력 (Output Data) 길 찾기 (Way finding) 검색 (Search)데이터 입력 UI pattern 은 정보 입력(input) 에 특화된 UI pattern 입니다 . 입력되는 데이터의 양과 종류는 출력되는 정보의 양과 종류와 마찬가지로 쉽게 정의하기 힘듭니다 .

하지만 특정 상황에서 입력되는 정보의 구조는 출력되는 정보의 속성과 위계의 구조와 마찬가지로 미리 설계와 정리가 가능합니다 .

데이터 입력 UI pattern 이 정보 입력에 특화된 UI pattern 이라면 데이터 출력 UI pattern 은 정보 출력 및 표시에 특화된 UI pattern 입니다 .

출력되는 정보의 속성에 따라 가장 효과적으로 사용자에게 전달하기 위한 형태로 구성되어 있습니다 . 전달되는 정보의 속성과 분량 , 확장 가능성 등등을 고려하여 가장 효과적인 UI pattern 을 선택 합시다 .

현재 있는 곳은 어디인지 , 다음으로 갈 곳은 어디인지 , 이곳까지 어떤 경로를 거쳐 왔는지를 파악하고 실행하기 위한 인터페이스 UI pat-tern 입니다 .

길 찾기 기능에 특화된 UI pattern 들은 컨텐츠와 정보가 배치되어 있는 정보구조를 가상의 건축물로 은유 했을 때 사용자를 자신이 원하는 목적이 위치한 공간으로 정확히 안내하고 길을 잃지 않도록 하는 것에 최적화 되어 있습니다 .

검색은 일종의 순간이동과 같습니다 . 길 찾기가 최종 목적지로 향하는 길을 친절한 이정표를 따라가는 행위라면 검색은 최종 목적지에 대한 직접적인 단서 ( 키워드 ) 를 알고 있을 경우 해당 정보 및 해당 정보와 유사한 정보의 묶음으로 바로 이동시켜 줍니다 .

검색 관련 UI pattern 은 이러한 검색 기능을 효과적으로 수행하기 위해 최적화 된 UI pattern 입니다 .

Fasoo ED Team

Category 데이터 입력

Name

KOR. ENG.

드롭다운 리스트 Drop-down List

Use case

Description

다수의 선택 항목 중에 1 개의 항목을 선택하기 위한 UI 컨트롤 .라디오 버튼과 수행하는 기능은 유사하나 인터랙션이 발생하기 이전에는 선택 가능한 항목을 표시 하지 않는다는 차이점이 있습니다 . 선택 항목이 많을 경우 공간 리소스를 절약할 수 있다는 장점이 있습니다 .

Reference

1


Name

KOR. ENG.

콤보 박스 Combo Box

Use case

Description Reference

드롭다운 리스트와 입력 필드의 기능을 동시에 수행하는 UI 컨트롤 . 필드 영역을 클릭하여 텍스트 입력이 가능하며 우측 화살표를 클릭해서 드롭다운 리스트와 같이 선택 항목 표시를 활성화 하는 것도 가능합니다 .

텍스트 입력에 따라 동적으로 선택항목 표시를 변경하는 식으로 활용이 가능합니다 . 보통 Office 등의 제품에서 개체 속성 입력 시 자주 사용 됩니다 .

2

빈번하게 사용되는 UI Pattern

Fasoo ED Team


Name

KOR. ENG.

라디오 버튼 Radio button

Use case

Description다수의 선택 항목 중에 1 개의 항목을 선택하기 위한 UI 컨트롤 .드롭박스 리스트와 수행하는 기능은 유사하나 인터랙션이 발생하기 이전에 선택 가능한 항목을 모두 표시 한다는 차이점이 있습니다 . 선택 항목이 많을 경우 공간 리소스를 많이 차지하기 때문에 가급적 선택 항목을 구조화 하거나 줄일 필요가 있습니다 .Reference

3


Name

KOR. ENG.

체크 박스 Check Box

Use case

Description

다수의 선택 항목 중에서 다수의 항목을 선택하기 위한 UI 컨트롤 .라디오 버튼과 용도가 혼동 될 수 있기 때문에 선택하는 영역에 UI 메타포 디자인을 유의해야 합니다 . 보통 체크형태의 메타포를 Variation 하여 디자인한다 . 클릭 혹은 터치한번으로 데이터 입력이 가능하기 때문에 모바일 환경에서도 라디오 버튼과 같이 널리 이용되고 있습니다 .

Reference

4


Fasoo ED Team


Name

KOR. ENG.

토글 ( 버튼 ) Toggle Button , Switch

Use case

DescriptionOn/Off 를 설정할 때 쓰이는 위와 같은 컨트롤을 토글 버튼 (A) 혹은 토글 스위치 (B) 라고 부릅니다 . 토글 버튼의 경우 언뜻 보기에는 버트콘 같지만 선택 시에 음각 ( 눌린 ) 상태로 변하는데 해당 항목이 실행되고 있음 (On) 을 의미하며 , 다시 누를 시에는 볼록한 원래 상태 (Off) 로 되돌아온다 . 토글 스위치는 모바일에서 주로 사용되며 손가락으로 직접 스위치를 좌우로 움직이거나 영역을 선택하여 On/Off 상태를 조절합니다 . 이 때 , 사용자가 현재 상태를 인지할 수 있는 시각적인 피드백이 반드시 필요함 .Reference

5

Category 길 찾기

Name

KOR. ENG.

툴 바 , 버트콘 Tool Bar, Button + Icon

Use case

Description버트콘이란 버튼과 아이콘의 조합으로서 앨런 쿠퍼가 그의 저서 About Face 에서 이 용어를 정의했습니다 . 쉽게 말해 버튼 기능 ( 단순히 이미지만 있는 게 아니라 인터랙션이 있는 ) 이 있는 아이콘을 말합니다 . 리본 메뉴 , 툴 바에 적용되면서 기존 문자 중심의 드롭 다운 메뉴를 대체할 유용한 컴포넌트로 자리잡음 . 그리고 이러한 버트콘을 사용자의 기호 및 필요에 따라 바 (Bar) 형태로 모아놓은 것이 툴 바입니다 . MS 에 의해 처음으로 소개된 개념으로 ' 도구 모음 ' 이라고도 불림 .Reference

6

A

B


Fasoo ED Team

Category 데이터 입력 (숫자 )

Name

KOR. ENG.

스피너 Spinner

Use case

Description

대표적인 숫자 입력 컨트롤 . 편집 필드와 우측 옆의 작고 납작한 두 개의 화살표으로 구성되어 있습니다 . 현재 필드에 입력된 숫자 값을 기준으로 위아래 화살표 버튼을 눌러 조절하거나 혹은 편집 필드에 직접 원하는 숫자 값을 입력할 수 있습니다 .

Reference

7

Category 데이터 입력 (숫자 , 범위 )

Name

KOR. ENG.

슬라이더 Slider

Use case

Description리얼메타포를 UI 에 반영한 대표적인 컨트롤 . 콤보 박스의 경우 사용자가 입력 가능한 범위를 모르는 상태에서 입력하는 상황에 처할 수 있는데 반해 , 슬라이더는 입력값이 제한되어 있음을 시각적으로 인지할 수 있습니다 . 다시 말해 사용자가 부적절한 값을 입력할 가능성이 없기 때문에 상당히 직관적인 컨트롤이라고 할 수 있습니다 .Reference

8


Fasoo ED Team

Category 데이터 입력 (Text)

Name

KOR. ENG.

입력 필드 , 인풋 박스 Text input field, Input box

Use case


사용자가 키보드로 직접 텍스트를 입력하는 곳으로서 편집 필드 또는 텍스트 상자 등으로도 불립니다 . 특정 항목의 속성을 입력할 때 외에도 검색 , 정보 입력 등 상황에 따라 각기 다른 목적으로 사용됩니다 . 여러 줄을 입력할 수 있을 때는 입력 영역 (Text Area) 이라고도 부릅니다 .

인풋박스에 입력하는 데이터의 속성을 의미하는 Text 를 보통 레이블 (Label) 이라고 하는데 해당 레이블을 인풋 박스 안에 표시하여 텍스트 입력 방식을 표시할 경우 플레이스홀더(Placeholder) 라 호칭 합니다 .

9


Name

KOR. ENG.

피커 ( 데이트 피커 , 컬러 피커 ) Picker (Date picker, Color picker)

Use case

Description

데이터 입력 관련 UI 컨트롤 중 화면상의 특정 위치를 클릭 (Pick) 하여 데이터를 입력하는 방식의 UI 컨트롤 피커라고 합니다 . 피커 중에 대표적인 컨트롤은 날짜를 클릭해서 입력하는 데이트 피커와 화면상에 보이는 컬러를 클릭해서 컬러값을 추출하여 입력하는 컬러 피커가 대표적입니다 . Map 에서 좌표를 따기 위해 클릭하는 LBS 관련 UI 컨트롤도 피커의 일종입니다 .

Reference

10


Fasoo ED Team

Category 데이터 출력 , 데이터 입력 , 길 찾기

Name

KOR. ENG.

트리 메뉴 Tree menu

Use case


리스트 컨트롤의 유형 중 하나로 정보의 계층 구조를 표시하는데 매우 유용합니다 . 폴더를 기반으로 나뉘어지는 윈도우의 정보 구조를 표시하거나 조직도 , Database 등 정보 계층 (hierarchy) 를 가지는 정보를 시각화 하거나 표시 항목을 선택하거나 이동할 때 매우 빈번하게 사용 됩니다 .

11

Category 데이터 출력 , 데이터 입력 , 길 찾기

Name

KOR. ENG.

테이블 ( 그리드 ) Table (Grid)

Use case

Description여러 가지 속성을 가지고 있는 데이터의 집합을 화면 상에 출력하기 위한 리스트 컨트롤 유형 . 컬럼으로 이루어진 DB 를 연상하면 쉽습니다 . 각 컬럼은 특정 기준에 따라 다이나믹하게 정렬이 가능하며 특수한 경우에는 인라인 에디팅을 지원하여 스프레드시트처럼 리얼타임으로 수정 및 편집이 가능합니다 . ( 하단 레퍼런스 참조 ) 대량의 데이터를 화면에 표시하고 정렬하고 열람하고 편집해야 하는 파수닷컴 제품에 매우 중요한 UI 패턴입니다 . 정렬이 가능할 경우 각 타이틀은 클릭하면 동작이 가능하다는 어포던스를 줘야 합니다 .Reference

12


Fasoo ED Team

Category 네비게이션

Name

KOR. ENG.

GNB GNB, Global Navigation

Use case

Description웹페이지 및 각종 UI 에 고정적으로 표시되는 1 depth 메뉴 링크의 집합 영역을 말합니다 . 쉽게 말해 인터페이스 상에서 ‘항상’ 표시되는 메뉴로서 탑 메뉴 , 메인 메뉴라고도 불립니다 . 주로 웹사이트의 상단 혹은 좌측에 고정으로 위치하며 메뉴 바 (Bar), 탭 (Tab), 드롭다운 메뉴 등의 형태로 제공됩니다 . UI 컨트롤이라기 보다는 해당 UI 컨트롤이 조합된 일반적인 pattern 입니다 . ( 하단의 레퍼런스는 드롭다운 메뉴와 조합된 경우 )Reference

Category 네비게이션

Name

KOR. ENG.

LNB LNB, Local Navigation

Use case

Description Reference 서브 메뉴라고 불리며 웹페이지 및 인터페이스의 좌측에 주로 고정적으로 위치합니다 . 위치는 고정되어 제공되나 항목은 진입하는 메뉴 ( 보통 GNB 에서 제공 되는 경로 ) 에 따라 다르게 제공됩니다 .

GNB 와 마찬가지로 UI 컨트롤이라기 보다는 특정 역할을 수행하는 UI pat-tern 이며 보통 드롭 다운 메뉴 , 트리 메뉴 , 어코디온 메뉴 등의 UI 컨트롤과 조합되어 사용되는 것이 일반적입니다 .

( 우측 레퍼런스는 LNB 로 빈번하게 사용되는 Accordion 컨트롤 )

13 14


Fasoo ED Team

Category 검색

Name

KOR. ENG.

순간 검색 Instant Search , Instant Previews

Use case

Description' 순간 검색 (Instant Search)' 은 검색어를 입력하는 동시에 결과 화면이 나타납니다 . 그렇기 때문에 검색어를 입력한 후 '엔터키 ' 혹은 ' 검색 ' 버튼을 누를 필요가 없습니다 . 또한 각 검색 결과 옆에 위치한 Cue 를 선택할 시 해당 웹페이지의 미리 보기 화면이 나타나는데 이를 ' 순간 미리보기 (Instant Previews)' 라고 합니다 . 그리고 이 미리 보기 화면에서 링크와 관련된 정보라고 판단되는 부분에 Highlight 표시 (붉은색 박스 ) 와 간단한 캡션이 제공됩니다 . 구글이 야심차게 내놓은 순간 검색 서비스는 메인 화면을 되도록 빨리 벗어나게 하기 위한 구글의 의도가 잘 반영된 결과물이며 , 실제로 검색에 소요되는 시간을 획기적으로 단축하는 데 기여했다고 보여집니다 .

Category 검색

Name

KOR. ENG.

자동 완성 Auto Complete

Use case

Description Reference 자동 완성 기능은 사용자가 입력하는 검색어에 따라 DB 에 저장되어 있는 유관 검색어를 실시간으로 선택자로 제시하여 사용자가 검색어 자체를 완벽히 기억하지 못하거나 검색어를 끝까지 타이핑하지 않고도 최소한의 단서로 유의미한 결과로 이동할 수 있게 배려하는 검색 UI 컨트롤입니다 .

본 자동완성 기능은 네이버의 ‘정답형 자동완성 과 같이 특정 키워드에 수동으로 입력한 데이터를 매칭하여 사용 맥락에 더 부합하는 결과를 표시하는 식으로 사용이 가능합니다 .

15 16


Fasoo ED Team

Category 길 찾기

Name

KOR. ENG.

컨텍스트 메뉴 Context menu

Use case Description

사용자가 현재 선택한 항목에 관한 메뉴를 팝업 형식으로 제공하는 것을 컨텍스트 메뉴라고 합니다 .. '팝업 메뉴 ' 혹은 ' 바로 가기 메뉴 ' 라고도 하며 보통 마우스 오른쪽 단추를 누를 시 메뉴가 호출됩니다 . 단추가 하나 밖에 없는 마우스를 사용하는 경우 키보드 클릭 조합 (Mac OS 의 Ctrl+Click) 을 사용할 수 있습니다 .

Reference

17

Category 길 찾기

Name

KOR. ENG.

MRU 리스트 Most Recently Used List

Use case

Description

사용자가 특정 종류의 행위를 했을 때 마지막 행위를 레지스트리에 기록해두는 것을 말합니다 . 예를 들면 , 인터넷 상에서 파일 다운로드 시 마지막으로 저장했던 폴더를 기본 폴더로 보여주거나 윈도우 시작 메뉴에서 특정 응용프로그램 리스트를 확장할 시 보여지는 최근 항목을 예로 들 수 있습니다 . 인터페이스 상에서 개인화 서비스를 제공할 때 Usage History 를 보여주기 위한 방법으로 종종 사용 됩니다 .

18


Fasoo ED Team

19

Category 길 찾기

Name

KOR. ENG.

테어 오프 메뉴 Tear-off Menu

Use case

Description

'떼어내다 , 벗기다 ' 의 의미를 가진 테어오프 메뉴는 메뉴 바를 드래그하여 임의의 장소에 배치할 수 있는 메뉴입니다 . 혹은 아래의 그림처럼 도구 툴의 가장자리에 있는 Cue 를 선택할 시 해당 도구가 Window 형식으로 분리됩니다 .

20

Category 길 찾기

Name

KOR. ENG.

어뎁티브 메뉴 Adaptive Menu

Use case


MRU 리스트 개념을 메뉴에 도입한 방식으로 , 사용자의 검색 히스토리나 빈도수가 높은 항목들을 메뉴에 우선적으로 나타나게 하는 것을 말합니다 .

위 화면과 같이 자주 쓰는 메뉴만 보여지며 확장 버튼을 눌러 모든 메뉴를 확인할 수 있습니다 .


Fasoo ED Team

21

Category 길 찾기 , 데이터 입력

Name

KOR. ENG.

컨텍스트 -센서티브 내비게이션 Context-sensitive Navigation

Use case

Description특정 상황에서만 제공되는 컨트롤입니다 . 위에서 정의한 컨텍스트 메뉴와도 맥락이 유사한데 , 팝업 형태가 아닌 다양한 방식으로 사용될 수 있다는 점이 다릅니다 . 위의 화면처럼 사진 상단에 있는 메뉴 버튼은 평소에는 나타나지 않다가 마우스 포인터를 해당 사진 영역 안에 옮기는 순간 나타납니다 . 리치 인터페이스 디자인 서적에서는 ' 마우스오버 노출도구 ' 라고도 정의하였는데 포함되는 개념입니다 . 혹은 Gmail 에서 삭제 , 스팸처리 등의 메뉴는 메일 리스트를 선택 (Check) 하였을 시에만 제공되는데요 , 이렇게 상황에 맞게 그때 그때 나타나는 메뉴를 부르는 용어입니다 .Reference

22

Category 길 찾기

Name

KOR. ENG.

메가 메뉴 Mega Menu

Use case

Description메가 메뉴란 글로벌 내비게이션 바 (GNB) 에 위치한 특정 메뉴에 마우스 롤오버 했을 시 나타나는 대형 메뉴를 말합니다 . 일반적인 드롭다운 메뉴보다 훨씬 많은 메뉴를 표시할 수 있으며 메가 메뉴 안에서도 상세 분류를 할 수 있습니다 . 카테고리를 명확하게 분류하여 메뉴를 찾기 쉽도록 기획해야 하며 주로 쇼핑몰 같은 대형 웹사이트에 적용됩니다 .Reference


Fasoo ED Team

23

Category 길 찾기

Name

KOR. ENG.

페이지네이션 Pagination

Use case

Description

대량의 데이터를 특정한 단위로 쪼개서 ( 페이지 ) 화면에 표시할 때 해당 단위의 전체 수량 ( 전체 페이지 양 ) 과 현재 열람하고 있는 단위 ( 페이지 ) 의 위치를 표시하고 이동할 수 있게 하는 UI 패턴 . 게시판 인터페이스나 테이블과 같은 리스트 UI 패턴과 함께 사용됩니다 .

페이지 단위로 쪼개어지는 데이터 양을 많이 가져 갈지 적게 가져 갈지는 특별한 원칙이 없습니다 . 늘 스크롤을 피하는 게 정답도 아니고 서버 장비의 퍼포먼스도 고려해야 하며 사용자의 정보에 접근하는 목적도 고려해야 합니다 .

24

Category 데이터 출력

Name

KOR. ENG.

트리맵 Tree map

Use case

Description

다차원 데이터나 계층 구조의 데이터를 다양한 크기의 사각형으로 표현하는 UI Pat-tern. 사각형이 다른 사각형에 포함되는 연관관계와 사각형의 크기 (scale) 을 통해 단순하게 수치로 표시하기 힘든 데이터의 연관관계와 비율 등을 다이나믹하게 표시하는데 용이합니다 . 계층 구조를 보여주기 위해 이 사각형들을 포개어 놓고 컬러나 라벨로 추가되는 변수를 표시할 수 도 있습니다 .Reference


Fasoo ED Team

25 26

Category 길 찾기 ( 정보 분류 )

Name

KOR. ENG.

탭 , 탭 브라우즈 Tab, Tab Browse

Use case

Description Reference탭 컨트롤은 매우 효과적으로 정보가 분류되는 형태를 사용자에게 인지 시킬 수 있다는 장점을 가지고 있습니다 . 탭 메타포의 하위에 그룹핑 되어 있는 각종 정보와 컴포넌트들은 탭에 명시된 레이블을 공유한다는 것을 사용자들은 직관적으로 이해할 수 있습니다 . 따라서 GNB 에서도 활용할 수 있고 컨텐츠 영역에서 정보의 구조를 직관적으로 표시하는 데에도 사용할 수 있는 패턴입니다 .

최근 대부분의 웹 브라우저는 탭을 기반으로 윈도우를 수평 이동하면서 어댑티브 메뉴 처럼 탭을 분리하여 별도의 윈도우로 열람할 수 있는 탭 브라우즈 기능을 지원하고 있는 추세입니다 .

Category 길 찾기

Name

KOR. ENG.

브레드크럽스 Breadcrumbs

Use case

Description

빵 조각이란 뜻으로 ‘헨젤과 그레텔’이라는 동화에서 길을 잃지 않기 위해 빵 조각을 떨어뜨렸던 이야기에서 유래된 이름의 UI 패턴입니다 . 페이지들이 전형적인 트리구조로 이루어져 있을 경우 현재 사용자가 위치한 페이지 ( 시퀀스 ) 를 보여주면서 동시에 상하 이동을 용이하게 하는 네비게이션 역할을 수행합니다 . 해당 패턴에 시각정보를 추가하여 워크 프로세스의 진행 정도를 표시할 경우 해당 패턴은 시퀀스 맵 (Sequence Map) 이라고 호칭합니다 . ( 하단 레퍼런스 참조 )

Reference


Fasoo ED Team

27

Category 데이터 출력 ( 시스템 상태 )

Name

KOR. ENG.

모래시계 , 아워글래스 Hourglass

Use case

Description

시스템 전체가 로딩 중일 경우 마우스 포인터가 바뀌는 것을 흔히 경험할 수 있습니다 . 프로세스가 끝날 때까지 어떤 것도 클릭할 수 없다는 상황을 알립니다 . ' 아워글래스 (Hourglass, 1 시간짜리 모래시계 )' 라고 하며 Mac 에서 사용되는 무지개 빛깔의 로딩 컨트롤의 경우 ' 스피닝 핀휠 (Spinning Pinwheel)' 이라고도 부릅니다 .

Reference

28


Name

KOR. ENG.

트로버 Throbber

Use case

Description

컨텐츠 로딩 혹은 DB 접근 등 시스템 상태를 시각적으로 알리기 위한 UI 컨트롤의 일종입니다 . 로딩이 완료되는 시기를 예측하기 어려운 경우 제공됩니다 . 개별 애플리케이션이 로딩되는 경우 , 주로 해당 소프트웨어나 웹브라우저의 메뉴바 혹은 툴바에 위치하는데 ' 트로버 (Throbber, 고동치는 것 )' 또는 ' 스피닝 휠(Spinning Wheel, 돌아가는 바퀴 )' 라고 부릅니다 .

Reference


Fasoo ED Team

29

Category 데이터 출력 , 데이터 입력

Name

KOR. ENG.

대화상자 , 팝업 Dialog Box, Pop-up

Use case

Description사용자의 지시 사항이나 어떤 사항에 대한 결정을 묻기 위해 사용자가 하던 일을 잠시 멈추게 하는 창을 말합니다 . 대화 상자라고 부르는 이유는 말 그대로 시스템과 사용자 사이에 대화를 제공하기 때문입니다 . 대화 상자는 목적에 따라 다양한 형태로 호출됩니다 . 크게 오류 등 공지가 필요한 경우 , 사용자가 선택한 대상의 속성을 지정하는 경우 , 작업의 진행 상황을 알리는 경우 , 사용자가 선택한 사항을 재 확인하는 경우 등으로 나뉠 수 있습니다 . 보통 대화상자가 활성화 되면 현재 사용자가 진행하는 프로세스가 강제로 중단되는 경험을 강요하기 때문에 의사 결정이나 데이터 입력 , 정보 전달 등 대화상자를 통해 제공하는 행위가 중요도가 매우 높을 때만 적용할 수 있도록 합시다 . 그렇지 않으면 불쾌한 사용자 경험을 유발하는 1 순위가 됩니다 .Reference

30


Name

KOR. ENG.

프로그래스 바 Progress Bar

Use case

Description

컨텐츠 로딩 혹은 DB 접근 등 시스템 상태를 시각적으로 알리기 위한 UI 컨트롤의 일종입니다 . 로딩이 완료되는 시기를 예상할 수 있을 때 제공됩니다 . 현재까지 진행된 정도와 남은 양을 모두 확인 할 수 있습니다 .프로그래스 바는 로딩이 완료됨을 예측할 수 없을 때도 사용됩니다 . 상황에 따라 예측할 수 없다가 예측이 가능한 시점에서 애니매틱 효과가 변경될 수도 있습니다 . ( 아래 레퍼런스 참조 )

Reference


Fasoo ED Team

UI Layout 의 개념에 대해서

UI layout 이란 ?

UI layout 이란 인터페이스라는 한정된 공간 안에 각종 구성요소 ( 컴포넌트 , 패턴 ) 들을 어느 위치에 배치하고 어떤 식으로 그룹핑 할 것이며 어느 정도

크기를 차지하게 만들 것인지 고민하는 행위와 그 고민의 결과물을 말합니다 . 앞에서 소개했던 UI Pattern 은 이 레이아웃 구성을 위한 구성요소 중 빈번하게

활용되는 사례라고 볼 수 있겠습니다 .

보통 화면 상에 레이아웃을 구성 할 때는 ‘하나의 목표에 하나의 화면 레이아웃’이라는 철학을 적용합니다 . 예를 들어 고객의 목적이 ‘제품을 검색 하고 해당

제품 구매 상담을 해줄 수 있는 담당자와 접촉하는 것’이라면 해당 화면 레이아웃을 설계 하기 위해서 모든 업무를 수행할 수 있는 복잡하기 그지 없는 화면이

아니라 ‘검색 열람’이라는 이미 알고 있는 고객 목적에 특화된 화면을 설계합니다 . 해당 목적에 적합한 레이아웃을 선택 한 후에는 해당 레이아웃에 적합한 UI pattern 을 선택해서 적절하게 배치하고 커스터마이징 합니다 . 보통 UI 설계 및 디자인 과정은 이렇게 진행 됩니다 . 물론 그 이전에 사용자 ( 고객 ) 을

이해하는 과정을 거쳐야 하겠지만요 .

우선 최근 RIA 기반의 인터페이스 설계에서 가장 빈번하게 사용되는 15 가지 UI 레이아웃 유형을 소개합니다 . UI 에 대한 개념을 잡는 데 도움이 되길

바랍니다 .(Theresa Neil 의 Screen layouts 유형에 대한 논문을 참조했습니다 . http://www.slideshare.net/theresaneil/ria-screen-layouts )

http://www.slideshare.net/theresaneil/ria-screen-layouts

http://www.slideshare.net/theresaneil/ria-screen-layouts

Fasoo ED Team

자주 사용되는 UI Layout

Title Master/Detail

Use case

Description

마스터 / 상세 화면 레이아웃은 정보의 요약 및 섬네일 목록과 해당 정보의 상세 정보를 한 화면에 효과적으로 보여주는 데 적합한 레이아웃입니다 . 사용자가 목록 간을 이동하는 동안에 같은 화면에 머무르도록 하여 효과적인 사용자 경험을 제공하는 데 이상적입니다 . 수평 레이아웃은 사용자가 마스터 목록에서 적은 식별자에 비해 더 많은 정보를 볼 필요가 있거나 마스터 뷰가 각각 추가적인 상세 정보를 가지고 있는 아이템 셋으로 구성되어 있을 때 좋은 선택입니다 .

Reference

1

Title Column Browse

Use case

Description

Column Browse 화면 레이아웃은 수평 또는 수직으로 레벨 이동이 가능합니다 . 사용자가 다양한 진입 포인트에서 위계를 가지거나 관계를 맺고 있는 데이터에 대한 네비게이션을 가능하게 하여 특화된 사용자 경험을 만들어내는 것에 이상적입니다 . 뎁스도 깊고 데이터 범위도 넓은 메뉴 구조와 해당 메뉴 구조 하위에 속해 있는 컨텐츠를 한 화면에서 볼 수 있다는 것은 매우 큰 장점입니다 .

Reference

2

Fasoo ED Team

Title Palette/Canvas

Use case

Description

팔레트 /캔버스는 인터페이스 상에서 디자인이나 도표 , 문서와 같은 컨텐츠를 제작하거나 서버에 업로드 하기 위한 화면구성에 최적화 되어 있는 레이아웃 입니다 . 팔레트는 화면 위에 떠 있거나 가변적으로 수납되거나 혹은 영구적으로 고정될 수 있습니다 . 사용자가 컨텐츠를 제작하기 위한 최대의 화면 리소스를 제공할 수 있도록 풀 스크린 전환 기능 제공을 고려하세요 . (팔레트로 도배된 화면에서 작업하기는 쉽지 않을 겁니다 .)

Reference

3

Title Dashboard

Use case

Description

대시보드 레이아웃은 실시간으로 제공되는 가독성 높은 그래픽 데이터를 통해 한눈에 대량의 정보를 확인해야 하는 상황에서 유용한 레이아웃입니다 . 정교하게 디자인 된 인포그래픽은 핵심 정보와 탐색을 위한 명확한 진입 포인트를 제공할 것입니다 . 대시보드는 정보를 많이 보여주는 것도 중요하지만 빠른 의사 결정을 위해 명확하고 판독하기 쉽게 데이터를 시각화 하는 것이 매우 중요합니다 .

Reference

4


Fasoo ED Team

Title Spreadsheet/ Grid

Use case

Description

스프레드 시트 / 그리드 레이아웃은 쉬운 편집 ( 인라인 에디팅 ) 과 항목 (컬럼 ) 추가 , 미리 보기와 합계 수치를 제공할 수 있습니다 . 이 타입의 화면은 다음과 같은 기본적인 테이블 기능을 제공해야 합니다 . : 정렬 , 컬럼 표시 /감추기 , 컬럼 재정렬 , 조건에 따른 그룹핑 기능 ( 해당 되는 경우 ), 글로벌 한 수준의 undo/redo 기능 , 행렬의 추가 /삽입 /삭제 기능 , 키보드를 통한 네비게이션 , 가져오기와 내보내기 기능 , 그리고 미리 보기 및 요약 기능 역시 필요합니다 .

Reference

5

Title Interactive Model

Use case

Description

인터랙티브 모델 레이아웃은 핵심 객체 ( 그래프 , 캘린더 , 맵 , 음계 혹은 텍스트 등등 ) 와 관련된 많은 인터랙티브 요소에 특화되어 있습니다 . 인터랙티브 모델 레이아웃은 화면 구성요소가 컨트롤 하고자 하는 오브젝트에 명확한 어포던스를 줄 수 있도록 설계 되어야 합니다 . 그래프를 키우기 위한 핸들러 , 지도에 좌표를 찍기 위한 피커 , 음표의 높낮이를 조절하기 위해 드래그 앤 드롭이 가능하다는 단서를 주는 식으로 말이죠 .

Reference

6


Fasoo ED Team

Title Search/Results

Use case

Description

검색 화면 패턴은 매우 간단한 케이스에서 아주 정교한 형태까지 포괄하고 있습니다 . 이 패턴은 사용자가 특정 아이템이나 특정 기준에 부합하는 아이템의 집합으로 직접 이동할 수 있도록 함으로써 효율적인 사용자 경험을 만들어냅니다 .

Reference

7

Title Refine Dataset

Use case

Description

데이터 셋 수정 ( 정렬 ) 레이아웃은 수직 혹은 수평으로 배치될 수 있으며 사용자가 알려진 데이터 혹은 추가 검색 결과를 수정 / 재정의 할 수 있도록 하여 효과적인 사용자 경험을 창출하는데 적합합니다 . 대량의 정보를 실시간으로 사용자가 원하는 요건 기준으로 정렬할 필요가 있을 때 가장 유용한 레이아웃입니다 . 데이터 셋에 변경 사항이 발생했을 때 실시간으로 변화된 모습이 다이나믹하게 정렬 되는 것이 중요합니다 . (퍼포먼스 이슈가 발생할 수 있겠죠 .)

Reference

8


Fasoo ED Team

Title Parallel Panels

Use case

Description

병렬 패널은 순차적으로 한번에 하나씩 보거나 한꺼번에 모두 볼 수 있습니다 . 이 패턴은 서로 유사하거나 상호 의존 경향을 가진 정보들의 묶음을 조직화 하는데 적합합니다 . 사용자를 한 화면에 머무르게 만드는 것은 효율성을 담보하기 위한 방법입니다 . 정보의 묶음을 순차적으로 확인하면서 사용자는 정보의 구조를 직관적으로 이해하고 대량의 정보에서 혼란에 빠지지 않고 원하는 목적을 달성 할 수 있습니다 .

Reference

9

Title Wizard

Use case

Description

마법사 레이아웃은 복잡하거나 흔하지 않은 업무흐름을 사용자에게 안내하기에 최적화되어 있습니다 . 특히 복잡한 과정을 순차적으로 진행하도록 사용자의 행동 패턴을 규제해야 할 필요가 있을 때 매우 효과적입니다 . 데이터의 특성에 따라 수평 혹은 수직으로 배치 될 수 있습니다 . Sequence map 과 같은 UI 패턴이 이 레이아웃에 특화된 UI 패턴입니다 .

Reference

10


Fasoo ED Team

Title Question/Answer

Use case

Description

Q/A 화면 레이아웃은 사용자가 빠르게 해답을 찾아낼 수 있도록 도와줍니다 . Q/A는 Search/Results 와는 다르게 전문적인 지식이 결여되어 있는 사용자가 적용 가능한 솔루션 항목이나 특정한 하나의 추천 안을 식별하는데 기여합니다 . (예 : 건강보험 , 담보대출 또는 예산계획 수립 등등 )

Reference

11

Title Forms ( 데이터 입력 )

Use case

Description폼 레이아웃은 사용자가 시스템에 다양한 유형과 속성을 가진 정보를 입력해야 하는 상황에 가장 널리 쓰이는 레이아웃입니다 . 폼 레이아웃의 사용빈도는 매우 빈번하고 설계에 있어서 주의해야 할 사항이 많기 때문에 사용성에 대한 명확한 이해와 성공적인 디자인 사례를 토대로 접근해야 합니다 . Luke Wroblewski 가 저술한 Web Form Design(웹 폼 디자인 ) 이라는 레퍼런스를 참고하면 좋습니다 . ( 사실 앞서 소개한 데이터 입력에 관한 UI pattern 이 이 폼을 구성하기 위한 패턴입니다 .)Reference

12


Fasoo ED Team

Title Portal

Use case

Description

포털 레이아웃은 높은 수준의 사용자 최적화를 제공할 수 있습니다 . 이는 뉴스 사이트 등에는 최적화된 레이아웃입니다 . 대량의 정보를 개인화 해서 한 눈에 파악하기에 최적의 레이아웃이긴 하지만 대쉬보드 레이아웃 과는 구별해서 사용되어야 합니다 .

Reference

13

Title Tabbed

Use case

Description

탭은 수평이나 수직 배치가 가능합니다 . 탭 레이아웃은 다른 모든 레이아웃이 고려된 후에 분석되어야 합니다 . 탭 레이아웃이 선택되기 전에 이런 접근이 사용자들이 단일 업무를 수행할 때 다른 섹션 사이를 왔다 갔다 하는 번거로운 일을 발생 시키지는 않는 지 주의 깊게 체크하세요 . 한 화면에 배치해도 좋은 컨텐츠와 기능을 탭으로 나눌 필요가 꼭 있는 지 생각해 보는 겁니다 . 물론 탭 레이아웃을 써야 하고 쓸 수 밖에 없는 상황이 분명 있습니다 .

Reference

14


Fasoo ED Team

Title Browse

Use case

Description

찾아보기 레이아웃은 정보를 빠르게 검색하고 탐색하는 것이 목표인 사용자에게 최적의 레이아웃을 제공합니다 . 2 컬럼 혹은 3 컬럼으로 구성될 수 있으며 일반적으로 주 컨텐츠가 왼쪽에 배치되고 해당 컨텐츠와 연관이 있는 추가적인 정보와 옵션이 오른쪽에 배치 됩니다 .

Reference

15
