제품의 UI/UX를 구현할 때 기본 숙어처럼 알아두면 좋을 UI 패턴과 레이아웃 유형을 정리했습니다. Useful UI pattern & Layout glossary

1. Fasoo ED Team
UI Pattern & Layout효과적인 제품 UI/UX 개발을 위해 꼭 알아야 할 사항들
Fasoo ED Team
Dongsik Yang

2. 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 pattern입니다.
길 찾기 기능에 특화된 UI pattern 들은
컨텐츠와 정보가 배치되어 있는 정보구
조를 가상의 건축물로 은유 했을 때 사용
자를 자신이 원하는 목적이 위치한 공간
으로 정확히 안내하고 길을 잃지 않도록
하는 것에 최적화 되어 있습니다.
검색은 일종의 순간이동과 같습니다. 길
찾기가 최종 목적지로 향하는 길을 친절
한 이정표를 따라가는 행위라면 검색은
최종 목적지에 대한 직접적인 단서(키워
드)를 알고 있을 경우 해당 정보 및 해당
정보와 유사한 정보의 묶음으로 바로 이
동시켜 줍니다.
검색 관련 UI pattern은 이러한 검색 기
능을 효과적으로 수행하기 위해 최적화
된 UI pattern입니다.

3. Fasoo ED Team
Category 데이터 입력
Name
KOR. ENG.
드롭다운 리스트 Drop-down List
Use case
Description
다수의 선택 항목 중에 1개의 항목을 선택하기 위한 UI 컨트롤.
라디오 버튼과 수행하는 기능은 유사하나 인터랙션이 발생하기 이전에는 선택 가능한 항
목을 표시 하지 않는다는 차이점이 있습니다. 선택 항목이 많을 경우 공간 리소스를 절약
할 수 있다는 장점이 있습니다.
Reference
1
Category 데이터 입력
Name
KOR. ENG.
콤보 박스 Combo Box
Use case
Description Reference
드롭다운 리스트와 입력 필드의 기능을 동
시에 수행하는 UI 컨트롤. 필드 영역을 클
릭하여 텍스트 입력이 가능하며 우측 화살
표를 클릭해서 드롭다운 리스트와 같이 선
택 항목 표시를 활성화 하는 것도 가능합니
다.
텍스트 입력에 따라 동적으로 선택항목 표
시를 변경하는 식으로 활용이 가능합니다.
보통 Office 등의 제품에서 개체 속성 입력
시 자주 사용 됩니다.
2
빈번하게 사용되는 UI Pattern

4. Fasoo ED Team
Category 데이터 입력
Name
KOR. ENG.
라디오 버튼 Radio button
Use case
Description
다수의 선택 항목 중에 1개의 항목을 선택하기 위한 UI 컨트롤.
드롭박스 리스트와 수행하는 기능은 유사하나 인터랙션이 발생하기 이전에 선택 가능한
항목을 모두 표시 한다는 차이점이 있습니다. 선택 항목이 많을 경우 공간 리소스를 많이
차지하기 때문에 가급적 선택 항목을 구조화 하거나 줄일 필요가 있습니다.
Reference
3
Category 데이터 입력
Name
KOR. ENG.
체크 박스 Check Box
Use case
Description
다수의 선택 항목 중에서 다수의 항목을 선택하기 위한 UI 컨트롤.
라디오 버튼과 용도가 혼동 될 수 있기 때문에 선택하는 영역에 UI 메타포 디자인을 유의
해야 합니다. 보통 체크형태의 메타포를 Variation 하여 디자인한다. 클릭 혹은 터치한번
으로 데이터 입력이 가능하기 때문에 모바일 환경에서도 라디오 버튼과 같이 널리 이용되
고 있습니다.
Reference
4
빈번하게 사용되는 UI Pattern

5. Fasoo ED Team
Category 데이터 입력
Name
KOR. ENG.
토글 (버튼) Toggle Button , Switch
Use case
Description
On/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
빈번하게 사용되는 UI Pattern

