brunch

매거진 말문을 트이게 만드는 IT 지식

라이킷 45 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 이현아 Jun 10. 2022

7. 화면 크기에 반응하는 웹 UI

말문을 트이게 만드는 IT지식

이번 글은 총 10개 중 7번째 챕터입니다. 원활한 이해를 위해 차례로 읽어보시는 것을 추천드려요. 글 하단에 모든 챕터를 확인하실 수 있습니다.

“이 프로젝트는 페이지 수가 너무 많아서 반응형으로 만들기 힘들어요!”
”이런 식으로 디자인하시면 반응형 웹으로 못 만들어요."

반응형 웹은 하나의 웹이 화면의 가로 크기에 따라 UI가 변하는 것을 말합니다. PC에서 인터넷 창을 가로로 줄였다 늘렸다 해보세요. 그 웹이 반응형인지 아닌지 알 수 있어요. APPLE의 제품 소개 페이지, Airbnb 메인 페이지는 반응형 디자인을 잘 보여주고 있어요. 아래에 링크 걸어두었으니 한 번 방문해보세요!

1. 반응형 웹이 생긴 이유

스마트폰이 없던 시기에는 컴퓨터 모니터를 주로 사용했습니다. 그래서 모니터 사이즈에 맞는 웹을 중심으로 발전했어요. 모니터는 대부분 가로로 넓은 모양에 비슷한 비율을 가지고 있었기 때문에 아래 이미지의 네이버 웹과 같이 양옆에 공백을 주면 어떤 모니터든 같은 UI를 보여줄 수 있었죠.

하지만 스마트폰이 나오면서 화면이 세로로 길어지고 크기가 다양해졌습니다. 스마트폰으로 기존 웹 UI를 보려면 화면이 한 화면에 볼 수 없으니 손으로 이동해가며 봐야 했어요. 세로는 스크롤하면 된다지만, 가로로 긴 화면을 보는 건 정말 불편했죠. 이 불편함을 해소하기 위해 모바일용 화면을 만들기로 했습니다. 하지만 똑같은 기능을 제공하는 웹과 앱을 따로 만들면 조그만 변경 하나에도 2개의 파일을 수정해야 하는 귀찮은 일이 발생합니다. 그래서 나온 것이 반응형 웹이에요!

2. 반응형 웹은 어떻게 만들어?

반응형 웹은 하나의 파일로 여러 가지 화면 사이즈의 UI를 보여줄 수 있습니다. 앞에서 배웠던 CSS 기억나요? 웹코딩 시 디자인을 결정하는 코드죠. 반응형 웹을 만들 때 CSS에서 “A 사이즈는 사진을 5줄로 보여주고, B 사이즈로 줄어들면 2줄로 보여줘!”같은 코드를 작성합니다. 하지만 반응형 웹이라고 디자인이 휙휙 바뀌는 건 불가능해요! 공통 CSS 코드는 그대로 두고 레이아웃이나 크기, 위치 등 변화가 필요한 부분만 새로 작성하기 때문이죠.

2–1. Breakpont

Breakpoint는 말 그대로 무너지는 지점을 말합니다. 반응형 웹에서 UI는 화면 사이즈가 줄어듬에 맞춰서 점점 변해가는 것이 아니라, 특정 사이즈가 되면 두둥! 하고 무너집니다. 여기서 Breakpoint는 두둥! 하는 지점입니다. 예를 들어 “A 사이즈는 사진을 5줄로 보여주고, B 사이즈로 줄어들면 2줄로 보여줘!”라는 코드가 있습니다. A 사이즈~B 사이즈 직전까지는 5줄로 보여주다가, B 사이즈가 되는 순간 2줄로 변하는데 이 지점이 Breakpoint예요.

사이즈 변화에 따른 breakpoint 위치

2–2. pixel / dp / dpi / mdpi

앞에서 화면 사이즈가 다양해졌다고 했었지요? 그뿐만 아니라 화면이 점점 선명해지고 있습니다. 아래 이미지처럼 사이즈가 동일해도 pixel의 밀도가 높을수록 화면이 선명해집니다. 이처럼 pixel의 밀도를 나타내는 수치가 dpi입니다. 해상도라고도 하죠. mdpi의 m은 medium의 앞글자를 따와서 만들어진 말로 ‘기준이 되는 dpi’라는 뜻입니다. mdpi를 기준으로 화면이 커짐에 따라 hdpi(1.5배), xhdpi(2배), xxdpi(3배), xxxdpi(4배)로 말하고 있어요.

pixel의 밀도, dpi

pixel은 절대적인 수치이고 dp는 상대적인 수치입니다. pixel 밀도가 mdpi라면 1px과 1dp는 크기가 동일하지만, pixel은 dpi가 낮아지면 커 보이고 높아지면 작아 보입니다. 하지만 dp는 dpi가 변하면 그 비율에 따라 크기를 바꿔줘요. 아래 이미지처럼 dpi가 mdpi보다 높아진다면 1 pixel 이미지는 작아지겠지만, 1dp 이미지는 같이 커지기 때문에 우리 눈에는 이미지 크기가 같아 보여요.

pixel & dp 비교하기

2–3. em / rem

em과 rem은 반응형 웹을 개발할 때 중요한 요소입니다. em은 ‘바로 윗 폰트 사이즈의 배수’라는 뜻입니다. 제일 상단에 있는 폰트 사이즈를 정하고, 그 아래 폰트 사이즈부터 ‘em’을 사용해 입력합니다. 아래 이미지처럼 최상단 폰트가 16pt라면 그다음 폰트의 2em은 32pt이고, 그다음 폰트의 2em은 64pt가 됩니다. 제일 상단에 있는 폰트 사이즈가 변하면, em을 사용한 폰트들도 비율에 맞춰 크기가 변하기 때문에 반응형 웹을 만들 때 편리하죠. 한 사이즈에 맞춰 코드를 작성한 후, 다른 사이즈 최상단 폰트 크기만 변경하면 em을 사용한 모든 폰트의 크기가 변경되는 것이죠!

하지만 코드가 길어지면 폰트 사이즈가 걷잡을 수 없이 커지고 계산하기도 정말 힘들어져요. 그래서 실제로는 rem이라는 개념을 더 많이 사용합니다.

rem은 root em의 줄임말로 ‘최상단 폰트의 배수'라는 뜻입니다. 제일 상단에 있는 폰트 사이즈를 뿌리로 두고, 그 아래 폰트 사이즈는 ‘걔의 2배’, ‘걔의 3배’ 이렇게 계산됩니다. 아래 이미지처럼 최상단 폰트가 16px이라면 그다음 폰트의 2 rem은 32pt이고, 그다음 폰트도 2 rem은 32pt가 됩니다.

그래서 코드가 길어질수록 계산이 힘들어지는 em과 다르게 rem을 사용하면 최상단 폰트 사이즈만 알면 돼서 훨씬 편리해요!