PC뿐 아니라 스마트폰, 태블릿 PC 등 다양한 스마트 디바이스들이 등장하면서 새로운 해상도와 입력방식이 지속적으로 나오고 있습니다. 이 때, 디바이스 별로 화면을 만들어 중복 개발을 해야 한다는 문제점이 발생하게 됩니다. 이런 다양한 해상도와 환경을 하나의 콘텐츠로 이용하고자 하는 요구에서 반응형 웹이 탄생하게 되었습니다. 그후 웹 디자인에 정형화된 코드의 집합체인 프레임워크는 종류가 다양하게 발전 하여 여러게의 집합체가 등장하였습니다. 그중 Bootstrap과 연계되어 개발이 진행중인 프로젝트가 가장 활성화가 잘 되고 있다고 전 알고 있습니다.
Responsive Web Design (RWD) 반응형 웹 디자인
루크로블르스키는 반응형 웹 디자인(Responsive Web Design : RWD) 및 모바일 설계 과제의 일부를 요약 및 다중 장치 레이아웃 패턴의 카탈로그를 만들었습니다. 그의 제안은 간단한 방법으로 여러 장치를 비교(응답형, 즉 서버 측 컴포넌트와 웹 디자인)는 더 나은 모바일 장치에 최적화된 웹을 사용자에게 제공할 수 있는 접근방법을 이야기했습니다. RWD를 지원하기 위해 아직 약간의 문제가 있지만, RWD는 다른 많은 모바일 애플리케이션에 비해 효율적인 비용 대안으로 반응형 웹 디자인을 추천하고 있습니다.
반응형 웹의 특징
반응형 웹 디자인은 Ethan Marcotte이 만들어낸 용어다. 다양한 화면 해상도에 웹사이트의 레이아웃을 적응시키는 것을 명확하게 표현하기 위한 용어다. 반응형 웹디자인은 이런 식으로 만든다.
- 유동적인 그리드를 활용하여 기기 화면 사이즈(비율)에 따라 상대 단위로 크기로 좁아졌다 넓어지게 한다.
- 화면 사이즈(비율)에 따라 유연한 이미지와 미디어를 사용하여 어떤 해상도에서도 그 내용을 유지한다.
- 미디어 쿼리(Media queires)를 활용해, 해상도 별로 끊어서 다른 CSS스타일 규칙으로 디자인을 적용한다.
모바일 퍼스트(Mobile First)
모바일 퍼스트는 Luke Wroblewski 가 처음 만든 철학이다. 사용자 경험을 창조할 때 모바일일 경우를 최우선으로 초점을 맞춰서 디자인을 하자는 거다. 이렇게 시작된 거다.
- 더 많은 사람들이 웹사이트에 도달하도록 하자. (세계 인구의 77%가 핸드폰을 갖고 있다. 2011년에 출시된 핸드폰의 85%에 브라우저가 있다.[인터넷 탐색 기능이 있다. - 역자])
- 디자이너가 핵심 내용과 기능에 초점을 맞추게 강제한다. (화면 사이즈가 20%로 줄어 버렸을 때 어떻게 할 것인가?)
- 디자이너들이 새로운 기술을 활용하고, 혁신을 할수 있도록 하자. (위치기반 서비스, 터치 이벤트 등등)
“We understand that the new rule is mobile first” – 구글 CEO 에릭 슈미트(Eric Schmidt)
우리의 새로운 규칙은 모바일 먼저?
그 이유는 모바일이 다른 환경에 비해 더 제한적이고 불안정하기 때문입니다. 모바일 환경은 다양한 변수가 존재할 수 있는 환경입니다. 이처럼, 가장 최악의 모바일 시나리오를 고려해서 작업을 한다면, 사용자는 어떤 상황에 처하든, 이용 목적을 달성할 수 있습니다. 다시 말해, 모바일웹을 지원할 수 있다면 어떤 환경이든 지원할 수 있게 됩니다.
나머지는 이쪽으로 [번역] 모바일 퍼스트 반응형 웹 디자인 mobile-first responsive web design
프론트-엔드(Front-end)와 백-엔드(Back-end)
일반적으로 프론트엔드(front-end)와 백엔드(back-end)라는 용어는 프로세스의 처음과 마지막 단계를 가리킨다. ‘프론트엔드’는 사용자로부터 다양한 형태의 입력을 받아 ‘백엔드’가 사용할 수 있는 규격을 따라 처리할 책임을 진다. ‘프론트엔드’를 ‘백엔드’로 연결하는 것은 인터페이스의 일종이다. - 위키
- Front-End(프론트엔드) : 클라이언트(사용자)의 화면에 나타나는 웹 화면 또는 상호작용이 이루어지는 영역.
- Back-End(백엔드) : 서버측에 존재하여 Front-End프로그램과 연동하는 기술적인 부분을 처리하고 그 결과를 다시 Front-End(프론트엔드) 로 돌려주어 클라이언트에 표시합니다.
대표적인 프론트-엔드 프레임 워크 종류
참조 URL
Brad Frost Web - Mobile-First Responsive Web Design
'라이브러리 > IT' 카테고리의 다른 글
| JavaScript 운영체제(OS) 확인 (12) | 2014.03.15 |
|---|---|
| USB메모리 FAT32를 NTFS로 변환/포맷하기 (9) | 2014.03.15 |
| 고스트 프로그램 사용해 백업/복원 하는법 (8) | 2014.03.15 |
| 구글 크롬 & 앱 실행기 (0) | 2014.03.15 |
| 알수없는장치 Microsoft ACPI-Compliant System 해결법 (18) | 2014.03.15 |