모바일 UI 디자인 시스템과 프론트엔드에서 디자인 시스템 적용하기

😌

요즘 휴대폰의 화면비율은 정말 다양하다.

미니 사이즈의 선호도가 줄고 휴대폰의 평균 사이즈가 커졌어도 작은 기종을 고려하지 않을 수 없다.

어떤 기기는 세로 길이가 667px 정도로 작고, 어떤 기기는 882px 이상으로 꽤 크다.

그래서 디자인 시안을 바탕으로 프론트엔드 개발을 하다 보면 이런 고민이 생긴다.

UI 요소 크기는 작은 화면 기준으로 해야 할까? 큰 화면 기준으로 해야 할까?
작은 사이즈에서는 페이지 디자인이 "예뻐"보이는데 큰 사이즈에서는 적절하지 않아보인다면.. 어떻게 해야할까?

 

고민을 바탕으로

• 모바일 UI를 디자이너 관점에서 어떻게 설계하는지
• 그리고 프론트엔드에서 디자인 시스템을 어떻게 구현하는지

를 가볍게 정리해보았다.

---

 

1. 모바일 UI는 어떤 화면 기준으로 디자인할까?

웹 디자인을 배워보질 않았으니 쳇지피티에게 물어본 결과

결론부터 말하면 보통 작은 화면 기준으로 설계한다고 한다.

그 이유는

작은 화면에서 UI가 깨지면 복구가 거의 불가능하고

큰 화면은 여백이나 레이아웃 확장으로 대응 가능하기 때문이다.

 

✅ 고정되는 UI

버튼 높이, 터치 영역, 아이콘 사이즈, 텍스트 크기 등

사용성에 직접적인 영향을 주는 요소는 고정된다.

button height = 48px
icon = 24px
body text = 16px

 

✅ 유동적으로 늘어나는 것

섹션 간격, hero 영역, 카드 간격, 여백 등

레이아웃 요소들은 보통 유동적으로 확장된다.

 

예를 들면 이런 식

// 작은 화면
section spacing = 24px
hero height = 220px

// 큰 화면
section spacing = 40px
hero height = 320px

 

핵심은 콘텐츠는 유지하고 여백을 확장한다는 것

 

 

2. 모바일 디자인에서 많이 쓰는 기본 규칙

✅ 8pt Spacing System

모바일 UI에서는 보통 8pt 시스템을 사용한다.

4
8
16
24
32
40
48
64

예시

icon ↔ text = 8
card padding = 16
section gap = 24

 

 

✅ 터치 영역 규칙

터치 영역 규칙은 모바일 UX에서 중요한 규칙이다.

최소 터치 영역 = 44px
버튼 높이 = 48~56px
아이콘 = 24px

 

 

3. 프론트엔드에서 디자인 시스템 적용하기

일반 CSS 기준에서 디자인 시스템은

디자인 토큰 → 공통 스타일 → 컴포넌트 스타일 구조로 정의하는 것이 일반적이다.

핵심 목적은 일관성 있는 UI 스타일을 유지하고 재사용성을 높이는 것이다.

 

1) 디자인 토큰 정의

디자인 시스템의 가장 기초 단계는 디자인 토큰이다.
색상, 간격, 폰트 같은 기본 스타일 값을 변수로 관리한다.

CSS에서는 보통 CSS Custom Properties (CSS 변수)로 정의한다.

:root {
  /* color */
  --color-primary: #111111;
  --color-secondary: #666666;
  --color-background: #ffffff;

  /* spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;

  /* radius */
  --radius-sm: 4px;
  --radius-md: 8px;

  /* font */
  --font-body: 16px;
  --font-title: 24px;
}

 

이렇게 정의하면 프로젝트 전체에서 동일한 값을 재사용할 수 있다.

 

2) 리셋 및 글로벌 스타일 정의

브라우저 기본 스타일을 제거하고 기본 레이아웃 규칙을 설정한다.

모든 UI 컴포넌트의 기본 스타일 환경을 통일시킨다.

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: system-ui, sans-serif;
  font-size: var(--font-body);
  color: var(--color-primary);
}

 

 

3) 타이포그래피 시스템 정의

.text-body {
  font-size: 16px;
  line-height: 1.5;
}

.text-title {
  font-size: 24px;
  font-weight: 600;
}

.text-caption {
  font-size: 12px;
  color: var(--color-secondary);
}

 

본문, 제목, 설명글 등

텍스트 스타일을 공통 클래스로 정의한다.

 

4) 레이아웃 시스템 정의

페이지의 공통 레이아웃 규칙을 만든다. 대표적인 예가 container와 spacing 시스템이다.

✅ container

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-md);
}

container는 레이아웃에서 자주 등장하는 패턴이다.

container는 페이지 콘텐츠의 가로 폭과 좌우 여백을 통제한다.

예를 들어 화면이 너무 넓으면 엔터 없이 작성된 글처럼 가독성이 떨어진다.

그래서 max-width가 지정된 container를 사용하는 것!

 

✅ stack (vertical layout)

.stack > * + * {
  margin-top: var(--space-md);
}

 

이런 패턴은 컴포넌트 사이 간격을 일정하게 유지하는 데 사용한다.

 

 

5) 컴포넌트 스타일 정의

UI 요소를 재사용 가능한 클래스로 정의한다.

✅ 버튼 예시

 

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 40px;
  padding: 0 var(--space-md);

  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
}

 

variant는 modifier 클래스로 정의한다.

.button--primary {
  background: var(--color-primary);
  color: white;
}

.button--secondary {
  background: transparent;
  border: 1px solid var(--color-primary);
}

 

사용 예

<button class="button button--primary">
  확인
</button>

이 구조는 보통 BEM 방식이라고 부른다.

 

6) 상태 스타일 정의

.button:hover {
  opacity: 0.9;
}

.button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

상태 스타일은 pseudo class(의사/가상 클래스)로 관리하는 것이 일반적

 

7) 반응형 규칙 정의

반응형 스타일은 breakpoint 기준으로 관리한다.

.container {
  padding: 0 var(--space-sm);
}

@media (min-width: 768px) {
  .container {
    padding: 0 var(--space-lg);
  }
}

 

대부분 모바일 퍼스트 방식으로

모바일(max-width: 767px)이 기본값 → min-width로 확장하는 패턴을 쓴다.

 

8) 파일 구조

위 내용을 바탕으로 디자인 시스템을 정의하면 이러한 파일 구조가 완성된다.

styles
 ├ reset.css
 ├ tokens.css
 ├ typography.css
 ├ layout.css
 └ components
  ├ button.css
  ├ card.css
  └ input.css

 

 

---

 

💭 정리

디자이너가 만든 규칙을 토큰으로 강제하면

• UI 일관성이 유지되고
• 유지보수가 쉬워지고
• 팀 협업이 훨씬 편해진다.

프론트엔드에서 디자인 시스템을 잘 만들어 두면 UI 개발 속도가 정말 많이 빨라질 것이다.

위처럼 정리한 구조를 따르면 디자인 일관성을 유지하면서 확장 가능한 CSS 아키텍처를 만들 수 있을 것이다!