Guidelines - 가이드라인

Guidelines(가이드라인)는 GDS 전반에서 일관된 디자인 방향을 지키려고 기본으로 지켜야 할 원칙과 기준을 정하는 영역이며, 방향과 기준 정의의 토대입니다.

Foundation - 파운데이션

시스템을 이루는 가장 기본적인 재료입니다. 색 · 타이포 · 여백 · 아이콘처럼 가장 작은 단위가 여기 듭니다. 만드는 가이드와 만들어진 요소를 다 아우르며, 컴포넌트를 만드는 기준이자 재료가 됩니다. 요소끼리는 서로에게 매이지 않고 저마다의 규칙을 가집니다 - 색은 타이포에 영향받지 않습니다. 파운데이션 요소는 화면에 홀로 놓이면 사용자가 맥락을 이해할 수 있는 완성된 상태가 되지 않고, 반드시 다른 요소와 조합되어야 뜻을 가집니다.

Component - 컴포넌트

글 · 그림 · 상호작용이 묶여 하나의 기능이나 정보를 전하는 기본 단위입니다. 파운데이션 재료를 조합해 만들며, 화면에 홀로 놓였을 때 사용자가 그 역할을 알아볼 수 있어야 컴포넌트입니다 - 버튼 하나만 놓여도 「누를 수 있는 것」으로 읽히는 상태입니다. 자석처럼 홀로도 쓰이고 다른 컴포넌트에 딸려서도 쓰입니다.

Role - 롤

파운데이션 요소가 컴포넌트 안에 들어오면 목적을 갖게 되고, 그 목적을 부르는 이름이 롤입니다. 타이포가 입력창 안에서 그 칸의 이름을 알려 주는 자리에 놓이면 그 롤은 Label 입니다. 같은 롤 이름은 컴포넌트 전반에서 같은 뜻으로 씁니다.
· 영역형 - 내용이 들어올 공간과 범위를 정하는 롤 (Text field · Helper text field)
· 개체형 - 정해진 자리에 놓인 낱개 요소로 있는 롤 (Label)
· Label(레이블)은 컴포넌트 안 각 요소의 이름을 보여 주는 고정 텍스트 영역이고, Text field(텍스트 필드)는 텍스트가 입력되는 영역, Helper text(헬퍼 텍스트)는 Text field 를 보조해 안내나 오류 메시지를 전하는 영역입니다.
· Background(백그라운드)는 컴포넌트의 배경 스타일이 적용되는 영역이고, Left action · Right action(레프트 · 라이트 액션)은 구분선을 기준으로 나뉜 좌우 각각의 액션 영역, Content area(콘텐츠 영역)는 여러 정보가 조합되어 표시되는 정보 영역입니다.
· Elevation(엘리베이션)은 컴포넌트의 레이어 깊이감을 표현해 다른 영역과 시각적 계층을 가르는 영역이고, Gradient(그라디언트)는 선택되지 않은 값을 흐릿하게 처리해 선택 영역을 가르는 영역, Dot(도트)는 시와 분 사이의 구분을 나타내는 영역입니다.

Template - 템플릿

여러 컴포넌트가 묶여 새 목적을 갖게 된 단위입니다. 한 컴포넌트의 변형 축으로는 풀 수 없을 때, 그리고 컴포넌트가 레이아웃 안에서 규칙적인 구역으로 되풀이될 때 템플릿입니다. 여러 컴포넌트를 묶은 틀은 그대로 두고, 들어가는 컴포넌트 구성이 바뀌는 꼴입니다. 예를 들어 바텀시트 안의 내용 구성이 바뀌는 것은 변형이고, 버튼 · 입력 · 배지를 묶어 새 목적을 갖게 한 것은 템플릿입니다. 다만 파운데이션 요소끼리의 조합으로 만들어진 것은 템플릿이 아니라 컴포넌트입니다.
Atomic 의 organism 을 그대로 쓰지 않았습니다 - 그 말은 여기서 묶으려는 덩어리보다 윗자리 개념이라, 이 시스템의 말로 템플릿이라 부릅니다.