기본단위 정복!

디자인을 하다 보면 면접때마다 이런 질문을 받는다. 모바일 작업을 많이 하셨나요? 혹은 UX와 UI의 차이점을 아시나요? 이런 질문을 하면 굉장히 UX의 전문적인 부분을 질문하는 줄 아는 그런 느낌적인 느낌? 하지만 실제 모바일 작업 하다 보면 이런 개념들은 혼재되어 있고 닥치는 대로 우선 디자인을 하고 뒷수습은 오픈하고?  모바일 디자인을 (많이)해 왔지만 이 헷갈리는 개념들을 한 번은 정리하고 넘어가야 되지 않을까라는 필요성에 의해 이 글을 시작한다. 

첫 번째, DP, PT, PX? 

이 부분에 대한 글은 많이 찾아보았는데. 픽셀은 상대적인 수치여서 모바일 화면에서는 pt와 DP사용주로 사용한다 PT는 아이폰에서 DP는 안드로이드에서 사용한다고 한다 간단히 예를 들어 보면 

(아이폰) 40pt = 레티나 이전 화면 40px(x1)

                     레티나 이후 80px(x2)

                     아이폰 플러스 사이즈 120px (x3) 

여기서 차이점은 pt는 변화하지 않으나 여기서 변화 하는 것은 px의 크기만 변화 하는 셈이다. 근데 늘 XD로 작업하다보면 요건 뭘까 라는 고민이 앞선다. 안드로이드로 내보내기 할때 mdpi는 뭐고 dpi는 뭐고 이것들이 뭐지?  

안드로이드 

resolution	ratio	DPI
ldpi	0.75	120
mdpi(표준해상도)	1	160
hdpi	1.5	240
xhdpi	2.0	320
xxhdpi	3.0	480
xxxhdpi	4.0	640

각각 해상도에서 픽셀로 전환하기 위해서는 각각 치수에 x ratio 를 하면 각각 해상도에 맞는 픽셀사이즈를 알 수 있다고 한다. 

IOS 

x1, x2, x3로 되어 있어서 픽셀로 계산을 할때는 이 숫자로 곱해서 사용하면 된다. 

모바일 웹

그래서 모든 것을 기반으로 생각해야하는 모바일 웹 경우는 어떻게 대응해야할까? 최소 넓이 320px에 맞추고 이미지는 1.5배 ~2배 큰 사이즈 이미지를 서버에 저장해서 css에서 width값을 조정해서 쓴다는 이야기들이 많으니 최소 아이콘이나 이미지 사이즈를 480이나 640에 맞춰서 작업하는게 좋지 않을까한다. 

참고사이트 : https://material.io/tools/devices/

두 번째, 모바일 웹에서 고려가 필요한 UI

첫번째. 모바일에서는 팝업을 권장하지 않지만 꼭 필요하다면 풀프레임 팝업 고려 

모달 팝업을 사용자에게 거부감을 주고 꼭 필요하다면 풀프레임 팝업 사용 (북큐브는 현재 모달 팝업 사용)

두번째 X버튼은 PC에서만 사용해야 한다. 

우측 상단의 X버튼은 데스크탑 OS기준의 UI기준이고, 모바일은 데스크탑과 UI기준이 다른측면이 많이 있다. (북큐브는 모달 팝업의 사용 및 X버튼의 사용을 많이 하고 있음)

우선 두가지 정도로 올리고 모바일과 UI의 기준과 북큐브에서 사용하고 있는 UI의 문제점은 다음 편에서 계속 하도록 하겠다. 

참조한 글 : https://brunch.co.kr/@chulhochoiucj0/8