비전공자를 위한 UI 디자인 기초 (4): 디자인 시스템, 반응형 UI

디자인 시스템, 반응형 UI로 일관된 화면을 만드는 법. 디자인 토큰·컴포넌트·레이아웃 그리드·브레이크포인트 개념을 한 번에 정리했어요.

코드잇

Nov 27, 2025

Contents

디자인 시스템이란?디자인 시스템 구성 요소 1. 디자인 토큰 2. 컴포넌트/패턴 3. 가이드라인&원칙 반응형 UI/디자인이란?1. 반응형 레이아웃 그리드 2. 브레이크포인트 만들기

UI 디자인 공부를 시작한 비전공자라면 반드시 알아야 할 지식 4편!

지난 시간에는 위계, 타이포그래피, 폰트에 대해 배웠죠. 오늘은 UI 디자인 기초의 마지막 단계인 디자인 시스템과 UI 컴포넌트에 대해 알려드릴게요.

디자인 시스템은 무엇이고, UI 컴포넌트는 어떤 역할을 하는지 함께 알아 보아요.

디자인 시스템이란?

내 제품/서비스에 사용되는 디자인 가이드라인을 이야기 해요.

회사가 새로운 제품을 출시하거나 담당 디자이너가 바뀔 때처럼, 다양한 상황 속에서 일관된 디자인을 적용 하기 위해 만드는 거죠. 글 문서로 남겨두기, 디자인 파일 모아두기, 플랫폼 이용하기 등 명확한 정답이 있기 보다는 각 회사마다 정리하는 방법이 조금씩 다르다는 게 특징이에요

아래는 세 유명 디자인 그룹에서 정의하고 있는 디자인 시스템이에요.

재사용 가능한 컴포넌트와 패턴을 사용해, 대규모 디자인을 관리하기 위한 완전한 기준 세트다 (닐슨 노먼 그룹)

여러 제품과 경험의 *룩앤필을 일관되게 유지해 주는 블록과 규칙의 집합 (피그마)

*룩앤필: 사용자가 브랜드에 느끼는 감정과 이미지

재사용 가능한 컴포넌트, 디자인 원칙, 가이드라인을 포함해 회사의 디지털 제품 전반에서 일관성과 효율을 만드는 시스템 (Interaction Design Foundation)

디자인 시스템 구성 요소

앞서 언급한 것처럼 회사에 따라 다르기는 하지만, 일반적으로 다음 3가지로 구성돼요.

1. 디자인 토큰

디자인 토큰이란 색, 폰트, 간격 등에 이름을 붙여 관리하는 방식이에요. 예를 들어 회사의 메인 컬러가 #0A84FF 이라고 했을 때, 이걸 ‘color-primary-50’ 이라고 이름을 붙이는 거죠.

토큰은 왜 만드는 걸까?

🗣

디자이너와 개발자 사이에 공용 언어를 만들기 위해

만약 컬러 코드가 #0A84FF 처럼 그대로 적혀 있다면, 어떤 색인지 한 눈에 파악하기 어려워요. 소통을 하기에는 더욱 어렵고요(ex. 이 버튼에는 공에이팔사에프에프를 쓰면 어때요?). 그래서 이 코드를 color-primary-blue 처럼 이름 붙여 두면 누구나 “아, 이 부분에서는 우리 회사의 메인 컬러 중 파란색을 쓰고 있구나” 하고 바로 이해할 수 있어요.

📈

업무 효율을 높이기 위해

최근 내 제품을 리브랜딩 해서 컬러를 바꿔야 된다고 가정해 볼게요. 만약 토큰 없이 UI를 만들었다면 컬러를 바꾸기 위해 프로그램에 입력되어 있는 모든 코드를 일일이 찾아서 바꿔줘야 해요. 하지만 토큰이 있다면 그 토큰 값만 바꿔줘도 모든 코드에 한 번에 적용할 수 있어요.

토큰 예시

색상 토큰

#0A84FF → color-primary-blue (브랜드 메인 버튼 색)

#FFFFFF → color-bg(기본 배경색)

#111827 → color-text-default(기본 텍스트 색)

타이포 토큰

Pretendard 24px Bold → font-heading (제목)

Pretendard 16px Regular → font-body (본문)

간격 토큰

4px → space-1

8px → space-2

16px → space-4

2. 컴포넌트/패턴

