1.개요
2.읽기 전에
3.버튼
4.리스트
5.카드
6.선택
7.알림
실험과 가이드라인에 사용한 민부리체는 모바일 시각환경에서 널리 사용되고 있는 대표적인 서체인 애플산돌고딕네오(Apple SD Gothic Neo)이다.
책과 본 웹사이트에서도 마찬가지로 민부리체로 애플산돌고딕네오를 사용한다.
사용한 글자크기
가이드라인 책의 민부리체 본문 글자크기는 앞선 실험에서 높은 선호도를 보인 글자크기를 사용하였으며 그 값은 44pt이다.
제목의 글자크기는 54pt, 캡션 글자크기는 28pt로,
본문과 뚜렷하게 구분될 수 있는 임의의 값을 지정하였다.
행간과 자간
행간과 자간은 통제 변인으로 고정하여 진행하였다.
행간은 높은 선호도를 차지한 140%로, 자간은 선호도가 다양하게 분포되었기 때문에 기본값으로 고정하였다.
‘추천’과 ‘비추천’
누적 252명을 대상으로 한 실험 결과를 토대로 ‘추천’과 비추천’을 구성하였다.
연구자들이 일반적으로 사용하는 Do와 Don’t 대신 ‘추천’과 ‘비추천’을 사용한 이유는 절대적인 디자인 규칙은 없다는 생각에 근거한다.
본 가이드라인에서 ‘추천’은 실험 참여자들이 가장 많이 선택한 실험세트를 바탕으로, 모바일에 큰글자를 적용할 때 추천하는 방식을 의미한다.
반면, ‘비추천’은 실험에서 가장 적은 선택을 받은 실험세트를 바탕으로 한다.
연구자들은 해당 실험세트가 ‘비추천’이 된 이유를 실험당 약 100여 명의 질적 답변을 반영하여 분석하였다.
피그마내 글자의 위치
현재 대부분의 모바일 화면 UI 디자인은 피그마(Figma)를 기반으로 한다. 이런 현실적 활용성을 고려하여 본 가이드라인은 피그마의 특성을 고려해 작성되었다.
일례로 피그마의 행간 조정 시스템은 대표적인 인쇄물 디자인 프로그램인 인디자인(Adobe Indesign)과는 차이가 있다.
피그마에서는 행간값을 글자크기의 백분율(%)로 조정하며, 이값이 첫 줄에도 적용된다. 반면, 인디자인에서는 첫 줄에는 행간 값이 반영되지 않는다.
결과적으로 피그마에서는 행간값이 텍스트 바운딩 박스 전체에 적용된다고 볼 수 있는데, 이때 인디자인과 달리 첫 줄에 여백이 생긴다. 이러한 차이를 이해하고 디자인 시 주의해야 한다.
또한, 피그마 내에서 행간값이 같더라도, 서체에 따라서도 글자 위치가 달라진다. ‘애플산돌고딕네오’의 경우 글자가 텍스트 바운딩 박스 위쪽에 위치한다.
본 가이드라인은 큰글자를 사용할 때 이러한 서체의 특성이 극대화된다고 판단하여, 본문의 모든 사례에서 서체 특성에 맞는 시각보정을 하였다.
글자크기가 커질수록 이런 차이가 더욱 두드러지는 만큼, 큰글자 화면을 디자인할 때는 서체마다 다른 박스 내 글자 위치를 확인할 필요가 있다.
가이드라인 책의 부리체 본문 글자크기는 앞선 실험에서 높은 선호도를 보인 글자크기를 사용하였으며 그 값은 40pt이다.
제목의 글자크기는 52pt, 캡션 글자크기는 28pt로,
본문과 뚜렷하게 구분될 수 있는 임의의 값을 지정하였다.
행간과 자간
행간과 자간은 통제 변인으로 고정하여 진행하였다.
행간은 높은 선호도를 차지한 140%로, 자간은 선호도가 다양하게 분포되었기 때문에 기본값으로 고정하였다.
‘추천’과 ‘비추천’
누적 252명을 대상으로 한 실험 결과를 토대로 ‘추천’과 비추천’을 구성하였다.
연구자들이 일반적으로 사용하는 Do와 Don’t 대신 ‘추천’과 ‘비추천’을 사용한 이유는 절대적인 디자인 규칙은 없다는 생각에 근거한다.
본 가이드라인에서 ‘추천’은 실험 참여자들이 가장 많이 선택한 실험세트를 바탕으로, 모바일에 큰글자를 적용할 때 추천하는 방식을 의미한다.
반면, ‘비추천’은 실험에서 가장 적은 선택을 받은 실험세트를 바탕으로 한다.
연구자들은 해당 실험세트가 ‘비추천’이 된 이유를 실험당 약 100여 명의 질적 답변을 반영하여 분석하였다.
피그마내 글자의 위치
현재 대부분의 모바일 화면 UI 디자인은 피그마(Figma)를 기반으로 한다. 이런 현실적 활용성을 고려하여 본 가이드라인은 피그마의 특성을 고려해 작성되었다.
일례로 피그마의 행간 조정 시스템은 대표적인 인쇄물 디자인 프로그램인 인디자인(Adobe Indesign)과는 차이가 있다.
피그마에서는 행간값을 글자크기의 백분율(%)로 조정하며, 이값이 첫 줄에도 적용된다. 반면, 인디자인에서는 첫 줄에는 행간 값이 반영되지 않는다.
결과적으로 피그마에서는 행간값이 텍스트 바운딩 박스 전체에 적용된다고 볼 수 있는데, 이때 인디자인과 달리 첫 줄에 여백이 생긴다. 이러한 차이를 이해하고 디자인 시 주의해야 한다.
또한, 피그마 내에서 행간값이 같더라도, 서체에 따라서도 글자 위치가 달라진다. ‘본명조’의 경우 글자가 텍스트 바운딩 박스 아래쪽에 위치한다.
본 가이드라인은 큰글자를 사용할 때 이러한 서체의 특성이 극대화된다고 판단하여, 본문의 모든 사례에서 서체 특성에 맞는 시각보정을 하였다.
글자크기가 커질수록 이런 차이가 더욱 두드러지는 만큼, 큰글자 화면을 디자인할 때는 서체마다 다른 박스 내 글자 위치를 확인할 필요가 있다.