모바일 퍼스트

모바일 퍼스트(mobile first)란 사용자 경험(UX)을 디자인할 때 모바일일 경우에 최우선으로 초점을 맞춰 디자인하는 것이다. 루크 로블르스키(Luke Wroblewski)가 최초로 주장한 철학이자 전략이며, 반응형웹 디자인을 기반으로 한 개념이다. 구글(Google)의 에릭 슈미트(Eric Schmidt) 전 회장이 2010년 3월 스페인 바르셀로나에서 열린 모바일월드콩그레스(MWC) 기조연설에서 앞으로 3년 내 스마트폰 판매량이 PC 판매량을 능가하는 등 모바일 시대가 도래할 것을 전망하면서 언급하여 주목을 받았다. 더불어 그는 향후 금융, 자동차 등 모든 산업 분야에서 모바일이 비즈니스의 중심이 될 것이라고 선언했다. 더불어 그는 2014년 11월 대만에서 개최된 모바일 퍼스트월드 코퍼런스에서 이제는 모바일 퍼스트 시대를 지나 모바일을 통해 일상생활을 하고 비즈니스를 처리하는 모바일 온리(Mobile Only) 시대가 될 것이라고 언급했다. 이는 스마트폰 사용 확대로 일상생활뿐만 아니라 비즈니스에서도 모든 서비스가 PC가 아닌 모바일기기가 중심이 되는 것을 의미한다.

개요

모바일 퍼스트는 데스크탑 보다 모바일을 더 먼저 고려해야 할 때이고 데스크탑은 그 다음으로 고려해야 한다는 철학이다. 루크 로블르스키는 모바일 퍼스트가 가능한 그리고 필요한 이유에 대해서 세가지 조건과 가능성을 제시했습니다. 첫 번째는 모바일의 엄청난 성장이 기회라는 것이고, 두 번째는 모바일 기기의 제약을 통해 집중할 수 있다는 것이며, 모바일 기기의 기능이 혁신을 불러일으켰다는 것이다. 모바일의 성장과 모바일 기기가 가지고 있는 기능들의 경우 이미 일상에서 없어서는 안 될 존재가 되어 모두가 생각하고 공감할 수 있는 내용이었지만 모바일의 제약을 집중의 기회로 보는 것이야 말로 모바일 퍼스트의 핵심이다. 제약은 세가지로, 1) 스크린의 크기 2) 네트워크 속도 및 품질 3) 사용하는 모드 등이다. 이들 제약들이 모두 모바일 사이트를 보다 콘텐츠 중심으로 불필요한 기능·형식·꾸미기·이동 등을 강제로 최소화시키는 집중된 사이트를 만들게 하는 요인이라는 것이다. 개발자들은 모바일 퍼스트를 원칙으로 사이트를 만들면서, 사이트가 진짜로 제공해야 할 내용과 기능이 무엇인지 깨닫게 되었다고 평가하고, 사용자들 또한 데스크탑 사이트보다 모바일 사이트가 훨씬 사용하기 편하고, 자신이 원하는 작업을 빠르게 처리한다고 평가한다.

특징

원칙

모바일 퍼스트 철학을 기반으로 웹디자인을 할 때 몇 가지 원칙이 있다. 첫 번째는 콘텐츠를 내비게이션(navigation)보다 우선시 해야 한다는 것이다. 일반적으로 웹사이트 디자인 시 따로따로 떨어져 있는 페이지들을 어떻게 잘 연결하느냐가 중요한 문제이다. 너무 간결하고 빠른 것만을 선호해서는 안 되고, 데스크톱 버전이 단지 모바일 인터페이스를 크게 넓힌 대용품이 되어선 안 된다. 어느 요소를 크게 변경해야 하더라도 인터페이스는 꼭 콘텍스트에 따라 작업해야 한다. 또한 레이아웃이 아닌 기능에 집중해야 한다. 모바일 퍼스트 디자인이 가져온 가장 큰 변화는 현재 모바일 인터페이스가 데스크톱 솔루션이 제공하는 기능에 풀 엑세스하는 기술력이 모바일 퍼스트 디자인의 중요한 가치 기준으로 자리 잡았다는 것이다. 더불어 모바일 퍼스트 웹디자인에 있어서 신규 사용자와 파워 사용자 사이의 적절한 균형을 취해야 한다. 재차 활용될 만한 소스가 아니더라도 부적절한 미니멀리즘은 지양해야 한다.

