"모바일 퍼스트"의 두 판 사이의 차이
| 8번째 줄: | 8번째 줄: | ||
== 원칙/기법 == | == 원칙/기법 == | ||
| − | 콘텐츠를 [[네비게이션]](navigation) 보다 우선시 해야 한다. 일반적으로 웹사이트 디자인 시 따로 따로 떨어져 있는 페이지들을 어떻게 잘 연결하느냐가 중요한 문제이기에, 페이지 상단과 좌측 또는 하단의 많은 영역을 [[네비게이션]](navigation)으로 할당한다. 하지만 스크린이 작은 모바일의 경우, 특히 상단이나 좌측의 네비게이션을 화면에 먼저 보여주는 구조이기 때문에, 실제로 중요한 콘텐츠는 스크롤을 한참 해야 보이는 문제가 발생하기도 한다. 이런 문제점은 예를 들어, youtube 등의 모바일 버전에서도 알 수 있듯이, 메뉴/네비게이션은 상단의 한 버튼으로 축소시켜놓고, 첫 화면부터 콘텐츠를 보여주는 것으로 해결한다.<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> | 최신기술 보다는 비효율적일지라도 다양한 소비자 층에게 서비스가 가능하다는 점에 의의가 있다. <ref name="고베베"></ref> 고사양 기기나 현대적인 브라우저에 맞춰진 웹 사이트가, 그렇지 못한 기기나 브라우저 에서도 큰 장애가 없이 우아하게 보여질 수 있도록 준비하는 것 또한 중요할 것 이다.<ref name="그누보드"></ref> | ||
| + | == 사례 == | ||
| + | |||
| + | === 모바일 퍼스트 전략 === | ||
| + | |||
| + | |||
| + | ==== CJ 온스타일 ==== | ||
| + | 2021년 5월 , CJ 오쇼핑 계열의 모든 쇼핑 채널을 통합한 새로운 브랜드 CJ 온스타일을 출범했다. 모바일 퍼스트 전략을 적극적으로 이용하며 론칭 직후부터 2021년 6월까지 한달 간 큰 관심을 받게 되었다. 론칭 이후 3일간의 실적을 분석했을때, 모바일 앱 주문 고객이 전년 동기와 대비 43% 증가했다. 모바일 앱을 통한 주문 수는 전년 | ||
| + | 동기와 대비해 61% 증가했다. '모바일 라이브 커머스'를 통해 고객과의 소통을 이어갔다. 최근 TV와 모바일 등 미디어 매체 간 경계가 사라지는 환경에 맞춰 '모바일 퍼스트' 전략으로 패러다임을 바꾸겠다는 입장이었다. <ref> 최은지 기자, 〈[http://www.koreastocknews.com/news/articleView.html?idxno=63941 '모바일 홈쇼핑' CJ온스타일, 모바일 퍼스트 전략 "통했다"]〉, 《증권경제신문》, 2021-06-09 </ref> | ||
| + | |||
| + | |||
| + | ==== 홈앤쇼핑 ==== | ||
| + | 2013년 처음으로 모바일 서비스를 시작 한 이후에 2018년, 본격적으로 모바일 퍼스트 전략을 강화하겠다는 의사를 밝혔다. | ||
| + | 먼저, [[홈쇼핑]]의 고객층은 40대 부터 50대 이상 장년층의 비율이 가장 크다. 이러한 40대와 50대의 고객들이 보다 쉽고 편리하게 모바일 앱을 이용 할 수 있도록 | ||
| + | 안내를 강화하였고, 모바일로 주문하면 10%를 할인해주고, 10%를 별도로 적립해주는 '텐텐 프로모션'으로 모바일 비중을 높였다. 이 외에도 모바일 전용 방송 서비스 | ||
| + | '모바일 2채널'과 빅데이터를 이용하여 고객이 원하는 맞춤 상품을 추천해주는 큐레이션 서비스, 모바일 특가샵, 인기상품 추천, 음성검색 고도화 등 다양한 서비스를 | ||
| + | 추가하였다. 그 결과 홈앤쇼핑은 2018년을 기준으로 2015년 5월부터 국내 홈쇼핑 앱 부문에서 순 이용자 수 1위를 기록했다. 특히 홈앤쇼핑 단독 이용자 비율은 15.3%를 | ||
| + | 달성하며 종합쇼핑몰 업계 1위, 전체 커머스 업계 3위에 올랐다.<ref> 김춘동 기자, 〈[http://news.bizwatch.co.kr/article/consumer/2018/12/20/0007 홈앤쇼핑, '모바일 퍼스트'로 스마트쇼핑 진화 주도]〉, 《비즈니스 와치》, 2018-12-20 </ref> | ||
| + | |||
| + | |||
| + | ==== 신세계 인터내샤날 ==== | ||
| + | |||
| + | 2021년 2월, 신세계인터내샤날이 온라인 경쟁력 강화를 위해 모바일 퍼스트 전략을 추진했다. | ||
| + | 자체 온라인 몰 에스아이빌리지(S.I.VILLAGE)의 모바일 화면을 7개 전문관으로 리뉴얼했다. 모바일에 최적화된 메뉴 구성과 서비스로 소비자 이용을 늘려 올해 온라인 몰 거래액을 2500억원까지 끌어올린다는 계획이다. 이는 지난해보다 2배가량 증가한 수치로 업계 최고 수준의 성장률이다. | ||
| + | 그 이유는 온라인 쇼핑 시장이 급속도로 커지고 그 성장의 핵심에 모바일이 있기 때문이다.이번 리뉴얼의 가장 큰 특징은 모바일 화면에서 단번에 원하는 분야로 이동할 수 있도록 소비자가 즐겨 찾는 카테고리를 선정해 7개의 전문관을 만든 점이다.각 전문관의 초기 화면 역시 원하는 제품을 쉽게 찾을 수 있도록 카테고리를 세분화하고 모바일에 최적화되게 배치했다는 점도 주목해야 한다.모바일 퍼스트 전략의 핵심은 고객의 쇼핑 편의를 획기적으로 높여 독보적인 경쟁력을 확보하는 것이라고 주장했다.<ref> 김소희 기자, 〈[https://www.shinailbo.co.kr/news/articleView.html?idxno=1377708 신세계인터내셔날, 모바일 퍼스트 전략 추진]〉, 《신아일보》, 2021-02-16 </ref> | ||
{{각주}} | {{각주}} | ||
| + | |||
| + | == 참고자료 == | ||
| + | * 전진, <[https://sir.kr/pb_lecture/133#vc_mfrwd 반응형 웹 디자인/모바일 퍼스트의 이해]>, 《그누보드》 | ||
| + | * 고베베, 〈[https://susu91.tistory.com/81 점진적 향상법과 우아한 성능 저하법]〉, 《티스토리》 | ||
| + | * 최은지 기자, 〈[http://www.koreastocknews.com/news/articleView.html?idxno=63941 '모바일 홈쇼핑' CJ온스타일, 모바일 퍼스트 전략 "통했다"]〉, 《증권경제신문》, 2021-06-09 | ||
| + | * 김춘동 기자, 〈[http://news.bizwatch.co.kr/article/consumer/2018/12/20/0007 홈앤쇼핑, '모바일 퍼스트'로 스마트쇼핑 진화 주도]〉, 《비즈니스 와치》, 2018-12-20 | ||
| + | * 김소희 기자, 〈[https://www.shinailbo.co.kr/news/articleView.html?idxno=1377708 신세계인터내셔날, 모바일 퍼스트 전략 추진]〉, 《신아일보》, 2021-02-16 </ref> | ||
== 같이 보기 == | == 같이 보기 == | ||
* [[모바일]] | * [[모바일]] | ||
2021년 8월 4일 (수) 15:22 판
모바일 퍼스트(mobile first)란 웹디자인에 관해서, 모바일에 최적화된 구성을 우선시 해야 한다는,LukeW가 주장한 철학이자 전략이며, 반응형 웹 디자인을 기반으로 한 개념이다. [1]
목차
개요
LukeW는 모바일 퍼스트가 가능한 이유와 필요한 이유에 대해, 모바일의 엄청난 성장은 기회이고, 모바일 기기의 제약이 초점이며, 그리고 모바일 기기의 기능은 혁신이라는 주장을 내세웠다. 모바일의 성장과 모바일 기기가 가지고 있는 기능들에 대해서는 우리가 일상생활에서 지켜보고 또 사용하고 있으니 다시 얘기할 필요가 없겠지만,모바일의 성장과 모바일기기의 기능들은 나날히 발전하며 혁신 그 자체의 모습을 보이고 있다. 하지만 이 모바일 기기의 제약을 기회의 초점으로 둔 것이 모바일 퍼스트의 핵심이다. LukeW가 제시한 모바일의 대표적인 세가지 제약은 스크린의 크기, 네트워크의 속도와 품질, 사용할 수 있는 모드 등이다. 이러한 제약들이 모두 모바일 사이트를 보다 컨텐츠 중심으로 불필요한 기능/형식/꾸미기/이동 등을 강제로 최소화시키는 집중된 사이트를 만들게 하는 요인이라는 것이다. 개발자들이 모바일 퍼스트를 원칙으로 사이트를 만들면서, 사이트가 진짜로 제공해야 할 내용과 기능이 무엇인지 깨닫게 되었다고들 하고, 사용자들 또한, 데스크탑 사이트보다 모바일 사이트가 훨씬 사용하기 편하고, 자신이 원하는 작업을 빠르게 처리한다고 이야기 한다.[1]
원칙/기법
콘텐츠를 네비게이션(navigation) 보다 우선시 해야 한다. 일반적으로 웹사이트 디자인 시 따로 따로 떨어져 있는 페이지들을 어떻게 잘 연결하느냐가 중요한 문제이기에, 페이지 상단과 좌측 또는 하단의 많은 영역을 네비게이션(navigation)으로 할당한다. 하지만 스크린이 작은 모바일의 경우, 특히 상단이나 좌측의 네비게이션을 화면에 먼저 보여주는 구조이기 때문에, 실제로 중요한 콘텐츠는 스크롤을 한참 해야 보이는 문제가 발생하기도 한다. 이런 문제점은 예를 들어, youtube 등의 모바일 버전에서도 알 수 있듯이, 메뉴/네비게이션은 상단의 한 버튼으로 축소시켜놓고, 첫 화면부터 콘텐츠를 보여주는 것으로 해결한다.[1]
접근 방식
점진적 향상법
점진적 향상법은 기초부터 차근차근 기능을 개선하는 방법이다. 한 번에 만드는 것이 아니라 기능을 점차 늘려가는 방식이다.[2] 점진적 향상법은 모바일 퍼스트 전략에 접근 방법 중 하나라고 볼 수 있다. 원래 정의는 저사양의 기기나 오래된 브라우져에 맞춰서 디자인된 웹 사이트가 고사양 기기의 현대적인 브라우져는 보다 많은 기능과 스타일을 제공하는 것이다. 이를 모바일 퍼스트처럼 반응형 웹의 기본적 스타일이나 스크립을 저사양 혹은 오래된 브라우저에 맞추는 것으로 볼 수 있다.
우아한 성능 저하법
, 우아한 성능 저하법 은 먼저 최신 기술로 만들어 놓고, 최신 기술이 적용되지 않는 곳에 유사하게 적용되게 하기 위하여 대체 기술을 사용하여 만드는 방식이다. 최신기술 보다는 비효율적일지라도 다양한 소비자 층에게 서비스가 가능하다는 점에 의의가 있다. [2] 고사양 기기나 현대적인 브라우저에 맞춰진 웹 사이트가, 그렇지 못한 기기나 브라우저 에서도 큰 장애가 없이 우아하게 보여질 수 있도록 준비하는 것 또한 중요할 것 이다.[1]
사례
모바일 퍼스트 전략
CJ 온스타일
2021년 5월 , CJ 오쇼핑 계열의 모든 쇼핑 채널을 통합한 새로운 브랜드 CJ 온스타일을 출범했다. 모바일 퍼스트 전략을 적극적으로 이용하며 론칭 직후부터 2021년 6월까지 한달 간 큰 관심을 받게 되었다. 론칭 이후 3일간의 실적을 분석했을때, 모바일 앱 주문 고객이 전년 동기와 대비 43% 증가했다. 모바일 앱을 통한 주문 수는 전년 동기와 대비해 61% 증가했다. '모바일 라이브 커머스'를 통해 고객과의 소통을 이어갔다. 최근 TV와 모바일 등 미디어 매체 간 경계가 사라지는 환경에 맞춰 '모바일 퍼스트' 전략으로 패러다임을 바꾸겠다는 입장이었다. [3]
홈앤쇼핑
2013년 처음으로 모바일 서비스를 시작 한 이후에 2018년, 본격적으로 모바일 퍼스트 전략을 강화하겠다는 의사를 밝혔다. 먼저, 홈쇼핑의 고객층은 40대 부터 50대 이상 장년층의 비율이 가장 크다. 이러한 40대와 50대의 고객들이 보다 쉽고 편리하게 모바일 앱을 이용 할 수 있도록 안내를 강화하였고, 모바일로 주문하면 10%를 할인해주고, 10%를 별도로 적립해주는 '텐텐 프로모션'으로 모바일 비중을 높였다. 이 외에도 모바일 전용 방송 서비스 '모바일 2채널'과 빅데이터를 이용하여 고객이 원하는 맞춤 상품을 추천해주는 큐레이션 서비스, 모바일 특가샵, 인기상품 추천, 음성검색 고도화 등 다양한 서비스를 추가하였다. 그 결과 홈앤쇼핑은 2018년을 기준으로 2015년 5월부터 국내 홈쇼핑 앱 부문에서 순 이용자 수 1위를 기록했다. 특히 홈앤쇼핑 단독 이용자 비율은 15.3%를 달성하며 종합쇼핑몰 업계 1위, 전체 커머스 업계 3위에 올랐다.[4]
신세계 인터내샤날
2021년 2월, 신세계인터내샤날이 온라인 경쟁력 강화를 위해 모바일 퍼스트 전략을 추진했다. 자체 온라인 몰 에스아이빌리지(S.I.VILLAGE)의 모바일 화면을 7개 전문관으로 리뉴얼했다. 모바일에 최적화된 메뉴 구성과 서비스로 소비자 이용을 늘려 올해 온라인 몰 거래액을 2500억원까지 끌어올린다는 계획이다. 이는 지난해보다 2배가량 증가한 수치로 업계 최고 수준의 성장률이다. 그 이유는 온라인 쇼핑 시장이 급속도로 커지고 그 성장의 핵심에 모바일이 있기 때문이다.이번 리뉴얼의 가장 큰 특징은 모바일 화면에서 단번에 원하는 분야로 이동할 수 있도록 소비자가 즐겨 찾는 카테고리를 선정해 7개의 전문관을 만든 점이다.각 전문관의 초기 화면 역시 원하는 제품을 쉽게 찾을 수 있도록 카테고리를 세분화하고 모바일에 최적화되게 배치했다는 점도 주목해야 한다.모바일 퍼스트 전략의 핵심은 고객의 쇼핑 편의를 획기적으로 높여 독보적인 경쟁력을 확보하는 것이라고 주장했다.[5]
각주
- ↑ 1.0 1.1 1.2 1.3 전진, <반응형 웹 디자인/모바일 퍼스트의 이해>, 《그누보드》
- ↑ 2.0 2.1 고베베, 〈점진적 향상법과 우아한 성능 저하법〉, 《티스토리》, 2018-06-11
- ↑ 최은지 기자, 〈'모바일 홈쇼핑' CJ온스타일, 모바일 퍼스트 전략 "통했다"〉, 《증권경제신문》, 2021-06-09
- ↑ 김춘동 기자, 〈홈앤쇼핑, '모바일 퍼스트'로 스마트쇼핑 진화 주도〉, 《비즈니스 와치》, 2018-12-20
- ↑ 김소희 기자, 〈신세계인터내셔날, 모바일 퍼스트 전략 추진〉, 《신아일보》, 2021-02-16
참고자료
- 전진, <반응형 웹 디자인/모바일 퍼스트의 이해>, 《그누보드》
- 고베베, 〈점진적 향상법과 우아한 성능 저하법〉, 《티스토리》
- 최은지 기자, 〈'모바일 홈쇼핑' CJ온스타일, 모바일 퍼스트 전략 "통했다"〉, 《증권경제신문》, 2021-06-09
- 김춘동 기자, 〈홈앤쇼핑, '모바일 퍼스트'로 스마트쇼핑 진화 주도〉, 《비즈니스 와치》, 2018-12-20
- 김소희 기자, 〈신세계인터내셔날, 모바일 퍼스트 전략 추진〉, 《신아일보》, 2021-02-16 </ref>
같이 보기
| ||||||||||||||||||||||