6. Fasoo ED Team
Category 데이터 입력 (숫자)
Name
KOR. ENG.
스피너 Spinner
Use case
Description
대표적인 숫자 입력 컨트롤. 편집 필드와 우측 옆의 작고 납작한 두 개의 화살표으로 구성
되어 있습니다. 현재 필드에 입력된 숫자 값을 기준으로 위아래 화살표 버튼을 눌러 조절
하거나 혹은 편집 필드에 직접 원하는 숫자 값을 입력할 수 있습니다.
Reference
7
Category 데이터 입력 (숫자, 범위)
Name
KOR. ENG.
슬라이더 Slider
Use case
Description
리얼메타포를 UI에 반영한 대표적인 컨트롤. 콤보 박스의 경우 사용자가 입력 가능한 범
위를 모르는 상태에서 입력하는 상황에 처할 수 있는데 반해, 슬라이더는 입력값이 제한
되어 있음을 시각적으로 인지할 수 있습니다. 다시 말해 사용자가 부적절한 값을 입력할
가능성이 없기 때문에 상당히 직관적인 컨트롤이라고 할 수 있습니다.
Reference
8
빈번하게 사용되는 UI Pattern

7. Fasoo ED Team
Category 데이터 입력 (Text)
Name
KOR. ENG.
입력 필드, 인풋 박스 Text input field, Input box
Use case
Description Reference
사용자가 키보드로 직접 텍스트를 입력하
는 곳으로서 편집 필드 또는 텍스트 상자
등으로도 불립니다. 특정 항목의 속성을 입
력할 때 외에도 검색, 정보 입력 등 상황에
따라 각기 다른 목적으로 사용됩니다. 여러
줄을 입력할 수 있을 때는 입력 영역(Text
Area)이라고도 부릅니다.
인풋박스에 입력하는 데이터의 속성을 의
미하는 Text를 보통 레이블(Label) 이라고
하는데 해당 레이블을 인풋 박스 안에 표시
하여 텍스트 입력 방식을 표시할 경우 플레
이스홀더(Placeholder)라 호칭 합니다.
9
Category 데이터 입력
Name
KOR. ENG.
피커 (데이트 피커, 컬러 피커) Picker (Date picker, Color picker)
Use case
Description
데이터 입력 관련 UI 컨트롤 중 화면상의 특정 위치를 클릭 (Pick)하여 데이터를 입력하는
방식의 UI 컨트롤 피커라고 합니다. 피커 중에 대표적인 컨트롤은 날짜를 클릭해서 입력
하는 데이트 피커와 화면상에 보이는 컬러를 클릭해서 컬러값을 추출하여 입력하는 컬러
피커가 대표적입니다. Map에서 좌표를 따기 위해 클릭하는 LBS 관련 UI 컨트롤도 피커
의 일종입니다.
Reference
10
빈번하게 사용되는 UI Pattern

8. Fasoo ED Team
Category 데이터 출력, 데이터 입력, 길 찾기
Name
KOR. ENG.
트리 메뉴 Tree menu
Use case
Description Reference
리스트 컨트롤의 유형 중 하나로 정보의 계
층 구조를 표시하는데 매우 유용합니다. 폴
더를 기반으로 나뉘어지는 윈도우의 정보
구조를 표시하거나 조직도, Database 등
정보 계층 (hierarchy)를 가지는 정보를 시
각화 하거나 표시 항목을 선택하거나 이동
할 때 매우 빈번하게 사용 됩니다.
11
Category 데이터 출력, 데이터 입력, 길 찾기
Name
KOR. ENG.
테이블 (그리드) Table (Grid)
Use case
Description
여러 가지 속성을 가지고 있는 데이터의 집합을 화면 상에 출력하기 위한 리스트 컨트롤
유형. 컬럼으로 이루어진 DB를 연상하면 쉽습니다. 각 컬럼은 특정 기준에 따라 다이나믹
하게 정렬이 가능하며 특수한 경우에는 인라인 에디팅을 지원하여 스프레드시트처럼 리
얼타임으로 수정 및 편집이 가능합니다. (하단 레퍼런스 참조) 대량의 데이터를 화면에 표
시하고 정렬하고 열람하고 편집해야 하는 파수닷컴 제품에 매우 중요한 UI 패턴입니다.
정렬이 가능할 경우 각 타이틀은 클릭하면 동작이 가능하다는 어포던스를 줘야 합니다.
Reference
12
빈번하게 사용되는 UI Pattern

