HTML CSS 8일 완성하기 : 6일차 웹페이지 개발 프로세스, 반응형 웹페이지 기초

html ・ css

HTML CSS 8일 완성하기 : 6일차 웹페이지 개발 프로세스, 반응형 웹페이지 기초

HYEMBURGER 2023. 2. 10. 20:49

6일 차!

섹션 7은 그동안 섹션의 두 배정도라 이틀에 나눠서 듣기로 했다.

최종 프로젝트를 하는 섹션.

오늘 열심히 만들어봤더니 뿌듯하다. 그럼 기록 시작!

웹페이지 개발 프로세스 ?

총 6가지 정도로 나눌 수 있다.

프로젝트 대상, 목표 설정
프로젝트 계획
레이아웃, 디자인 스케치
구현
테스트, 최적화
배포 후 업데이트 및 유지보수

하나씩 차근차근 어떤 일을 하는지 알아보자.

1. 프로젝트 대상, 목표 설정

- 이 웹사이트가 실제로 누구를 위한 것인지 생각하기

ex. 나를 위한 웹사이트인가? 고객 혹은 회사를 위한 웹사이트인가?

- 웹사이트의 실제 용도는 무엇인가? 이 사이트의 주요 목적은?

ex. 정보 제공, 제품 판매, 오락(사용자를 즐겁게 하기 위한 용도) .. 등

- 프로젝트 대상 청중을 예상하기 (사용자층은 어떤 사람들인가?)

🧑‍💻 즉, 특정 프로젝트를 위한 비즈니스 목표와 사용자 목표, 사용자층 를 설정한다.

2. 프로젝트 계획

(기초) 1번에서 했던 비즈니스 목표, 사용자 목표, 사용자 층을 기초로 한다.

- 웹사이트의 콘텐츠를 계획하고 모으는 작업부터.

보통 클라이언트가 재료들을 제공해 주는 편이지만 제작자(나)는 이를 제작, 찾도록 도울 수도 있다.

- 규모가 큰 웹사이트라면 사이트맵을 계획

이 사이트에 어떤 페이지가 필요하고 어떤 콘텐츠를 바탕으로 어떻게 연결되는지를 계획한다.

- 이 웹사이트의 개성은 무엇인가?

- 콘텐츠를 기반으로 한 각 페이지에 필요한 섹션 기획

디자인을 위해 콘텐츠를 활용하는 게 아니라 콘텐츠를 활용하기 위해 디자인을 보조로 이용해야 한다.

언제나 중심은 콘텐츠여야만 한다.

🧑‍💻 가장 중요한 건, 사용자에게 전달하고자 하는 메시지를 최대한! 잘! 전달할 수 있어야 한다는 점이다.

3. 레이아웃, 디자인 스케치

- 어떤 구성 요소를 사용할 것인지, 콘텐츠의 메시지를 전달하기 위해 어떤 레이아웃이 필요한지 고민하기

생각이 났다면 종이나 기타 소프트웨어 등에 그려보자!

이때 처음부터 세세하게 짜려고 하지 말고 커다란 박스형태로 짜본다.

이미지, 콘텐츠를 집어넣을 상자 정도로 생각하자.

- 그리고 이 과정은 반복과정이라는 걸 잊지 말자.

한 번에 완벽할 필요도 그럴 수도 없다는 걸 인지하자.

스케치와 코드를 넘나들며 좋은 해결책이 나올 때까지 계속 실험해 보자. 어느새인가 좋은 해결책이 떠오를 것!

🧑‍💻 그렇다고 여기에 너무 많은 시간을 들일 필요는 없다. 절반정도 스케치가 됐다고 생각하면 html css로 넘어가자.

4. 구현

실제로 웹사이트를 계획했던 대로 디자인하고 구현하는 단계.

- 이미 레이아웃, 구조, 콘텐츠는 가지고 있다. 잘 배치해서 시각적 스타일을 적용하자.

- 선택한 웹사이트의 개성, 디자인 가이드라인에 근거하여 만들어본다.

- 고객(회사 등)의 브랜딩 요소를 사용한다.

ex. 색상, 타이포그래피, 아이콘 등

5. 테스트, 최적화

- 주요 브라우저에서 잘 돌아가는지 확인한다.

ex. 구글 크롬, 파이어폭스, 사파리, 엣지 ... 등 (IE 제외)

- 반응형 디자인의 경우 모바일 장치에서 웹사이트를 테스트해본다.

- 웹사이트에서 사용하는 모든 이미지를 최적화

1. 올바른 크기를 사용한다 (픽셀 등 깨지지 않는) 2. 용량 압축 (중요!! 사용자의 환경이 그리 좋지 않을 수 있다)