컴포넌트란 자주 쓰이는 UI 기능을 쉽게 사용하게 해주는 코드의 묶음이에요. 예를 들어 버튼, 텍스트 필드, 탭바, 캐러셀 등이 있죠.

컴포넌트는 왜 만드는 걸까?

✅

우리가 평소에 보는 화면들은 보기에 간단하지만, 하나의 기능이 작동하기 위해서는 많은 코드를 정의해 주어야 해요. 예를 들어 버튼 하나를 만들기 위해서도 아래 7개의 코드를 모두 정의해야 하죠.

속성, 크기, 타입, 상태, 아이콘 유무, 규칙, 반응형 규칙

버튼을 추가 할 때마다 이 작업을 반복하는 건 비효율적이잖아요? 따라서 어차피 자주 쓰이는 기능이라면 저 7가지 코드를 클릭 한 번에 입력해 줄 수 있는 컴포넌트를 만드는 거예요.

3. 가이드라인&원칙

마지막으로 토큰과 컴포넌트를 포함하여 전반적인 UI를 언제·어떻게 쓸지에 대해 적어줘요. 다음과 같은 예시들이 있어요.

버튼은 언제 Primary로 쓸지, Secondary는 어떤 상황인지

카드 안에 텍스트는 몇 줄까지 허용하는지

모바일에서는 이 컴포넌트를 숨길지, 접을지, 스크롤로 보이게 할지 등

이처럼 디자인 시스템은 크게 토큰 + 컴포넌트 + 가이드라인 세 가지로 구성돼요. 물론 작은 규모의 제품/서비스를 운영하고 있다면 필요하지 않을 수 있지만, 큰 규모 혹은 큰 규모가 예상되는 기업이라면 반드시 정립해 두는 것이 필요해요.

반응형 UI/디자인이란?

같은 페이지를 모바일·태블릿·데스크탑 등 어느 기기에서 보든, 화면에 맞게 자동으로 조정되도록 해주는 디자인 방식이에요. 아래 이미지처럼 한 번쯤은 비율이 깨진 페이지를 본 적이 있을 텐데, 이게 바로 반응형 UI가 제대로 설계되지 않았기 때문이죠.

1. 반응형 레이아웃 그리드

반응형 UI를 설계하는 데에는 다양한 구조가 있겠지만, 오늘은 가장 많이 사용되는 구조 중 하나인 구글의 반응형 레이아웃 그리드를 소개해 드릴게요. 이 구조의 핵심 요소로는 ①컬럼 ②거터 ③마진이 있는데요, 지금부터 이 3가지 요소를 차근차근 알아보아요.

컬럼 (Column)

우선 반응형 UI를 잘 설계하기 위해서는 화면 전체를 한 덩어리로 보지 말고 세로로 나눈 영역, 즉 컬럼(열) 단위로 보는 것이 필요해요. 이 영역을 기준으로 각 기기 별 컬럼 수를 정해 내용을 채우는 거죠.

예를 들어

모바일(세로): 4컬럼

태블릿: 8컬럼

데스크탑: 12컬럼

이렇게 정리해 두면 카드를 얼마나 넓게 쓸지, 텍스트 영역은 몇 칸을 차지할지를 컬럼 수로 깔끔하게 표현할 수 있어요!

거터 (Gutter)

각 컬럼 사이의 공간을 이야기해요. 거터 역시 기기에 따라 바뀌게 되며 모바일에서는 16dp를 태블릿에서 24dp를 사용하는 식이죠.

*dp: 디스플레이의 한 단위로, 디바이스의 크기에 의존하지 않은 픽셀을 얘기해요

마진 (Margin)

단어 그대로 콘텐츠와 화면의 왼쪽/오른쪽 가장자리 공간, 즉 여백을 얘기해요. 보통 큰 화면일수록 큰 마진을 사용해요.

2. 브레이크포인트 만들기

위 요소를 모두 이해했다면 이제 각 기기 화면 폭에 따라 적용하고 싶은 규칙, 브레이크포인트를 정의해 보세요.

💡

브레이크포인트 예시

모바일

4컬럼 그리드
카드: 한 줄에 1개(4컬럼 전부 사용)

태블릿

8컬럼 그리드
카드: 한 줄에 2개(각 4컬럼씩 사용)

데스크탑

12컬럼 그리드
카드: 한 줄에 3개(각 4컬럼씩 사용)