9. 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 pattern이며
보통 드롭 다운 메뉴, 트리 메뉴, 어코디온
메뉴 등의 UI 컨트롤과 조합되어 사용되는
것이 일반적입니다.
(우측 레퍼런스는 LNB로 빈번하게 사용되
는 Accordion 컨트롤)
13 14
빈번하게 사용되는 UI Pattern

10. 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
빈번하게 사용되는 UI Pattern

11. 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
빈번하게 사용되는 UI Pattern

12. 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
Description Reference
MRU 리스트 개념을 메뉴에 도입한 방식으
로, 사용자의 검색 히스토리나 빈도수가 높
은 항목들을 메뉴에 우선적으로 나타나게
하는 것을 말합니다.
위 화면과 같이 자주 쓰는 메뉴만 보여지며
확장 버튼을 눌러 모든 메뉴를 확인할 수
있습니다.
빈번하게 사용되는 UI Pattern

13. 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
빈번하게 사용되는 UI Pattern

14. 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 Pattern.
사각형이 다른 사각형에 포함되는 연관관계와 사각형의 크기(scale)을 통해 단순하게 수
치로 표시하기 힘든 데이터의 연관관계와 비율 등을 다이나믹하게 표시하는데 용이합니
다. 계층 구조를 보여주기 위해 이 사각형들을 포개어 놓고 컬러나 라벨로 추가되는 변수
를 표시할 수 도 있습니다.
Reference
빈번하게 사용되는 UI Pattern

15. 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
빈번하게 사용되는 UI Pattern

16. Fasoo ED Team
27
Category 데이터 출력 (시스템 상태)
Name
KOR. ENG.
모래시계, 아워글래스 Hourglass
Use case
Description
시스템 전체가 로딩 중일 경우 마우스 포인터가 바뀌는 것을 흔히 경험할 수 있습니다. 프
로세스가 끝날 때까지 어떤 것도 클릭할 수 없다는 상황을 알립니다. '아워글래스
(Hourglass, 1 시간짜리 모래시계)'라고 하며 Mac에서 사용되는 무지개 빛깔의 로딩 컨
트롤의 경우 '스피닝 핀휠(Spinning Pinwheel)'이라고도 부릅니다.
Reference
28
Category 데이터 출력 (시스템 상태)
Name
KOR. ENG.
트로버 Throbber
Use case
Description
컨텐츠 로딩 혹은 DB 접근 등 시스템 상태를 시각적으로 알리기 위한 UI 컨트롤의 일종입
니다. 로딩이 완료되는 시기를 예측하기 어려운 경우 제공됩니다. 개별 애플리케이션이
로딩되는 경우, 주로 해당 소프트웨어나 웹브라우저의 메뉴바 혹은 툴바에 위치하는데 '
트로버(Throbber, 고동치는 것)' 또는 '스피닝 휠(Spinning Wheel, 돌아가는 바퀴)'라고
부릅니다.
Reference
빈번하게 사용되는 UI Pattern

17. Fasoo ED Team
29
Category 데이터 출력, 데이터 입력
Name
KOR. ENG.
대화상자, 팝업 Dialog Box, Pop-up
Use case
Description
사용자의 지시 사항이나 어떤 사항에 대한 결정을 묻기 위해 사용자가 하던 일을 잠시 멈
추게 하는 창을 말합니다. 대화 상자라고 부르는 이유는 말 그대로 시스템과 사용자 사이
에 대화를 제공하기 때문입니다. 대화 상자는 목적에 따라 다양한 형태로 호출됩니다. 크
게 오류 등 공지가 필요한 경우, 사용자가 선택한 대상의 속성을 지정하는 경우, 작업의 진
행 상황을 알리는 경우, 사용자가 선택한 사항을 재 확인하는 경우 등으로 나뉠 수 있습니
다. 보통 대화상자가 활성화 되면 현재 사용자가 진행하는 프로세스가 강제로 중단되는
경험을 강요하기 때문에 의사 결정이나 데이터 입력, 정보 전달 등 대화상자를 통해 제공
하는 행위가 중요도가 매우 높을 때만 적용할 수 있도록 합시다. 그렇지 않으면 불쾌한 사
용자 경험을 유발하는 1순위가 됩니다.
Reference
30
Category 데이터 출력 (시스템 상태)
Name
KOR. ENG.
프로그래스 바 Progress Bar
Use case
Description
컨텐츠 로딩 혹은 DB 접근 등 시스템 상태를 시각적으로 알리기 위한 UI 컨트롤의 일종입
니다. 로딩이 완료되는 시기를 예상할 수 있을 때 제공됩니다. 현재까지 진행된 정도와 남
은 양을 모두 확인 할 수 있습니다.
프로그래스 바는 로딩이 완료됨을 예측할 수 없을 때도 사용됩니다. 상황에 따라 예측할
수 없다가 예측이 가능한 시점에서 애니매틱 효과가 변경될 수도 있습니다. (아래 레퍼런
스 참조)
Reference
빈번하게 사용되는 UI Pattern

