디자인이 못생겨 보이는 이유: 감이 아니라 구조 문제다
정렬·그리드 붕괴가 촌스러움을 만드는 핵심 원인과 측정 가능한 레이아웃 규칙으로 디자인을 안정시키는 법
1) 정렬과 그리드가 디자인의 뼈대인 이유
디자인이 촌스러워 보이는 가장 흔한 원인은 “색”이나 “폰트”가 아니라 정렬이 무너진 상태에서 요소를 얹어놓는 것이다. 정렬과 그리드는 화면을 측정 가능한 규칙으로 바꾼다. 규칙이 생기면 “그럴듯함”이 아니라 “일관된 설계”가 된다.
잘된 예 / 망한 예를 구분하는 기준
기준 1: 화면에 ‘보이지 않는 세로선’이 2~4개 잡히는가
- 잘된 예: 제목, 본문, 버튼, 이미지의 시작점/끝점이 같은 세로선에 붙는다.
- 망한 예: 각 요소가 제멋대로 시작/끝나서, 시선이 매번 방향을 다시 잡는다.
기준 2: 간격이 ‘종류별로’ 반복되는가
- 잘된 예: 섹션 간격(예: 80), 카드 내부 간격(예: 24), 텍스트 줄 간격(예: 8/12)처럼 간격이 시스템화돼 있다.
- 망한 예: 17, 22, 29처럼 간격이 전부 다르고, 수정할수록 더 지저분해진다.
기준 3: 요소가 그리드의 ‘칸’에 앉는가
- 잘된 예: 카드/이미지/텍스트 블록이 일정한 폭의 칸 단위로 배치된다.
- 망한 예: 폭이 조금씩 다르고, 카드가 미세하게 삐져나오거나 떠 보인다.
핵심: 그리드는 “예쁘게 만드는 도구”가 아니라 “틀린 걸 바로 잡는 도구”다.
2) 시각적 계층 구조가 사용자 시선을 지배하는 방식
사용자는 화면을 읽지 않는다. 훑고, 우선순위를 정해 클릭한다. 시각적 계층 구조(Visual Hierarchy)는 사용자의 시선을 “강제로” 움직이는 규칙이다.
잘된 예 / 망한 예를 구분하는 기준
기준 1: 3초 안에 ‘이 페이지가 뭔지’ 이해되는가
- 잘된 예: (1) 한 줄 핵심 메시지(헤드라인) → (2) 보조 설명 → (3) 행동 버튼(CTA) 순으로 보인다.
- 망한 예: 정보가 동급으로 쏟아져서, 어디가 제목이고 어디가 설명인지 헷갈린다.
기준 2: 강조는 1개만 강하게, 나머지는 단계적으로 약해지는가
- 잘된 예: 가장 중요한 것만 크기/굵기/색으로 확실히 띄우고 나머지는 톤 다운된다.
- 망한 예: 제목도 크고 버튼도 튀고 배지도 튀고 전부 튀어서, 결과적으로 아무것도 안 튄다.
기준 3: ‘클릭해야 할 것’이 시각적으로 명확한가
- 잘된 예: 버튼은 버튼처럼(면적+대비+여백) 보이고 링크는 링크처럼 보인다.
- 망한 예: 버튼이 텍스트 같거나, 텍스트가 버튼 같아서 사용자가 망설인다.
실무 기준으로 계층은 보통 H1(정의) → 서브카피(설명) → CTA(행동) 3단이 최소 단위다.
3) 근접성, 착시 현상이 실무에서 문제를 만드는 사례
(1) 근접성(Proximity): “같은 그룹”을 잘못 만들면 UX가 깨진다
근접성은 “가까우면 묶이고, 멀면 분리된다”는 규칙이다. 이게 어기면 사용자는 관계를 잘못 이해한다.
실무에서 터지는 사례
- 에러 메시지가 입력창보다 버튼에 더 가깝다 → 사용자는 “버튼 오류”로 오해
- 가격(₩)이 플랜 이름보다 다른 카드 설명에 더 가깝다 → 무엇의 가격인지 헷갈림
- 카드 안에서 제목과 설명 간격이 너무 넓다 → 서로 다른 콘텐츠로 인식
판단 기준: “이 둘이 한 세트라면, 다른 어떤 것보다 서로 더 가까워야 한다.”
(2) 착시(Optical Illusion): 수치가 맞아도 ‘안 맞아 보이면’ 망한다
디자인은 픽셀 수치보다 사람이 느끼는 정렬이 중요할 때가 많다.
실무에서 터지는 사례
- 아이콘과 텍스트가 수치상 가운데 정렬인데 아이콘이 아래로 처져 보임 → 시각적 중심(optical center) 보정 필요
- 둥근 버튼이 네모 버튼보다 작아 보임 → 같은 높이여도 더 커 보이게 조정 필요
- 글자(특히 라틴 알파벳) 때문에 박스가 한쪽으로 치우쳐 보임 → 패딩 미세 보정 필요
판단 기준: “수치 정렬이 아니라, 스크롤하며 0.5초 봤을 때도 안정적으로 보이는가.”
4) 초보자가 가장 많이 틀리는 레이아웃 실수 3가지
실수 1) “가운데 정렬 남발”
- 망한 예: 본문, 카드 목록, 긴 텍스트까지 전부 가운데 정렬 → 읽기 어려워지고 촌스럽다.
- 잘된 예: 긴 텍스트는 좌측 정렬, 가운데 정렬은 짧은 문장/히어로 영역 등 제한적으로 사용.
구분 기준: “읽어야 하는 텍스트가 2줄 이상이면 좌측 정렬이 기본.”
실수 2) “간격이 랜덤”
- 망한 예: 섹션마다 간격이 다르고 요소 간 간격도 매번 다름 → 조잡해 보임.
- 잘된 예: 간격을 토큰화(8/16/24/32/48/64처럼 규칙화) 해서 반복.
구분 기준: “같은 관계(제목-본문, 카드-카드)는 같은 간격을 가져야 한다.”
실수 3) “컨테이너 폭을 통제하지 않음”
- 망한 예: 화면 끝까지 꽉 찬 텍스트/콘텐츠 → 고급스러움이 사라짐.
- 잘된 예: 최대 폭(예: 1100~1200 수준)을 정하고, 내부는 그리드로 배치.
구분 기준: “창을 넓혀도 콘텐츠 폭이 무한히 늘어나면 실패.”
이 글을 읽고 바로 적용할 체크리스트
- 세로 기준선(좌/우)이 요소 전반에 반복되는가
- 간격이 3~6개 숫자 안에서 반복되는가
- 한 화면에서 가장 중요한 정보가 1개로 보이는가
- ‘한 세트’인 요소들이 서로 가장 가깝게 붙어 있는가
- 수치 정렬이 아니라 시각적으로도 안정적인가