반응형 웹 적용기 : 3. 디바이스별 CSS 입히기

이 글은 '반응형 웹 적용기' 시리즈로, 

바로 이전에는 반응형 웹을 구현하기 위해 디바이스별 해상도를 확인해보았다.

이전의 글을 확인하고 싶다면 아래의 링크를 통해 확인하길 바란다.

2024.06.15 - [프론트엔드/CSS & HTML] - 반응형 웹 적용기 : 2. 반응형을 적용할 디바이스 해상도 확인하기

반응형 웹 적용기 : 2. 반응형을 적용할 디바이스 해상도 확인하기

 

디바이스는 크게 스마트폰, 태블릿, 데스크탑 3개의 기종을 생각해서

총 5가지의 화면(스마트폰 세로, 스마트폰 가로-태블릿 세로, 태블릿 가로-노트북, 데스크탑) 사이즈, 데스크탑에 대해 피그마로 간단하게 디자인을 진행해보았다.

화면별 반응형 디자인 산출물

이제 이 산출물을 CSS로 옮겨서 퍼블리싱을 해야한다.

기존에 만들어두었던 꾸진 UI/UX를 탈피해보도록 하자

CSS를 입히기 전의 UI

 일단 큰 틀부터 다시 바꾸려고 한다.

디자인을 깔끔히 하려고 하다보니 기존의 HTML구조도 바뀐 곳이 있어서 헤더 작업 후에 이도 작업해주겠다.

 

1. HTML에 뷰포트 설정 적용시키기

일단 뷰포트를 웹에 적용시키기 위해 다음과 같은 코드를 html의 header에 심어주겠다.

<meta name="viewport" content="width=device-width,initial-scale=1" />

이게 없으면 종종 원하는대로 반응형이 동작하지 않는 상황이 발생하나보다. 

MDN의 사이트에는 이 태그에 대해 다음과 같이 설명하고 있다.

viewport 메타 태그는 모바일 브라우저에 뷰포트의 너비를 기기 너비로 설정하고 문서의 크기를 의도한 크기의 100%로 조정하여 문서를 모바일에 최적화된 크기로 표시해야 함을 알려줍니다.

이것이 왜 필요한가요?
모바일 브라우저는 뷰포트 너비에 대해 거짓말을 하는 경향이 있기 때문입니다.

반응형 웹을 개발하고 있다면 꼭 메타 태그를 넣어주자.

일단, 기존에 있던 작업물을 주석 처리한 뒤, 헤더 작업을 먼저 반응형으로 만들어주고자 하였다.

---

2. 반응형 웹사이트 제작을 위한 사이즈 단위 선정

반응형 작업을 위해서는 기존의 px, pt처럼 고정된 크기로 작업하지 않고 화면의 배율에 따라 상대적인 폰트값을 적용하는 반응형을 위한 단위가 있다.

 

1) 상대적인 단위 : rem과 em

찾아본 결과, 가장 많이 사용되는 것이 rem과 em인 것 같다.

여러 사이트를 찾아본 결과, '화면의 배율'에 따라 상대적인 배율 값을 적용한다고 하지만,

정확히는 '특정 요소에 지정된 폰트 사이즈를 기준으로 배율을 적용한 값'인 것 같다.

예시를 들면 아래와 같다.

반응형 폰트 크기 설명을 위한 화면

em은 해당 요소의 바로 위의 요소(부모 요소)가 가진 폰트가 기준이 된다. 

rem은 문서의 최상위 부모인 html을 기준으로 배율값을 지정해주는 크기 단위이다. (root + em)이 합쳐져서 rem이라고 한다.

그림을 통해 위의 두 단위가 적용되는 과정을 살펴보자.

 em 단위는 부모 요소인 SPAN에 지정된 폰트 크기가 20px였을 때, 그 아래의 요소에 1.5em 값을 적용하면 '20px X 1.5 = 30px' 이라는 값이 도출된다. 즉, 1.5em을 적용한 요소의 크기는 30px라는 이야기이다.

2rem을 적용한 요소의 경우, html 태그에 적용된 폰트 사이즈가 10px라면 '10px X 2 = 20px' 라는 값이 도출된다. 

