UI 사이즈 체크는, 사진앱 마크업의 '자'를 활용하라
개발자가 기겁하는 UI Check Tip
사실 이 방법이 새로운 건 아니고 오래 썼던 팁인데,
최근에 주변의 많은 사람들이 신기해하길래 공유합니다.
보통 UX에서 화면을 만드는 과정은 기-디-퍼-개 / 또는 기-디-네 를 타곤 하죠.
( 기획-디자인-퍼블리싱-개발 또는 기획-디자인-네이티브 )
특히 네이티브 개발의 경우, 퍼블리싱된 코드를 붙이는 개념이 아니라,
직접 화면을 그리기 때문에 디자인 가이드를 맞추지 못하는 경우가 많습니다.
최근에 뜨고 있는 SPA ( Single page application )라고 불리는 개발 방법론도 퍼블리싱을 그대로 쓰지 않고 재작업 하는 형태로 붙이기 때문에 유사한 문제들이 발생합니다.
UX 기획에서는 각 단계의 산출물들을 테스트하게 되는데, 기획/디자인/퍼블리싱 파일에는 문제가 없지만, 개발로 넘어가면서 제대로 된 가이드를 지키기 못하는 사례들을 발견하게 됩니다
주로 QA과정에서 이런 부분들에 대해 수정을 요청하게 되죠. ( QA영역이 많이 발전하고 있지만 저는 아직은 UX기획자와 디자이너가 QA에 참여해서 많은 역할을 해야 한다고 생각합니다. ).
개발이 제대로 화면을 붙였는지 체크를 하다 보면 아주 미묘한 간격의 확인을 하고 싶을 때가 있습니다
최근에는 디자인 산출물은 제플린에서 간격까지 모두 확인이 가능하지만, 개발된 버전의 확인을 하는 건 소스를 까 보기 전에는 쉽지 않죠. 그래서 캡처를 해서 포토샵이나 미리 보기 앱에서 확인하는 방법도 있겠지만, 번거롭고 어렵다고 하겠습니다. 이럴 때 빠르게 확인할 수 있는 방법을 소개합니다
아래와 같은 화면이 있다고 하겠습니다. ( 상당히 일반적인 이용내역 화면입니다. ).
자세히 보면 첫 번째 위메프 결제 내역만 간격이 다름을 볼 수 있습니다.
하지만 상당히 미세합니다. 분명 다른 것은 확실한데 사이즈 체크가 필요합니다.
1) 먼저 사진을 캡처하고
2) 우측 상단의 편집
3) 다시 우측 상단에... 버튼
4) 마크업 버튼을 누릅니다
마크업에 들어가서 하단의 툴 중에 자(ruler)를 선택합니다.
마크업 상태에서 두 손가락으로 화면 확대가 가능하니 적절하게 확대하고 자를 대어봅니다
본 화면을 보면 윗 공간은 2.3 / 아래 공간은 1.6~1.7 정도 되어 보이네요
( 참고로, 이 자는 회전도 가능합니다)
코로나19로 대면 업무가 줄어들었기 때문에 말로 또는 글로 커뮤니케이션해야 되는 경우가 많은데
이렇게 표기해서 전달하면, 저 애매한 공간의 차이를 말로 설명하는 것보다 빠르게 커뮤니케이션이 가능합니다.
물론 일부의 사람들에게는 너무 '변태적인'(변태적이라고 느낄 정도로 치밀한) 방법이라고 할 수도 있고,
또 개발자들이 기겁하는 방법이기도 합니다^^
이 Tip은 매우 작은 Tip이지만,
UI/UX의 완성도를 높이는 부분에서 픽셀 단위의 가이드를 맞추는 부분은 중요한 부분입니다.
UI의 텍스트나 오브젝트 또는 간격 등의, 사이즈를 눈으로 보고 판단하기에는 긴가민가할 때
'마크업의 자(ruler)'를 기억해주세요. 분명 도움이 되실것 입니다.