이런 식으로 기본 구조를 정해둔 다음, 기기 크기에 따라 컬럼 개수를 바꾸는 방식으로 반응형 레이아웃을 설계해 가는 거죠.

디자인 시스템과 반응형 UI, 핵심만 빠르게 정리해 볼까요?

✅

디자인 시스템 3줄 요약

디자인 시스템은 내 제품/서비스에 사용되는 디자인 가이드라인을 이야기해요

디자인 토큰, 컴포넌트, 가이드 라인으로 구성되어 있어요

기업이 성장하는 과정에서 반드시 갖추어야 할 시스템이에요

✅

반응형 UI 3줄 요약

어떤 기기에서 보든 화면을 자동으로 조정해 주는 웹 디자인 설계예요

기본 설계 구조로는 반응형 레이아웃 그리드의 컬럼, 거터, 마진 세 요소가 있어요

세 요소를 기반으로 기기별 브레이크포인트를 만들어 반응형 UI를 설계할 수 있어요

이렇게 총 4편에 걸쳐 UI 디자인에 필요한 기초 지식을 알아보았어요. 다만 최대한 가볍게, 핵심만 압축해서 다루다 보니 깊게 파고들지 못한 부분들도 꽤 많아요. 예를 들어 아래와 같은 내용들이죠.

Figma에서 컴포넌트/토큰을 세팅하고 관리하는 법

디자이너·개발자 간 디자인 시스템 협업 방식(핸드오프, 버전 관리 등)

다크 모드, 브랜드별 테마처럼 토큰을 활용한 테마 시스템 설계

버튼·폼·카드 외에, 복잡한 컴포넌트(탭, 모달, 테이블, 대시보드 UI 등) 설계

접근성과 실제 사용성 테스트을 포함한 UI 검증 과정

만약 위 내용들이 궁금하다면, 아래 강의에서 UI 디자인을 제대로 배워보세요

A. 4주 만에 디자인 역량 완성하기

B. 디자이너로 취업 성공하기

4주 단기 과정이 궁금하다면?

이런 역량을 키울 수 있어요

✅

여백·그리드·명도·폰트·아이콘·IA 등 UI 원칙을 배워요

Figma, Photoshop/레오나르도 AI/챗GPT 등 도구 사용법을 배워요

38개의 실습으로 이력서, 블로그, 메일, 쇼핑몰, 대시보드, 랜딩 페이지 등을 직접 만들어 볼 수 있어요

3개의 프로젝트를 통해 디자인 프로젝트를 완성해요

획득 스킬: UI 기본기·디자인 사고력, Figma, 챗GPT, 레오나르도 AI, Photoshop

이런 혜택을 얻을 수 있어요

한 달에 한 번씩 현직자 라이브 특강

공식적으로 인정하는 NCS 수료증 발급

💬

고민을 함께 나누는 수강생 전용 커뮤니티

강의 요약, 학습 보조 자료 목표 달성 자료집 제공

복습으로 완성하는 실력 2개월 추가 수강 기간

👥

완주할 수 있게 도와주는 1:1 밀착 학습 관리

디자이너 취업 과정이 궁금하다면?

이런 역량을 키울 수 있어요

💡

데이터 기반 문제 해결력

실제 기업 데이터를 분석하며, 사용자 문제를 정의하고 개선 방안을 설계합니다.

💡

UX/UI 기본기

정보 구조와 시각적 위계를 이해하고, Figma로 완성도 높은 UI를 구현합니다.

💡

AI로 완성하는 실무 디자인

아이디어, 리서치, 디자인을 AI와 함께 수행하며 생산성을 극대화합니다.

💡

협업으로 완성하는 팀 프로젝트

기획부터 디자인까지 팀으로 수행하고, 현직자 피드백을 통해 실무 감각을 기릅니다.

이런 혜택을 얻을 수 있어요

👩‍💼

100% 인턴십 제공과 1:1 취업 지원까지 진행돼요!

수료생 전원에게 인턴십을 100% 제공해 드려요.

이력서 작성부터 면접 대비까지 현직자 멘토의 1:1 코칭이 제공돼요.

🖥️

수강료 0원에 학습 내내 맥북 무상 지원까지!

국비지원으로 전액 무료로 학습할 수 있어요. (올해까지만!)

학습 내내 맥북이 무상 지원되니, 최적의 환경으로 공부할 수 있어요.