들어가며

많은 개발자들이 디자인을 "감각 있는 사람들의 영역"으로 생각합니다. 하지만 실무에서 경험한 UI 감각의 90%는 원리를 아는 것에서 나옵니다. 타고난 미적 감각이 아니라, 왜 어떤 화면은 깔끔해 보이고 어떤 화면은 어수선해 보이는지에 대한 규칙을 이해하는 것입니다.

특히 백오피스나 관리자 대시보드처럼 기능 중심의 UI를 개발할 때는 더욱 그렇습니다. 복잡한 정보를 사용자가 빠르게 파악하도록 돕는 것 — 이것이 디자인의 본질이고, 이 목표를 달성하는 데는 명확한 원칙이 있습니다.

이 글에서는 그 핵심 원칙 4가지를 설명하고, 백오피스/대시보드에 바로 적용할 수 있는 실전 팁을 함께 다룹니다.

여백(Spacing) - 비어있음의 힘

원리

여백은 장식이 아닙니다. 정보를 구분하고 호흡을 만드는 구조적 요소입니다. 여백이 충분하지 않으면 사용자의 눈은 어디서 시작해야 할지 모르고, 피로감을 느낍니다.

많은 개발자들이 여백을 임의로 줍니다. margin: 10px을 어떤 곳엔 쓰고, 다른 곳엔 padding: 15px을 쓰는 식으로요. 이게 화면이 어수선해 보이는 가장 흔한 이유입니다.

8pt Grid System

좋은 UI는 대부분 4 또는 8의 배수로 여백을 정의합니다. 4, 8, 12, 16, 24, 32, 48, 64... 이 숫자들만 씁니다. 임의의 숫자(11px, 17px, 23px)는 쓰지 않습니다.

Tailwind CSS를 쓴다면 이미 이 시스템이 내장되어 있습니다. p-4(16px), p-6(24px), gap-8(32px) — 이 배수 체계를 의식하면서 쓰는 것만으로도 화면이 훨씬 정돈되어 보입니다.

근접성의 법칙 (Law of Proximity)

연관된 요소는 가까이, 연관 없는 요소는 멀리. 이 하나만 지켜도 정보 구조가 시각적으로 전달됩니다.


HTML
1❌ 모든 요소가 동일한 간격
2레이블 ——12px—— 입력값 ——12px—— 다음 레이블 ——12px—— 입력값
3
4✅ 그룹 내부는 좁게, 그룹 간 간격은 넓게
5[레이블 ——4px—— 입력값] ————24px———— [레이블 ——4px—— 입력값]

정렬(Alignment) - 보이지 않는 그리드

원리

사람의 눈은 정렬되지 않은 요소를 즉시 감지합니다. 좋은 디자인에는 보이지 않는 격자가 있고, 모든 요소가 그 선에 맞춰 정렬됩니다.

정렬의 종류

좌측 정렬 : 텍스트 블록, 목록, 폼 레이블에 주로 사용. 시선의 흐름이 자연스럽습니다.
우측 정렬 : 숫자, 금액, 테이블의 수치 컬럼. 자릿수를 한눈에 비교할 수 있습니다.
중앙 정렬 : 짧은 제목, 버튼 텍스트, 빈 상태 메시지. 긴 텍스트에는 쓰지 않습니다.

요소 간 가장자리(엣지) 정렬

요소의 중심보다 가장자리를 맞추는 것이 더 안정적으로 보입니다.


HTML
1❌ 중심 기준 정렬 (크기가 다르면 어색함)
2    [큰 버튼]
3      [아이콘]
4
5✅ 좌측 엣지 정렬
6[큰 버튼]
7[아이콘]

3. 위계 (Hierarchy) - 중요한 것을 먼저 보이게

원리

사용자는 페이지를 처음부터 끝까지 읽지 않습니다. 스캔합니다. 위계는 이 스캔 과정에서 중요한 정보가 먼저, 부가 정보가 나중에 눈에 들어오도록 설계하는 것입니다.

위계를 만드는 3가지 축:

크기 : 제목 > 소제목 > 본문 > 보조 텍스트
굵기 : bold > medium > regular
색 : 주 색상 > 보조 색상 > 비활성 색상

텍스트 스케일

임의의 폰트 크기를 쓰지 않는 것이 중요합니다. 2~3단계의 스케일만 정의하고 그것만 사용합니다.


CSS
1/* 텍스트 스케일 정의 예시 */
2--text-xs:   12px;  /* 레이블, 배지, 타임스탬프 */
3--text-sm:   14px;  /* 테이블 데이터, 부가 설명 */
4--text-base: 16px;  /* 본문 */
5--text-lg:   18px;  /* 소제목 */
6--text-xl:   24px;  /* 페이지 제목 */

대비로 위계 강화

높은 대비 = 중요한 정보, 낮은 대비 = 부가 정보. 이 공식을 지키면 위계가 자연스럽게 만들어집니다.


CSS
1/* 위계가 있는 텍스트 색 시스템 */
2--text-primary:   #111827;  /* 메인 텍스트 - 가장 진하게 */
3--text-secondary: #6B7280;  /* 보조 텍스트 - 중간 */
4--text-tertiary:  #D1D5DB;  /* 비활성/힌트 - 가장 연하게 */

색 - 절제가 곧 감각

원리

색을 많이 쓸수록 디자인은 산만해집니다. 감각 있는 UI일수록 오히려 색을 덜 씁니다. 백오피스/대시보드에서 색의 역할은 장식이 아니라 의미 전달입니다.


HTML
1Primary   → 주요 액션, 브랜드 색 (버튼, 링크, 활성 탭)
2Neutral   → 배경, 테두리, 텍스트 (그레이 스케일)
3Semantic  → 상태 전달 (Success/Warning/Error/Info)

가장 흔한 실수는 Semantic 색을 장식으로 쓰는 것입니다. 초록색은 "성공"을 의미할 때만, 빨간색은 "오류"를 의미할 때만 써야 합니다. 그 의미 없이 쓰면 사용자는 혼란을 겪습니다.

그레이 스케일 잘 쓰는 법

백오피스에서 대부분의 화면은 그레이 스케일로 이루어집니다. 그레이를 체계적으로 정의하면 색 없이도 충분히 구조적인 화면을 만들 수 있습니다.


CSS
1/* 그레이 스케일 정의 */
2--gray-50:  #F9FAFB;  /* 페이지 배경 */
3--gray-100: #F3F4F6;  /* 카드/섹션 배경 */
4--gray-200: #E5E7EB;  /* 테두리, 구분선 */
5--gray-400: #9CA3AF;  /* 플레이스홀더, 비활성 */
6--gray-700: #374151;  /* 보조 텍스트 */
7--gray-900: #111827;  /* 주 텍스트 */

정리 - 개발자의 디자인 감각을 기르는 법

이 글에서 다룬 내용을 한 줄로 요약하면 이렇습니다.

여백은 8의 배수로 통일하고, 정보는 정렬하고, 중요한 것을 크고 진하게 쓰고, 색은 의미 있을 때만 쓴다.

이 4가지 원칙은 처음에는 의식적으로 체크리스트처럼 써야 합니다.

UI 감각 기르기