UI 브리핑 : 13화 - 메일 서비스 비교분석 02
UI 디자인 연구소 - 단톡방에서 진행된 일일 브리핑 정리
UI 브리핑 : 12화 - 메일 서비스 비
이 내용은 UI 디자인 연구소 - 단톡방에서 진행된 일일 브리핑의 내용을 정리한 것입니다.
기존에 진행했던 내용은 총 다섯개의 메일서비스를 들여다보는것에서 시작을 했구요. 간단한 메뉴구조나 레이아웃, 그리드 최소단위를 통해서. 디자인의 시각적 완성도를 들여다보는 과정을 거쳤습니다.
https://brunch.co.kr/@clay1987/169
사실, 웹디자인을 진행하다보면 ,가장 어려운것들 중 하나가 바로 텍스트 크기입니다.
https://learnui.design/blog/ios-font-size-guidelines.html#iphone
iOS나 안드로이드같은 모바일 앱, 웹의경우는 그나마 상황이 나은것이 - 규격화가 잘 되어있는 편입니다. 기본 모바일 OS들이 '우리의 기준은 이렇다'라고 확고하게 주장을 하고있는 상태다보니 일정한 텍스트 크기가 강제로 권장되는 경향이 있습니다. 그에반해서 - 웹은 역사도 오래됐지만, 다양한 변형이나오게 되었죠. PC OS인 윈도우 자체가 그렇게 완벽한 UI 크기를 지원하는게아니고. 웹브라우저 자체도 여러 비례를 갖고있기 때문에. 기준점이될만한 크기를 '완전하게 확정하기가 어려운' 상황입니다.
https://brunch.co.kr/@clay1987/137
게다가 브라우저들을 들여다보면. 심지어 주요브라우저들이 모두 상단영역의 크기가 달라서 크게는 5에서 10픽셀 가까이 차이가 나기도합니다.
브라우저별 높이값 / 1920x1080 해상도 기준
MS IE 브라우저 (탭 영역 접을 경우) : 높이값 55px (상단: 23px / 주소창 영역: 41px)
MS IE 브라우저 (기본) : 높이값 78px (상단: 27px / 주소창 + 탭 영역: 51px)
애플 safari 브라우저 : 높이값 60px (상단: 23px / 주소창 영역: 37px)
Opera 브라우저 : 높이값 70px (상단: 31px / 주소창 영역: 49px)
구글 크롬 브라우저 : 71px (상단: 34px / 주소창 영역: 37px)
Firefox 브라우저 : 높이값 74px (상단: 33px / 주소창 영역: 41px)
MS Edge 브라우저 : 높이값 77px (상단: 32px / 주소창 영역: 45px
해상도가 변경될경우는 이 값도 정확하지않고, 윈도우 OS 배율에따라서 좀더 달라질수있겠네요
기존에도 이야기를 드렸지만. 브라우저는 윈도우 OS의 배율에 영향을 받고. 상단영역과 스크롤바. 그리고 윈도우 기본 OS 하단창 등의 영역에 영향을 받게 되어있습니다. 그래서 실제 사용자들이 바라보게될 시안을 만들때에는 이런 영역들까지 신경을 꼭 써줘야하죠.
교분석 01
https://www.w3schools.com/bootstrap4/bootstrap_typography.asp
기존에 이야기드렸던 - 주요한 프레임워크중 하나인 부트스트랩은 자체적인 타이포그래피. 폰트 크기에대한 기본 세팅을 갖고있습니다. 그러나 이역시도 - 완벽한 해답이 아닙니다.
부트스트랩 4의 기본 HTML 텍스트 크기 세팅실제로 각각의 프레임워크들마다, 텍스트 크기의 기본 세팅이 있지만, 이걸 그대로 사용하는 사람은 거의 없습니다. 마치 여러 프레임워크들이 각자 그리드 시스템의 크기나, 비례가 다르듯이 부트스트랩의 텍스트 크기 세팅역시도 임의의값이라고 봐야합니다.
또한 웹에 이르러서는 많이 헷갈리실수있는게. 다른 프레임워크에 들어가게되면. 이런 영역들이 - 각각의 개별 프레임워크에. 개별 세팅값. 옵션값으로 별도로 존재하죠 예를 들어서 - 실무에서 중요한 대안으로 떠오른 자바스크립트 프레임워크들 중 하나인 vue.js , angular, react 같은 프레임워크들 또한 각자 개별적인 텍스트 세팅. 그리드 시스템 등을 갖고있습니다.
Vue.js의 UI 프레임워크인 Vuetify.js의 타이포그래피 관련 정보
https://vuetifyjs.com/ko/framework/typography
vuetify.js의 기본 텍스트 크기들. 이걸 그대로 사용하기엔 좀 무리가 있겠죠?제가 굳이 부트스트랩에 대해서 이야기를 드렸던 이유도 사실 여기와 연관이 있습니다. 부트스트랩을 공부하듯. 다른 자바스크립트 프레임워크도. 회사나, 프로젝트별로 사용하게될떄 미리미리 체크하고, 여기에 맞는 설계방법을 확인해야하기 때문입니다.
부트스트랩에 대한 튜토리얼 번역본
https://brunch.co.kr/@clay1987/131
웹에서의 텍스트 크기는 일반적으로 헤더 1~6같은 식으로 사전지정된 프리셋을 많이 사용합니다마는 사실이건 임의의값에 데한것이고 실제작업된 시각물들이나. 국내, 해외의 중요서비스들은 비례나 크기가 조금씩 다 다릅니다. 그렇기에 많은 사이트들. 특히 하나의 목적을 갖고있는 동일업계 서비스들을 - 함께분석해서, 목적별 통계를 내면 특히 좋습니다.
반응형 웹사이트를 위한 폰트사이즈 가이드라인 (추후 번역예정)
https://learnui.design/blog/mobile-desktop-website-font-size-guidelines.html
사실 텍스트역시도. 여러가지 분류로 나눠지는데요
모바일에서의 텍스트 타입
1. 타이틀 표기를 위한 텍스트
2. 세부 데이터 입력, 편집이 가능한 텍스트
3. 네임 라벨링을 위한 텍스트
4. 편집불가 / 살짝 보이게만 정보표기용 텍스트
5. 장문의 편집과 확인이 가능한 텍스트
웹역시 마찬가지인데요. 다만 모바일과는 다르게 폰트 크기가 작은경우가 많고. 편집 / 입력용 폰트 크기가 동일하게 처리되는 경우가 많아서. 크게 장식적 텍스트 / 편집이 가능 or 불가능한 정보성 텍스트로 분류를 나누면 될듯합니다. 다만 px 단위를 써도 크게문제가없는 모바일과 달리 웹의경우는 px단위가 권장되지않고있는게 해외 트렌드중 하나입니다.
PX 단위는 해상도가 다양해진 현재 PC웹, 모바일 웹 환경에 맞지않는 형태가 되었습니다. 그래서 등장한게 EM과 REM인데요. 기존에 제가 머리아픈 이야기들.특히 윈도우 OS의배율과. 인터넷 브라우저 자체의 배율이있다고. 얘길 드렸었죠. 실제로 픽셀단위로 적는건. 본인의 해상도 기준이 바뀌거나. 모니터가 커지거나하면 모두 무의미한 정보가됩니다.
그에반해 EM이나 REM은 해상도에맞춰서 절대값에가까운 형태가되고. 자동으로 조절이되어 - 해상도에맞는 사이즈가 되죠
웹디자인에 PX 단위를 쓰면 안되는 이유
https://brunch.co.kr/@clay1987/170
해당 스샷은 구글 gmail의 좌측 메뉴의 텍스트에대한 정보값입니다. 로보토체를 기반으로해서, 0.875 EM을 사용하네요. 아마 텍스트 크기를 체크하신다면, 여러분이 확인하시는 화면에따라 다른 크기가 나올겁니다.
상단탭의 경우도 동일하게 0.875 em
우측상단의 카테고리 정보값 (정보표기성 텍스트)는 0.75em으로 미세하게 작게 표기되어있고
특이하게도 검색창 (입력 / 편집 가능한 텍스트)는 픽셀 단위를 사용하네요
이외에 본문 텍스트, 메일 제목등은 동일하게 0.875 em을 사용한걸 알수있습니다. 그에반해 상세 화면. 메일 내용의 메일주소 등은 0.75em으로 사용하네요. 전반적으로 0.875 em을 메인 텍스트로 사용하고 정보성 텍스트를 0.75em으로 쓰는걸 알 수 있습니다.
그리고 개중에 중요한 타이틀 텍스트는 1.375em을 사용한걸 알 수 있습니다
지메일에 사용된 텍스트 크기
- 1.375 rem = 22px
- 0.875 rem = 14px
- 0.75 rem = 12px
저도 확인해보면서 안 사실인데. 구글을 제외한 야후, 네이버, 다음, 아웃룩 모두 em이아니라 픽셀 단위로 디자인이되어있더군요. 일단 먼저 확인할 서비스는 네이버 메일입니다.
네이버메일의 경우 좌측 메뉴는12px로 통일을했고 버튼영역과 탭 부분 역시 12px로 동일합니다
데이터테이블 상단의 버튼 역시도 12px이고 일부 중요하지않은 기능들 / 회색으로 처리된 텍스트들은 11px로
메일 상세목록의 제목이 14px인것을 제외하면 대부분의경우 12px짜리 텍스트로 처리된것을 알 수 있습니다
구글이나 네이버나. 일반적으로 3개 정도의 제목 / 본문과 메뉴 / 정보성 텍스트 표기의 타이포 크기를 사용하는걸 알 수 있는데요. 이걸 em으로 처리하면 각자 16px을 배수로해서 정리를 하면 다음과 같이 됩니다.
네이버 메일에 사용된 텍스트 크기
- 0.875 rem = 14px
- 0.75 rem = 12px
- 0.6875 rem = 11px
Rem 단위 계산에 사용한 계산기
https://offroadcode.com/rem-calculator/
다시한번 말씀드리자면. Rem이 중요한 이유는 - 일반적인 px을 사용하면 브라우저자체에서 적용하는 텍스트 스케일링이 적용되지않는 문제가 있기 때문입니다. 그래서 아직까지 국내에는 크게 이슈가없기는 합니다마는. 관련된 문서들이 이미 해외에서는 널리 알려져있고. 해외 IT쪽 이슈가 3~5년 늦게 국내로 들어오는 특성상 미리 알아두시면 좋을듯 합니다.
이번엔 야후쪽을 봐야겠네요
야후의 좌측메뉴 / 버튼은 모두 13px로, 처리가되어있습니다. (0.813rem = 13px )
상단 검색창은 15px로 0.983rem = 15px 이네요
이외에도 정보테이블의 상단과, 메일 목록 영역 역시 13px로 0.813rem을 메인으로 잡았네요
이외에 특이점이있다고 한다면 상단의 프로필영역이 14px로 0.875rem이 사용되었다는겁니다.
상세화면의 메일 제목은 다른 사이트들처럼 크기를 좀 크게썼는데. 17px이네요 (1.063rem = 17px)
이외에도 우측의 날짜, 시간표기 (정보성 텍스트표기)가 12px. (0.75em = 12px)로 현재까지는 야후가 가장 여러개의 텍스트 크기를 사용하고있네요.
야후 메일에 사용된 텍스트 크기
- 1.063 rem = 17px
- 0.983 rem = 15px
- 0.875 rem = 14px
- 0.813 rem = 13px
- 0.75 rem = 12px
이번시안은 다음메일입니다. 딱봐도느껴지시겠지만 다음은 타이포 크기가 상당히 큽니다. 기존에 UI 분석시에도 단위가 디자이너의 감각으로 처리한듯한 부분이 많이 보였었죠
상단 버튼에 사용된 텍스트는 15px. (0.983rem = 15px)
좌측 메인 메뉴들은 14px (0.875rem = 14px) 이지만
내부의 편지함 숫자 텍스트 크기 및 수신확인 버튼의 텍스트 크기가 12px로 (0.75rem = 12px) 메뉴 하나만 하더라도 너무 다양한 텍스트 크기가 사용된걸 알 수 있습니다
상단메뉴는 13px (0.813 rem = 13px)
검색창의 입력 / 편집가능한 텍스트는13px (0.813rem = 13px)
우측의 상세. 표기는 12px. (0.75rem = 12px)
데이터테이블 / 메일 목록 및 제목내용이 14px. (0.875rem = 14px)
상세 화면의 제목은 18px (1.125rem = 18px)
정리를 해봐도 너무 많은 텍스트 크기를 동시에 사용하고있다는걸 알 수 있습니다. 게다가 자세히들여다보면 답장입력을 위한 기본 텍스트창이 14에서 입력 전후 크기가 13px로 변경되질않나... 일관성이없어요
다음메일에서 사용하는 텍스트 크기
- 1.125rem = 18px
- 0.983rem = 15px
- 0.875rem = 14px
- 0.813rem = 13px
- 0.75rem = 12px
다음이 디자인에 신경을 많이 안쓰는건. 나중에 더 자세히 이야기할 예정입니다. 예로 스마트에디터 / 다음쪽 텍스트 에디터쪽만 해도 그렇죠
이번엔 마지막 타자. 아웃룩입니다. 이번에 서비스 리뉴얼할거라고 자랑들이던데. 화려한 홍보영상만큼 얼마나 깔끔한지. 한번 확인을 해보죠
좌측메뉴는 모두 14px로 깔끔하게 정리를 해뒀습니다. (0.875 rem = 14px)
메일 주소는 제목과같은 17px (1.063rem). 정보성 텍스트는 12px (0.75rem)이며
상단의검색창 (입력 / 편집가능한 텍스트 규격) 또한 14px로 거의 동일한 텍스트를 사용하고있습니다
다만 상단의 타이틀 배경영역이 너무 좁아보이는건 어쩔수가없네요. 심지어 상하단 여백도 어긋나있구요.
항상 그렇지만. 완전한 일관성이 언제나 해답은 아닙니다. 추후 정보의 맥락에따른 레이아웃 구분에있어서 얘길 할건데요. 그부분에서 보더라도 상단과 하단의 컨텐츠 영역의 구분이 불확실한건. 결코 좋은 선택이 아니었던것 같습니다.
outlook에서 사용한 텍스트 크기
- 1.063em = 17px
- 0.875em = 14px
- 0.75em = 12px
총 세가지를 사용했네요
자, 그럼 다섯가지 메일 서비스의 텍스트 크기를 한번에 정리해보죠.
3개 텍스트 크기만을 사용했다는 점에서는 지메일, 네이버 메일, 아웃룩이 동일합니다.
하지만 기본 크기가 각각 14, 12, 13픽셀로 다른데다 지메일은 원체 중요 크기를 크게 사용하는편입니다. 게다가 아웃룩같은 프로그램은 텍스트 타입과는 별도로 배경이나 레이아웃이 너무 복잡했습니다. 그래서 정보구조나 구분이 확실치않아보인다는게 문제가되네요.
다음과 야후는 왜이렇게 텍스트 크기를 많이썼는지 모르겠지만... 뭐 그럴수도있죠. 단지 다음은 비례나 배치부분의 문제가 함께 겹치는데다. 좌측 상단의 기본 버튼 크기가 너무 커서. 비례가 이상하게 어그러져보이는 기분이 듭니다.
제가 기존에 이야기드렸던것처럼. 실제 비례나 그리드, 시각적 규격을 참고하시는건. 국내 서비스중 네이버나 카카오를 추천드리는것도 이런 이유에서입니다.
네이버나 카카오 (다음 서비스 제외) 를 분석해봐야하는 이유
1. 텍스트나 비율, 그리드 최소단위에 대한 준수가 확실하다
2. 정보의 우선순위 / 색상사용의 이유에대한 가이드라인이 잘 지켜지고있다.
3. 그러나 UI UX, 설계적 관점에서. 신규기술과 개발기반을 추구하는건 구글쪽이 우세하다
오늘 이야기를 정리하면 다음과 같습니다
1. 시스템적 UI, 복잡한 규격일수록 중요한정보와, 그렇지않은 정보의 규격적 구분이 매우 중요하다. 텍스트 역시도 그 구분의 기준이 된다
2. px 단위 타이포는 브라우저의 배율변경. 스케일링에 문제가 생긴다. 당장은 크게 문제가되지않아도 해상도가 변경되는 순간부터 문제가 될 가능성이 높다. 그러니 EM이나 REM을 쓰자.
3. EM의 경우 배수, 배율개념이 함꼐 들어가게된다. 대부분 EM은 16px 기반으로 진행되며, 적용시 브라우저의 배율 개념을 사용 가능하다.
4. 텍스트 크기는 사이트마다 각자 다른 규격을 사용하는 경우가 많다. 그러니 여러 사이트들을 레퍼런스로 삼되, 가능하면 네이버카 카카오쪽을 믿는게 좋다.
5. 해외사이트의 경우, 마이크로소프트쪽은 거르는게 낫다. 디자인 규격도 엉망인데다, 완성도가 많이 떨어지기 때문.
6. 구글의 디자인은 설계적으로는 배워야할게 많다. 그러나 웹 규격의 경우, 타이포나 비례를 크게 사용하는 경향이 있으므로 참고시 주의하자.
다음 시간에는 아마도 이 이유. 과연 구글이 대체 뭐가 그렇게 설계적으로 볼게많다는건지. 그리고 마이크로소프트는 디자인적으로 까일게 많다는 건지. 클라우드 플랫폼을 기반으로 - 구글, 네이버, 아마존 aws, 마이크로소프트의 - 개별 클라우드 플랫폼에대해서 들여다보도록 하겠습니다.
이 내용은 UI 디자인 연구소 - 단톡방의 내부인원들을 위해 만들어진 자료입니다.
저희 단톡방은 잡담이 불가능한 방입니다. 단톡방에 들어오시려는 분은 - 이용안내문을 꼭 확인해주세요!
단톡방 이용안내
https://brunch.co.kr/@clay1987/113