이 외에도 %, vw, vh 등이 존재한다. 

 

2) 상대적인 단위 : vw과 vh와 %

vw은 viewport width의 약어, vh는 viewport height의 약어를 뜻한다.

여기서 viewport란 화면 Display 상의 표시 영역을 의미한다.

즉, vw와 vh는 현재 실행중인 스크린 크기에 맞춰 상대적인 크기를 반환한다.

1vw = 화면의 가로 넓이 1%

1vh = 화면의 세로 넓이 1%

즉, %와 비슷한 역할을 하는데, 기준점을 전체 화면의 %가 아닌, 각각 width, height에 놓는 것이다.

 

그렇다면, %와는 어떻게 다르길래 따로 쓰이는 것일까?

%는 스크린이 아닌, 적용된 요소의 부모 요소 중, %를 이미 사용하고 있는 가장 가까운 부모로부터 상대적인 값을 개산한다. 즉, 100%의 기준은 부모 요소이다.

vw와 vh는 화면 전체의 길이를 하므로, 어떤 요소에 적용하였든

vw는 화면 가로길이를 100% 기준으로,

vh는 화면 세로길이를 100% 기준으로 적용한다.

또한, %와 vw, vh는 기준 길이를 계산할 때 '스크롤바'를 포함 여부에 따라서도 달라진다.

%는 전체 화면 기준으로 %를 사용한다고 해도 스크롤바를 포함하지 않은 현재 길이를 기준으로 계산한다.

반면에 vw, vh는열려있는 화면 전체의 상대길이이기 때문에 스크롤바를 포함하는 길이를 기준으로 계산한다.

 

3) 그 밖의 상대 길이 : vmin, vmax

추가적으로 vmin과 vmax가 있는데, viewport 길이 중 더 짧은 길이를 기준으로 삼는 것이 vmin, 더 긴 길이를 기준으로 삼는 것이 vmax라고 한다. 

아래의 사진을 참조하여 기억하자.

vmin과 vmax 예시

---

일단 나는 토이 프로젝트에서는 %, vw, vh를 기준으로 작업하였다.

폰트 사이즈보다도 전체 화면에서의 차지하는 화면 비율 및 width 길이에 따른 브레이크포인트들이 필요했기 때문이다.

퍼블리싱된 테스크탑 기준의 화면

 

3. 커스텀한 예쁜 버튼 적용

https://codepen.io/zachacole/pen/KdGzgb

Gradient Button Animations

버튼에 특이하게 적용할 hover 애니메이션이 없을까 하다가 다음과 같은 애니메이션을 발견해서 적용해주었다.

세상엔 정말 엄청난 실력자들이 많다는 것을 느끼고 간다...

(공부 진짜 똑똑하게 열심히 해야 저들을 따라잡을 수 있을 것 같다)

아래는 모든 CSS가 적용이 끝난 UI이다.

퍼블리싱 1차 완료된 화면

나머지는 이벤트를 모두 적용시킨 후 다듬을 예정이다.

정리하면서

아쉽게도 반응형 폰트에 대한 적용법의 기준을 알려주는 공식문서는 존재하지 않는 것으로 보인다.

(혹은 내가 못 찾았거나...)

이런 폰트들이 있음을 인지하고 필요한 순간에 적재적소에 반응형 폰트들 중 디자인하고자 하는 화면에 맞춰서 구조를 구축하는 것은 오롯이 프론트 개발자 몫임을 알 수 있었다. 

유저친화적인 UI/UX 개발을 위해서는 많이 시도해보고 많이 접해보는 수밖에 없을 것 같다. 

---

출처

https://developer.mozilla.org/ko/docs/Learn/CSS/CSS_layout/Responsive_Design

반응형 디자인 - Web 개발 학습하기 | MDN

https://ziszini.tistory.com/25

[CSS] 반응형 폰트 사이즈 단위 rem? em?

https://yozm.wishket.com/magazine/detail/1410/

웹 디자이너가 PX대신 REM을 사용해야 하는 이유 | 요즘IT

 

https://bumday.tistory.com/99

[CSS] vw와 vh이 무엇인가? %와의 차이점은?