[UI/UX] 크기(Size)

본문으로 들어가기에 앞서 내가 쓰는 글 자체가 좀 프로페셔널과 거리가 멀 수도 있다. 고급스러운 언어나 글쓰기로 쓰기보다는 짧게 써서 포인트를 한 번에 아는 게 좋아서 나중에 내가 볼 때도 한 번에 알아볼 수 있게 썼다. 그리고 내가 틀릴 수도 있고 대단한 사람도 아니고 트렌드나 상황에 따라 바뀌기 때문에 그냥 거창하게 쓰지 않으려고 한다. 

크기는 상대적이다. 1920*1080 사이즈에서 24*24의 원의 크기는 작지만 360*820 사이즈에서 같은 사이즈의 원의 크기는 다른 것처럼 말이다. 그래서 결국 눈으로 확인하고 실제 사이트에서 어떻게 보이는지 확인하는 과정이 반드시 필요하다. 또한 variable (변수)를 이용해서 큰 사이즈와 작은 사이즈를 어느정도 설정해놓으면 다양한 디바이스에 한번에 적용하는데 도움이 된다. (특히 그리드 시스템 같은 것들) 그렇지만 대체적으로 웹사이트나 앱에서 보편적으로 쓰이는 크기도 알아두면 디자인하는데 도움이 될 것이다. 여기서 설명하는 크기는 내가 주로 사용하는 크기에 관한 것들에 대해 정리한 것들이다. 

 

본문 사이즈(Body)

내가 사이트를 많이 분석하진 않았지만 대부분의 사이트에서 본문 글자크기는 대부분 14 - 17이다.

애플이 17이고 그 외엔 대부분 14-16 임. 

그냥 정해진 게 아니고 유저 테스트를 해서 정해졌다고 한다. 

근데 나도 14-16을 많이 쓴다. 뭐 17까지 쓰진 않는 것 같고. 일단 4의 배수도 아니어서 17은 뭔가 애매한 느낌. 그리고 가로사이즈가 정해진 디자인을 많이 하다 보니 그 정도로 크게 쓰지는 않는다.  

애플이 17을 쓰는 이유는 아무래도 화면 전체를 쓰다 보니 그 비율에 맞게 사이즈가 커진 듯하다. 

애플 웹사이트

 

그러나 애플도 17 크기의 본문 텍스트는 전체 사이트에서 별로 되지 않는다. 오히려 프로덕트의 스펙 등 디테일한 텍스트가 더 많다. 보통 커머셜 사이트는 그런 것들을 눈에 띄지 않게 하는데 애플의 철학인 건지(자랑을 위함인지) 디테일한 설명을 14px로 설정하여 대신 본문을 좀 더 크게 설정한 듯싶다.  

 

 

타이틀(제목) 사이즈(Title)

이거는 사이트마다 다르고 어떤 페이지냐에 따라 또 다른 것 같다. 보통 어떤 사이즈로 특정해서 쓴다기보다는 나는 계층구조에 따라 나눈다. 만약 홈페이지는 사이트 제목이나 키비주얼 타이틀을 크게 하고, 서브 페이지에서 리스트페이지는 리스트 제목이 제일 크게, 상세 페이지에서는 글의 제목을 제일 크게 설정한다. 그 크기가 얼마냐 크냐?라고 하면 디자인 콘셉트에 따라 다르다. 

 

 

가장 작은 폰트 사이즈 (The smallest font-size)

크롬 브라우저에서 가장 작게 표현할 수 있는 사이즈는 10px이지만 나는 디자인할 때 웬만하면 12px을 가장 최소 단위로 잡는 것 같다. 그전에 퍼블리셔를 하면서도 디자이너셨던 과장님이 12 이하로는 쓰지 않는다는 것을 보아왔고, 부모님 같은 웹이나 앱에 익숙지 않은 사람들 또는 나이 드신 분들의 시력을 생각해 보면 너무 작은 사이즈는 읽기에 힘들다고 생각해 왔다. (부모님은 항상 웹사이트에서 조그만 글자를 읽는 것을 포기하시고 나한테 물어본다. 심지어 브라우저 크기를 키우던가 줄이는 것도 어려워함...) 레이블 디자인도 선택적인(Optional) 디자인이지만 웬만하면 12-13px을 유지한다. 

레이블 디자인

레이블 디자인 2

 

 

자간(Letter-spacing)과 행간(line-height)

 

해외 유튜브 국내 유튜브 정말 가리는 거 없이 보지만 해외에서는 웬만하면 자간을 0으로 놓고 쓰는데 국내 디자이너들은 한글 특성 때문인지 (요새 자주쓰는 폰트기준) 자간 사이를 좁게 해서 쓰는 편인 것 같다. 글자가 뭉쳐있어야 가독성이 올라가기 때문인 것 같다.

 

사실 글로벌한 웹사이트는 한국어와 타 외국어를 동시에 신경 쓰면서 디자인해야 한다. 보통 영어는 해석하면 한국어보다 말이 길어지기 때문에 한국어로 된 웹사이트에서 깨지지 않더라도 영어로 된 웹사이트에서는 깨질 수 있다. (보통 그전에 디자인할 때부터 텍스트가 길어져서 영역에 넘쳤을 때를 감안해서 디자인을 하긴 하지만.) 자간도 마찬가지이다. 최소 웬만하면 사이트들이 영문페이지를 지원하기 때문에 자간이 줄어들었을 때 영문에서 어떻게 쓰일지를 대비해야 한다. 

 

나는 폰트에 따라서 자간 조절을 하는 편이다. 특히 영문과 한글 사이즈가 너무 다른 폰트는 안쓰는편이다. 자간과 행간을 0이 아닌 값을 가질 경우 %로 글자크기에 따라 자간 조절 비율이 달라지도록 한다. 폰트사이즈마다 자간행간픽셀을 다르게 하는 것은 귀찮기도 하고 개발공수도 많이 든다. 행간은 퍼블리셔 일을 할 때도 느꼈지만 노토산스나 프리텐다드 기준 보통 140-160%를, 자간은 -2.5%를 많이 쓴다. 

 

 

 

+더 추가될 수 있음 ㅎㅎ