[Web] 반응형 웹 기술

1. WEB

1) 반응형 웹

* 장점

- 간편한 유지보수

- 유리한 마케팅

- 최적화된 검색엔진

- 미래지향적 기술

 

* 단점

- 안 어울림

- 성능문제 (로딩시간 김)

- 작업량 많음

- 디자인 자유도 낮음

 

2) 적응형 웹

 

 

2. 관련 용어 및 개념

1) 픽셀 : width 600 px이 기본

2) viewport : 모니터의 출력에 대한 가상화면 영역을 설정하는 것

3) 미디어쿼리 : 웹 브라우저가 해석할 CSS 코드를 해상도/비율로 분기 처리하는 규칙. Breakpoint 지정하여 분기

4) 모바일퍼스트 : 화면 구현 시 모바일 → 큰 디스플레이 순으로 디자인 및 개발

5) 유동적 그리드 : 고정된 단위가 아닌 em, %의 단위를 사용

6) 유동적 레이아웃 : 레이아웃 크기가 상대적

* 유동적 레이아웃 패턴

- Columns Drop형 : 컬럼을 밑으로 떨어트려 콘텐츠 폭을 맞춤 (예_pinterest)

- Mostly Fluid형 : 가변적 콘텐츠 이용 (예_모바일 다음)

- Layout Shifter형 : 여러 개의 Breakpoint를 두어 여러 해상도에 반응할 수 있도록 함

- offcanvas형 : 클릭하면 그 영역이 커짐

 

 

3. 반응형 WEB 사례

- 스키니타이(https://skinnyties.com/)

- 보스턴글로브(https://www.bostonglobe.com/)

- 삼성엔지니어링(https://www.samsungengineering.co.kr/kor/index;jsessionid=0Y7sVIF7KCoRFhUgOqvkVAYYuxPCdLc_VSgnDW83qkBrOYFE0HsF!-1179349389)

- 한국은행 화폐박물관(https://www.bok.or.kr/museum/main/main.do)

 

 

4. 반응형 WEB의 적용효과

1) 사용자 경험 개선 및 사용성 향상

2) 모바일 사용자 > 데스크톱 사용자

3) 속도 향상 (하지만 전문가의 손길이 필요)

4) 전환률 증가

5) 검색엔진 최적화