Figma로 시작하는 UI 디자인 실무

Figma와 UI 디자인은

 

이제 떼려야 뗄 수가 없는 사이가 된 것 같습니다.

 

 

 

사실 생각해보면, 

 

Figma가 세상에 나온 이유가

 

UI 디자인을 쉽게 하기 위함이니

 

당연한 이야기라 할 수 있습니다.

 

 

 

그러나

 

UI 디자인 실무에서 Figma를 처음 사용하게 되면,

 

많은 경우 

 

프로젝트 일정에 맞추기 위해, 프로젝트 일정에 맞추기 위해, 그리고 프로젝트 일정에 맞추기 위해, ...

 

Figma의 주요 개념을 이해하지 않고, 

 

단지 화면을 그리는 도구로만 사용하는 것을 볼 수 있습니다.🫢

 

 

 

그래서 이번 글에서는

 

Figma를 100퍼센트 사용하는 데 도움이 될 만한

 

Figma의 주요 개념 4가지를 정리해보았습니다. 

 

 

 

주요 개념은 아래와 같습니다.

• Styles
• Frame
• Auto Layout
• Component

(해당 단어는 Figma에서 사용되는 단어로 UI 디자인에서 일반적으로 사용되는 단어와는 차이가 있을 수 있습니다!)

 

 

 

위 4가지 개념을 모르더라도, UI 디자인을 하는 데에는 문제가 없지만

 

개념을 이해하고, 해당 기능을 적절하게 활용한다면

 

실무의 효율성에서 엄청난 차이가 있을 것입니다.

 

 

---

Styles

스타일(styles)이란 서비스에서 사용할 글(text)과 색(color)의 기준을 의미합니다. UI 디자인을 할 때 가장 기본이 되는 내용으로 대부분의 서비스에서는 용도에 따라 8~12개의 글꼴과 색상을 사전에 정의하고 이를 활용합니다. 

[예시 1.1] Figma 내 Text & Color Styles

[예시 1.2] 같은 폰트 및 색상이나 스타일이 적용된 경우와 그렇지 않은 경우

UI 디자인 실무에서 스타일을 활용하는 이유는 다음과 같습니다. 

1. 디자인 시안 내에서 일정한 범위 내 글꼴과 색상을 사용하는 것이 UI 디자인의 완성도를 높임
2. 향후 특정 색상을 수정해야 하거나 글의 크기를 키우는 등 전체적인 수정이 필요할 때 수정 작업의 효율성을 높임

 

UI 컴포넌트에 텍스트가 포함된 경우 각 텍스트마다 서체의 크기, 두께 등을 설정할 수도 있지만 디자인의 양이 많아질수록 버튼 텍스트에 사용된 크기가 15pt였는지 16pt였는지 또는 SemiBold였는지 Bold였는지 헷갈리기 쉽습니다. 마찬가지로 설명하는 본문 텍스트의 색상이 #F5F5F5였는지 #EEEEEE였는지도 헷갈리기 쉽습니다. 이러한 상황은 작업의 속도에 악영향을 미칠 뿐만 아니라 완성된 디자인 시안 내 UI 일관성을 신뢰하기도 어렵습니다. 또한, 전체적으로 글꼴이나 색상을 수정해야 하는 경우를 생각해보면 상당히 비효율적인 업무를 진행해야만 한다는 것을 생각할 수 있습니다. 

 

 

이런 상황에 효율적으로 대처할 수 있도록 Figma에서는 텍스트 및 색상에 대해 스타일 기능을 제공하고 있으며,

 

Figma에서 스타일을 활용하는 방법은 다음과 같습니다. 

• Figma에서 텍스트 스타일을 설정하는 방법
• Figma에서 컬러 스타일을 설정하는 방법

 

 

또한, 

 

UI 디자인에 익숙하지 않다면, 구글이나 애플에서 제공하고 있는 텍스트 및 색상 가이드를 참고해 실무에 도움을 받을 수 있습니다. 

• 텍스트 스타일 가이드 (구글)
• 텍스트 스타일 가이드 (애플)
• 색상 스타일 가이드 (구글)
• 색상 스타일 가이드 (애플)

 

텍스트 및 색상 스타일을 어떻게 적용하는 것이 좋을지 알고, 이를 Figma에서 구현할 수 있다면 UI 디자인 실무에 가장 기초적인 부분은 이해한 것이라고 생각합니다. 

 

 

---

Frame

프레임(Frame)이란 UI 컴포넌트의 기준이 되는 캔버스라고 이해하면 쉽습니다. Figma를 활용해 UI 디자인을 하기 위해 꼭 이해해야 하는 개념입니다. Figma를 처음 사용하면, 프레임이 그냥 사각형 요소(rectangle) 또는 그룹(group)과 무엇이 다른지 헷갈릴 수 있는데, 프레임의 가장 큰 특징은 생성된 프레임을 기준으로 다양한 요소들은 상대 위치를 갖는다는 것입니다. 

 

[예시 2.1] Figma에서 그룹으로 생성한 UI 요소 와 프레임으로 생성한 UI 요소

 

