베버-페히너의 법칙

📌 한줄 요약

자극의 세기가 커질수록, 사람은 그 차이를 느끼기 더 어려워진다.

즉, 자극의 변화가 클수록 더 큰 변화가 있어야 ‘차이’를 인식할 수 있다.

🔬 쉽게 설명하면

• 어떤 자극(소리, 밝기, 무게 등)이 있을 때,

그 자극이 얼마나 커져야 “변화”를 느끼는지를 설명하는 심리물리학 법칙이야.

• 예를 들어,

책 1권을 들고 있을 때 1권을 더 얹으면 "무거워졌다"고 느끼지만,

이미 책 10권을 들고 있을 땐 1권을 더 얹어도 잘 모를 수 있지.

이게 바로 자극의 크기에 비례해서 변화 감지가 어려워진다는 베버-페히너 법칙이야.

📐 공식 (참고용)

• 베버의 법칙 (Weber's Law)IΔI=k

ΔII=k\frac{ΔI}{I} = k

• ΔI: 변화량 (Just Noticeable Difference, JND)

• I: 원래 자극의 강도

• k: 베버 상수 (항상 일정)

• 페히너의 법칙 (Fechner's Law)S=k⋅log(I)

S=k⋅log⁡(I)S = k \cdot \log(I)

• S: 감각의 세기

• I: 자극의 세기

• → 감각은 자극의 강도의 로그에 비례한다는 뜻

💡 UX/UI에서 어떻게 쓰일까?

• 로딩 시간

• 0.5초와 1초 차이는 잘 느끼지만

5초와 5.5초는 거의 차이를 못 느낌

• 스크롤 애니메이션 속도

• 너무 미세한 차이는 사용자에게 의미 없는 변화일 수 있음

• 진행 바 디자인

• 처음엔 빠르게 차오르다가, 뒤로 갈수록 느려 보여도 이상하지 않게 느껴짐

→ 사람은 비율의 변화보다는 절대 차이보다 상대적인 차이에 반응하기 때문

UX 및 UI 디자인에서의 응용

UX 및 UI 디자인에서 베버의 법칙은 크기, 색상 또는 밝기의 지각적 차이를 의도적으로 활용하는 데 사용될 수 있습니다. 인터페이스 요소가 이미 크거나 강렬할수록, 사용자가 인지하기 위해서는 이후의 변화가 더 눈에 띄어야 합니다. 이는 눈에 띄지 않는 조정이 아닌 실질적인 차이를 목표로 하는 디자인 결정을 내리는 데 도움이 됩니다.

이러한 고려 사항은 예를 들어 글꼴 크기 변화에도 적용되어야 합니다. 글꼴 크기 9px와 10px는 쉽게 구분할 수 있지만, 72px와 73px는 거의 차이를 느낄 수 없습니다. 따라서 글꼴 크기 변화는 글꼴 크기에 비례하여 증가해야 합니다. 황금비 **(1 : 1.61)** 에 해당하는 피보나치 수열(... 8, 13, 21, 34, 55 ...)을 따르는 변화 는 매우 유용합니다.

따라서 유용한 글꼴 크기 범위는 다음과 같습니다.

• 10px

– 법적 고지 사항 등에 사용됨.

• 16px

– 본문 텍스트의 표준 글꼴 크기

• 26px

– 작은 제목(티저 상자, H3~H4)용

• 42px

– H2용

• 68px

– 페이지의 H1용

📱 실제 앱 기반 UX 예시 (베버-페히너 법칙 적용)

1. 볼륨 조절 (iPhone, Galaxy 공통)

• 상황: 처음 10단계 중 1~3단계 사이에선 볼륨이 조금만 변해도 큰 차이를 느낌.

• 적용 이유: 낮은 자극에서는 작은 변화도 크게 느껴지기 때문 (Weber’s Law)

• UX 설계 포인트:

→ 낮은 구간은 민감하게,

→ 높은 구간은 둔감하게 변화하게 디자인

예: 아이폰 볼륨바, 삼성 볼륨 조절바 모두 하단부일수록 세밀하게 조절됨

2. 진행률 애니메이션 (KakaoTalk, 네이버페이, 쿠팡 등)

• 상황: 로딩바가 처음엔 빠르게 찼다가, 뒤로 갈수록 느리게 진행됨

• 적용 이유: 사용자 체감상 처음 30%가 빨리 차야 덜 지루하게 느낀다 (로그 곡선 기반)

• UX 설계 포인트:

→ 심리적으로 “금방 끝나겠다”는 인상을 주기 위함

예:

• 카카오페이 송금 처리 로딩바

• 쿠팡 배송 상태 애니메이션 바

3. 스크롤 속도 감속 (Instagram, TikTok, Pinterest)

• 상황: 피드를 빠르게 스크롤하다 멈추면 자연스럽게 “슥”하고 멈춘다

• 적용 이유: 사람이 감각하는 움직임은 선형이 아니라 로그 또는 비선형 감속에 더 자연스럽게 반응함

• UX 설계 포인트:

→ 단순히 멈추는 게 아니라, 감속이 들어간 스크롤 애니메이션으로 더 자연스러운 체감 제공

예:

• 인스타그램 탐색 탭 스크롤

• 틱톡 영상 전환 애니메이션

4. 사진 확대/축소 (카메라 앱, 지도 앱)

• 상황: 확대할수록 더 많이 손가락을 벌려야 하고, 축소할수록 덜 움직여도 효과가 크다

• 적용 이유: 뇌는 동일한 비율의 변화에 점점 덜 민감해짐

• UX 설계 포인트:

→ 로그 기반 스케일 조절로 미세한 조작도 가능한 경험 제공

예:

• iPhone 카메라 확대 줌 (1x~5x)

• Google Maps 확대/축소 반응

5. 밝기 조절 (iOS, Android 설정)

• 상황: 낮은 밝기 구간에선 작은 조정도 크게 느껴짐, 높은 구간은 거의 차이 없음

• 적용 이유: 밝기의 감각도 로그 기반으로 인식됨 (페히너의 법칙)

• UX 설계 포인트:

→ 슬라이더 감도 조절로 사용자 체감 밝기 변화에 맞춰 반응하게 함

예:

• iOS 제어 센터 밝기 슬라이더

• 갤럭시 퀵패널 밝기 조절

🔍 요약 정리

공부한 것 전반적인 요약