- 접근성 문제를 최대한 확인

ex. 색 대비 문제 등

- 크롬의 라이트 하우스 기능 > 성능 시험

- 검색 엔진 최적화 (SEO)

6. 배포

- 웹사이트를 호스팅 플랫폼에 업로드

정말 많은 호스팅 플랫폼이 존재하지만, 이 강의에서는 Netlify를 사용할 예정

- 멋진 도메인 이름을 구매한다!

당연하지만 기억에 남고 쓰기 쉬운 것 그리고 웹사이트 개성과 맞는 도메인을 선택한다.

7. 배포 후 업데이트 및 유지보수

- 시간이 지나도 웹페이지 업데이트는 계속된다 ...

- 분석 소프트웨어 설치

대부분 구글 분석을 쓰는 편이지만 개인정보 보호에 초점을 맞춘 Fathom을 사용하기도 한다.

이 분석 소프트웨어는 사용자에 대한 통계를 내준다.

통계를 바탕으로 사이트 구조, 콘텐츠 수정, 웹사이트 조정에 도움을 줄 수 있다.

- 블로그를 운영한다면

블로그가 있다면 정기적으로 업데이트 되어야 한다.

유저들이 계속해서 웹페이지에 방문할 수 있도록 하고 올바른 콘텐츠로 사용한다면 검색엔진최적화에도 좋다.

반응형 디자인?

반응형 디자인이란 모든 화면 크기에 적용되는 레이아웃, 시각적 스타일을 말한다.

반응형 디자인의 4가지 유형

☝🏻 유동적인 레이아웃

- 현재 뷰포트 너비 혹은 높이에 맞춘다.

- 뷰포트에 맞춰서 바뀌어야 하는 모든 요소에 퍼센트 or vh / vw 를 사용한다.

- width 대신 max-width를 사용해야 한다.

☝🏻 반응형 유닛

- px 대신 rem을 사용한다.

페이지 전체의 규모를 자동으로 늘리거나 줄일 수 있다.

✨ 유용팁 ) 1 rem = 10px로 설정한다.
길이 계산할 때 굉장히 쉬워진다!

☝🏻 유연하고 유동적인 이미지

- 텍스트 콘텐츠와 다른 이미지 콘텐츠에게 중요한 지점

이미지는 뷰포트가 확장된다고 자동으로 확장되거나 축소된다고 자동으로 축소되지 않는다.

어떤 뷰포트 상태이든 이미지가 잘 보이도록 적용되어야 한다.

- 일반적으로 크기를 %로 지정해서 유연한 이미지를 만든다.

- 함께 max-width 속성을 사용하기도 한다.

☝🏻 미디어쿼리

- 다른 모든 요소를 한데 모아 활기를 불어넣기!

- 미디어 쿼리가 있어야만 궁극적인(?) 반응형 웹디자인이 작동한다고 보면 된다.

반대로 미디어쿼리가 없다면 반응형 웹디자인은 원하는 대로 작동하지 않는다.

왜냐하면 특정 뷰 너비에서 스타일을 바꿀 수 있게 해 주기 때문이다.

- 보통 마지막에 설정한다.

rem 과 max-width ?

max-width

컨테이너 너비가 지정된 max-width 보다 작아질 경우 상위요소의 너비 100%를 차지하면서 작아진다.

반대로 컨테이너의 너비가 더 커진다면 설정한 max-width 에 맞춰서 보인다.

📌 width
width 속성의 경우 줄어들지도 늘어나지도 않는다. 반응형 웹디자인이라고 할 수 없다.
📌 width = ~%
%로 설정하면 맞춰서 줄어들거나 늘어나긴 하지만 부모요소가 기준이 되어 원하는 디자인을 구현하기에는 어렵다.

rem

1 rem = 브라우저 기본 폰트 사이즈 (보통 16px)

기본적으로 다른 모든 요소의 부모 요소는 html 요소이다.

root 요소인 html 요소에서 폰트 사이즈를 따로 지정하지 않으면 기본 폰트 사이즈가 1 rem으로 자동 설정된다. (따로 기입 없이도)

예를 들어 max-width: 500 rem; 으로 설정했다면 500 x 16px(브라우저 기본 폰트사이즈=1 rem)가 된다.

✨ rem을 보다 더 유용하게 사용하기 위한 팁?

1 rem을 10px로 지정한다.

html { font-size: 10px } 식으로 html 요소를 가져와 스타일을 변경해 주면 된다.

그러면 1 rem 은 10px 2 rem은 20px... 식으로 계산이 굉장히 간편해진다.