또한, 프레임의 다른 특징에는 제약조건(Constraints)이 있습니다. 제약조건은 프레임에 속한 UI 컴포넌트가 어떤 기준으로 위치, 크기 등이 바뀌어야 하는지에 대한 기준을 의미합니다. UI 요소를 생성할 때 하위 요소의 제약조건을 left, center, left and right 등의 값으로 설정할 수 있고, UI 컴포넌트의 크기가 바뀔 경우 이 기준에 따라 하위 요소가 변화하게 됩니다.  

[예시 2.2] Figma에서 프레임으로 생성한 UI 요소 내 Constraints 속성

[예시 2.3] constraints 속성에 따른 프레임 내 요소의 변화

정리하면, 프레임은 자기 자신 안에 포함되어 있는 요소들을 1) 상대 위치로 바꿔주고, 2) 제약조건을 통해 어떻게 변화되어야 하는지를 정의할 수 있습니다. 

 

UI 디자인 실무에서 프레임을 활용하는 이유는 다음과 같습니다.

1. UI 컴포넌트들의 상대적 위치를 쉽게 확인할 수 있어, UI 디자인의 작업 속도 및 일관성을 높임
2. 제약조건을 통해 UI 요소들을 반응형으로 만들 수 있어, 다양한 화면 사이즈에 대한 대응 효율을 높임

 

UI 컴포넌트를 생성할 때 가장 먼저 생성하는 것이 프레임입니다. UI 컴포넌트의 위계에 따라 어떤 것은 보다 상위의 컴포넌트에 포함될 수도 있고, 또 하위에 다른 컴포넌트를 포함할 수도 있습니다. 이때 프레임은 자신 안에서 새로운 좌표(x, y)를 기준으로 하기 때문에 컴포넌트들의 위치를 보다 쉽게 확인할 수 있습니다. 또한, 제약조건을 적절하게 활용한다면 다양한 화면 사이즈(360, 375, 390, 414, 428, ...) 마다 각각 디자인 시안을 만들지 않고 하나의 시안을 활용할 수 있기 때문에 작업의 효율성을 높일 수 있습니다. 

 

 

Figma에서 프레임을 활용하는 방법은 다음과 같습니다. 

• Figma에서 프레임을 생성하는 방법
• Figma에서 constraints를 설정하는 방법

 

 

UI 디자인 시 프레임의 역할에 대해 보다 정확하게 이해하고 싶다면, 아래 글이 도움이 될 수 있습니다.  

• Figma에서 그룹과 프레임의 차이
• Figma에서 constraints의 작동 방식

 

 

---

Auto Layout

자동 레이아웃(Auto Layout)은 프레임의 일종으로 이름처럼 자동으로 레이아웃(프레임)을 잡아주는 기능입니다. 자동 레이아웃을 활용하면 UI 디자인 작업을 정말 편하게 할 수 있습니다. 

 

[예시 3.1] Auto Layout 요소의 특징

 

자동 레이아웃을 제대로 활용하기 위해서는 일반 프레임과의 차이를 이해해야 합니다. 프레임에서는 제약조건이 있었다면, 자동 레이아웃에서는 제약조건이 없는 대신 Auto layout이라는 같은 이름의 속성이 존재합니다. 자동 레이아웃의 속성을 잘 활용하기 위해서는 Container/Content라는 개념과 사이즈 속성(Fixed, Hug, Fill) 개념을 먼저 알아야 합니다. 

 

우선 Container/Content는 자동 레이아웃 요소의 포함 관계를 의미합니다. 상대적으로 선택된 자동 레이아웃 프레임이 Container로 불리며, Container 안에 포함된 하위 컴포넌트(역시 자동 레이아웃 프레임일 수 있음)는 Content라 합니다. 그리고 Container의 경우 너비 또는 높이의 속성으로 Hug/Fixed 값을 가질 수 있으며, Content의 경우 너비 또는 높이의 속성으로 Fill/Fixed 값을 가질 수 있습니다. 자동 레이아웃 프레임은 부모 또는 자식의 크기가 변할 때 이 속성에 따라 자동으로 크기가 변경됩니다. 

 

 

UI 디자인 실무에서 자동 레이아웃을 활용하는 이유는 다음과 같습니다.(프레임과 비슷합니다)

1. UI 컴포넌트들의 위계에 따른 배치를 쉽게 관리할 수 있어, UI 디자인의 작업 속도 및 일관성을 높임
2. 속성을 통해 UI 요소들을 반응형으로 만들 수 있어, 다양한 화면 사이즈에 대한 대응 효율을 높임

 

UI 컴포넌트 중 텍스트 크기에 딱 맞는 버튼, 피드 형식의 콘텐츠 등의 컴포넌트는 Auto Layout을 활용할 경우 정말 쉽게 컴포넌트를 만들고, 수정할 수 있습니다. 즉, 컴포넌트 하위의 내용이 바뀜에 따라 컴포넌트의 크기를 직접 변경할 필요 없이, 프로그램 상에서 자동으로 주어진 조건에 맞게 수정(resizing)되게 됩니다.

 

 

