프로덕트 디자이너가 알아두면 좋을 개발 상식 04. Figma에서 UX/UI 디자이너가 개발자와 소통 잘하는 법 (컴포넌트 네이밍)

캘린더 뷰, 회원가입 기능 클론 코딩중이다.

그러므로 오늘은 프로덕트 디자이너로 서비스 제작에 참여했을 때 알면 좋을만한 것들을 정리해보겠다.
프론트엔드 공부를 시작하면서 무작정 네이밍 규칙을 이해하지 못한 채 따라하려 했던 지난 날들이 아까웠다. 🥲

내 목표는 개발 상식을 익혀서 협업에서 좋은 역량을 펼치는 것이므로, 하나씩 블로그에 정리하고 있다.

나와 같은 사람들이 있다면, 이 글이 도움이 될 것이다. 🤗

 

Figma에서 UX/UI 디자이너가 개발자와 소통 잘하는 법

Figma는 디자인과 개발 간 협업을 쉽게 만들어 주는 강력한 도구다. 특히 컴포넌트와 디자인 시스템을 일관되게 관리할 수 있어서 디자인 의도를 명확히 전달할 수 있다. 하지만 효과적인 협업을 위해 Figma를 사용하는 방법과 몇 가지 중요한 소통 팁을 알아두면 좋다. 이 글에서는 UX/UI 디자이너가 Figma에서 작업하며 개발자와 소통을 잘할 수 있는 방법을 소개한다.

---

1.  디자인 시스템에서 텍스트 스타일과 계층 구조 정리하기

Figma에서는 텍스트 스타일을 h1, h2, h3 등으로 정의하여 HTML과 유사한 위계 구조를 반영할 수 있다. 이를 통해 개발자에게 디자인 의도를 명확히 전달하고, HTML의 계층 구조와 연결하여 코드 작성 시 오류를 줄일 수 있다.

• 일관된 텍스트 스타일: Figma의 텍스트 스타일에 h1, h2 등 HTML과 같은 네이밍을 적용하면, 개발자가 디자인과 코드 구조를 일관성 있게 유지하기 쉽다. 각 텍스트 스타일을 어디에 사용할지 미리 정의해 놓으면, 모든 화면에서 일관성 있는 사용자 경험을 구현할 수 있다.
• 다양한 화면 크기 지원: 반응형 디자인을 고려하여 h1, h2 등의 텍스트 스타일을 정의해 두면, 다양한 디바이스에서 폰트 크기를 쉽게 조정할 수 있다. 예를 들어, h1은 큰 화면에서 더 크게, 작은 화면에서는 적절하게 줄어들 수 있게 한다.

---

2.  컴포넌트 네이밍과 구조화로 명확한 의도 전달

디자인 시스템에서 컴포넌트를 만들 때는 이름을 직관적으로 정리해, 컴포넌트의 역할과 상태를 명확히 전달할 수 있도록 한다.

• 컴포넌트 네이밍: PrimaryButton, SecondaryButton과 같이 역할에 따라 구분된 이름을 사용하면 개발자가 버튼의 역할을 쉽게 이해할 수 있다. 상태에 따른 구분도 중요하다. 예를 들어, 비활성화된 버튼은 PrimaryButtonDisabled로 명명하여 상태를 명확히 알릴 수 있다.
• 상태와 변형 정의: 버튼이나 카드 등의 컴포넌트는 여러 상태를 가질 수 있다. ButtonHover, ButtonActive와 같이 상태에 따라 컴포넌트를 구분해 두면, 개발자가 디자인의 의도를 이해하고 구현하기 쉬워진다.

자 여기서, 가장 중요한 Android와 iOS 디자인 시스템을 바탕으로 한 네이밍 규칙을 알아보자!👀

 

디자이너와 개발자가 함께 웹 또는 모바일 서비스를 출시할 때 컴포넌트 네이밍은 협업의 핵심 요소다. 명확하고 일관된 네이밍 규칙을 정해두면, 코드의 가독성이 높아지고 디자인-개발 간의 원활한 소통이 가능해진다. 특히, Android의 Material Design과 iOS의 Human Interface Guidelines(HIG)을 참고해 컴포넌트 네이밍을 정리하면, 각 플랫폼에 맞는 직관적이고 일관된 사용자 경험을 구현할 수 있다.

1.  Android(Material Design) 디자인 시스템을 따른 컴포넌트 네이밍

Material Design은 Google에서 제안한 디자인 가이드라인으로, Android 플랫폼에서 일관된 사용자 경험을 구현하기 위해 사용된다. 이 가이드라인은 각 컴포넌트의 역할과 상태를 명확히 정의하므로, 컴포넌트 네이밍에 중요한 참고 자료가 된다.

 

