웹 레이아웃

웹 사이트를 들어갔는데 필요한 정보를 한 번에 찾을 수 없다면 매우 불편하다.

또한 화면의 구성이 이상하다면 정보를 보는데 방해가 될 수가 있다.

이러한 점들을 고려해서 웹 레이아웃을 정해야 한다.

 

🌟  반응형 vs 적응형

- 반응형

화면 크기가 변경됨에 레이아웃이 달라지는 방식이다.

깃허브 사이트가 반응형 사이트의 예시이다.

화면의 크기가 변함에 따라 요소들의 크기가 변하다가 어느 순간이 되면 레이아웃이 변경되는걸 볼 수 있다.

 

장점

1. 웹/모바일 모두 동일한 사용자 경험을 제공한다.
2. 하나의 디자인에서 레이아웃만 변경하면 된다.

 

단점

1. 레이아웃을 세밀하게 조정해야 하기 때문에 반응형보다 까다롭다.
2. 모든 콘텐츠를 불러와서 화면 크기에 따라 자동으로 조정하기 때문에 로딩시간이 적응형에 비해 오래 걸린다.

 

- 적응형

모바일, 태블릿, 웹의 레이아웃이 미리 정해져 있고, 플랫폼에 따라 제공하는 것이다.

네이버 사이트가 적응형 사이트의 예시이다.

www.naver.com

www.m.naver.com 

 

위와 같이 URL도 달라지게 된다.

웹으로 접속

 

앱으로 접속

장점

1. 디바이스에 알맞게 디자인을 변경할 수 있으므로 기기에 적합한 디자인을 할 수 있다.
2. 디바이스 환경에 가장 적합한 레이아웃을 바로 로드하기 때문에 로딩 속도가 비교적 빠르다.

 

단점

1. 여러 개의 디자인을 만들어야 한다.
2. 화면 크기별로 파일을 불러온다.

---

🌟  반응형이 좋나요?

PC, 태블릿, 모바일 플랫폼 종류 뿐 아니라 각 플랫폼에 다양한 디바이스가 존재한다.

디바이스 종류마다 디자인을 한다는 것은.. 많은 시간이 들 것이다.

  

디스플레이에 따라서 화면과 요소의 크기/위치가 달라지는 반응형이 모든 디바이스에 대응하기 적합하다고 생각한다.

어떤 디바이스로 접속하든 사용자 경험도 비슷하고, 새로운 디바이스가 출시된다해도 어느정도 대응할 수 있다.

또한 웹/모바일 버전이 따로 존재하는 것이 아니기 때문에 하나의 사이트만 유지보수하면 된다.

 

그렇다고 해서 무조건 반응형이 짱!!이라는 것은 아니다.

위에도 적었듯이 반응형에도 단점이 존재하기 때문에 자신의 프로젝트 상황에 맞는 것을 선택해야한다. 

---

🌟  BreakPoint

반응형으로 디자인을 하기 위해서는 레이아웃을 언제 변경할 지를 정해야한다.

웹, 테블릿, 모바일은 화면 넓이가 모두 다르기 때문에 중단점을 정해서 레이아웃을 변경해야 한다.

보통 세로 길이는 스크롤로 컨트롤이 가능하기 때문에 가로 길이를 고려해서 Break point 설정한다.

여기서 변화의 기준점을 Break point라고 한다.

이런 식으로 골격을 정해놓고 시작하는 것이 하나의 방법이다.

 

https://gs.statcounter.com/screen-resolution-stats

Screen Resolution Stats Worldwide | Statcounter Global Stats

웹과 관련된 통계를 내주는 사이트이다.

들어가면 해상도 통계를 볼 수 있다.

 

2023/06 ~ 2024/06 까지의 통계를 본 결과는 다음과 같다.

데스크탑 - 1920 * 1080

테블릿  - 768 * 1024

모바일 - 360 * 800

---

🌟  FlexBox vs Grid

가장 큰 차이점은 차원이다.

FlexBox는 1차원, 즉 한 방향으로 이루어진 레이아웃에 적합한 방법이다.

Grid는 2차원, 즉 행과 열을 동시에 다루는 레이아웃에 적합한 방법이다.

---

🌟  Grid Layout

먼저 웹 사이트를 어떻게 구성할 지 크게 틀을 잡아야 한다.

웹 사이트를 여러 개의 행과 열로 나눈 후에, 요소들을 배치한다.

 

이런 레이아웃을 만들고 싶다면

.container {
  display: grid;
  grid-template-columns: 200px 1fr 1fr;
  grid-template-rows: 80px 1fr 1fr 100px;
  grid-template-areas:
      "header header header"
      "sidebar content-1 content-1"
      "sidebar content-2 content-3"
      "footer footer footer";
}

grid-templeate-areas 속성으로 영역에 이름을 붙이고

.header {
  grid-area: header;
}

.sidebar {
  grid-area: sidebar;
}

.content-1 {
  grid-area: content-1;
}

.content-2 {
  grid-area: content-2;
}

.content-3 {
  grid-area: content-3;
}

.footer {
  grid-area: footer;
}

grid-area 속성으로 영역에 요소를 배치할 수 있다.

 

위의 방법이 가장 쉽게 영역을 지정하는 방법인 것 같다.

---

🌟  Grid 속성

- minmax(최소값, 최대값)

해상도 변화에 따라 그리드 셀이 작아지고 커지는 범위를 제한할 수 있다.

최소 값 자리에는 fr 단위를 사용할 수 없다. 

 

- repeat(반복횟수, 값)

반복횟수 만큼 값을 반복해준다.

반복횟수 자리에 auto-fill과 autio-fit을 넣어줄 수 있는데,

auto-fill은 남는 공간을 그대로 두고, auto-fit은 남는 공간 없이 꽉 채운다는 의미이다.

 

- grid-gap

grid-row-gap, grid-col-gap으로 하나씩 지정해 줄 수 있지만

grid-gap : 10px 20px 을 해주면 순서대로 가로, 세로 gap을 지정해 줄 수 있다.

 

- grid-row-start, grid-row-end, grid-col-start, grid-col-end

각 속성들을 통해 특정 그리드 셀에 위치시켜 줄 수 있다.

요소의 시작 점과 끝 점을 지정해서 특정 셀을 요소로 채울 수 있다.

 

어떤 속성들이 있는지 알았으니 실제로 적용해 볼 일만 남았다.

그동안 flex만 주구장창 써왔는데 이번 기회에 grid를 많이 써봐야겠다.