접근 방식

모바일 퍼스트와 같이 얘기되는 접근 방법중 하나가, 점진적 향상이다. 점진적 향상법의 원래 정의는 저사양의 기기나 오래된 브라우저에 맞춰서 디자인된 웹 사이트가 고사양 기기의 현대적인 브라우저보다 많은 기능과 스타일을 제공한다는 것이다. 즉, 기초부터 차근차근 기능을 향상시켜 가는 방법으로, 한 번에 만드는 것이 아니라 기능을 점차 늘려가는 방식이다. 점진적 향상법은 주로 자사 서비스 개발에서 사용되는 개발 형태이다. 이를 모바일 퍼스트 처럼 반응형 웹의 기본적 스타일, 스크립을 저사양의 오래된 브라우저에 맞추는 것으로 볼 수 있다. 반대로 고사양이며 현대적인 브라우저에 맞춰진 웹 사이트가, 그렇지 못한 기기와 브라우저에서도 별 문제없이 우아하게 보여질 수 있도록 준비하는 것 또한 중요하다. 우아한 성능 저하법은 먼처 최신 기술로 만들어 놓고, 최신 기술이 적용되지 않는 곳에 유사하게 적용되게 하기 위해 대체 기술을 사용하여 만드는 것이다. 최신기술보다 비효율적인 개발이지만 다양한 소비자층에게 서비스가 가능하다는 장점이 있다.

효율성

모바일은 앞으로 다가오는 플랫폼이 아닌 이미 대중적으로 상용화 된 플랫폼이다. 현재는 데스크탑 유저보다 모바일 유저가 공유하는 정보가 많다. 실제로 일부 마케터들은 이미 모바일 유저를 겨냥한 서비스를 지원하고 있다. 각 회사는 홈페이지를 개설해왔다. 아직도 데스크탑 웹 전용, 모바일 전용 홈페이지를 따로 구축해서, 업데이트 내용을 웹 및 모바일 홈페이지에 반복해서 처리해야 하므로 보다 효율적으로 PC부터 아이패드, 태블릿PC, 스마트폰까지 총망라하는 반응형웹을 구조하는 기술력이 주목받고 있다. 한 번의 웹 사이트 구축으로 모든 모바일을 만족시킬 수 있기 때문이다. 모바일 시장이 IT 산업의 중심이 됐다는 점은 분명하다. 모바일 퍼스트를 외쳤던 이들이 모바일 센트릭을 강조하기에 이르렀다. 쫓아갈 것이 아니라 모바일 중심적 사고를 꾀해야 한다는 뜻이다.

모바일의 발달

이전에는 PC 프로세서와 모바일 프로세서는 각기 다른 구조로 설계되고 있었다. PC용 프로세서는 성능 향상에 치중하는 반면, 모바일용 프로세서는 배터리 유지 시간과 성능 향상 양쪽을 모두 신경 써야 하기 때문이다. 목적 자체가 달랐기 때문에 내부 구조도 다를 수밖에 없었던 것이다. 그러나 현재는 PC에 사용되는 프로세서 모바일 프로세서를 통합하는 기술도 개발되었다. 프로세서가 통합됐다는 것은 단순히 두 종류의 프로세서를 만들던 것을 한 종류만의 프로세서로 통합해 기기의 생산 단가를 절감시키는 것 이상의 가치를 갖고 있다. 이러한 기술을 바탕으로 애플(Apple)은 오랜 기간 활용했던 인텔(Intel) 프로세서가 아닌 M1 칩을 탑재한 새로운 맥북을 출시했다. M1 칩 탑재로 아이폰 혹은 아이패드에서 활용했던 앱을 PC 환경에서 편리하게 구현할 수 있게 됐다. 이로 인해 기기 간 경계가 허물어지게 되었음을 증명했다.

이용 사례

CJ온스타일 애플리케이션 화면

CJ온스타일