1. Button 컴포넌트
Material Design에서 버튼은 주요 기능을 수행하므로, 역할과 스타일에 따라 구체적으로 네이밍하는 것이 좋다.

• PrimaryButton, SecondaryButton과 같이 버튼의 역할을 구분하고, PrimaryButtonDisabled, SecondaryButtonPressed처럼 상태별로 명시해 개발자가 쉽게 파악할 수 있도록 한다.

<button class="PrimaryButton">확인</button>
<button class="SecondaryButton">취소</button>

 

2. Card 컴포넌트
카드는 콘텐츠를 정리해 보여줄 때 유용한 컴포넌트로, CardProduct, CardProfile, CardArticle처럼 용도에 따라 이름을 지정해 카드의 목적이 명확히 드러나도록 한다.

<div class="CardProduct">상품 정보</div>
<div class="CardProfile">프로필 정보</div>

 

3. TextField 컴포넌트
TextField는 데이터를 입력받는 필드로, TextFieldSearch, TextFieldEmail처럼 사용 목적에 따라 명명한다. 상태에 따라 TextFieldEmailError와 같은 방식으로 구분해 입력 필드의 상태를 시각적으로 나타내도록 한다.

<input class="TextFieldSearch" placeholder="검색어 입력">
<input class="TextFieldEmail TextFieldEmailError" placeholder="이메일 입력">

 

4. Modal/Dialog 컴포넌트
모달은 중요한 정보를 전달하거나 사용자의 확인을 필요로 할 때 주로 사용되므로, DialogConfirmation, DialogAlert와 같이 구체적인 역할을 네이밍에 반영한다. 이렇게 하면 모달의 목적이 명확히 드러난다.

<div class="DialogConfirmation">정말로 삭제하시겠습니까?</div>
<div class="DialogError">오류가 발생했습니다.</div>

 

5. Icon 컴포넌트
아이콘은 시각적 정보로서 기능을 쉽게 인식할 수 있도록 돕는다. IconSearch, IconNotification, IconUser와 같은 기능 기반 네이밍을 사용하고, IconSearchSmall, IconUserPrimary처럼 크기와 상태에 따른 구분도 추가할 수 있다.

<i class="IconSearch"></i>
<i class="IconUser IconUserPrimary"></i>

 

Material Design의 가이드를 따른 네이밍은 각 컴포넌트의 역할을 한눈에 파악할 수 있어 협업에 유리하다.

추천 자료:

• Material Design Guide

2.  iOS(Human Interface Guidelines) 디자인 시스템을 따른 컴포넌트 네이밍

애플의 **Human Interface Guidelines(HIG)**는 iOS 디자인의 일관성을 유지하고, 사용자가 쉽게 이해할 수 있는 UX를 제공하기 위한 원칙을 제시한다. 이 가이드라인은 iOS의 직관적인 디자인 철학을 반영한 네이밍을 가능하게 해준다.

네이밍 예시

1. Button 컴포넌트
iOS에서는 버튼의 스타일에 따라 PrimaryButton, SecondaryButton을 사용하며, 상태별로 PrimaryButtonDisabled, SecondaryButtonHighlighted처럼 구분하여 각 상태의 역할을 쉽게 파악할 수 있다.

<button class="PrimaryButton">확인</button>
<button class="SecondaryButton">취소</button>

 

2. Navigation Bar 및 Tab Bar
상단 네비게이션 바(Navigation Bar)와 하단 탭 바(Tab Bar)는 화면을 구분하고 각 기능을 명확히 나타내기 위해 NavBarTitle, TabBarHome, TabBarSettings와 같이 네이밍하여 각 요소의 목적을 명확히 한다.

<div class="NavBarTitle">홈</div>
<div class="TabBarHome">홈</div>
<div class="TabBarSettings">설정</div>

 

3. Table View 및 Collection View Cell
콘텐츠를 정리하는 Table View와 Collection View 셀은 ProfileCell, ProductCell과 같이 용도에 따라 이름을 붙이고, ProfileCellSelected와 같이 상태에 따라 구분하여 각 셀의 의미를 명확히 한다.

<div class="ProfileCell">프로필 정보</div>
<div class="ProductCell">상품 정보</div>

 

4. Modal 및 Alert Dialog
중요한 정보를 전달할 때 사용하는 모달은 ModalLogin, AlertDialogError와 같이 역할과 상태를 구체적으로 표현해, 모달의 목적을 직관적으로 알 수 있도록 한다.

