개인 프로젝트를 진행하면서 개별 디바이스마다 스타일을 하나하나 입력하고 있는 나를 발견하게 되면서 반응형 디자인에 대해 알고 싶다는 생각이 들어 공부하게 되었다.

🔥 반응형 디자인 규칙 3가지

- 모바일 먼저
- 미디어 쿼리
- fluid layout

반응형 디자인이 왜 필요하죠?

이전에는 데스크탑, 모바일 웹사이트를 각각 제작하였다면 반응형 디자인을 하게 되면 분리되지 않은 같은 HTML, CSS를 어떤 유저에게도 전달할 수 있다. 미디어 쿼리 덕분에 유저가 사용하는 브라우저 뷰포인트 사이즈에 따라 컨텐츠를 다르게 렌더할 수 있다.

시작 전 고려사항

✅ 디자인 = 컴포넌트 쪼개기

✅ HTML 작성시 데스크탑요소들도 모두 포함해야 한다. 같은 HTML이라는 걸 기억해야 한다.

✅ 초기 스타일 먼저 적용하기

• font, color

:root {
  box-sizing: border-box;
  /* 뷰 포트에 따라 글자 살짝 커짐 */
  /* 가장 큰 breakpoint에서 글자 더 커지지 않도록 고정된 font-size 주기 */
  font-size: calc(lvw+0.6em);
}

✅ 보이지 않는 요소를 처리하는 방법

• 햄버거 버튼 같은 경우, dislpay:none인 경우 스크린 리더기가 읽기 못해 접근성이 저하된다. 따라서 position : absolute로 뷰포트에서 보이지 않도록 위치 설정해야 한다.

자 그럼 반응형 디자인을 직접 해보자!

1. 모바일 먼저 제작하기

• 공간이 좁은 모바일을 먼저 제작할 경우 모바일과 데스크탑을 모두 만족시키기가 쉽다. 반대로 데스크탑 먼저 제작하면 상대적으로 좁은 공간인 모바일에 많은 요소를 넣는게 쉽지 않다.
• 모바일은 hover가 되지 않기 떄문에 미디어쿼리 데스크탑 사이즈에만 추가하면 된다.

# 모바일 디자인 팁

• Task Oriented Content가 먼저 나온다.
• 화면이 좁기 때문에 중요한 요소가 먼저 나와야한다. 반대로 Desktop의 경우는 interactive하게 구성하는게 중요하다.

2. 미디어쿼리 활용하기

• HTML meta 태그를 꼭 추가해야한다. 모바일 기기에는 모바일 버전을 보여주기 때문에 중요하다.
• 스크린 사이즈에 반드시 em 사용하기 -> 왜? 모든 브라우저에 일관되는 디자인을 보여준다.
• em 사용하게 되면 scale up과 down에 용이하다.
• 모바일 먼저 디자인하기 때문에 미디어쿼리는 min-width를 사용하게 된다.

3. Fluid Layout

• 컨테이너가 뷰포트 width에 맞게 늘어나고 줄어들도록 하는게 중요하다.
• 컨테이너 width에 특정 숫자가 아닌 % 단위 사용한다. 이렇게 하면 스크린 크기 상관없이 컨텐츠가 fit하게 자리를 차지한다.
• 컨테이너 width가 400px인 경우, device가 200px이면 overflow한다.
• 컨테이너를 고정된 값인 px이 아니라 %로 생각하면 좋다.

# responsive image

• 이미지 압축하는 건 필수!
• 다른 뷰포트에 다른 사이즈의 이미지를 사용하면 작은 기기에 작은 용량의 이미지가 로드되도록 할 수 있다.
• 이미지에 max-width:100%를 적용하면 컨테이너 넘치지 않고 이미지가 반응형으로 동작한다.

회고

• 반응형 디자인 구현이 큰 산처럼 느껴져서 할 때마다 어려움을 많았다. 어느 순간 내가 이미지 위치를 각각 px로 잡고 있었다. 매번 생각만 하다가 책을 읽고 manual을 작성하니 왜 모바일 먼저 제작해야 하는지를 이해할 수 있어서 좋았다. 또한 규칙을 정하고 나니 따라야 할 것들이 분명해지고, 스타일 코드가 더 단순해져서 좋았다. 프로젝트를 진행하다 막히는 순간이 오면 진행하기 전 규칙이 필요한 순간임을 다시 한 번 배웠다.