2021년 5월, 씨제이오쇼핑 계열의 모든 쇼핑 채널을 통합한 새로운 브랜드 CJ온스타일을 출범했다. 모바일 퍼스트 전략을 적극적으로 이용하며 론칭 직후부터 2021년 6월까지 한달간 큰 관심을 받게 되었다. 론칭 이후 3일간의 실적을 분석했을 때, 모바일 앱 주문 고객이 전년 동기와 대비 43% 증가했다. 모바일앱을 통한 주문 수는 전년 동기와 대비해 61% 증가했다. CJ온스타일은 '모바일 라이브 커머스'를 통해 고객과의 소통을 이어나가고 있으며, TV와 모바일 등 미디어 매체 간 경계가 사라지는 환경에 맞춰 모바일 퍼스트 전략으로 패러다임을 바꾸겠다는 입장다.

홈앤쇼핑

홈앤쇼핑은 2013년 처음으로 모바일 서비스를 시작한 이래로 2018년, 본격적으로 모바일 퍼스트 전략을 강화하겠다는 의사를 밝혔다. 먼저 홈쇼핑의 고객층은 40대부터 50대 이상 장년층의 비율이 가장 높다. 이러한 40대와 50대의 고객들이 더욱 쉽고 편리하게 모바일 앱을 이용 할 수 있도록 안내를 강화하였고, 모바일로 주문하면 10%를 할인해주며, 10%를 별도로 적립해주는 '텐텐 프로모션'으로 모바일 비중을 높였다. 이 외에도 모바일 전용 방송 서비스 '모바일 2채널'과 빅데이터를 이용하여 고객이 원하는 맞춤 상품을 추천해주는 큐레이션 서비스, 모바일 특가 샵, 인기상품 추천, 음성 검색 고도화 등 다양한 서비스를 추가하였다. 그 결과 홈앤쇼핑은 2018년을 기준으로 2015년 5월부터 국내 홈쇼핑 앱 부문에서 순 이용자 수 1위를 기록했다. 특히 홈앤쇼핑 단독 이용자 비율은 15.3%를 달성하며 종합쇼핑몰 업계 1위, 전체 커머스 업계 3위에 올랐다.

에스아이빌리지

2021년 2월 신세계인터내셔날이 온라인 경쟁력 강화를 위해 모바일 퍼스트 전략을 추진했다. 자체 온라인몰 에스아이빌리지(S.I.VILLAGE)의 모바일 화면을 7개 전문관으로 리뉴얼했다. 모바일에 최적화된 메뉴 구성과 서비스로 소비자 이용을 늘려 올해 온라인 몰 거래액을 2,500억 원까지 끌어올릴 것을 계획했다. 만약 이 계획에 성공하게 된다면 2020년보다 2배가량 증가한 수치로 업계 최고 수준의 성장률을 이룬다는 것이다. 신세계인터내셔날이 모바일 퍼스트 전략을 선택하며 모바일앱을 리뉴얼하게 된 이유는 온라인쇼핑 시장이 급속도로 커지고 그 성장의 핵심에 모바일이 있기 때문이다. 리뉴얼의 가장 큰 특징은 모바일 화면에서 단번에 원하는 분야로 이동할 수 있도록 소비자가 즐겨 찾는 카테고리를 선정해 7개의 전문관을 만든 점이다. 각 전문관의 초기 화면 역시 원하는 제품을 쉽게 찾을 수 있도록 카테고리를 세분화하고 모바일에 최적화되게 배치했다. 신세계인터내셔날의 모바일 퍼스트 전략의 핵심은 고객의 쇼핑 편의를 획기적으로 높여 독보적인 경쟁력을 확보하는 것이다.

한계

한편 모바일 퍼스트가 마냥 혁신적이라는 관점에서만 보기는 어렵다. 언론이 모바일 퍼스트 구호를 외치며 혁신 작업에 나서는 건 임시방편에 불구하다는 지적이다. 모바일 우선이 아닌 콘텐츠 우선의 기반한 전략을 세워야 한다고 주장했다. 이는 스마트폰 시대가 끝나게 된다면 모두 의미 없는 콘텐츠가 된다는 관점이다.

확장

코딩 전략

