스켈레톤 UI와 Box Model 구성요소

매일 프론트에 대한 공부 + 글을 남겨야 겠다고 생각을 하게 됐는데 아주 기본적인 것부터 차례대로 해보려고 한다!

스켈레톤 UI

콘텐츠가 아직 로드되지 않았을 때 자리를 미리 차지하는 회색 블록 형태의 플레이스홀더를 화면에 보여주는 기법을 말한다.

 

 

효과

• 로딩 중에도 레이아웃 유지: 콘텐츠가 아직 로드되지 않았어도 레이아웃이 미리 고정되어 있음으로써, 화면이 갑자기 바뀌는 플리커링(flickering)을 줄여준다.
• 사용자 인지 속도 향상: "지금 뭔가 로딩되고 있다"는 신호를 주어 사용자 불안을 줄이고, 기다리는 시간을 덜 지루하게 느끼게 해준다.
• 콘텐츠 구조 예측 가능: 유저는 스켈레톤의 형태만 보고도 "여긴 이미지가 올 거고, 여긴 텍스트겠구나"를 예측할 수 있어, 실제 콘텐츠 로딩 후 빠르게 적응 가능하다.

 

로드되지 않았을 때 또 사용할 수 있는 UI가 로딩 스피너가 있는데 둘의 차이점은 뭔지 정리해보았다.

항목	스켈레톤 UI	로딩 스피너
정보 전달력	어느 콘텐츠가 올지 유추 가능	무엇이 로딩 중인지 알기 어려움
UX 반응성	콘텐츠 구조를 미리 보여줌	기다림만 강조됨
복잡성	컴포넌트에 따라 구현 복잡할 수 있음	상대적으로 구현 간단

 

 

728x90

 

Box Model의 기본 구성 요소

 

CSS를 작성할 때 가장 기본이 되는 레이아웃과 관련된 부분이다.

 

요소의 실제 크기는 다음 4가지 구성 요소의 합으로 계산 되는데

[margin] + [border] + [padding] + [content(width)]

 

 

• width: 기본적으로 content 영역의 너비만 지정
• padding: 콘텐츠 주변 여백
• border: 테두리
• margin: 요소와 외부 요소 사이 간격 (박스 크기에는 포함되지 않지만 주변 배치에 영향을 줌)

 

여기에서 box-sizing 속성에 대해서 차이가 있는데

box-sizing: content-box; (기본값)

• width는 내용(content) 영역만의 너비다.
• 실제 요소가 차지하는 공간은:

= width + padding + border

// example
.box {
  width: 200px;
  padding: 20px;
  border: 5px solid black;
  box-sizing: content-box;
}

총 크기 (패딩과 테두리 포함):
200 + 20*2 + 5*2 = 250px

 

 

 

box-sizing: border-box;

• width는 padding + border + content 모두를 포함하는 전체 너비다.
• 따라서 content 영역은 자동으로 줄어든다.

// example
.box {
  width: 200px;
  padding: 20px;
  border: 5px solid black;
  box-sizing: border-box;
}

전체 너비는 항상 200px로 유지되며,
content 영역은 200 - 2*20 - 2*5 = 150px

 

대부분의 웹 UI에서는 box-sizing: border-box;를 기본으로 설정하는데

이렇게 하면 width 값만 조정하면 전체 크기를 쉽게 예측할 수 있기 때문이다.

 

전역설정을 하는 방법은 아래와 같다.

*,
*::before,
*::after {
  box-sizing: border-box;
}

 

 

위의 내용을 표로 정리하면 다음과 같다.

속성 값	width가 의미하는 것	실제 크기 요소
content-box (기본)	콘텐츠 영역만	width + padding + border
border-box	전체 박스 크기	width = content + padding + border