‼️하지만 주의할 점, 그리고 그로 인해 더 추천하는 방법이 있다.

만약 저런 식으로 브라우저의 기본 폰트 사이즈를 ~px로 정하면 브라우저 폰트 사이즈를 변경해서 사용하는 사용자들을 존중하지 않게 된다.

예를 들어, 사용자가 기본 폰트 사이즈를 다른 값으로 바꿔놓았다면 페이지의 폰트도 자동으로 커지거나 작아져야 한다.

하지만 html 요소에 폰트 사이즈를 따로 지정해 두었기 때문에 이를 반영하지 않게 된다.

이처럼 필수적으로 폰트의 사이즈를 늘이거나 줄여야 하는 사용자들에게 유용성 문제가 생길 수 있다.

이를 방지하고자 더 추천하는 방법! 은 바로 %를 사용하는 방법이다.

1 rem = 62.5% 로 설정하는 게 가장 많이 사용하는 방법이라고 한다.

>>> 왜 62.5% 냐면 10px 을 기본 폰트 사이즈인 16px 로 나누면 0.625 이고, 이를 가져와서 기본 폰트 사이즈의 62.5% 크기를 사용한다고 설정하기 때문이다.

🧑‍💻 그 밖의 새로 배운 것 모음

HTML

<nav> : 주요 탐색 블록으로 (의미적으로) 페이지의 가장 주요 탐색 요소에 사용한다.
<a> : 기본적으로 페이지의 어딘가 혹은 다른 페이지로 가는 경우에는 앵커 요소를 사용한다.
<button> : 내비게이션과 관련 없는 동작을 수행하는 경우에는 button 요소를 사용한다.

CSS

공통적인 요소는 general.css 등 따로 모아서 css 파일을 만들면 관리가 쉬워진다.
전체 페이지에 걸쳐 사용되고 재사용도 가능한 클래스들은 따로 모아 정리해 둔다.
아주 간단한 애니메이션 효과 내기 👉 transition: 효과를 추가할 변화하는 속성(참고: all로 하면 변화하는 모든 속성이 선택된다), 시간(ex.1s);
hover 시 테두리를 추가하면 해당 요소가 약간씩 커졌다가 작아졌다가 왠지 허접해진다. 이때 사용할 수 있는 팁! 👉 border 속성을 쓰지 말고 box-shadow 속성을 사용한다. box-shadow: inset(박스 안에 그림자가 생긴다) 0 0 0 ~px #색상;
도우미 클래스 👉 보통 반드시 적용되어야 할 스타일을 따로 클래스를 만들어 관리한다. 이때 !important를 사용해 꼭 적용되도록 우선순위룰 최우선으로 높인다. (반드시 적용되어야 하니까!)
grid 도 따로 관리할 수 있다. grid의 속성만 바꾸는 클래스도 파생 클래스 이름으로 빼서 사용할 수 있다. (ex. grid(grid 속성을 부여하는 클래스), grid--2-cols(grid columns 템플릿 속성만을 부여하는 파생 클래스) ... 등 필요하다면 몇 개라도!
가장 메인에 보이는 섹션은 가장 주제가 되는 부분이므로 공통으로 정해둔 스타일보다 약간 더 크고 과장되게 하면 좋다.
요소를 겹치는 방법 👇

.step-img-box {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.step-img-box::before,
.step-img-box::after {
  content: "";
  display: block;
  /* height: 60%; */
  /* 동작하지 않는다! */

  border-radius: 50%;

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.step-img-box::before {
  width: 60%;
  /* 부모 요소 width의 60% */
  padding-bottom: 60%;
  /* padding을 줘서 그만큼 높이가 생겨보이는 효과*/
  background-color: #fdf2e9;
  z-index: -2;
  /* 값이 낮을수록 뒤에 위치하게 된다  */
}

.step-img-box::after {
  width: 50%;
  padding-bottom: 50%;
  background-color: #fae5d3;
  z-index: -1;
}

🍔 6일 차 후기

사실 가장 알고 싶었던 정보 중 하나 웹개발 프로세스에 관해 알게 되어서 기뻤다.

그리고 새삼 내가 했던 게 얼마나 계획 하나 없이 주먹구구식으로 흘러갔는지도 깨달아서 입이 썼다🥹.

강의도 얼마 안 남았는데 다 듣고 나서 대대적으로 북마크 웹앱을 수정+추가할 생각이다.

가능하다면 프로세스의 마지막 과정까지도!! 해보고 싶다. 강의가 끝나는 그 순간이 너무 기대가 된다. 그럼 내일도 파이팅.