인터넷의 활용이 데스크탑 위주로 돌아가던 예전에 비해 모바일의 비중이 커지기 시작하면서, 오늘날에는 모바일이 데스크탑보다 더 중요한 환경이 되었다. 이러한 역전현상의 징조가 보이기 시작할 즈음 루크 로블르스키(Luke Wroblewski)가 자신의 블로그에 모바일의 중요성을 강조하는 글을 올리면서 모바일 퍼스트라는 용어가 사용되기 때문이다. 이제는 데스크탑보다 모바일을 더 먼저 고려해야 할 때이고, 데스크탑은 그 다음으로 고려해야 한다는 것이다. 이것이 가장 널리 알려진 모바일 퍼스트라는 용어의 의미이다. 그의 주장은 많은 사람을 통해 회자되면서 내용을 구체화하여 책으로 발간되기도 했다. 하지만 대한민국의 경영자들 사이에서는 모바일 퍼스트가 조금 다른 의미로 사용되기도 한다. 단준히 먼저 고려하는 것 뿐만 아니라 데스크탑 서빗 ㅡ출시를 한참 늦춰도 된다고 보는 시선이다. 카카오스토리가 SNS를 지향하면서도 웹사이트를 아직 만들고 있지 않는 현상을 예로 들 수 있다. 하지만 실제임상자료를 언급할 때 모바일 퍼스트는 조금 더 다른 맥락에서 사용된다. 데스크탑용 사이트를 먼저 만든 뒤 화면크기에 따라 그 사이트를 모바일용으로 변형시키는 것이 아니라, 모바일 사이트를 먼저 만들고 화면 크기가 큰 경우에 데스크탑용 사이트로 변형시키는 방식으로 만드는 CSS 작성 방법론이 RWD를 이야기 할 때 언급되는 모바일 퍼스트의 의미이다. 조금 더 명확히 구분하기 위해 모바일 퍼스트 코딩 전략이라고 생각할 수 있다. 이 방법은 2010년에 런던에서 열렸던 오버더에어(Over the air)라는 행사에서 발표한 영국의 2인 기업 이부(Yiibu)의 발표 슬라이드를 통해 알려지기 시작했다. 이 슬라이드는 RWD가 담아낼 수 있는 이상적인 가치관을 잘 보여줬는데, 고정된 사이트가 대응할 수 없는 다양한 크기의 디스플레이들을 유연하게 대응해 낼 수 있는 RWD를 소개하면서 미디어쿼리를 지원하지 않는 구형 모바일 단말기까지도 대응할 수 있는 방법으로 모바일 사이트를 기본으로 하는 RWD, 모바일 퍼스트 코딩 전략을 소개했다. 이 발표 이후로 모바일 퍼스트는 RWD의 정석으로 받아들여지고 있다.

모바일 온리

모바일 온리(Mobile only)는 각종 유료 상품과 컴퓨팅 애플리케이션 따위를 유선 인터넷에 제공하지 않고 모바일 체계로만 서비스하는 전략을 뜻한다. 한국 내 이동전화 가입자가 5362만 명(2012년 12월)을 넘어섰고, 이 가운데 스마트폰 이용자가 3087만 명(2012년 9월)에 달하는 등 모바일 서비스가 활발해지면서 정보통신기술 분야에서 일반적으로 쓰이는 말로 정착하는 추세다. 구글의 에릭슈미트 전 회장은 금융, 자동차 등의 모든 산업 분야에서 모바일이 비즈니스의 중심이 되는 '모바일 퍼스트(mobile first)' 시대를 선언했다. 이에 더하여 최근에는 앞으로는 일상생활과 비즈니스까지 모두 모바일로만 처리하는 시대인 모바일 온리 시대가 올 것으로 전망하였다.

참고자료

