개발자들이 저지르는 14가지 디자인 실수 (예시와 함께 해결 방법)

발행: 1개월 전 (2025년 12월 25일 오후 02:39 GMT+9)

5 분 소요

Source: Dev.to

너무 많은 글꼴 크기 사용

문제: 무작위 글꼴 크기로 UI가 어수선하고 계획되지 않은 느낌을 줍니다.

/* ❌ What devs often do */
h1 { font-size: 42px; }
h2 { font-size: 30px; }
h3 { font-size: 27px; }
p  { font-size: 18px; }
.small { font-size: 15px; }
.tiny { font-size: 13px; }

해결 방법: 일관된 스케일을 사용하고 모든 곳에 적용합니다.

h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }
p  { font-size: 1rem; }

간격 시스템 부재

문제: 모든 것이 비좁거나 고르지 않게 느껴집니다.

해결: 간격 스케일(예: 4px → 8px → 12px → 16px → 24px → 32px → 48px)을 도입하고 일관되게 적용합니다.

.section {
  padding: 24px;
  margin-bottom: 32px;
}

일관성 없는 버튼

문제: 서로 다른 테두리, 그림자, 패딩 때문에 버튼이 비전문적으로 보입니다.

해결: 단일 버튼 규칙을 정의하고 재사용합니다.

button {
  padding: 10px 16px;
  border-radius: 8px;
  font-weight: 600;
  transition: 0.2s;
}
button:hover { opacity: .9; }
button:active { transform: scale(.97); }

너무 많은 색상 사용

문제: 색상이 많다고 UI가 더 나아지는 것은 아닙니다.

가이드라인: 팔레트를 다섯 가지 핵심 색상으로 제한합니다.

Primary (주 색상)
Secondary (보조 색상)
Background (배경)
Text (텍스트)
Accent (강조)

계층 구조 무시

문제: 사용자는 무엇을 먼저 봐야 할지 모릅니다.

해결: 명확한 시각적 계층 구조로 콘텐츠를 구성합니다.

## Track expenses smarter

AI categorizes every transaction automatically.

Get Started

큰 제목 → 주요 메시지
부제목 → 보조 컨텍스트
일반 텍스트 → 상세 내용

모든 요소 중앙 정렬

문제: 중앙 정렬된 문단은 읽기 어렵습니다.

해결:

헤딩과 히어로 텍스트는 중앙 정렬.
본문 문단은 왼쪽 정렬.

낮은 대비 텍스트

문제: 연한 회색 텍스트는 보기 좋지만 읽기 어렵습니다.

/* ❌ Bad */
color: #999;

/* ✅ Good */
color: #1a1a1a;

일관성 없는 아이콘 스타일

문제: 여러 아이콘 라이브러리를 섞어 쓰면 비전문적으로 보입니다.

해결: 하나의 아이콘 세트(예: Lucide, HeroIcons, Feather)를 선택하고 고수합니다.

전체 폭 텍스트

문제: 너무 넓은 문단은 눈을 피로하게 합니다.

해결: 줄 길이를 제한합니다.

max-width: 65ch;

시각적 그룹화 부재

문제: 요소들이 구조 없이 떠다닙니다.

해결: 다음과 같은 시각적 그룹화 기법을 사용합니다.

카드
배경 블록
구분선
일관된 패딩 및 간격

인터랙션 피드백 없음

문제: 버튼이 살아 있지 않은 느낌입니다.

해결: hover와 active 상태를 추가합니다.

button:hover { opacity: .85; }
button:active { transform: scale(.97); }

팝업 남발

문제: 팝업은 신뢰할 수 있는 네비게이션 전략이 아닙니다.

해결: 상황에 맞는 인라인 컴포넌트를 선호합니다.

오류 표시를 색상만 사용

문제: 색상만으로 오류를 표시하면 색맹 사용자에게 접근성이 떨어집니다.

Email invalid

⚠️ Invalid email format

모바일 우선 테스트 미실시

문제: 데스크톱에서는 작동하지만 모바일에서는 사용할 수 없는 디자인.

해결: 모바일‑우선 접근 방식으로 구축합니다.

.container { width: 100%; }

@media (min-width: 768px) {
  .container {
    max-width: 700px;
    margin: auto;
  }
}

마무리 생각

디자이너가 될 필요는 없습니다. 필요한 것은 명확한 규칙과 의사결정 사고방식입니다.

규칙: 일관성, 계층 구조, 접근성, 반응형.
디자인: 장식이 아니라 목적이 있는 선택.