화면을 열자마자 다음에 뭘 눌러야 할지 손이 먼저 아는 화면, 저는 그런 걸 좋은 UI라고 부릅니다. 말로만 풀면 막연하니 실제 CSS로 좋은 화면과 헷갈리는 화면이 어떻게 갈리는지 코드로 하나씩 보여드리겠습니다. 아래 예제는 모두 그대로 복사해 브라우저에서 확인할 수 있습니다.
01.1 대비로 핵심 행동 세우기
화면에서 가장 중요한 버튼 하나는 색과 무게로 단번에 도드라져야 합니다. 흔한 실수는 가입도 취소도 전부 같은 색으로 칠하는 것입니다.
.btn {
background: #e5e7eb;
color: #374151;
padding: 10px 16px;
border-radius: 6px;
}
이러면 눈이 어디에 시선을 둬야 할지 헤맵니다. 주된 버튼만 대비를 확 올리고 나머지는 물러서게 합니다.
.btn { padding: 10px 16px; border-radius: 6px; cursor: pointer; }
.btn-primary {
background: #2563eb;
color: #fff;
}
.btn-secondary {
background: #f3f4f6;
color: #4b5563;
}
파란 버튼 하나만 시선을 붙잡고 회색 버튼은 조용히 곁을 지킵니다. 색이 곧 우선순위를 말해 줍니다.
01.2 정렬로 질서 세우기
요소의 시작선이 들쭉날쭉하면 그것만으로 화면이 어수선해 보입니다. 라벨과 입력칸을 flex로 한 축에 맞춰 봅니다.
.field {
display: flex;
align-items: center;
gap: 8px;
}
.field label {
width: 96px;
text-align: right;
}
라벨 너비를 96px로 고정하고 오른쪽으로 붙이면 여러 줄의 입력칸 시작선이 하나로 모입니다. 눈이 세로선 하나만 따라가면 되니 읽기가 편해집니다.
01.3 여백으로 묶고 나누기
관련된 것은 붙이고 남남인 것은 떨어뜨리는 것만으로 그룹이 읽힙니다. 여백 자체가 묶음의 신호입니다.
.card {
display: flex;
flex-direction: column;
gap: 4px;
padding: 20px;
}
.card + .card {
margin-top: 16px;
}
제목과 설명은 4px로 바짝 붙이고 카드끼리는 16px로 벌려 두면, 선을 긋지 않아도 어디까지가 한 덩어리인지 눈에 보입니다.
01.4 위계로 읽는 순서 만들기
다 같은 크기의 글자는 뭐부터 읽어야 할지 알려 주지 않습니다. 크기와 무게, 색으로 순서를 매깁니다.
.title {
font-size: 20px;
font-weight: 700;
color: #111827;
}
.desc {
font-size: 14px;
color: #6b7280;
}
큰 제목이 먼저 눈에 들어오고 옅은 회색 설명이 그다음에 읽힙니다. 시선의 순서를 코드로 정해 준 셈입니다.
01.5 눌리고 싶게 생기기
버튼은 눌러도 된다는 신호를 스스로 줘야 합니다. 손을 올리면 반응하고 누르는 순간 눌리는 느낌이 나야 합니다.
.btn-primary {
background: #2563eb;
color: #fff;
cursor: pointer;
transition: background .15s;
}
.btn-primary:hover {
background: #1d4ed8;
}
.btn-primary:active {
transform: translateY(1px);
}
마우스를 올리면 색이 짙어지고 누를 때 살짝 내려앉습니다. 이 작은 반응이 이건 버튼이라고 손끝에 일러 줍니다.
01.6 넉넉한 클릭 영역
손가락으로 누르는 화면에서 버튼이 너무 작으면 옆 버튼이 눌리는 사고가 납니다. 눈에 보이는 크기와 별개로 실제로 눌리는 영역을 넉넉히 잡아 줍니다.
.icon-btn {
min-width: 44px;
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
}
아이콘 자체는 20px라도 눌리는 판을 44px로 키워 두면 손끝이 어긋나도 제대로 눌립니다. 모바일에서 오작동이 확 줄어드는 지점입니다.
01.7 작은 화면까지 챙기기
가로로 나란하던 버튼이 좁은 화면에서 삐져나오면 가로 스크롤이 생기고 사용자는 헤맵니다. 좁아지면 세로로 쌓이게 합니다.
.actions {
display: flex;
gap: 12px;
}
@media (max-width: 480px) {
.actions {
flex-direction: column;
}
.actions .btn {
width: 100%;
}
}
화면이 480px보다 좁아지면 버튼이 세로로 쌓이고 폭을 꽉 채웁니다. 어느 기기에서 열어도 삐져나오는 요소 없이 손에 잡힙니다.
01.8 조각을 하나로 모으기
지금까지의 규칙을 한 카드에 얹으면 이렇게 됩니다. 마크업과 스타일이 서로를 거들며 하나의 완결된 컴포넌트가 됩니다.
<div class="card">
<h3 class="title">결제 확인</h3>
<p class="desc">구독이 오늘부터 시작됩니다.</p>
<div class="actions">
<button class="btn btn-secondary">취소</button>
<button class="btn btn-primary">결제</button>
</div>
</div>
대비로 결제 버튼이 먼저 보이고, 여백이 제목과 설명을 묶고, 정렬이 두 버튼을 나란히 세웁니다. 사용자는 이 화면에서 뭘 해야 할지 굳이 고민하지 않습니다.
01.9 상태로 응답하기
눌렀는데 아무 기척이 없으면 사용자는 고장인 줄 알고 또 누릅니다. 지금 못 누르는 상태와 키보드 포커스를 눈에 보이게 만듭니다.
.btn-primary:disabled {
background: #93c5fd;
cursor: not-allowed;
}
.btn-primary:focus-visible {
outline: 2px solid #1d4ed8;
outline-offset: 2px;
}
흐려진 파랑과 금지 커서로 지금은 못 누른다고 알려 주고, 키보드로 이동하면 또렷한 외곽선이 지금 여기라고 짚어 줍니다. 마우스를 안 쓰는 사람도 길을 잃지 않습니다.
01.10 정리
좋은 UI는 예쁜 게 아니라 헷갈리지 않는 것입니다. 대비로 핵심을 세우고, 정렬로 줄을 맞추고, 여백으로 묶고, 위계로 순서를 주고, 상태로 응답하는 이 다섯 가지만 지켜도 화면은 훨씬 덜 삐걱댑니다. 예쁨은 그 질서를 갖춘 뒤에 조용히 따라옵니다.