• 〈모바일 온리〉, 《네이버 지식백과》
• 〈모바일 퍼스트〉, 《네이버 지식백과》
• 전진, 〈반응형 웹 디자인/모바일 퍼스트의 이해〉, 《그누보드》
• 고베베, 〈점진적 향상법과 우아한 성능 저하법〉, 《티스토리》
• 최은지 기자, 〈'모바일 홈쇼핑' CJ 온스타일, 모바일 퍼스트 전략 "통했다"〉, 《증권경제신문》, 2021-06-09
• 연구원케이, 〈심플함이 올바른 UX디자인은 아니다.〉, 《브런치》, 2016-09-14
• 김봉균 기자, 〈스마트폰과 태블릿, PC의 경계가 모호해진다〉, 《자투리경제》, 2021-04-25
• 김용운 기자, 〈스마트폰과 PC의 경계가 무너진다, IT기업의 새로운 도전〉, 《소비라이프》, 2020-12-08
• 김춘동 기자, 〈홈앤쇼핑, '모바일 퍼스트'로 스마트쇼핑 진화 주도〉, 《비즈니스 와치》, 2018-12-20
• 김소희 기자, 〈신세계인터내셔날, 모바일 퍼스트 전략 추진〉, 《신아일보》, 2021-02-16
• 이수호 기자, 〈한샘, 모바일 전략 통했다...한샘몰 이용자 1년새 두자릿 수 'UP'〉, 《테크M》, 2021-06-08
• 이민혁 기자, 〈앱 하나로 보험·결제·계좌조회…우리금융의 '디지털 퍼스트'〉, 《한경닷컴》
• 손예술 기자, 〈카카오뱅크, 첫 모바일 앱 개편..."카뱅 퍼스트 전략"〉, 《지디넷》, 2020-04-27
• 금준경 기자, 〈“모바일 퍼스트? 스마트폰 시대 끝나면 무용지물”〉, 《미디어 오늘》, 2017-03-31
• 토비 윤(Toby yun), 〈RWD #3. 모바일 퍼스트(모바일 우선주의)〉, 《텀블러》
• 〈왜 ‘MOBILE FIRST’ 시각을 갖고, 그에 따른 웹사이트를 구축해야 하는가?〉, 《케이엘커뮤니케이션》, 2013-10-21
• 김명상 기자, 〈“반응형 웹사이트, PC보다 모바일 기획이 최우선” – 비쥬얼 박스 최상영 대표〉, 《블로터》, 2021-03-02

같이 보기

• 웹디자인
• 모바일온리
• 반응형웹

이 모바일 퍼스트 문서는 모바일에 관한 글로서 검토가 필요합니다. 위키 문서는 누구든지 자유롭게 편집할 수 있습니다. [편집]을 눌러 문서 내용을 검토·수정해 주세요.

개발 : 프로그래밍, 소프트웨어, 데이터, 솔루션, 보안, 하드웨어, 컴퓨터, 사무자동화, 인터넷, 모바일 □■⊕, 사물인터넷, 게임, 메타버스, 디자인 모바일 기술 N스크린 • 네이티브앱 • 모바일 • 모바일앱 • 모바일 온리 • 모바일웹 • 모바일 퍼스트 • 미디어쿼리 • 반응형웹 • 백엔드 서비스 • 웹앱 • 적응형웹 • 하이브리드앱 앱스토어 구글 플레이 • 아마존 앱스토어 • 애플 앱스토어 • 앱스토어 • 원스토어 모바일기기 IC카드 • 갤럭시 • 갤럭시노트 • 스마트워치 • 스마트폰 • 아이팟 • 아이패드 • 아이폰 • 유심(USIM) • 태블릿PC • 피디에이(PDA) 모바일 서비스 골프메신저 • 네이버 밴드 • 딩톡 • 라이즈 • 라인 • 라인택시 • 리멤버 • 마셔바 • 메이퇀 • 바이트댄스 • 배달의민족 • 뱅크샐러드 • 샤잠 • 소다플레이 • 슬랙 • 시럽테이블 • 아자르 • 에코트리 • 원투 • 위챗 • 직톡 • 카카오T(카카오택시) • 카카오지하철 • 카카오톡 • 캐시리플렛 • 쿠브 • 클럽하우스 • 틱톡 • 패밀리링크 • 페이스북 메신저 • 하이퍼커넥트 • 하쿠나라이브 위키 : 자동차, 교통, 지역, 지도, 산업, 기업, 단체, 업무, 생활, 쇼핑, 블록체인, 암호화폐, 인공지능, 개발, 인물, 행사, 일반