<div class="ModalLogin">로그인 창</div>
<div class="AlertDialogError">오류 발생</div>

 

 

5. Icon 컴포넌트
아이콘의 기능을 명확히 하기 위해 IconSearch, IconProfile로 기능을 나타내고, 크기나 강조 상태를 표현할 때는 IconSearchSmall, IconProfileHighlighted와 같이 이름을 붙인다.

<i class="IconSearch"></i>
<i class="IconProfile IconProfileHighlighted"></i>

 

애플의 HIG를 기반으로 한 네이밍은 iOS에서 직관적이고 일관된 사용자 경험을 제공할 수 있도록 도와준다.

추천 자료:

• Apple Human Interface Guidelines

---

3.  Auto Layout을 활용한 반응형 컴포넌트 구성

Figma의 Auto Layout 기능을 활용하면 반응형 디자인을 보다 쉽게 구현할 수 있다. Auto Layout을 통해 요소 간 간격이나 크기를 유동적으로 조정할 수 있어, 다양한 화면 크기에서 디자인이 잘 어우러지도록 할 수 있다.

• 컨테이너와 콘텐츠 간 비율 설정: Auto Layout을 활용하여 컨테이너의 크기가 변할 때 내부 요소들도 비율에 맞춰 조정되도록 설정해 두면, 개발자가 반응형 디자인을 구현할 때 도움이 된다.
• 패딩과 간격 설정: 요소 간의 간격과 패딩을 Auto Layout으로 미리 지정해 두면, 개발자는 정확한 간격 정보를 코드에 반영할 수 있어 디자인을 그대로 구현할 수 있다.

---

4.  디자인 핸드오프에서 명확한 설명 제공

디자인 핸드오프는 개발자에게 디자인 의도를 전달하는 중요한 단계다. 이때 컴포넌트의 사용법과 의도를 상세히 설명하면, 개발자가 디자인의 목적을 정확히 이해하고 구현할 수 있다.

• 명확한 주석 추가: Figma의 주석 기능을 활용해 특정 컴포넌트에 설명을 추가하면 좋다. 예를 들어, 버튼의 경우 클릭했을 때 어떤 동작이 일어나는지, 특정 아이콘이 어떤 기능을 나타내는지 설명해 주면 개발자에게 큰 도움이 된다.
• 사용 예시와 조건 설명: 복잡한 컴포넌트나 상태가 많은 경우, 각 상태의 사용 예시와 조건을 설명해 주면 개발자가 이해하기 쉽다. 예를 들어, ModalWindow가 어느 상황에서 나타나는지, 비활성화 상태는 언제 사용되는지 등을 문서화하면 좋다.

---

5.  버전 관리와 변경 사항 기록

디자인이 수정되거나 새로운 버전이 나올 때는 버전 관리와 변경 사항 기록이 필수다. Figma에서는 파일에 버전을 저장하고 변경 내용을 기록할 수 있어, 변경 사항을 개발자와 쉽게 공유할 수 있다.

• 버전 히스토리 활용: Figma의 버전 히스토리 기능을 통해 각 버전을 저장해 두면, 디자인 변경 사항을 쉽게 추적할 수 있다. 개발자는 변경된 부분을 확인하고, 필요한 업데이트를 코드에 반영할 수 있다.
• 변경 사항 기록 문서화: 중요한 변경 사항은 별도의 문서나 주석에 기록해 두면 개발자가 변경 이유와 적용 방법을 이해하기 쉽다. 예를 들어 버튼의 스타일이 변경되었다면, 변경 이유와 새로운 스타일 규칙을 상세히 설명해 주면 좋다.

---

6.  Figma Inspect 모드를 활용해 코드 스펙 전달

Figma의 Inspect 모드는 디자인 요소의 코드 정보를 자동으로 추출해 개발자에게 전달해 준다. 이를 통해 CSS 값이나 크기, 간격 정보를 제공할 수 있어, 개발자가 디자인을 코드로 구현하는 데 도움을 준다.

• CSS 속성 제공: Inspect 모드에서 텍스트 스타일, 색상, 간격 등의 CSS 속성을 확인할 수 있어 개발자가 디자인을 그대로 재현할 수 있다. 특히 컬러 코드나 폰트 크기 같은 세부 정보가 자동으로 제공돼 편리하다.
• 이미지 및 아이콘 리소스 제공: Inspect 모드에서 각 이미지와 아이콘을 필요한 포맷으로 내보낼 수 있어 개발자가 쉽게 리소스를 가져갈 수 있다. 이렇게 하면 별도로 파일을 전달하는 번거로움을 줄일 수 있다.