간단하게 만드는 반응형 웹 디자인

공부의 기록·2022년 1월 25일

CSS html

HTML, CSS

목록 보기

2/2

Intorduce

본 문서는 2022년 1월 25일 에 작성되었습니다.

해당 부분은 정말로 간단함 에만 의미를 두고 있습니다.
간단함을 무기로 삼은 가이드 라인 으로 작업량을 줄이고 싶었습니다.

따라서 세부적으로 얼마의 값 이 균형적인지 혹은
어떠한 디자인을 적용하는지 에 대해서는 언급하지 않습니다.

❓ 반응형 웹이란?

다양한 디바이스, 창 화면 크기에서 원할하게 랜더링되는 웹 페이지
반응형 웹 디자인 - Adobe Experience Cloud

크게는 PC, Tablet, Mobile 부터
적게는 Display 크기에 맞춰서 웹 사이트의 디자인이 랜더링 되도록 하는 CSS 설계 기법입니다.

주로 CSS 의 미디어 쿼리를 사용하여 구현합니다.

🤔 반응형 웹 필요한가?

여유가 있다면 필요하다고 생각합니다.

개인적으로 반응형 웹사이트/일반 웹사이트 는 유저 경험 측면에서 차이가 난다고 생각합니다.
특히나 저처럼 화면 분할을 하거나 다양한 디바이스를 사용 하는 사용자라면 다음에 공감할 것입니다.

웹 사이트에 가로 스크롤바가 생긴 것을 본 적이 있다.
웹 사이트의 컨텐츠가 잘린 것을 본 적이 있다.

이러한 경우 해당 사이트에 대한 만족도는 낮았습니다.

반대로 말하면, 동일한 컨텐츠를 제공하는 사이트라면 다수의 경우 반응형 웹으로 만드는 것이 좋다 라는 생각을 하게 되었습니다.

단,
다수의 이미지 및 영상을 송출하고 있는 사이트에서는 반응형 웹을 구현하는데 주의해야 한다.
또한 대규모 서비스의 경우 사이트가 무거워지는 단점도 있다.

🤔 노동 투자 대비 가성비는?

어디선가 다음과 같은 말을 들어본 적이 있다.

일반적으로 PC/Mobile 디자인을 구현하는데 2의 노력이 들어간다면,
반응형 디자인을 구현하는 데 1.5의 노력이 들어간다.

나는 이 말이 절대적으로 아니다 라고 생각한다.

반응형 웹은 생각보다 높은 숙련도를 요구한다.
그렇지 않을 경우 가로 스크롤바, 컨텐츠 잘림 및 밀림 현상, 랜더링 렉 등이 발생한다.
따라서 숙련자가 아닐 경우 반응형 디자인을 구현하는데 2, 3 이상의 노력이 들어간다 라고 생각한다.

따라서 반응형 디자인이라는 것은 빨간 독사과와 같은 존재라고 생각한다.

⚡ 가이드라인이 필요해!

따라서 저는 가이드라인이 필요함을 느꼈습니다.
추가로, 협업 파트너가 반응형 디자인을 쓰지 못하는 경우 제 코드를 이해하지 못하는 경우도 있었기에....

물론, 제가 프론트앤드 개발자 였다면 생각이 달랐을 지도 모르겠습니다만,
적어도 저는 백앤드 개발자 를 지향하고 있고 그저 최소한의 UX/UI 를 보장하고 싶을 뿐이었습니다.

제일 먼저 찾아본 것은 고정값으로 사용할 컨텐츠 영역의 기준값 과 그리드 디자인 이었습니다.

컨텐츠 영역 크기 1000px, 1100px, 1200px, ...

컨텐츠 영역 좌우 패딩 60px, 40px, 30px, 20px, 10px, ....

컨텐츠 간 수직 거리 10px, or 0

컨텐츠 영역 내부의 그리드 구조와 갭 12 or 6 column, 10 or 30 gap
웹디자인 시작한다면 이건 꼭 보세요[포토샵]

⚡ 가이드라인 > HTML 구조

기존에 이용하던 BEM 을 최대한 살리면서 가시성 있는 HTML 구조를 완성했습니다.

section#element
  div.element-sizer
    div.element-displayer
      div.element_header
      div.element_content

#element

컨텐츠 목적 정의 ( #ads, #headers, #feeds 등으로 가시성 확보)
CSS 분리 저장, 작업 ( ads.css, headers.css, feed.css 등으로 유지보수성 확보)

.element-sizer

반응형 웹 구현
컨텐츠 영역의 상하좌우 여백
컨텐츠 간의 마진과 다르며, 이는 .element-displayer 에서 제어합니다.

.element-displayer

flex, grid 등의 컨텐츠 속성 정의 목적
display: none 등을 사용하기 위한 영역
내부 컨텐츠 간의 간격은 gap 을 이용해서 사용

margin, padding 을 주기 시작하면 코드가 쓸데없이 길어집니다.
두 요소는 컨텐츠의 위치를 섬세하게 조절할 수 있으나,
이러한 조절은 너무 오래걸리고 유지보수가 힘듭니다.
따라서 최대한 gap 을 통해서 간격을 잡는 방식을 준수하고 있습니다.

.element_header

컨텐츠의 종류 등을 명시
display grid 일 시 grid-column 값등으로 제어

.element_content

display grid 일 시, grid-column 과 grid-row 를 통해서 값을 제어
display flex 일 시, 외부에 .element_content_container 을 만들어서 포장

⚡ 가이드라인 > CSS 작성

실제 예시 코드를 작성해보았습니다.

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
#header {
  width: 100%;
  height: auto;
}
.header-sizer {
  width: 1000px;
}
@media screen and (max-width: 1100px) { // sizer 보다 100 px 정도 크게
  width: 100%;
}
.header-displayer {
  width: 100%;
  
  gap: 10px;
  display: grid;
  grid-template-column: repeat(12, 1fr);
}
.header_header {
  grid-column: span 12; // 혹은 1/-1 등으로 상세한 위치
  
  // 내부에 바로 h1 등으로 제목을 적었다면
  text-align: center;
  
  // 내부에 여러 개의 컨텐츠를 포함하고 있는 컨테이너의 영역을 하고 있다면
  display: flex;
  flex-direction: row; // 내부 컨텐츠 확장 방향을 수직 아래로 하고싶다면 column 으로...
  align-center: center;
  justify-content: center;
}
.header_content {
  // 그리드 안에 n 개의 컨텐츠를 넣고 싶으면 12/n 의 값을 부여
  // 추천하는 수는 4,3,2
  grid-column: span 3;
}
// 최종적으로 잘리는 컨텐츠를 확인하고 grid-column, font-size, padding 등을 제어
// 단,
// 좌우 padding 은 header-sizer 에서 주며 상하 gap 은 header-displayer 에서 준다
@media screen and (width: 직접 설정) {
  .header_content {
    grid-column: span 6;
  }
}
@media screen and (width: 직접 설정) {
  .header_content {
    grid-column: span 12;
  }
}