웹디자인에서 일관성과 반복 차이: 같은 말 같지만 다른 두 원칙

웹디자인에서 일관성과 반복은 비슷해 보이지만 같은 말이 아니에요. 반복은 같은 모양을 여러 번 쓰는 시각적인 방법이고, 일관성은 같은 의미와 같은 동작에 같은 규칙을 지키는 원칙이에요. 그래서 반복만 하고 일관성이 없을 수도 있고, 모양이 조금 달라도 일관성은 지킬 수 있어요.

시안 피드백에서 "일관성이 없어요"라는 말을 들으면 보통 같은 모양을 더 많이 반복하는 쪽으로 고쳐요. 그런데 그렇게 고쳐도 여전히 어색할 때가 있어요. 두 말을 구분하면 무엇을 고쳐야 할지 더 정확해져요.

---

반복(Repetition)이란?

반복은 색, 글꼴, 모양, 간격 같은 시각 요소를 여러 곳에서 되풀이해서 쓰는 것이에요. 로빈 윌리엄스(Robin Williams)가 1994년 책 『The Non-Designer's Design Book』에서 정리한 디자인 기본 원칙 네 가지(대비, 반복, 정렬, 근접) 중 하나로 잘 알려져 있어요.

반복의 목적은 하나로 묶여 보이게 하는 것이에요.

• 모든 섹션 제목을 같은 초록색, 같은 크기로 쓰기
• 카드마다 같은 둥글기와 그림자 쓰기
• 페이지마다 같은 위치에 로고 두기

이렇게 하면 여러 페이지가 한 사이트처럼, 여러 요소가 한 세트처럼 보여요.

---

일관성(Consistency)이란?

일관성은 같은 의미, 같은 동작에는 항상 같은 표현과 같은 결과를 주는 것이에요. 제이콥 닐슨(Jakob Nielsen)이 1994년에 정리한 사용성 휴리스틱 10가지 중 하나가 '일관성과 표준(Consistency and standards)'이에요. 같은 말, 같은 상황, 같은 행동이 서로 다른 뜻이 아니라는 걸 사용자가 고민하지 않게 하라는 내용이에요.

일관성의 목적은 예측할 수 있게 하는 것이에요.

• 빨간색은 어디서나 "위험·삭제"를 뜻하기
• 오른쪽 위 X는 어디서나 "닫기"로 동작하기
• "저장"이라는 버튼은 어디서나 같은 일을 하기

한 번 배운 규칙이 다른 곳에서도 통하면 사용자는 매번 다시 배우지 않아도 돼요.

---

일관성과 반복은 무엇이 다른가요?

구분	반복	일관성
다루는 것	모양 (색, 글꼴, 형태)	의미와 동작 (규칙)
목적	하나로 묶여 보이게	예측할 수 있게
확인하는 법	눈으로 보면 보여요	써 봐야 보여요
깨졌을 때	산만해 보여요	헷갈리고 실수해요
예	버튼마다 같은 둥글기	초록 버튼은 항상 "다음 단계"

반복했는데 일관성이 깨질 수도 있나요?

네. 이 경우가 가장 찾기 어려워요.

예를 들어 페이지마다 똑같이 생긴 초록 버튼을 반복해서 썼다고 해 볼게요. 모양은 완벽하게 반복됐어요. 그런데 어떤 페이지에서는 이 버튼이 "저장", 어떤 페이지에서는 "삭제", 또 어떤 곳에서는 "다른 페이지로 이동"이에요. 보기에는 정돈됐는데 쓰기에는 위험한 화면이에요. 사용자는 초록 버튼을 믿고 눌렀다가 원하지 않은 결과를 만나요.

모양이 달라도 일관성은 지킬 수 있나요?

네. 일관성은 같은 모양이 아니라 같은 규칙이에요.

• 큰 버튼과 작은 버튼은 크기가 다르지만, "가장 중요한 행동은 초록 채움 버튼"이라는 규칙이 같으면 일관적이에요.
• 데스크톱 메뉴와 모바일 햄버거 메뉴는 생김새가 전혀 달라도, 같은 항목과 같은 순서를 지키면 일관적이에요.

---

반복이 지나치면 어떻게 되나요?

반복을 너무 많이 하면 모든 게 똑같아 보여서 중요한 게 안 보여요. 모든 버튼이 같은 초록 채움 버튼이면, 가장 중요한 "결제하기"와 덜 중요한 "장바구니 비우기"가 같은 무게로 보여요.

그래서 반복과 함께 대비가 필요해요. 기본 요소는 반복으로 묶고, 정말 중요한 하나는 다르게 만들어서 눈에 띄게 하는 거예요. 반복이 바탕을 만들고, 대비가 그 위에서 강조를 만들어요.

---

실무에서는 어떻게 확인하나요?

저는 두 가지를 따로 점검해요.

반복은 이렇게 확인해요

• 화면을 축소해서 멀리서 봤을 때 페이지들이 한 세트처럼 보이는지
• 제목·본문·버튼에 쓰는 글자 크기와 색이 몇 가지로 정리돼 있는지
• 간격이 4px, 8px처럼 정해진 단위 안에서 반복되는지

일관성은 이렇게 확인해요

• 같은 색이 화면마다 다른 뜻으로 쓰이지 않는지 (빨강 = 오류인데 할인 표시에도 빨강?)
• 같은 이름의 버튼이 화면마다 다른 일을 하지 않는지
• 같은 일을 하는 버튼이 화면마다 다른 이름이지 않은지 ("확인", "완료", "저장"이 같은 동작?)
• 아이콘 하나가 한 가지 뜻으로만 쓰이는지

반복은 화면을 쭉 늘어놓고 보면 잡히고, 일관성은 사용자가 되어 실제로 눌러 보면 잡혀요.

---

자주 묻는 질문

---

정리