반응형 레이아웃을 만들 때, 디자인 시안에서 받은 px 단위를 그대로 쓰면 화면이 줄어들 때 위치나 크기가 틀어진다.
그래서 퍼센트 단위로 변환해두면 화면 크기가 줄어도 같은 비율을 유지할 수 있다.
1. 요소와 기준이란?
공식을 적용하기 전에 “요소”와 “기준”의 의미부터 확실히 알아야 한다.
-
요소(Element)
퍼센트로 바꾸고 싶은 대상 값- 이미지/말풍선의 가로(px)
- 여백(px) →
left,right,top,bottom - 박스의 세로(px)
-
기준(Base)
그 요소가 속해 있는 전체 크기- 가로 크기/여백을 계산할 때 → 디자인 시안 전체 가로폭(px)
- 세로 크기/여백을 계산할 때 → 디자인 시안 전체 세로높이(px)
- 경우에 따라 상위 컨테이너의 크기가 기준이 되기도 함
쉽게 말해, “요소 ÷ 기준 = 퍼센트” 구조다.
2. 공식
퍼센트(%) = (요소 px 값 ÷ 기준 px 값) × 100- 가로 값: 전체 시안의 가로폭으로 나눈다
- 세로 값: 전체 시안의 세로높이(또는 상위 컨테이너 높이)로 나눈다
3. 예시 (시안 크기 448 × 652px)
말풍선 너비
- 요소: 250px
- 기준: 전체 가로폭 448px
(250 ÷ 448) × 100 = 55.8%→ w-[55.8%]
캐릭터 이미지 너비
- 요소: 298px
- 기준: 전체 가로폭 448px
(298 ÷ 448) × 100 = 66.5%→ w-[66.5%]
왼쪽 여백
- 요소: 10px
- 기준: 전체 가로폭 448px
(10 ÷ 448) × 100 = 2.2%→ left-[2.2%]
말풍선 안쪽 텍스트 박스 top
- 요소: 13px
- 기준: 말풍선 높이 163px
(13 ÷ 163) × 100 = 8.0%→ top-[8%]
말풍선 아래쪽 여백
- 요소: 15px
- 기준: 컨테이너 높이 652px
(15 ÷ 652) × 100 = 2.3%→ -bottom-[2.3%]
4. 코드 적용 (Tailwind CSS)
<div className="absolute -bottom-[2.3%] w-[55.8%] aspect-[250/163]">
<div className="relative aspect-[250/163]">
<Image
src="/images/speech-bubble-up.svg"
alt="speech-bubble-up"
fill
className="object-cover"
/>
<div className="absolute top-[8%] left-[4%] w-[70%]
flex flex-col justify-between items-center
text-[clamp(12px,3.6vw,16px)]">
<span>이제 본격적으로</span>
<span>{`${"ㄴㅇㄹ"}님의 사주팔자를`}</span>
<span>분석해볼 차례네요</span>
</div>
</div>
</div>5. 글자 크기까지 반응형으로
시안에서 글자가 16px이라면, 그대로 고정하면 반응형에서 균형이 안 맞는다.
vw 방식
text-[3.6vw] // 16px ÷ 448px × 100 ≈ 3.6vw단점: 큰 화면에선 너무 커짐
clamp 방식 (실무 권장)
text-[clamp(12px,3.6vw,16px)]- 최소 12px
- 화면 448px일 때 16px
- 더 넓어져도 16px 이상 커지지 않음
scale 방식 (시안과 완벽 동기화)
글자를 16px로 고정해두고, 말풍선 전체를 transform: scale()로 줄인다.
텍스트와 이미지가 1:1 비율로 같이 축소됨.
6. 핵심 요약
- 요소 = 변환할 값(px)
- 기준 = 그 요소가 속한 전체 크기(px)
- 퍼센트 = (요소 ÷ 기준) × 100
- 가로 값은 전체 가로폭, 세로 값은 전체 세로높이를 기준으로 나눈다
- 글자 크기는
clamp()를 활용하면 가독성과 반응성을 동시에 잡을 수 있다
기록하자