개발자를 위한 모바일 UI 디자인 가이드

모바일 디자인 비법 시리즈를 종합하여 실전에서 바로 적용할 수 있는 상세 가이드를 정리했습니다.

1. 배지(Badge) 디자인의 기본 원칙

배지는 화면에서 즉시 인지되어야 하므로 올바른 사용이 중요합니다.

핵심 원칙

• 버튼이나 텍스트는 작게 디자인합니다
• 놀리지 않도록 인지하려면 크기를 줄여야 합니다
• 텍스트는 보통 12px 정도를 사용합니다
• 컬러는 얕게, 브랜드 메인 컬러는 피하세요
• 버튼 같이 보이는 진한 색 대신 밝은 파스텔 톤이나 투명도를 높여 은은하게 표현합니다

실전 예제

/* 올바른 배지 디자인 */
.badge-correct {
  font-size: 12px;
  padding: 4px 8px;
  background-color: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
  border-radius: 12px;
}

/* 피해야 할 배지 디자인 */
.badge-wrong {
  font-size: 16px;
  padding: 8px 16px;
  background-color: #3b82f6; /* 너무 진함 */
  color: white;
  border-radius: 8px;
}

배지를 여러 개 쓸 때의 주의사항

• 크기와 컬러를 달리해 구분감을 주세요
• 사용자가 핵심 정보와 보조 정보를 명확하게 구분할 수 있고, 화면의 가독성과 집중도를 높일 수 있습니다

2. 텍스트 컬러 적용의 4단계

텍스트를 쓰면 정리가 안 돼 보이고 깔끔하지 않을 때는 최대 4가지로 텍스트 컬러를 적용해보세요.

2.1 메인 & 바디 텍스트 = 검정

가장 중요한 정보는 선명하게 보여야 합니다.

.text-main {
  color: #000000; /* 또는 #1a1a1a */
  font-weight: 600;
}

2.2 서브 타이틀 = 진은 회색

본문보다 한 단계 낮게, 하지만 여전히 잘 읽히게.

.text-subtitle {
  color: #4a5568;
  font-weight: 500;
}

2.3 플레이스홀더 = 회색

사용자가 한눈에 '부가적인 안내'임을 구분할 수 있게 합니다.

.text-placeholder {
  color: #a0aec0;
  font-style: italic;
}

2.4 비활성/덜 중요한 정보 = 연한 회색

중요도가 낮다는 걸 컬러만으로도 인식시킬 수 있습니다.

.text-inactive {
  color: #cbd5e0;
}

실전 적용 예제

<div class="card">
  <h2 class="text-main">프리미엄 멤버십</h2>
  <p class="text-subtitle">모든 기능을 무제한으로 이용하세요</p>
  <input type="text" placeholder="이메일을 입력하세요" class="text-placeholder">
  <p class="text-inactive">6개월 이상 미사용 시 자동 해지됩니다</p>
</div>

3. 여백(Whitespace) 디자인

여백은 단순한 장식이 아닙니다. 컬러만으로도 무엇이 중요한 액션인지를 사용자에게 알려줄 수 있죠.

3.1 여백을 하나의 기준으로 맞추세요

버튼, 텍스트, 카드 등 모든 컴포넌트 간격을 하나의 기준에 따라 정리해야 깔끔해집니다.

:root {
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
}

3.2 배수 단위로 통일하세요

보통 4px, 8px 같은 단위를 기본으로 잡고 모든 여백을 그 배수로만 사용하세요.

.container {
  padding: 16px; /* 4px의 4배 */
  margin-bottom: 24px; /* 4px의 6배 */
}

.section {
  gap: 8px; /* 4px의 2배 */
}

3.3 컨텐츠 규칙에 따라 적용하세요

10px 규칙: 본문과 제목 사이는 10px

.content-section h2 {
  margin-bottom: 10px;
}

20px 규칙: 컨텐츠 블록 간의 여백

.content-block {
  margin-bottom: 20px;
}

4. 버튼 디자인의 정석

버튼은 꼭 네모 박스여야 할까요? 아닙니다. 텍스트만으로도 버튼을 만들 수 있습니다.

4.1 텍스트 버튼의 활용

행동을 나타내도록

