디자인 시스템 기초 (3) : 스타일 등록하기

 

매번 같은 색상을 일일히 지정하고 수정하는게 상당히 번거로운 작업이 될 수 있는데요.

특히 주요 컬러를 변경하는 경우에는 일일히 수정하는게 힘든 작업이 될 것입니다.

 

그래서 지난 시간에 진행했던 컬러, 서체와 엘리베이션 규칙, 그리드 스타일을

스타일에 등록하고 수정하고 보완하는 방법에 대해서 다루어보겠습니다.

 

---

 

1. 스타일 지정

먼저 스타일 지정에 대해서 알아보겠습니다.

피그마에서는 4가지의 스타일을 등록할 수 있습니다.

 

1. 컬러   → 컬러 팔레트

2. 텍스트 → 하이어라키

3. 이펙트 → 엘리베이션 및 인터렉션 규칙

4. 레이아웃 그리드 → 반응형 디자인

 

이 4가지는 각각 컬러 팔레트, 하이어라키(계층 구조), 엘리베이션 규칙, 반응형 디자인에서 활용됩니다.

그리고 이 스타일들은 전부 그룹을 지정할 수 있는데요,

보편적으로 '그룹명/컬러명'와 같은 형식으로 스타일을 등록합니다.

 

그러면 해당 그룹명 안에 여러가지의 컬러, 서체, 엘리베이션 규칙, 그리드를 쓸 수 있어요.

 

---

2 - 1. 컬러 스타일 등록

칠(Fill) 이나 획(Stroke) 패널에서 등록된 컬러 위의 스타일(Style) 아이콘을 누르고,

+로 표시된 스타일 생성(Create style) 아이콘을 누르면 새 컬러 스타일을 등록할 수 있습니다. 

저는 지난번에 고른 컬러 Primary, Secondary 3개,Background, Contents, White 까지 총 7종의 컬러 그룹을 등록해 두었습니다. 

 

그리고 이 컬러들에 투명도(opacity) 효과를 적용해서 총 6단계의 컬러 팔레트로 규칙을 만들었어요.

투명도(Opcity)에 맞게 100, 80, 60, 40, 20 순서로 등록하였습니다. 

컬러 팔레트의 규칙을 원하는 대로 생성해서 추가해봅시다.

 

---

2 - 2. 텍스트 스타일 등록

 

텍스트 스타일도 컬러 스타일과 동일하게 등록할 수 있습니다.

텍스트 패널에서 스타일 아이콘 선택 후 + 아이콘(Create style)을 누르면 새 텍스트 스타일이 생성됩니다.

 

지난 시간에 만들었던  H1~ H6, Paragraph를 등록할 수 있습니다.

여기서 Paragraph는 여러 역할을 맡을 수 있기 때문에 2개 이상의 스타일로 등록하셔도 괜찮습니다.

부제나, 캡션, 버튼, 본문 텍스트 등으로 맡게 되기 때문에 해당 스타일에 맞도록 지정하시면 됩니다. 

H1 ~ H3 처럼 제목 - 설명의 관계일 수도 있고, UI의 콘텐츠를 불어넣는 H4 ~ h6의 관계일 수 있습니다.

둘 모두 역할이 다르기 때문에 스타일로 따로 등록하여 '역할'을 부여하시면 됩니다.

요는 "나의 규칙대로" 스타일을 등록하면 됩니다.

 

2 - 3. 엘리베이션 스타일 등록

그림자 효과를 '단계별로' 지정할 수 있습니다.

효과 파트의 경우,  UI 인터렉션에 영향을 미치는 요소입니다.

 

위 이미지 처럼 단계별 등록을 시켜도 좋고, UI의 형태나 사용 분야별,

인터렉션 방법에 따라 다르게 적용하시면 됩니다.

 

추후 이 파트는 컴포넌트 인터렉티브 기능과 함께 다루어 보도록 하겠습니다.

 

https://m2.material.io/design/environment/elevation.html

Material Design

 

 

5. 레이아웃 그리드 스타일 등록

스마트폰에서부터 컴퓨터에 이르기까지 2022년 현재 서비스에 접근하는 디바이스는 매우 다양해졌습니다.

같은 서비스라 하더라도 모바일 ~ 태블릿 ~ 데스크톱 모두 대응하도록 디자인을 구성할 필요가 생겼죠.