18. 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 )

19. Fasoo ED Team
자주 사용되는 UI Layout
Title Master/Detail
Use case
Description
마스터/상세 화면 레이아웃은 정보의 요약 및 섬네일 목록과 해당 정보의 상세 정보를 한
화면에 효과적으로 보여주는 데 적합한 레이아웃입니다. 사용자가 목록 간을 이동하는 동
안에 같은 화면에 머무르도록 하여 효과적인 사용자 경험을 제공하는 데 이상적입니다.
수평 레이아웃은 사용자가 마스터 목록에서 적은 식별자에 비해 더 많은 정보를 볼 필요가
있거나 마스터 뷰가 각각 추가적인 상세 정보를 가지고 있는 아이템 셋으로 구성되어 있을
때 좋은 선택입니다.
Reference
1
Title Column Browse
Use case
Description
Column Browse 화면 레이아웃은 수평 또는 수직으로 레벨 이동이 가능합니다. 사용자
가 다양한 진입 포인트에서 위계를 가지거나 관계를 맺고 있는 데이터에 대한 네비게이션
을 가능하게 하여 특화된 사용자 경험을 만들어내는 것에 이상적입니다. 뎁스도 깊고 데
이터 범위도 넓은 메뉴 구조와 해당 메뉴 구조 하위에 속해 있는 컨텐츠를 한 화면에서 볼
수 있다는 것은 매우 큰 장점입니다.
Reference
2

20. Fasoo ED Team
Title Palette/Canvas
Use case
Description
팔레트/캔버스는 인터페이스 상에서 디자인이나 도표, 문서와 같은 컨텐츠를 제작하거나
서버에 업로드 하기 위한 화면구성에 최적화 되어 있는 레이아웃 입니다. 팔레트는 화면
위에 떠 있거나 가변적으로 수납되거나 혹은 영구적으로 고정될 수 있습니다. 사용자가
컨텐츠를 제작하기 위한 최대의 화면 리소스를 제공할 수 있도록 풀 스크린 전환 기능 제
공을 고려하세요. (팔레트로 도배된 화면에서 작업하기는 쉽지 않을 겁니다.)
Reference
3
Title Dashboard
Use case
Description
대시보드 레이아웃은 실시간으로 제공되는 가독성 높은 그래픽 데이터를 통해 한눈에 대
량의 정보를 확인해야 하는 상황에서 유용한 레이아웃입니다. 정교하게 디자인 된 인포그
래픽은 핵심 정보와 탐색을 위한 명확한 진입 포인트를 제공할 것입니다. 대시보드는 정
보를 많이 보여주는 것도 중요하지만 빠른 의사 결정을 위해 명확하고 판독하기 쉽게 데이
터를 시각화 하는 것이 매우 중요합니다.
Reference
4
자주 사용되는 UI Layout

21. Fasoo ED Team
Title Spreadsheet/ Grid
Use case
Description
스프레드 시트/ 그리드 레이아웃은 쉬운 편집 (인라인 에디팅)과 항목 (컬럼) 추가, 미리
보기와 합계 수치를 제공할 수 있습니다. 이 타입의 화면은 다음과 같은 기본적인 테이블
기능을 제공해야 합니다. : 정렬, 컬럼 표시/감추기, 컬럼 재정렬, 조건에 따른 그룹핑 기능
(해당 되는 경우), 글로벌 한 수준의 undo/redo 기능, 행렬의 추가/삽입/삭제 기능, 키보
드를 통한 네비게이션, 가져오기와 내보내기 기능, 그리고 미리 보기 및 요약 기능 역시 필
요합니다.
Reference
5
Title Interactive Model
Use case
Description
인터랙티브 모델 레이아웃은 핵심 객체(그래프, 캘린더, 맵, 음계 혹은 텍스트 등등)와 관
련된 많은 인터랙티브 요소에 특화되어 있습니다. 인터랙티브 모델 레이아웃은 화면 구성
요소가 컨트롤 하고자 하는 오브젝트에 명확한 어포던스를 줄 수 있도록 설계 되어야 합니
다. 그래프를 키우기 위한 핸들러, 지도에 좌표를 찍기 위한 피커, 음표의 높낮이를 조절하
기 위해 드래그 앤 드롭이 가능하다는 단서를 주는 식으로 말이죠.
Reference
6
자주 사용되는 UI Layout

