[Figma : Design System #4] 디자인 패턴으로 일관성 있는 UI 구축하기 - Patterns 작업하는 법

 

디자인 시스템을 구성하다 보면 어느 순간 질문이 생긴다.
“버튼도 만들고, 카드도 정리했는데... 이제 뭘 더 해야 하지?”

그때 등장하는 개념이 바로 Patterns(패턴) 이다.
패턴은 단순한 컴포넌트가 아니라, 실제 화면을 구성하는 '반복 가능한 구조 조합' 이다.
이 글에서는 패턴이 뭔지, 왜 중요한지, Figma에서 어떻게 구성하는지를 정리해본다.

목차

1	Figma : Design System #1 - 디자인 시스템 구축하는 이유, 구축 단계를 알아보자	✔️ 완료
2	Figma : Design System #2 - Foundation 구축, 시스템의 뿌리를 다지자	✔️ 완료
3	Figma : Design System #3 - UI 컴포넌트 설계, 재사용 가능한 구조 만들기	✔️ 완료
4	Figma : Design System #4 - 패턴과 사용자 흐름 정의하기	✔️ 완료
5	Figma : Design System #5 - 실무 적용: Figma → 코드까지 연결하기	📌 예정

Patterns 란?

 

패턴은 여러 컴포넌트를 조합해 만든 UI 블록 단위입니다.
Atomic Design 기준으로 보면 Organisms ~ Templates 사이에 위치합니다.

예를 들어:

• 로그인 폼 (input + 버튼 조합)
• 카드 리스트 섹션 (카드 컴포넌트 + 그리드 레이아웃)
• 내비게이션 영역 (로고 + 메뉴 + 유틸 아이콘)

👉 각각은 단일 컴포넌트가 아니고, 여러 요소가 반복적으로 조합되어 나타나는 구조입니다.
👉 실제 페이지를 구성하는 ‘문장’ 역할을 합니다. (컴포넌트는 단어)

 

---

 

왜 패턴을 따로 관리해야 할까?

컴포넌트만 정리하면 디자인 시스템이 완성된 것 같지만,
막상 실무에선 컴포넌트가 어떻게 조합되어 사용되는지가 더 중요합니다.

이유는 세 가지:

1. 화면 단위의 통일감 확보
   → 동일한 구조의 리스트 섹션이 프로젝트마다 다르게 사용되면 혼란
2. 디자이너/개발자 커뮤니케이션 개선
   → “여기 로그인 패턴 적용해주세요”라고 말할 수 있어야 함
3. 빠른 화면 스케치 가능
   → 페이지를 만들 때 매번 버튼 + input 조합할 필요 없이 패턴 하나로 끝

 

---

 

디자인 패턴 작업 단계는?

디자인 시스템에서의 패턴(Patterns)은 단순한 컴포넌트가 아니라, 사용자 경험 흐름 전체를 아우르는 조합된 UI 해결책입니다.

 

1. 디자인 패턴의 목적 정의

이 패턴은 어떤 문제를 해결하는가?

• 패턴은 반복적으로 발생하는 문제를 해결하는 구조
  👉 UI의 효율성, 일관성, 사용자 경험(UX)을 향상
  
  예를 들어,
  • 필터 + 리스트 구조
  • 검색창 + 결과 테이블
  • 로그인 → 대시보드 진입 흐름
    

2. 컴포넌트와 UI 요소 조합

• 컴포넌트는 디자인 시스템의 구성 요소들입니다. 어떤 UI 요소들을, 어떤 규칙으로 조합할 것인지 정의
  
  예를 들어,
  • 카드 + 버튼 →  카드 기반의 알림 UI
  • 탭 + 드롭다운 + 버튼 → 탭 네비게이션

3. 사용자 흐름(User Flow) 설계

• UI가 어떻게 사용자 흐름을 유도할 것인가?
  
  예를 들어,
  • 회원가입 단계: 필드 입력 → 인증번호 → 완료
  • 검색 → 결과 → 상세 진입 흐름

👉   어떤 UI 요소들이 어떤 순서로 배치되어야 사용자가 직관적으로 이해하고 행동할 수 있는지를 정의합니다.

4. 반응형 디자인 고려

• 모바일, 태블릿, 데스크탑에서 어떻게 달라질지 정의
• 레이아웃 변화, 콘텐츠 축소/확장, 숨김 처리 등 포함
  
  예를 들어,
  • 모바일에서는 플로팅 버튼으로 축소
  • 데스크탑에서는 좌우 정렬/ 네비게이션 바의 배치 등

👉  반응형 디자인을 위해 그리드 시스템이나 플렉스박스(Flexbox), CSS 미디어 쿼리를 사용하여 다양한 화면 크기에 맞는 UI를 설계합니다.

5. 접근성(Accessibility) 고려

• 모든 사용자가 사용할 수 있도록 설계
• 고려 요소:
  • 키보드 접근성
  • 색상 대비 기준 충족
  • 스크린 리더 지원

👉  WCAG 가이드라인 준수를 기본으로 함

참고할 만한 링크

1. W3C 접근성 기준 개요 :: W3C WAI 공식 사이트

• WCAG의 공식 문서와 다양한 리소스를 제공합니다.

W3C 접근성 기준 개요

 

2. 웹 콘텐츠 접근성 지침 이해하기 :: MDN Web Docs

• WCAG의 각 기준을 실용적으로 설명하며, 웹 개발자와 디자이너를 위한 가이드입니다.

웹 컨텐츠 접근성 지침 이해하기 - 접근성 | MDN

 

6. 패턴 문서화

• 아래 항목을 포함한 명확한 문서 구성
  • 패턴 이름과 목적
  • 사용 가능한 상황 (Context)
  • 포함된 컴포넌트
  • 반응형 동작 방식
  • 접근성 주의사항
  • 예시 이미지 또는 흐름도

👉 팀 내에서 재사용될 수 있도록 문서화 필수

 

Figma에서 Patterns 작업하는 법

①  컴포넌트 조합으로 구성하기

• 이미 만든 컴포넌트를 조합해서 하나의 Frame으로 구성
• 네이밍은 명확하게:
  Pattern/LoginBlock, Pattern/ListSection, Pattern/HeaderWithNav

②  Auto layout 적극 활용

• 정렬/간격 기준은 시스템 전반에서 통일
• padding, spacing, alignment 일관성 유지
• grid system 또는 spacing scale 사용하면 더 좋음

③  Variants로 패턴 분기 만들기 (선택)

• 예: 리스트 패턴 (이미지 있음 / 없음)
• 컴포넌트 상태 전환처럼, 패턴도 상태를 만들 수 있음

④  Documentation 함께 정리

• 각 패턴 옆에 주석 frame을 두고 정보 정리
  • 구성 요소
  • 사용 위치
  • 예외 처리 기준
• Figma의 description 필드나 FigJam 링크로 설명 연결도 가능

 

단계 / 핵심 / 예시

1단계	목적 정의	검색 → 결과 UI
2단계	컴포넌트 조합	카드 + 버튼
3단계	사용자 흐름	회원가입 플로우
4단계	반응형 처리	모바일 숨김처리
5단계	접근성	키보드 탐색 가능
6단계	문서화	패턴 가이드 제작

 

디자인 패턴 예시

1. 카드(Card) 패턴

• 목적: 여러 정보 항목을 시각적으로 나누기 위해 카드 형태로 배치
• 구성 요소: 제목, 설명, 이미지, 버튼
• 예시: 상품 목록 페이지에서 각 상품을 카드로 표시하여 직관적인 정보 제공

상품 목록 카드 예시: 각 상품이 독립된 카드 형태로 나열되어 사용자가 한 눈에 정보를 파악할 수 있습니다.

---

2. 탭(Tabs) 패턴

• 목적: 여러 카테고리나 페이지를 한 화면에서 전환할 수 있도록 탭을 사용
• 구성 요소: 탭 버튼, 콘텐츠 영역
• 예시: 대시보드에서 '홈', '통계', '설정' 탭을 클릭하여 다른 정보를 표시

대시보드 탭 예시: 탭을 클릭하면 관련 콘텐츠가 아래에 표시되며, 사용자에게 구분된 정보를 제공합니다.

---

3. 폼(Form) 패턴

• 목적: 사용자가 데이터를 입력할 수 있도록 폼을 설계
• 구성 요소: 텍스트 입력 필드, 체크박스, 라디오 버튼 등
• 예시: 로그인 화면에서 아이디와 비밀번호를 입력받는 폼

로그인 폼 예시: 두 개의 텍스트 필드와 로그인 버튼으로 구성되어 사용자가 쉽게 정보를 입력하고 인증을 받을 수 있도록 돕습니다.

---

4. 모달(Modal) 패턴

• 목적: 사용자의 주의를 특정 작업에 집중시키고 선택을 유도
• 구성 요소: 제목, 메시지, 버튼 (확인, 취소 등)
• 예시: 상품을 삭제할 때 "정말 삭제하시겠습니까?"라는 메시지를 표시하는 모달 창

삭제 확인 모달 예시: 사용자가 의도하지 않은 삭제를 방지하기 위해 중요 작업을 모달로 확인하게 유도합니다.

---

5. 네비게이션(Navigation) 패턴

• 목적: 페이지 간 전환을 돕는 네비게이션 패턴
• 구성 요소: 네비게이션 바, 사이드바, 드롭다운 메뉴
• 예시: 상단 네비게이션 바나 사이드바를 통해 홈, 카테고리, 검색, 프로필 페이지로 이동

네비게이션 바 예시: 사이트 내 여러 페이지를 쉽게 탐색할 수 있도록 돕는 주요 UI 요소입니다.

---

 

실무 팁

디자인 패턴은 UI를 표준화하고, 반복 가능한 해결책을 제공하며, 팀원 간의 협업을 원활하게 만드는 중요한 요소입니다.

• 복잡한 페이지를 만들 땐 패턴 조합도 먼저 설계하라
  → 각 섹션을 pattern으로 나눠서 정의
• 컴포넌트는 재활용, 패턴은 흐름 설계
  → 버튼 하나하나보단 이 버튼이 어떤 레이아웃 안에 들어가는지가 중요
• 패턴은 기획안 리뷰 단계에서 커뮤니케이션 도구로 강력하다
  → “이 화면은 이런 패턴 3개로 구성되어 있어요”라고 설명 가능

 

---

 

 

 

감좋코 블로그는 디자인 시스템을 직접 설계하고 사용하는 실무 디자이너/프론트엔드 관점에서 “왜, 어떻게, 어디까지?”를 고민합니다.