그래서 재사용성을 강화하기 위해 등장한 것이 바로 '반응형 디자인'입니다.

반응형 디자인은 해당 서비스의 레이아웃이 스스로 반응해서 디바이스에 맞춰 주도록 설정하는데

레이아웃이 반응하는 특정 지점을 가리켜 중단점(BreakPoint)이라고 하는데요.

이 중단점에 맞추기 쉽도록 그리드 레이아웃을 가져와 사용하게 되었습니다.

 

중단점에는 픽셀, 열, 행 그리드 순서로 등록하여 디자인이 자연스럽게 변형하도록 설정합니다.

 

픽셀 그리드는 보편적으로 8px 그리드를 주로 사용하고 있습니다. 

최근에는 4px 기반으로도 사용하는 추세라고 합니다.

 

열 그리드는 디바이스의 종류별로 차이가 있고, 작업자마다 다르게 사용합니다.

저는 모바일 4열 , 태블릿 8열, 데스크톱 12열를 기준으로 주로 작업하고 있는데요

 

최근에는 풀 스크린 레이아웃 등이 나타나 데스크톱에 16, 20 열로도 작업하는 경우가 있거나, 

모바일 단에서 6 그리드를 기준으로 작업하는 경우가 나타나는 등 

스스로 규칙을 만드시기만 하면 됩니다.

 

행 그리드는 아래 포스팅에서도 설명했었습니다. 텍스트의 줄간격을 기준으로 설정하시면 됩니다.

특히나 웹에서 각 스크린에 맞는 크기의 기준 텍스트를 미리 설정하고 배율로 지정하는 rem 단위를 쓰고 있는데

이 간격이 rem을 몇으로 설정할지의 기준이 됩니다.

 

저는 모바일 12px, 태블릿 14px, 데스크톱 16px을 쓰는데,

콘텐츠의 성격에 따라서 텍스트의 크기를 변형할 필요가 있습니다.

 

(본문 텍스트가 많다던가, 줄 간격이 읽기 편하게 구성되어야 한다는 문제 등 많은 부분에서 고려가 이루어져야 합니다.)

프레임 기능 : 그리드 그리기

 

아래에 보편적으로 가장 자주 사용되는 구글의 머터리얼 디자인 가이드를 가져왔습니다.

참고자료로서 활용해 보시길 바랍니다.

 

https://m2.material.io/design/layout/responsive-layout-grid.html#breakpoints

Material Design

디바이스 (Device	Screen size	Margin	간격(gutter)**	본문(Body)	Layout columns
Extra-small (스마트폰)	0 - 599	16	16	Scaling	4
Small (태블릿)	600 - 904	32	16	Scaling	8
	905 - 1239	Scaling	24	840	12
Medium (랩탑)	1240 - 1439	200dp	24	Scaling	12
Large (데스크톱)	1440+	Scaling	24	1040	12

* 해당 문서에서는 dp라는 거리 단위를 중심으로 표현하지만, 피그마에선 그대로 px로 쓰면 됩니다.

  피그마는 내보내기 시에 배율을 설정할 수 있기 때문입니다.

 

** 간격(Gutter)의 경우에는 컬럼의 크기보다 작은 크기에 한해서 원하는대로 자율적으로 설정이 가능합니다.

  다만 여백(Margin)과 본문 크기에 영향을 주지 않는 선에서 고르는 것이 좋습니다.

 

*** 구글 머터리얼 가이드의 중단점(Break point)는 그 규칙상 소수점이 발생할 수도 있습니다. (1240. 905 화면의 경우.)

      추후에 정수형으로 딱 떨어지는 그리드 규칙으로 다시 한번 가져와서 설명을 드리겠습니다. 

 

---

6. 수정하기

아무 것도 선택하지 않은 상태에서 오른쪽 디자인 패널을 살펴보면

현재까지 등록한 스타일 목록이 뜨는 것을 확인할 수 있습니다.

 

이렇게 제작된 스타일을 수정하면, 현재 작성된 요소들이 한번에 변경되는 것을 확인하실 수 있습니다.

작업 속도를 더욱 빨리 만들 수 있으므로 스타일을 통해서 UI를 작성해 보시길 추천드립니다.

 

---

먼 길까지 오셨습니다. 

이제 이후부터는 컴포넌트에 대해서 다루어보도록 하겠습니다.