22. Fasoo ED Team
Title Search/Results
Use case
Description
검색 화면 패턴은 매우 간단한 케이스에서 아주 정교한 형태까지 포괄하고 있습니다. 이
패턴은 사용자가 특정 아이템이나 특정 기준에 부합하는 아이템의 집합으로 직접 이동할
수 있도록 함으로써 효율적인 사용자 경험을 만들어냅니다.
Reference
7
Title Refine Dataset
Use case
Description
데이터 셋 수정 (정렬) 레이아웃은 수직 혹은 수평으로 배치될 수 있으며 사용자가 알려진
데이터 혹은 추가 검색 결과를 수정/재정의 할 수 있도록 하여 효과적인 사용자 경험을 창
출하는데 적합합니다. 대량의 정보를 실시간으로 사용자가 원하는 요건 기준으로 정렬할
필요가 있을 때 가장 유용한 레이아웃입니다. 데이터 셋에 변경 사항이 발생했을 때 실시
간으로 변화된 모습이 다이나믹하게 정렬 되는 것이 중요합니다. (퍼포먼스 이슈가 발생
할 수 있겠죠.)
Reference
8
자주 사용되는 UI Layout

23. Fasoo ED Team
Title Parallel Panels
Use case
Description
병렬 패널은 순차적으로 한번에 하나씩 보거나 한꺼번에 모두 볼 수 있습니다. 이 패턴은
서로 유사하거나 상호 의존 경향을 가진 정보들의 묶음을 조직화 하는데 적합합니다. 사
용자를 한 화면에 머무르게 만드는 것은 효율성을 담보하기 위한 방법입니다. 정보의 묶
음을 순차적으로 확인하면서 사용자는 정보의 구조를 직관적으로 이해하고 대량의 정보
에서 혼란에 빠지지 않고 원하는 목적을 달성 할 수 있습니다.
Reference
9
Title Wizard
Use case
Description
마법사 레이아웃은 복잡하거나 흔하지 않은 업무흐름을 사용자에게 안내하기에 최적화되
어 있습니다. 특히 복잡한 과정을 순차적으로 진행하도록 사용자의 행동 패턴을 규제해야
할 필요가 있을 때 매우 효과적입니다. 데이터의 특성에 따라 수평 혹은 수직으로 배치 될
수 있습니다. Sequence map 과 같은 UI 패턴이 이 레이아웃에 특화된 UI 패턴입니다.
Reference
10
자주 사용되는 UI Layout

24. 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
자주 사용되는 UI Layout

25. Fasoo ED Team
Title Portal
Use case
Description
포털 레이아웃은 높은 수준의 사용자 최적화를 제공할 수 있습니다. 이는 뉴스 사이트 등
에는 최적화된 레이아웃입니다. 대량의 정보를 개인화 해서 한 눈에 파악하기에 최적의
레이아웃이긴 하지만 대쉬보드 레이아웃 과는 구별해서 사용되어야 합니다.
Reference
13
Title Tabbed
Use case
Description
탭은 수평이나 수직 배치가 가능합니다. 탭 레이아웃은 다른 모든 레이아웃이 고려된 후
에 분석되어야 합니다. 탭 레이아웃이 선택되기 전에 이런 접근이 사용자들이 단일 업무
를 수행할 때 다른 섹션 사이를 왔다 갔다 하는 번거로운 일을 발생 시키지는 않는 지 주의
깊게 체크하세요. 한 화면에 배치해도 좋은 컨텐츠와 기능을 탭으로 나눌 필요가 꼭 있는
지 생각해 보는 겁니다. 물론 탭 레이아웃을 써야 하고 쓸 수 밖에 없는 상황이 분명 있습
니다.
Reference
14
자주 사용되는 UI Layout

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