"모바일 퍼스트"의 두 판 사이의 차이
잔글 |
|||
| 1번째 줄: | 1번째 줄: | ||
| − | '''모바일 퍼스트'''<!--모바일퍼스트-->(mobile first)란 [[웹디자인]]에 | + | '''모바일 퍼스트'''<!--모바일퍼스트-->(mobile first)란 [[웹디자인]]에 관해서, [[모바일]]에 최적화된 구성을 우선시 해야 한다는,LukeW가 주장한 철학이자 전략이며, [[반응형 웹]] 디자인을 기반으로 한 개념이다. <ref name="그누보드">전진, <[https://sir.kr/pb_lecture/133#vc_mfrwd 반응형 웹 디자인/모바일 퍼스트의 이해]>, 《그누보드》</ref> |
== 개요 == | == 개요 == | ||
LukeW는 모바일 퍼스트가 가능한 이유와 필요한 이유에 대해, [[모바일]]의 엄청난 성장은 기회이고, 모바일 기기의 제약이 초점이며, 그리고 모바일 기기의 기능은 혁신이라는 주장을 내세웠다. 모바일의 성장과 모바일 기기가 가지고 있는 기능들에 대해서는 우리가 일상생활에서 지켜보고 또 사용하고 있으니 다시 얘기할 필요가 없겠지만,모바일의 성장과 모바일기기의 기능들은 나날히 발전하며 혁신 그 자체의 모습을 보이고 있다. 하지만 이 모바일 기기의 제약을 기회의 초점으로 둔 것이 모바일 퍼스트의 핵심이다. LukeW가 제시한 모바일의 대표적인 세가지 제약은 스크린의 크기, 네트워크의 속도와 품질, 사용할 수 있는 모드 등이다. | LukeW는 모바일 퍼스트가 가능한 이유와 필요한 이유에 대해, [[모바일]]의 엄청난 성장은 기회이고, 모바일 기기의 제약이 초점이며, 그리고 모바일 기기의 기능은 혁신이라는 주장을 내세웠다. 모바일의 성장과 모바일 기기가 가지고 있는 기능들에 대해서는 우리가 일상생활에서 지켜보고 또 사용하고 있으니 다시 얘기할 필요가 없겠지만,모바일의 성장과 모바일기기의 기능들은 나날히 발전하며 혁신 그 자체의 모습을 보이고 있다. 하지만 이 모바일 기기의 제약을 기회의 초점으로 둔 것이 모바일 퍼스트의 핵심이다. LukeW가 제시한 모바일의 대표적인 세가지 제약은 스크린의 크기, 네트워크의 속도와 품질, 사용할 수 있는 모드 등이다. | ||
이러한 제약들이 모두 모바일 사이트를 보다 컨텐츠 중심으로 불필요한 기능/형식/꾸미기/이동 등을 강제로 최소화시키는 집중된 사이트를 만들게 하는 요인이라는 것이다. | 이러한 제약들이 모두 모바일 사이트를 보다 컨텐츠 중심으로 불필요한 기능/형식/꾸미기/이동 등을 강제로 최소화시키는 집중된 사이트를 만들게 하는 요인이라는 것이다. | ||
| − | 개발자들이 모바일 퍼스트를 원칙으로 사이트를 만들면서, 사이트가 진짜로 제공해야 할 내용과 기능이 무엇인지 깨닫게 되었다고들 하고, 사용자들 또한, 데스크탑 사이트보다 모바일 사이트가 훨씬 사용하기 편하고, 자신이 원하는 작업을 빠르게 처리한다고 이야기 한다. | + | 개발자들이 모바일 퍼스트를 원칙으로 사이트를 만들면서, 사이트가 진짜로 제공해야 할 내용과 기능이 무엇인지 깨닫게 되었다고들 하고, 사용자들 또한, 데스크탑 사이트보다 모바일 사이트가 훨씬 사용하기 편하고, 자신이 원하는 작업을 빠르게 처리한다고 이야기 한다.<ref name="그누보드"></ref> |
== 원칙/기법 == | == 원칙/기법 == | ||
| − | |||
| + | 콘텐츠를 [[네비게이션]](navigation) 보다 우선시 해야 한다. 일반적으로 웹사이트 디자인 시 따로 따로 떨어져 있는 페이지들을 어떻게 잘 연결하느냐가 중요한 문제이기에, 페이지 상단과 좌측 또는 하단의 많은 영역을 [[네비게이션]](navigation)으로 할당한다. 하지만 스크린이 작은 모바일의 경우, 특히 상단이나 좌측의 네비게이션을 화면에 먼저 보여주는 구조이기 때문에, 실제로 중요한 콘텐츠는 스크롤을 한참 해야 보이는 문제가 발생하기도 한다. 이런 문제점은 예를 들어, youtube 등의 모바일 버전에서도 알 수 있듯이, 메뉴/네비게이션은 상단의 한 버튼으로 축소시켜놓고, 첫 화면부터 콘텐츠를 보여주는 것으로 해결한다.<ref name="그누보드"></ref> | ||
| + | |||
| + | == 접근 방식 == | ||
| + | |||
| + | === 점진적 향상법 === | ||
| + | 점진적 향상법은 기초부터 차근차근 기능을 개선하는 방법이다. 한 번에 만드는 것이 아니라 기능을 점차 늘려가는 방식이다.<ref name="고베베"> 고베베, 〈[https://susu91.tistory.com/81 점진적 향상법과 우아한 성능 저하법]〉, 《티스토리》, 2018-06-11 </ref> 점진적 향상법은 모바일 퍼스트 전략에 접근 방법 중 하나라고 볼 수 있다. 원래 정의는 저사양의 기기나 오래된 브라우져에 맞춰서 디자인된 웹 사이트가 고사양 기기의 현대적인 브라우져는 보다 많은 기능과 스타일을 제공하는 것이다. 이를 모바일 퍼스트처럼 반응형 웹의 기본적 스타일이나 스크립을 저사양 혹은 오래된 브라우저에 맞추는 것으로 볼 수 있다. | ||
| + | |||
| + | |||
| + | === 우아한 성능 저하법 === | ||
| + | , | ||
| + | 우아한 성능 저하법 은 먼저 최신 기술로 만들어 놓고, 최신 기술이 적용되지 않는 곳에 유사하게 적용되게 하기 위하여 대체 기술을 사용하여 만드는 방식이다. | ||
| + | 최신기술 보다는 비효율적일지라도 다양한 소비자 층에게 서비스가 가능하다는 점에 의의가 있다. <ref name="고베베"></ref> 고사양 기기나 현대적인 브라우저에 맞춰진 웹 사이트가, 그렇지 못한 기기나 브라우저 에서도 큰 장애가 없이 우아하게 보여질 수 있도록 준비하는 것 또한 중요할 것 이다.<ref name="그누보드"></ref> | ||
| + | |||
| + | |||
| + | {{각주}} | ||
== 같이 보기 == | == 같이 보기 == | ||
* [[모바일]] | * [[모바일]] | ||
2021년 8월 4일 (수) 14:22 판
모바일 퍼스트(mobile first)란 웹디자인에 관해서, 모바일에 최적화된 구성을 우선시 해야 한다는,LukeW가 주장한 철학이자 전략이며, 반응형 웹 디자인을 기반으로 한 개념이다. [1]
개요
LukeW는 모바일 퍼스트가 가능한 이유와 필요한 이유에 대해, 모바일의 엄청난 성장은 기회이고, 모바일 기기의 제약이 초점이며, 그리고 모바일 기기의 기능은 혁신이라는 주장을 내세웠다. 모바일의 성장과 모바일 기기가 가지고 있는 기능들에 대해서는 우리가 일상생활에서 지켜보고 또 사용하고 있으니 다시 얘기할 필요가 없겠지만,모바일의 성장과 모바일기기의 기능들은 나날히 발전하며 혁신 그 자체의 모습을 보이고 있다. 하지만 이 모바일 기기의 제약을 기회의 초점으로 둔 것이 모바일 퍼스트의 핵심이다. LukeW가 제시한 모바일의 대표적인 세가지 제약은 스크린의 크기, 네트워크의 속도와 품질, 사용할 수 있는 모드 등이다. 이러한 제약들이 모두 모바일 사이트를 보다 컨텐츠 중심으로 불필요한 기능/형식/꾸미기/이동 등을 강제로 최소화시키는 집중된 사이트를 만들게 하는 요인이라는 것이다. 개발자들이 모바일 퍼스트를 원칙으로 사이트를 만들면서, 사이트가 진짜로 제공해야 할 내용과 기능이 무엇인지 깨닫게 되었다고들 하고, 사용자들 또한, 데스크탑 사이트보다 모바일 사이트가 훨씬 사용하기 편하고, 자신이 원하는 작업을 빠르게 처리한다고 이야기 한다.[1]
원칙/기법
콘텐츠를 네비게이션(navigation) 보다 우선시 해야 한다. 일반적으로 웹사이트 디자인 시 따로 따로 떨어져 있는 페이지들을 어떻게 잘 연결하느냐가 중요한 문제이기에, 페이지 상단과 좌측 또는 하단의 많은 영역을 네비게이션(navigation)으로 할당한다. 하지만 스크린이 작은 모바일의 경우, 특히 상단이나 좌측의 네비게이션을 화면에 먼저 보여주는 구조이기 때문에, 실제로 중요한 콘텐츠는 스크롤을 한참 해야 보이는 문제가 발생하기도 한다. 이런 문제점은 예를 들어, youtube 등의 모바일 버전에서도 알 수 있듯이, 메뉴/네비게이션은 상단의 한 버튼으로 축소시켜놓고, 첫 화면부터 콘텐츠를 보여주는 것으로 해결한다.[1]
접근 방식
점진적 향상법
점진적 향상법은 기초부터 차근차근 기능을 개선하는 방법이다. 한 번에 만드는 것이 아니라 기능을 점차 늘려가는 방식이다.[2] 점진적 향상법은 모바일 퍼스트 전략에 접근 방법 중 하나라고 볼 수 있다. 원래 정의는 저사양의 기기나 오래된 브라우져에 맞춰서 디자인된 웹 사이트가 고사양 기기의 현대적인 브라우져는 보다 많은 기능과 스타일을 제공하는 것이다. 이를 모바일 퍼스트처럼 반응형 웹의 기본적 스타일이나 스크립을 저사양 혹은 오래된 브라우저에 맞추는 것으로 볼 수 있다.
우아한 성능 저하법
, 우아한 성능 저하법 은 먼저 최신 기술로 만들어 놓고, 최신 기술이 적용되지 않는 곳에 유사하게 적용되게 하기 위하여 대체 기술을 사용하여 만드는 방식이다. 최신기술 보다는 비효율적일지라도 다양한 소비자 층에게 서비스가 가능하다는 점에 의의가 있다. [2] 고사양 기기나 현대적인 브라우저에 맞춰진 웹 사이트가, 그렇지 못한 기기나 브라우저 에서도 큰 장애가 없이 우아하게 보여질 수 있도록 준비하는 것 또한 중요할 것 이다.[1]
각주
- ↑ 1.0 1.1 1.2 1.3 전진, <반응형 웹 디자인/모바일 퍼스트의 이해>, 《그누보드》
- ↑ 2.0 2.1 고베베, 〈점진적 향상법과 우아한 성능 저하법〉, 《티스토리》, 2018-06-11
같이 보기
| ||||||||||||||||||||||