Figma에서 자동 레이아웃을 활용하는 방법은 다음과 같습니다. 

• Figma에서 자동 레이아웃을 생성하는 방법 
• Figma에서 자동 레이아웃 속성을 설정하는 방법

 

 

---

Component

컴포넌트(component)는 반복해서 사용되는 UI 요소를 의미합니다. 즉, 반복해서 사용되는 UI 요소를 컴포넌트로 생성하고, 이를 여러 곳에서 재활용하는 것입니다. 그리고 재활용되는 컴포넌트를 인스턴스(Instance)라고 합니다. 이는 디자인 시스템의 일관성을 유지하는데 꼭 필요한 개념입니다. 

[예시 3.1] 컴포넌트(Componet)로 생성한 로고, 아이콘 및 헤더 요소

[예시 3.2] 헤더 컴포넌트의 인스턴스(Instance)

예를 들어, 앱 서비스 내 공통 하단 내비게이션 영역의 구성을 수정해야 하는 상황을 가정해 볼 수 있습니다. 공통 하단 내비게이션 영역이 컴포넌트로 구성되어 있지 않다면, 각 시안마다 해당 영역을 수정하는 작업을 진행해야만 합니다. 그리고 그 과정은 페이지 수가 많을수록 비효율적이고, 일부 페이지에서 수정이 제대로 반영되지 않을 경우 디자인 시스템의 일관성을 헤치게 됩니다.

 

반면, 공통 하단 내비게이션 영역이 컴포넌트로 잘 구성되어 있는 경우 해당 컴포넌트만 수정한다면, 그와 연결된 각 페이지 내 인스턴스들은 모두 자동으로 수정된 내용이 업데이트되는 것을 figma가 보장합니다. 따라서 수정 작업의 효율성은 물론 디자인 시스템의 일관성도 쉽게 유지할 수 있습니다. 

 

 

또한, 컴포넌트 내 속성(properties)은 컴포넌트가 가질 수(활용될 수) 있는 상태 또는 변수를 의미합니다. 즉, 상황(use-case)에 따른 컴포넌트의 알맞은 대응 방식을 사전에 정의함으로써 그 기능과 한계를 디자인 시안 내에서 효과적으로 정의하는데 활용할 수 있습니다. 

[예시 3.1] Componet와 Instance

여기서 '효과적'이란 말은 다르게 생각해 보면, 컴포넌트를 사용하지 않더라도 디자인 시안을 만드는 데에는 문제가 없다는 말이기도 합니다. 사실 규모가 작은 프로젝트의 경우에는 컴포넌트를 구성하고 관리하는 작업에 시간이 더 소요되고 비효율적인 것처럼 느껴지는 경우도 있습니다. 하지만, 프로젝트를 진행하는 과정에서 수정 사항이 발생(거의 대부분)하거나 여러 팀원들과 협업을 해야 하는 경우에는 컴포넌트를 구성하는 것이 UI/UX 기획 및 디자인 실무에서 강력한 도구가 될 수 있습니다.

 

 

UI 디자인 실무에서 컴포넌트를 활용하는 이유는 다음과 같습니다.

1. 동일한 UI 요소를 하나의 컴포넌트로 관리할 수 있어, UI 디자인의 작업 속도 및 일관성을 높임
2. 속성을 통해 UI 요소의 변수를 관리할 수 있어, 스타일의 변형을 제한하고 디자인의 일관성을 높임

 

속성은 컴포넌트를 더 강력한 디자인 도구로 만들어줍니다. 예를 들어 회원가입 시 입력받는 비밀번호 입력 폼을 컴포넌트로 구성하는 상황을 가정해 보면 이해하기 쉽습니다. 비밀번호 입력 폼은 1) 입력하기 전 기본 상태, 2) 포커스 되어 타이핑되고 있는 상태, 3) 입력 후 비밀번호가 일치되지 않은 상태, 4) 입력 후 비밀번호가 일치하는 상태처럼 다양한 상태를 가질 수 있습니다. 이때 각 상태를 별도의 컴포넌트로 만들 수도 있지만, 하나의 컴포넌트를 만들고 여기에 4가지 속성을 부여할 수도 있습니다. 

 

 

Figma에서 컴포넌트를 활용하는 방법은 다음과 같습니다. 

• Figma에서 컴포넌트를 생성하는 방법
• Figma에서 컴포넌트의 속성을 설정하는 방법
• Figma에서 컴포넌트 변형 속성을 활용하는 방법

 

UI 디자인 실무에서 컴포넌트를 구성하고 관리하는 방법론이 궁금하다면, 아래 글이 도움이 될 수 있습니다.

• Atomic Design Pattern과 UI 디자인 실무

 

 

이처럼 UI 디자인 실무에서 Figma의 컴포넌트와 속성을 잘 활용하면, 작업의 효율성 및 디자인 시스템의 일관성을 높이는 데 크게 도움받을 수 있습니다.