.text-button {
  background: none;
  border: none;
  color: #3b82f6;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}

.text-button:hover {
  color: #2563eb;
}

예시: 저장, 더 보기, 추가하기, 완료

4.2 시각적 차이를 주세요

본문 텍스트와 구분되도록 컬러를 다르게 하거나 밑줄, 강조 컬러 등을 적용하세요.

.action-link {
  color: #3b82f6;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: border-color 0.3s;
}

.action-link:hover {
  border-bottom-color: #3b82f6;
}

4.3 위치도 버튼답게

본문 안에 흩어지게 두면 링크처럼 보입니다. 항상 액션이 필요한 위치(화면 하단, 리스트 끝 등)에 두세요.

5. 동작 버튼의 컬러 전략

5.1 동작 버튼 = 메인 컬러 (액션 컬러)

메인(브랜드) 컬러는 사용자가 가장 중요한 색으로 인식합니다. 따라서 주요 액션(저장, 결제, 다음 등) 버튼에 사용해야 합니다.

.primary-button {
  background-color: #3b82f6;
  color: white;
  padding: 12px 24px;
  border-radius: 8px;
  border: none;
  font-weight: 600;
}

5.2 보조 버튼 = 서브 컬러

덜 중요한 버튼에는 메인 컬러와 조화를 이루는 색을 쓰세요. 특히 어떤 컬러와도 잘 어울리는 검정 계열도 좋습니다.

.secondary-button {
  background-color: transparent;
  color: #4a5568;
  border: 1px solid #e2e8f0;
  padding: 12px 24px;
  border-radius: 8px;
}

5.3 위계가 보이게 대비를 주세요

메인 버튼과 보조 버튼이 한 화면에 있을 때는 색의 채도나 명도를 달리해 우선순위를 명확히 드러내야 합니다.

실전 예제

<div class="button-group">
  <button class="primary-button">저장하기</button>
  <button class="secondary-button">취소</button>
</div>

.button-group {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

6. 메인 버튼의 컬러 사용법

6.1 명도나 채도가 높은 컬러 사용

피그마 팔레트의 우측 위를 사용하면 시각적으로 강조되며, 사용자가 "눌릴 수 있다"라고 인식할 수 있습니다.

/* 채도와 명도가 높은 메인 버튼 */
.cta-button {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

6.2 서비스의 브랜드 컬러 사용

브랜드 정체성을 살리면서도 버튼의 일관성을 유지할 수 있습니다.

6.3 아직 브랜드 컬러가 없다면

서비스에 어울리면서 동시에 시각적으로 강조되는 컬러를 브랜드 컬러로 채택하는 것이 좋습니다.

컬러 선택 팁

• 사용자는 버튼을 즉시 동작 가능한 핵심 요소로 인식합니다
• 서비스는 브랜드 아이덴티티와 신뢰감을 함께 전달할 수 있습니다

7. 체크박스 디자인 가이드

체크박스, 그냥 아무렇게나 배치하고 있지 않으신가요? 잘못 쓰면 답답하고 지저분해 보이지만, 규칙만 지키면 깔끔해집니다.

7.1 여러 개 선택할 때 사용하세요

체크박스는 단일 선택이 아니라, 복수 선택을 전제로 합니다. 단일 선택에는 라디오 버튼을 사용하세요.

<!-- 올바른 사용: 복수 선택 -->
<div class="checkbox-group">
  <label>
    <input type="checkbox" name="interests" value="design">
    <span>디자인</span>
  </label>
  <label>
    <input type="checkbox" name="interests" value="development">
    <span>개발</span>
  </label>
</div>

<!-- 잘못된 사용: 단일 선택에 체크박스 -->
<div class="checkbox-group">
  <label>
    <input type="checkbox" name="gender" value="male">
    <span>남성</span>
  </label>
  <label>
    <input type="checkbox" name="gender" value="female">
    <span>여성</span>
  </label>
</div>

7.2 선택/비선택 대비를 주세요

선택된 항목과 아닌 항목의 차이가 명확히 보이게 컬러나 굵기로 구분하세요.

.checkbox-container input[type="checkbox"] {
  width: 20px;
  height: 20px;
  border: 2px solid #cbd5e0;
  border-radius: 4px;
}

.checkbox-container input[type="checkbox"]:checked {
  background-color: #3b82f6;
  border-color: #3b82f6;
}

.checkbox-container label {
  color: #718096;
  transition: color 0.2s;
}

.checkbox-container input[type="checkbox"]:checked + label {
  color: #1a202c;
  font-weight: 600;
}

7.3 항목 길이에 따라 배치 방식을 달리하세요

항목명이 길 경우: 수직으로 나열하면 가독성이 좋습니다

<div class="checkbox-vertical">
  <label>
    <input type="checkbox">
    <span>개인정보 수집 및 이용에 동의합니다</span>
  </label>
  <label>
    <input type="checkbox">
    <span>마케팅 정보 수신에 동의합니다 (선택)</span>
  </label>
</div>

.checkbox-vertical {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

항목명이 짧을 경우: 수평으로 배치해도 되지만, 여백을 넓혀 둬야 오류를 방지하고 답답하지 않습니다.

<div class="checkbox-horizontal">
  <label>
    <input type="checkbox">
    <span>전체</span>
  </label>
  <label>
    <input type="checkbox">
    <span>디자인</span>
  </label>
  <label>
    <input type="checkbox">
    <span>개발</span>
  </label>
</div>

.checkbox-horizontal {
  display: flex;
  gap: 24px;
}

8. 배치(Layout)와 컨텐츠 규칙

내 서비스에 어떤 배치가 맞는지 아시나요? 컨텐츠의 배치만 바꿔도 가독성과 이해도가 달라집니다.

8.1 글 중심의 컨텐츠는 세로로 배치하세요

제목이나 본문이 길어질 수 있으므로 세로로 배치해 충분히 정보를 제공하는 것이 좋습니다.

.content-vertical {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 600px;
}

8.2 이미지 중심의 컨텐츠는 가로로 배치하세요

이미지나 상품 정보를 나란히 보여주면 스크롤 없이도 한눈에 비교할 수 있어 탐색이 빠릅니다.

.content-horizontal {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px;
}

8.3 비슷한 항목 비교 = 가로 스와이프

더보기나 비교가 필요한 항목은 가로로 배열하고, 좌우 스와이프로 쉽게 탐색할 수 있게 하세요.

.swipe-container {
  display: flex;
  overflow-x: auto;
  gap: 16px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.swipe-item {
  flex: 0 0 280px;
  scroll-snap-align: start;
}

실전 예제

<div class="product-swipe">
  <div class="swipe-container">
    <div class="swipe-item">
      <img src="product1.jpg" alt="상품 1">
      <h3>상품명 1</h3>
      <p>29,000원</p>
    </div>
    <div class="swipe-item">
      <img src="product2.jpg" alt="상품 2">
      <h3>상품명 2</h3>
      <p>35,000원</p>
    </div>
  </div>
</div>

9. 디바이더(구분선) 활용법

화면이 어수선해 보일 때, 디바이더(구분선)만 잘 써도 정리가 됩니다.

9.1 컨텐츠를 명확히 나눠야 할 때

큰 디바이더를 사용하세요. 중요 구간이나 큰 블록을 확실히 구분할 때 사용하세요.

.divider-thick {
  height: 8px;
  background-color: #f7fafc;
  margin: 24px 0;
}

9.2 간단한 구성이나 리스트 항목

얇은 디바이더를 사용하세요. 짧은 항목 위주라면 얇은 선으로 가볍게 나누는 게 좋습니다.

.divider-thin {
  height: 1px;
  background-color: #e2e8f0;
  margin: 12px 0;
}

9.3 읽음/안읽음 구분

여백 없는 디바이더를 사용하세요. 알림 화면처럼 상태 구분이 필요할 때 여백 없이 붙여 대비를 확실히 하세요.

.notification-item {
  padding: 16px;
  border-bottom: 1px solid #e2e8f0;
}

.notification-item.unread {
  background-color: #ebf8ff;
  border-left: 3px solid #3b82f6;
}

9.4 컨텐츠 내부 구분

여백 있는 디바이더를 사용하세요. 같은 카드나 영역 안에서 나눌 때 여백을 둬서 부드럽게 구분하는 게 좋습니다.

.card-divider {
  height: 1px;
  background-color: #e2e8f0;
  margin: 16px 0;
}

10. 모달(Modal) 디자인의 핵심

모달을 쓸 때, 화면을 얼마나 가려야 할지가 중요합니다. 권히 전체를 덮어버리면 사용 흐름이 끊기고, 너무 작게 띄우면 집중이 안 되죠.

10.1 풀 모달

사용 케이스

• 항목이 길어 스크롤이 필요한 경우
• 중요한 정보나 입력을 다루는 경우
• 사용자의 집중이 필요한 경우

예: 글 수정, 회원가입, 결제 정보 입력 등

.modal-full {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: white;
  z-index: 1000;
  overflow-y: auto;
}

10.2 부분 모달

사용 케이스

• 메인 화면과 연계된 작업을 진행할 때
• 빠르게 다음 액션으로 넘어가야 할 때
• 컨텐츠가 짧고 단순한 경우

예: 필터 선택, 옵션 설정, 동의 메시지 등

.modal-partial {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: white;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  max-height: 80vh;
  overflow-y: auto;
}

10.3 적용 가이드

사용자가 집중해야 할 순간에는 몰입감 있게, 빠르게 결정해야 할 순간에는 효율적으로 인터랙션을 설계할 수 있습니다.

풀 모달 예제

<div class="modal-overlay">
  <div class="modal-full">
    <header class="modal-header">
      <button class="close-button">×</button>
      <h2>회원가입</h2>
    </header>
    <div class="modal-content">
      <!-- 긴 폼 콘텐츠 -->
    </div>
  </div>
</div>

부분 모달 예제

<div class="modal-overlay">
  <div class="modal-partial">
    <div class="modal-handle"></div>
    <div class="modal-content">
      <h3>정렬 옵션</h3>
      <button>최신순</button>
      <button>인기순</button>
      <button>가격순</button>
    </div>
  </div>
</div>

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

.modal-handle {
  width: 40px;
  height: 4px;
  background-color: #cbd5e0;
  border-radius: 2px;
  margin: 12px auto;
}

---

마무리

이 가이드의 원칙들을 따르면 사용자 경험이 크게 개선됩니다. 핵심은 일관성, 명확한 위계, 적절한 여백입니다.

모든 규칙을 한 번에 적용하기보다는, 하나씩 프로젝트에 적용해보면서 차이를 체감해보세요. 작은 변화가 모여 전체 UI의 품질을 크게 향상시킬 것입니다.