개발자를 위한 시각 디자인 요령: 위계, 대비, 그림자, 구분선

재능이 아니라 요령

시각 디자인 결정의 상당 부분은 감각이 아니라 규칙으로 내릴 수 있다. 디자이너가 없는 팀이나 사이드 프로젝트에서 UI를 "덜 어색하게" 만드는 요령은 대부분 위계, 대비, 깊이, 구분의 문제다.

1. 위계는 크기보다 색과 굵기로

글자의 중요도를 font-size만으로 조절하면 큰 글자와 작은 글자가 뒤섞여 산만해진다. 색과 굵기가 같은 일을 더 조용히 한다.

단계	색	굵기
주요 콘텐츠(제목)	아주 어둡지만 검정은 아닌 색	600~700
보조 콘텐츠(날짜, 메타 정보)	회색	400~500
부수 콘텐츠(푸터 저작권)	더 밝은 회색	400

색은 2~3단계, 굵기는 2단계면 대부분 충분하다.
400 미만의 얇은 굵기는 작은 UI 글자에서 읽기 어렵다. 덜 강조하려면 굵기 대신 밝은 색이나 작은 크기를 쓴다.
회색 글자는 대비 기준(본문 4.5:1)을 지켜야 한다. 색·움직임 접근성

2. 색 배경 위에는 회색 글자를 쓰지 않는다

흰 배경에서 회색 글자가 덜 중요해 보이는 이유는 회색이라서가 아니라 배경과의 대비가 줄어서다. 색 배경 위에 회색을 올리면 칙칙하게 뜬다.

방법	언제
흰 글자의 불투명도를 낮춘다	단색 배경. 배경색이 비쳐 자연스럽게 섞인다
배경과 같은 색상(hue) 에서 채도·명도만 조절한 색을 고른다	배경이 이미지·패턴이거나, 불투명도로는 너무 흐려질 때

CSS에서는 color-mix()나 상대 색 문법(oklch(from var(--bg) ...))으로 배경색에서 파생한 글자색을 만든다. CSS 색과 변수

3. 그림자는 퍼짐보다 세로 오프셋

그림자를 키울 때 흐림(blur)과 퍼짐(spread)만 늘리면 뿌옇게 번진다. 아래로 약간 내린(y 오프셋) 그림자는 위에서 빛이 비치는 익숙한 상황을 흉내 내 더 자연스럽다. 입력창 같은 안쪽 그림자(inset)도 같다.

.card  { box-shadow: 0 4px 6px rgb(0 0 0 / 0.1); }
.input { box-shadow: inset 0 2px 4px rgb(0 0 0 / 0.06); }

그림자 문법과 여러 겹 그림자는 CSS 테두리와 그림자에 있다.

4. 테두리를 줄인다

요소를 나눌 때마다 테두리를 쓰면 화면이 복잡해진다. 대안은 셋이다.

대안	효과
그림자	테두리처럼 윤곽을 주되 덜 거슬린다
인접 영역에 살짝 다른 배경색	그것만으로 구분된다. 배경색과 테두리를 같이 쓰고 있다면 테두리를 빼 본다
여백을 더 준다	새 UI를 더하지 않고 그룹을 나눈다. 근접성 원리

5. 작게 그린 아이콘을 크게 키우지 않는다

벡터라 깨지지는 않지만, 16~~24px용으로 그린 아이콘을 3~~4배로 키우면 디테일이 부족하고 뭉툭해 보인다. 큰 자리가 필요하면 아이콘은 원래 크기에 가깝게 두고 배경색이 있는 도형으로 감싼다. 큰 크기용으로 설계된 아이콘 세트를 쓰는 것도 방법이다. 아이콘 사용성은 아이콘 사용성에 있다.

6. 강조 테두리로 색을 더한다

사진이나 일러스트 없이 밋밋한 화면에는 색 띠(accent border) 가 싸고 효과적이다. 알림 상자 왼쪽, 활성 탭 아래, 레이아웃 맨 위에 색 막대 하나를 둔다. 색을 고르기 어렵다면 범위가 제한된 팔레트에서 고른다.

7. 모든 버튼에 배경색이 필요하지는 않다

버튼 스타일을 의미(긍정=초록, 삭제=빨강)로만 정하면 화면에 같은 무게의 버튼이 늘어선다. 더 중요한 축은 위계다.

위계	스타일
주 행동(대개 화면에 하나)	채운 배경, 높은 대비
보조 행동	외곽선 또는 낮은 대비 배경
3차 행동	링크처럼 보이는 텍스트 버튼

삭제 같은 파괴적 행동도 그 화면의 주 행동이 아니라면 보조·3차 스타일로 둔다. 빨간 강조는 확인 단계에서 쓴다.

스타일 유행: 뉴모피즘

뉴모피즘(Neumorphism) 은 요소를 색 대비가 아니라 빛과 그림자로 배경에서 들어 올리거나 눌러 넣는 스타일이다. 플랫·머티리얼 디자인의 대안으로 2020년 무렵 유행했다.

항목	내용
원리	요소 색을 배경과 같은 계열로 두고, 한쪽은 밝은 그림자·반대쪽은 어두운 그림자 두 개로 입체감을 만든다. 눌린 상태는 안쪽 그림자
장점	부드럽고 촉각적인 인상, 낯설어서 눈에 띈다
한계	톤온톤이라 대비가 낮아 경계가 흐리고 저시력 사용자에게 불리하다. 주 행동(CTA)이 묻히고, 눌림·선택·비활성 상태를 그림자만으로 구분하기 어렵다. 스타일 자체가 제품 인상을 강하게 정한다

.neu {
  background: #e0e5ec;
  box-shadow: 6px 6px 12px #a3b1c6, -6px -6px 12px #ffffff;
}

유행 스타일은 장식 요소에 부분적으로 쓰고, 상호작용 요소는 대비와 상태 표시 기준을 먼저 지킨다. 같은 시기에 유행한 글래스모피즘(반투명 흐림 배경)도 글자 대비 문제를 똑같이 안고 있다.

정리

위계는 크기 하나가 아니라 색·굵기·크기의 조합으로 만든다.
「덜 중요함」은 회색이 아니라 배경과의 대비 감소다. 색 배경에서는 배경색 계열로 줄인다.
그림자는 세로 오프셋, 구분은 테두리보다 그림자·배경색·여백.
버튼은 의미보다 중요도로 스타일을 정한다. 주 행동은 하나.
스타일 유행보다 대비와 상태 표시가 먼저다.

버그 제보