웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
최근 웹사이트를 구축할 때 반응형 웹사이트를 많이 볼 수 있습니다. 반응형웹 사이트가 왜 인기있는지 그리고 왜 반응형웹을 필요로 할까요?
"내 디바이스가 무엇이든 알아서 화면을 맞춰주는 반응형웹"
다시 말하면 반응형웹 (Responsove Web)은 다양한 디바이스... 데스크탑, 노트북, 모바일 등에서 브라우저의 크기에 즉각적으로 변화하여 최적화된 인터페이스를 제공하는 웹페이지입니다.
! 반응형웹의 장점
간단하게 장점을 정리하면 다음과 같습니다.
최근에는 예전과 달리 구현이 어렵지 않고 간단합니다. CSS의 미디어쿼리는 대부분의 브라우저에서 모두 지원하므로 수준 높은 웹사이트 구현이 가능합니다.
@ CSS Mediaquery
css의 미디어쿼리는 가장 핵심적인 부분입니다. 브라우저 크기 변화를 감지하여 미리 정해둔 코드에 따라 엘리먼트 요소들이 responsive하게 변하게 됩니다. 거의 모든 반응형웹이 css 미디어쿼리를 사용하여 만들어진고 볼 수 있죠. 간단한 미디어쿼리 코드는 아래와 같습니다.
위 코드는 간단한 예제로 보시는 것처럼 최대 화면 크기가 768인 경우에만 안에 사용된 코드가 적용되도록 설정할 수 있습니다. 최소 최대값 뿐만 아니라 screen, print 등 출력되는 타입 등도 선택할 수 있습니다.
@ 최소한의 스크립트 사용하기
반응형웹을 구현할 때 요즘은 대부분 CSS만을 사용합니다. 관리 포인트를 줄이고 CSS를 사용하는 방법이 가장 쉽고 간단하기 때문이죠. 하지만 원하는 UI를 구현하기 위해서 반드시 스크립트가 필요한 경우도 있을 수 있죠. 이런 경우에만 사용하도록 최소하 하는 것이 좋은 방법입니다.
@ 테스트 및 디버깅을 확실하게 할 것
반응형웹은 보는 디바이스, 화면 크기 등에 의하여 달라지기 때문에 좀 더 많은 테스트, 디버깅을 필요로합니다. 확실한 테스트 케이스를 미리 준비하지 않으면 미쳐 예상하지 못한 오류, 깨짐 등의 현상이 발생하게 됩니다. 시간이 오래걸리는 과정이지만 일반 웹 사이트보다 매우 필요한 과정입니다.
@ 이미지 등의 미디어 요소
일반적으로 반응형웹의 이미지 등은 모바일에 필요한 이미지가 따로 준비된 경우와 아닌 경우로 나뉠 수 있습니다. 모바일이나 테블릿 등에 적용될 이미지가 있는 경우 미디어쿼리를 사용해 해당 환경에서는 그 이미지로 바뀔 수 있도록 설정해야합니다. 따로 없는 경우는 max-width: 100% 값만 설정해도 충분합니다.
반응형웹은 모바일, 데스크탑처럼 둘 로 구분하기 어렵기 때문에 별도의 디자인 시안이 없는 경우도 많습니다. 모든 디바이스에 맞춘 시안을 도출하기란 어렵기 때문에 모바일, 데스크탑만 만들거나 아니면 데스크탑 디자인 시안을 토대로 UI 개발자, 퍼블리셔가 직접 화면을 그려야 하는 경우가 많습니다.
이 경우 데스크탑 디자인 시안에서 아래의 과정을 감안하여 코드를 작성합니다.
- 콘텐츠를 영역을 100%로 맞춘다
- 좌우 배치된 엘리먼트 요소는 대부분 한 줄로 나타나도록 코드 작성
- 너무 작거나 불필요한 요소는 과감히 안보이도록 display: none 설정
# 마치면서
확실한건 반응형웹이 아닌 경우는 찾기 힘들 정도로 대부분 반응형이 기본으로 요구된다고 볼 수 있습니다. 반응형웹으로 구현하지 않는 경우는 데스크탑 위주로 사용되는 관리자, admin 사이트가 대부분이며 아니면 모바일 웹 또는 앱 어플리케이션이 이미 존재하는 경우라고 볼 수 있습니다.
"내 디바이스가 무엇이든 알아서 화면을 맞춰주는 반응형웹"
다시 말하면 반응형웹 (Responsove Web)은 다양한 디바이스... 데스크탑, 노트북, 모바일 등에서 브라우저의 크기에 즉각적으로 변화하여 최적화된 인터페이스를 제공하는 웹페이지입니다.
! 반응형웹의 장점
간단하게 장점을 정리하면 다음과 같습니다.- 모바일웹, 데스크탑웹, 랩탑웹 등등 따로 만들 필요 없음
- 하나의 웹이므로 관리 및 업데이트가 용이
- 대부분 CSS만으로 구현이 가능
최근에는 예전과 달리 구현이 어렵지 않고 간단합니다. CSS의 미디어쿼리는 대부분의 브라우저에서 모두 지원하므로 수준 높은 웹사이트 구현이 가능합니다.
! 반응형웹 구축에 꼭 알아야 할 내용
아래 사항들은 필수적이거나 알면 매우 유용한 내용들을 정리한 내용입이다. 대부분 간단하지만 반응형웹 구현을 위해서 꼭 필요한 부분들이죠.@ CSS Mediaquery
css의 미디어쿼리는 가장 핵심적인 부분입니다. 브라우저 크기 변화를 감지하여 미리 정해둔 코드에 따라 엘리먼트 요소들이 responsive하게 변하게 됩니다. 거의 모든 반응형웹이 css 미디어쿼리를 사용하여 만들어진고 볼 수 있죠. 간단한 미디어쿼리 코드는 아래와 같습니다.
@media only screen and (max-width: 768px) {
aside {
width: 100%;
}
}
aside {
width: 100%;
}
}
위 코드는 간단한 예제로 보시는 것처럼 최대 화면 크기가 768인 경우에만 안에 사용된 코드가 적용되도록 설정할 수 있습니다. 최소 최대값 뿐만 아니라 screen, print 등 출력되는 타입 등도 선택할 수 있습니다.
@ 최소한의 스크립트 사용하기
반응형웹을 구현할 때 요즘은 대부분 CSS만을 사용합니다. 관리 포인트를 줄이고 CSS를 사용하는 방법이 가장 쉽고 간단하기 때문이죠. 하지만 원하는 UI를 구현하기 위해서 반드시 스크립트가 필요한 경우도 있을 수 있죠. 이런 경우에만 사용하도록 최소하 하는 것이 좋은 방법입니다.
@ 테스트 및 디버깅을 확실하게 할 것
반응형웹은 보는 디바이스, 화면 크기 등에 의하여 달라지기 때문에 좀 더 많은 테스트, 디버깅을 필요로합니다. 확실한 테스트 케이스를 미리 준비하지 않으면 미쳐 예상하지 못한 오류, 깨짐 등의 현상이 발생하게 됩니다. 시간이 오래걸리는 과정이지만 일반 웹 사이트보다 매우 필요한 과정입니다.
@ 이미지 등의 미디어 요소
일반적으로 반응형웹의 이미지 등은 모바일에 필요한 이미지가 따로 준비된 경우와 아닌 경우로 나뉠 수 있습니다. 모바일이나 테블릿 등에 적용될 이미지가 있는 경우 미디어쿼리를 사용해 해당 환경에서는 그 이미지로 바뀔 수 있도록 설정해야합니다. 따로 없는 경우는 max-width: 100% 값만 설정해도 충분합니다.
! 반응형웹 디자인 시안이 없는 경우
반응형웹은 모바일, 데스크탑처럼 둘 로 구분하기 어렵기 때문에 별도의 디자인 시안이 없는 경우도 많습니다. 모든 디바이스에 맞춘 시안을 도출하기란 어렵기 때문에 모바일, 데스크탑만 만들거나 아니면 데스크탑 디자인 시안을 토대로 UI 개발자, 퍼블리셔가 직접 화면을 그려야 하는 경우가 많습니다.
이 경우 데스크탑 디자인 시안에서 아래의 과정을 감안하여 코드를 작성합니다.
- 콘텐츠를 영역을 100%로 맞춘다
- 좌우 배치된 엘리먼트 요소는 대부분 한 줄로 나타나도록 코드 작성
- 너무 작거나 불필요한 요소는 과감히 안보이도록 display: none 설정
# 마치면서
확실한건 반응형웹이 아닌 경우는 찾기 힘들 정도로 대부분 반응형이 기본으로 요구된다고 볼 수 있습니다. 반응형웹으로 구현하지 않는 경우는 데스크탑 위주로 사용되는 관리자, admin 사이트가 대부분이며 아니면 모바일 웹 또는 앱 어플리케이션이 이미 존재하는 경우라고 볼 수 있습니다.
아래의 글도 찾고 계시지 않나요?
