[원티드 9월] 반응형 웹사이트 기초

원티드에서 반응형 웹 사이트 관련된 강의가 있어서 참여하게 되었다. 

평소에 반응형 웹 사이트에 관심이 많았기 때문에 아주 흥미로웠다. 

 

 

반응형 웹 사이트

---

반응형 웹사이트는, 기기의 화면의 크기 맞춰 자동으로 레이아웃 및 콘텐츠 구성하는 개발방법이다.

아래와 같은 이유로 중요성이 증가했다.

 

1. 스마트폰의 대중화로 인해 중요성 인식

2. 인터넷에 접속되는 기기가 다양해지면서 더 다양한 스크린에 대응해야 하는 이슈

    ex. 스마트폰, 랩탑, PC, 워치, 티비, 자동차, 냉장고

 

반응형 웹 사이트 범위

---

1. 화면 크기(viewport)

 

2. 화면 방향

3. 픽셀 밀도(해상도)

4. 화면 비율

5. 마우스 포인터

6. 프린트 장치

7. 컬러 & 컬러모드

8. 주변 광도(최신 기술이라서 안되는 웹사이트도 있음)

9. 고대비 모드

10. 애니메이션 & 투명도

 

이렇게나 조작할 것이 많았다니,, 알고 안쓰는거랑 모르고 못쓰는거랑은 천지차이인데 많이 배웠다. 

 

 

비트맵과 벡터의 차이

---

비트맵은 점(픽셀)을 모아서 그래픽을 만듭니다.

1. 확대하면 깨지고,

2. 용량이 크지만,

3. 복잡한 이미지 표현이 가능합니다.

예를 들어 jpg, png, gif가 있습니다.  

비트맵

 

벡터는 좌표를 계산해서 그래픽을 만듭니다.

1. 확대해도 깨지지 않고, 

2. 용량이 작지만, 

3. 복잡한 이미지 표현은 어렵습니다. 

예를 들어 ai, svg, pdf가 있습니다. 

벡터

 

팁으로 이미지를 2배 4배 로 크게 다운받아서 적용하면 해상도가 깨지지 않습니다. svg와 같이 깨지지 않는 벡터 이미지는 그냥 다운받아도 됩니다. 

 

 

해상도와 밀도

---

실제 기기의 디스플레이 픽셀과 CSS에서 인식하는 픽셀이 다릅니다. 

그 이유는 DPR 때문입니다. 

 

DPR Device Pixel Ratio의 약자로 아래와 같은 공식으로 나타낼 수 있습니다. 

DPR = 디바이스 픽셀 / css 픽셀

 

• 디바이스 픽셀
  디바이스 화면에 실제로 표시되는 물리적 픽셀 수입니다. 예를 들어, 1920x1080 픽셀 해상도의 모니터는 1920개의 가로 픽셀과 1080개의 세로 픽셀을 가지고 있습니다.
• css 픽셀
  웹 페이지 렌더링 및 디자인에 사용되는 가상 픽셀 단위입니다. 

 

출처: https://tomroth.com.au/dpr/

즉, 한 개의 픽셀 안에 몇개의 화소를 넣었는지 나타냅니다. DPR이 클 수록 고해상도입니다. 

 

 

device-pixel-ratio

---

 

CSS 미디어쿼리에서 DPR을 구분하는 값입니다.

 

참고할만한 유용한 사이트입니다. 

• 기기별 사이즈 확인
• 기기별 사이즈 확인
• 기기별 사이즈 확인
• 내 기기 사이즈 확인

 

 

사이즈의 종류

---

하지만 반응형이라고 PX을 사용하지 않는 것은 아닙니다. 

 

 

이미지를 저장할 때

---

이미지는 저장 후 꼭 최적화 과정을 거쳐야합니다. 변환기를 사용할 수도 있고, 이미지 스프라이트나 이미지 슬라이스 기법을 사용하면 된다고 한다. 변환기를 사용해본 경험은 있지만 기법은 처음 들어보고, 사용해보지도 않았다. 이후 강의에서 설명해주신다고 해서 기대가 된다!

 

간단하게 찾아보니깐 이미지 스프라이트 기법은 각각의 이미지를 개별적으로 다운받는 게 아니라, 하나로 뭉친 차일을 다운 받아서 필요한 부분만 잘라서 사용하는거라고 한다. 실제로 네이버 메인페이지에서도 사용되는 기법이다! 많은 이미지 파일을 관리하지 않아도 된다는 장점과 서버로의 요청 횟수를 줄여 사이트 로딩 속도를 줄여준다는 장점이 있어서 사용한다고 한다. 

 

생각해보면 아무 생각 없이 이미지 맘대로 적용하고, 웹에서 썼는데 허허 머쓱하다. 지금부터라도 인지하고, 최적화시켜야겠다.

 

 

유용한 사이트

---

• 미디어 쿼리 자동 코드 작성
• 현재 웹 사이트의 미디어 쿼리 확인
• 미디어 쿼리 테스트
• 이미지 스프라이트

 

참고자료

---

• 원티드 9월
• 이미지 스프라이트 기법

 

진짜 알차게 흡수한 꿀팁이였다. 포폴 관련 팁까지! 완벽했다.

전혀 고민해보지 않았던 부분까지 기본기를 다질 수 있는 시간이였다. 

다음 코스부터는 코드로 직접 설명해주신다고 하는데, 쏙쏙 가져가야지