모바일 퍼스트 디자인에 대해
개발 이야기인정하자, 사람들은 데스크탑을 쓰지 않는다.
최근 지인과 테일윈드 혐/호 토론을 하다가 나온 점이 모바일 퍼스트에 대한 이야기였다.
테일윈드는 전에 썼던 글에 언급했다시피 모바일 퍼스트를 은근히 밀고 있다. 나는 테일윈드의 불호와 관련 없이 이 부분은 잘하고 있는 부분이라고 생각한다.
사실 우리같은 개발자들이야 데스크탑이 없는 세상을 상상하지 못하지만, 실제로 사회에 나가보면 개발자를 제외한 무수히 많은 사람들이 데스크탑의 필요성을 느끼지 못하고, 스마트폰만 가지고 살아간다. 우리가 아무리 데스크탑으로 코딩 해도 사람들은 스마트폰으로 웹을 더 많이 보는 것이다.
실제로 스탯 카운터 자료만 봐도 2017년을 기점으로 모바일이 데스크탑을 추월한게 보인다. 다만 여기서 유념할 점은, 저 범위가 전세계라는 것이다. 그렇다면 IT가 특히 발달한 아시아와 북미권은 어떨까?
아시아권은 이미 2015년 부터 모바일이 데스크탑을 넘어섰고, 미국의 경우 2020년을 기점으로 좀 늦게 넘어온게 보인다. 최근의 데이터는.. 왜 저렇게 갑자기 가속을 받았는지 모르겠고..(신빙성이 의심된다;;) 스탯 카운터 저놈들 뭔가 의심스러워서 다른 자료도 찾아보았다.
시밀러 웹이라는 곳에서는 아예 저렇게 지도도 나온다. 아르헨티나는 뭐 해먹은 나라인지 혼자서만 데스크탑 점유율이 높고, 콩고 민주 공화국은 모바일 사용률이 95%를 넘어간다. 사실 데스크탑이나 랩탑에 비해 스마트폰의 접근성이 훨씬 좋기 때문에, 후진국일 수록 모바일 사용률이 높은건 이상한게 아니다. 인도의 경우도 꽤 높고.. 중국은 만리장성 방화벽 때문인지 집계되지 않고 있다. 근데 알지? 중국은 생각보다 훨씬 신기술 도입이 빠르다. 중국은 전기 오토바이에 전기 자동차가 엄청나게 돌아다니고 있는 상황이다.
65:32로 거의 더블 스코어로 모바일을 많이 쓰고 있다. 아무튼 모바일이 데스크탑을 넘어선건 되돌릴 수 없는 사실이며, 현재 진행중인 상황이다. 그리고 이 격차는 모바일이 70% 정도 차지할 때 까지 계속 벌어질것 같다. 좀 부족하니 이커머스 쪽도 볼까?
트래픽 차이는 거의 세배에, 컨버전률은 근소하게 차이난다.
아무튼 우리 개발자들은 모바일을 더 우선시해서 생각할 필요가 있다. 아무리 우리가 개발을 데스크탑으로 한다 해도 사용자들은 모바일로 이 화면을 더 자주 볼 것이다. 지금 이 글을 읽는 당신, 모바일 맞지?
N스크린과 모바일 퍼스트 디자인
인터넷을 찾아보면 수십개의 Mobile First Design 관련 글을 볼 수 있다. 예를 들어 이거.
https://www.browserstack.com/guide/how-to-implement-mobile-first-design
사람들이 모바일 많이 쓰니까, 모바일을 홀대하지 않기 위해 모바일 먼저 디자인 하자는거다. 전통적으로 우리는 데스크탑을 먼저 디자인하고, 모바일을 좀 더 작은 사이즈에 욱여넣어가며 디자인하고 개발하는 패턴을 따랐다. 하지만 2010년대 초에 N스크린의 개념이 나오기 시작하면서 상황이 좀 더 바뀌기 시작했다.
아이폰4가 2010년 말에 발표되었다. 기존의 아이폰 3GS는 320x480 해상도였으나, 처음으로 등장한 레티나 디스플레이는 640x960 해상도로 2x 뻥튀기 되었다. 사람들은 픽셀이 보이지 않는 화면에 열광했고, 디자이너와 개발자는 좌절했다.
기존 디자인의 주류는 스큐어모피즘이었다. 미쳐 돌아가는 GUI 디자이너들은 서로서로 경쟁하듯 실제 세상의 물체를 디지털로 옮겨오는데 앞장섰다. 게임 센터에는 당구대 녹색 깔개 배경, iBooks에는 원목 책장, 어떤놈은 psd 레이어 한장으로 렌즈와 반사광 효과 만들기도 하고, 개발자라는 놈은 css 갖고 그 짓을 똑같이 따라하고 있더라.
근데 이 스큐어모피즘이 레티나 디스플레이에 대응하기 너무 힘들었던 것이다. 스큐어모피즘의 특성상 비트맵으로 디자인해야 했다. 하지만 2x 커진 디스플레이에 이를 대응시키려면 역시 2x 사이즈의 이미지가 필요하다. 이게 픽셀 작업 빡쎄게 해서 2x 사이즈의 잔디밭 배경을 만든다고 다가 아니다. 이미지 용량은 2x2 해서 4배로 커지게 된다. 심지어는 아이폰 플러스 모델에서 3x 이미지 사이즈를 필요로 하면서 3x3 하여 9배 용량은 도저히 각이 안나오게 된다.
애플 뿐만 아니라 다른 스마트폰 제조사에서도 이렇게 디스플레이 픽셀 뻥튀기가 전염되었다. 쟤가 고해상도로 내놓는데 우리가 고해상도 못내놓으면 망하잖아? 480x800에 멈춰 있던 안드로이드폰은 점차 고밀도화가 되어갔다. 이 와중에 UI 디자이너는 디자이너대로 돌아버리고, 개발자는 개발자대로 돌아버린다.
그래서 과도기에 나온게 나인패치다. 검색해보니 nine-patch는 2011년쯤 나온것 같다. 근데 이거 해본 사람들 알잖아, 진짜 쓰레기같고 작업하기도 불편하다.
여기서 마이크로소프트는 2010년 쯤에 윈도우폰7과 윈도우8에서 Metro UI라는 선구적인걸 내놓았다. (지금은 법적 문제 때문에 Microsoft Design Language 라고 개명했다.) 어 그 잘난 스큐어모피즘 뻑큐나 먹으라 그거지. 플랫하게 컬러 깔고, 벡터로 픽토그램 빡 박아주고. 이러면 되잖아! 언제까지 1x, 2x, 3x 만들고 앉아있을거야? 비트맵이 문제야? 비트맵을 폭파시켜버리면 되지! 이게 메트로 UI다.
비슷한 생각을 구글도 했는지, 2011년에 마티아스 듀아르테가 지휘하는 구글 팀이 안드로이드 4.0 아이스크림 샌드위치에서 역시나 플랫한 모습을 선보였다.
우리가 해도 너무했다는 생각을 애플도 했는지, 약간 늦은 2013년에 iOS7에서 충격적인 플랫 UI를 내놓았다.
iOS6의 스큐어모피즘
iOS7의 플랫 디자인
좀 더 다듬어진 iOS8
개인적으로 저 흉칙한 그라데이션 방향이 너무나 싫었다. 아니 메일은 어두움-밝음인데, 앱스토어는 밝음-어두움이다. 거기다가 뭔가 비율들도 촌빨나는게 참 싫었다. iOS8에서 색감이 조금 차분하게 조정되어 한결 보기 좋아지긴 했다.
스큐어모피즘이 완전 한물 가버리고, 대안으로 이런 플랫 UI들이 나와서 이제 주류로 자리잡혀버렸다. 중간에 뭐 뉴 모피즘이니, 롱 쉐도우니 하는 것도 나왔지만.. 그냥 디자이너 끼리끼리 낄낄대는 수준 정도였던것 같다. 아무튼 이렇게 픽셀 밀도가 올라가면서 디자인 언어 자체가 완전히 바뀌어버렸다.
다음은 내가 드리블에서 오랫동안 팔로우중인 Norm이라는 양반의 작품인데, 분위기 변화 좀 보자 ㅋㅋ
아니 2011년에 원래 이런거 만들던 양반이..
3년 후엔 완전히 변절해버렸다 ㅋㅋ 디자이너들도 대세 따라가는거다.
한때 애플 홈페이지 로고에 처음 들어가서 우와 우와 애플 미친놈들이다-를 연발하게 한 SVG 이미지도 개발자들이 이젠 밥먹듯이 사용하게 되었다. 내 경우 서비스 만들 때 엄청 큰 이미지가 아니고서야 png나 jpg를 본지가 아주 오래되었다.
마침 이 시점은 IE가 공개 처형 당하고 있던 시점이다. IE9가 2011년에 나오면서 SVG를 지원하기 시작했지. 결국 다 이렇게 같이 발전한다니까..
한편으론 픽셀 밀도만 올라간게 아니라, 화면이 점점 커지고 있는 점도 고려해야한다.
예전에 한창 넥서스1이니 HTC 디자이어니 스마트폰 굴러다닐때 480x800에, 아이폰류 320x480 / 640x960 하던 시절에서 벗어나 점점 커지기 시작하더라. 뭔 갤럭시 그랜드 같은 희대의 개똥폰도 나오고 (픽셀 밀도가 낮아 스스로를 태블릿으로 인식한다),
LG 새끼들은 옵티머스 뷰 같은 쓰레기폰도 만들었다. 개 거지같은 4:3 비율이라니 개발자나 디자이너 입장에서 욕이 안나올 수가 없다. 키보드 올라오면 화면 어떻게 보라고!! 물론 이런 쓰레기같은 디스플레이를 탑재하는 디바이스 제조사의 폭거는 갤럭시 폴드에까지 이어졌다. 이거 폴딩 하면 CSS width 기준으로 가로 280px이 나온다. 320px도 돌아버릴것 같은데 280이 뭔 소리냐고. 사실 이거 개발자나 디자이너들은 그냥 존재 자체를 무시하며 쉬쉬하는 분위기다. 갤럭시 폴드 사용자들도 반으로 접은 상태에서 웹 페이지가 정상적으로 나올걸 딱히 기대하지 않는것 같더라. 참 안타까운 일이지..
아무튼 잡설 길었는데 화면도 점점 커지고 있다고! 그럼 우리는 어떻게 마크업 해야해? 예전 처럼 데스크탑에서 모바일로 가면서 breakpoint 한두개 넣어서 할건가? 이거 대응 안된다고. 360이면 모바일? 아 그럼 375 짜리 아이폰 프로는 데스크탑이냐? breakpoint를 380까지 밀어 올려? 아 그럼 414짜리 아이폰 플러스는 어쩔건데? 프로 맥스 428 나오셨구요, 14 프로 맥스는 430이네요. 참 지랄이다야.. 조금만 더 가면 바로 태블릿 사이즈 나온다.
이게 말이지, 해본 사람은 알겠지만 큰걸 작은데 쑤셔넣는건 어려운데, 작은걸 땡겨서 크게 키우는건 문제가 안된다. 360px 디자인과 320px 디자인은 진짜 엄청나게 차이난다. 디자이너분들 공감하시는지. 그래서 보통 320 한벌 만들고, 360을 거의 마음의 안식을 얻을 수 있는 기본으로 두고, 360 여백 땡겨서 태블릿 직전까지 커버하고, 얼레벌레 태블릿 디자인 만들어는 놓고, 960 근방에서 데스크탑 디자인을 적용한다. 근데 요새 데스크탑 화면들 대부분 1920x1080(4K도 결국 마찬가지)이잖아? 그러니까 대충 1440 근방에서 하나 더 잡아주고 나머지는 니 알아서 하세요- 하고 놔버리는 정도.
근데 우리가 데스크탑 먼저 하고 모바일로 줄여나가면 이게 되냐고.. 디자이너들이 데스크탑 먼저 디자인을 하게 되면 있던걸 없애야하니까 머리가 깨져버린다. 데스크탑에서야 이리넣고 저리넣으면 배치가 되었지, 이거 모바일에 넣으니까 각이 안나온다고. 그 거대한 자유도가 쥐콩만한 모바일에서는 수용이 안된다구. 반대로 모바일에서 데스크탑으로 가는 식으로 디자인을 하면 이 문제들이 싹 해소된다. 데스크탑은 일종의 모바일 모듈들을 가로로 배열한 식으로 할 수도 있고, 모바일에 없던 UI를 추가하면서 보여줄 수도 있고. 큰걸 작게 만들면 피곤하지만, 작은걸 크게 만들면 쉬워진다.
그래서 개발자와 디자이너 모두 모바일 퍼스트로 작업해야한다는 말이다. 어차피 온갖 사이즈의 스크린에 다 대응할거, 모바일 먼저 만들어놓고 점점 키워가는 방식으로 작업하면 코드 양이 줄어든다.
@mixin after($media) {
@media only screen and (min-width: $media) {
@content;
}
}
.imageAlbum {
@include m.flexbox;
flex-direction: column;
gap: 24px;
width: 100%;
margin: 24px 0;
font-size: 12px;
@include m.after(480px) {
font-size: 14px;
}
@include m.after(960px) {
gap: 14px;
width: auto;
font-size: 16px;
}
@include m.after(1440px) {
gap: 24px;
font-size: 24px;
}
@include m.after(1900px) {
gap: 32px;
}
}
이게 내가 N스크린에 대응하는 방법이다. 작은것 부터, 큰것으로 서서히.
미디어쿼리는 min-width를 쓰자. 내가 극혐하는 테일윈드 조차 min-width를 강제하고 있다.
음 뭔가 용두사미가 된것 같은데, 댓글로 지적좀 해달라. 뭔가 빠졌는데... 뭔가 빠졌는데...