Mobile-first 디자인이란

글에 맞는 카테고리는 UX, Design 이 쪽이 될 텐데
당장 카테고리를 확장할 수 없어서
web_frontend 태그에 이 글을 지정함.



해당 글은


을 번역한 글입니다.


mobile-first design


최초로 UX Sketch를 할 때,
데스크탑이나 태블릿 보다 모바일 환경 인터페이스를 염두에 둔 디자인이다.

mobile-first design의 일반적인 법칙은

' 만약 사이트가 모바일 장치에 맞게 디자인되어있으면
다른 디바이스에서도 강력하게 적용될 것 '이다.



mobile-first 대 desktop-first


mobile first

해상도 이행
스마트폰 -> 태블릿 -> 데스크탑
저해상도->고해상도로 화면이 커짐.
Progressive enhancement


텍스트 양
상대적으로 적음


폰트 사이즈




하드웨어 액세스
카메라, 마이크, 플래시 등
다른 외장 디바이스에 액세스하기에
상대적으로 쉬움


모바일 폰에 최적


desktop first

해상도 이행
데스크탑-> 태블릿 -> 스마트폰
고해상도->저해상도로 화면이 작아진다.
Graceful degradation


텍스트 양
상대적으로 많음


폰트 사이즈
작음




하드웨어 액세스
다른 외장 디바이스에 액세스하기에
상대적으로 어려움


데스크톱에 최적


 
클릭 유도 문구, 다운로드 속도에 대한 비교는
잘 이해가되지 않아서 제외했습니다.




고려사항


- 어떤 제품을 만드는 지



- 고객들이 어떤 작업들을 주로 수행하는지
1. 큰 디스플레이가 필요한 작업 ( graphic design과 같은 작업 )
2. 장시간 디스플레이를 봐야하는 작업( 1번과 동일)
3. 고객들이 어떤 장치 위에서 주로 쓸 지
4. 기능이 많고 복잡한 지


위 case의 경우에는 desktop-first가 유리할 수 있음.
예를 들어, canva의 경우 desktop ux를 먼저 출시하고 모바일 ux를 고려함.





- 고객이 제품을 사용하는 이유
   ex) 제품을 통해 고객이 이루고자 하는 것은?


- 어떤 맥락에서 사용하는지
   유저가 어떤 상황에서, 언제, 어디서 사용하는지.


- 유저 플로
   유저 플로가 복잡하거나
   desktop과 mobile에서의 기능이 많이 차이 나는 경우
   desktop-first가 유리한 선택이 될 수 있음



- 분야( b2b? b2c? )
   소셜, 생활과 관련된 앱들을 mobile-first
   디자인, 생산성 앱들은 desktop-first인 경향이 있음



- 개발 리소스





댓글

이 블로그의 인기 게시물

실무진 면접 경험으로 정리하는 백엔드 (1) : 에듀 테크 기업 면접

노마드코더 개발자북클럽 Clean code TIL 6 : 6장. 객체와 자료구조

백엔드 개발자가 Djnago fullstack 사이드 프로젝트를하며 ( html, css, vanillaJS 그리고 JS프레임워크 )