9. 반응형 웹 구성하기
브라우저 크기에 따라 사이즈 조절하기!
웹 서비스가 어느 정도 기본기를 갖췄을 즈음, 여러 테스트를 진행했는데,
모바일 폰으로 접속하거나 MAC의 사파리 브라우저로 들어갈 경우, svg 파일과 같은 이미지 파일이
예상 크기를 넘어 화면을 가리는 불상사가 발생했다.
브라우저 크기를 줄이게 되면 글자가 엄청 커지기도 했고…
따라서, 어느 플랫폼, 브라우저로 들어가도 의도대로 동작할 수 있도록,
반응형 웹 서비스로 최대한 변경하도록 하자.
어떻게 구현할 수 있을까?
찾아보니, CSS에서 Media Query를 이용하는 방법과 React의 React-Responsive라는 써드 파티 라이브러리가 있었다.
그러나 JSX, TSX 방식을 사용하다 보니 따로 CSS 파일을 작성하지 않았고,
마이 페이지, 로그인 등의 추가 기능을 제공하는 컴포넌트가 없어 레이아웃 자체를 변경할 필요는 없었다.
Material-UI 또한 CSS의 Media Query를 hook으로 지원하는데, useMediaQuery가 그것이다.
현재 작업한 컴포넌트를 보면, makeStyles, createStyles를 통해 CSS처럼 스타일을 작성했으므로
여기에 breakpoint을 걸어주면 해상도 타겟마다 스타일을 다르게 줄 수 있다.
프로젝트에서는 각 styles에서 사이즈를 조절해줘야 하는 곳마다 breakpoint를 걸면서 조정했다.
(사실 @media와 theme.breakpoints.up 차이점은 픽셀을 정확히 지정해 줄 수 있는가, 없는가 뿐이다)
반응형 글꼴 사이즈
theme.ts에서 테마의 글꼴과 사이즈를 정해주고 있는데,
여기에 h1, h2, …, subtitle1 등 각 variant에 @media 또는 theme.breakpoints.up을 걸어서 사이즈를 지정해주면 된다.
또는, Material-UI에서 제공하는 responsiveFontSizes()를 임포트해, theme를 export할 때 감싸주면 된다.
// file: 'theme.ts'
...
h2: {
...rawTheme.typography.h2,
...fontHeader,
fontSize: '1.5rem',
'@media (min-width: 800px)': {
fontSize: '2.1rem',
},
[theme.breakpoints.up('lg')]: {
fontSize: '2.4rem'
},
},
...
export default theme;
이런 방법이나,
// file: 'theme.ts'
...
h2: {
...rawTheme.typography.h2,
...fontHeader,
fontSize: '1.5rem',
},
...
export default responsiveFontSizes(theme);
이런 방법은 비슷하게 동작한다.
responsiveFontSizes() 함수를 사용하면 지정된 해상도마다 지정된 폰트 사이즈로 변경되며,
@media 등을 사용해 지정하면 커스터마이징을 더 할 수 있다는 것이 차이점.
타겟 컴포넌트 찾아 변경하기
반응형 웹이 적용되지 않은 상태이므로 어디가 문제인지 확실히 찾아볼 수 있었다.
특히 이후 Language Localization을 위해 띄워놓은 국기나 로고 이미지 등이 문제였다.
컴포넌트 같은 경우, Material-UI 자체에서 반응형으로 구현해 놓았으나
사용하면서 full-width 등으로 사이즈를 고정시킨 컴포넌트 등도 수정 대상이다.
사실 CSS를 변경하는 것처럼 켜놓고 계속 바꿔가는 거라서 어렵지는 않았다.
// file: 'Appbar.tsx'
const astyles = (theme: Theme) => ({
placeholder: toolbarStyles(theme).root,
toolbar: {
justifyContent: 'space-between',
},
right: {
flex: 1,
display: 'flex',
justifyContent: 'flex-end',
},
langIcon: {
marginLeft: theme.spacing(2),
minWidth: "24px",
[theme.breakpoints.up('sm')]: {
minWidth: "36px",
},
[theme.breakpoints.up('lg')]: {
minWidth: "48px",
},
},
left: {
flex: 1,
},
logo: {
marginTop: theme.spacing(1),
maxWidth: "175px",
[theme.breakpoints.up('sm')]: {
maxWidth: "300px",
},
[theme.breakpoints.up('xl')]: {
maxWidth: "350px",
},
}
});
이렇게 해상도가 변경되면서 같이 사이즈가 바뀌어야 하는 컴포넌트를 breakpoints를 이용해 지정했다.
Appbar와 Footer 컴포넌트가 특히 추가할 게 많았다. (이미지가 많다보니)
스타일 중 margin이나 이미지 등을 지정해 준 곳들을 적절하게 breakpoints를 걸면서 조정해주면 된다.
Material-UI에서 breakpoints key는 다음과 같다.
- xs: 0px
- sm: 600px
- md: 960px
- lg: 1280px
- xl: 1920px
tablet, laptop, desktop 등과 같이 breakpoint의 variant를 커스터마이징할 수도 있다.
적용 결과는?
| 메인 스크린 | 채점 기준 설정 스크린 |
|---|---|
 |  |
데스크톱, 노트북, 핸드폰 환경에서도 튀어 나가는 컴포넌트 없이 반응형이 적용되었다👍
🔥 TroubleShooting & Review
Issue:
Review
- 볼수록
makeStyles,createStyle방식이 CSS와 비슷한 것 같다🤔
