UI 브리핑 : 12화 - 메일 서비스 비교분석 01
UI 디자인 연구소 - 단톡방에서 진행된 일일 브리핑 정리
이 내용은 UI 디자인 연구소 - 단톡방에서 진행된 일일 브리핑의 내용을 정리한 것입니다.
자, 오늘은 어제에 이어서 - 메일링 서비스들을 여러개 들여다보고 설계적으로 중요한 부분들과. 실제 자료참고시 어떤 부분들을 주의해야하는지. 그리고 UI 최소 규격단위와 OS 배율에 대한 내용을 들여다보도록 하겠습니다. 일반적으로 메일 서비스라고하면. 왜 하필. 메일을 봐야하는가.를 일단 좀 이야기해보겠습니다.
일단 메일같은경우. 대부분의 포탈급 서비스들에서 가장 공을 들였던 서비스들이기도하고요. 동시에 단순 리스트형태의 UI 요소들, 설정. 그리고 PC 규격의 웹 해상도에 따른 UI 규격들을 가장 잘 확인할 수 있기 때문입니다. 동시에 단순 리스트형태의 UI 요소들, 설정. 그리고 PC 규격의 웹 해상도에 따른 UI 규격들을 가장 잘 확인할 수 있기 때문입니다.
구글의 gmail, 네이버메일, 다음 메일, 마이크로소프트의 아웃룩 사이트, 야후 메일입니다. 이외에도 해외에는 유명한 메일 서비스들이 여럿 있습니다마는. 가짓수가 너무 많아지면, 브리핑이 힘들어질수 있어, 다섯개 정도로 정리한점. 양해바랍니다.
사실 더 깊게 파고들어가자면. 최소 10개. 20개 이상의 서비스들을 분석해서. 사실 더 깊게 파고들어가자면. 최소 10개. 20개 이상의 서비스들을 분석해서. 최소 10개. 20개 이상의 서비스들을 분석해서. 각자 서비스 타겟. 디자인 스타일. 개별 아이콘과 이미지, 버튼과 텍스트 크기까지. 하지만 오늘은 그정도 수준까지 파고들어가진 않기로 하겠습니다. 설계적으로 볼게좀 많아서요.
일단은 구글의 지메일을 들여다보죠
지메일은 뭐, 이미 세계적인 서비스이기떄문에. 접속량도 어마어마합니다. 재미있는건 수치상으로 보면 한달간 접속량이 2억 2천만 정도 되네요
전체 세계 인구에 비해 굉장히 적은수치이니. 아마도 집계과정의 오류이거나, 앱을 통해 이용하는 경우가 많아서 그런것 같은데요. 아마도 집계과정의 오류이거나, 앱을 통해 이용하는 경우가 많아서 그런것 같은데요. 주의깊게 확인해야할것은 트래픽의 접근방식이. 77%가 모바일이라는것입니다.
지메일은 다른 메일링 앱들과 다르게 좀 특이한것이 지메일은 다른 메일링 앱들과 다르게 좀 특이한것이 메일쓰기시 팝업구조가 뜨는 구조라는 점입니다. 메일쓰기시 팝업구조가 뜨는 구조라는 점입니다.
또한 복합적인 규격들을 동시에 다루기위해서 -좌측의 목록구분외에도 상단에 또다른 탭을 제공합니다. 물론 해당 탭은 세부 구분이라기보다는 기존의 탭들중 중요한 요소를 따로 떼어놓은 퀵메뉴에 가깝습니다.
PC 웹 규격에서 가장 중요한 기반중하나가 바로 '4:3' 비율에 대한 지원과 이외의 추가적인 비례는 늘려서 대응한다 - 라는 점을 기존에도 이야기한 바 있습니다. 이런 특성때문에. 여전히 4:3 비율에맞게 PC 웹들이 디자인되고있음을 알려드렸는데요. 게임도 마찬가지이듯. 웹 / PC 앱 서비스도 동일합니다.
4:3 비율과 16:9 비율의 좌우 너비크기는 상당히 차이가 나기때문에 여기에 대응하는 방식은 크게 두가지 뿐입니다. 좌측 정렬이나, 중심정렬형태의 레이아웃이죠. 우리가 흔히 보는 좌측 네비게이션 메뉴가 등장하는 디자인들이 흔하게보이는건. 이런 이유에서입니다. 다만 규격에따라서 좌측 메뉴가 2,3단이 될수도있고 그건 설계자들의 선택에 가까운 내용이죠.
아웃룩의 경우가 실제로 좌측의 메뉴를 기준으로. 세로 3단 메뉴를 사용하는데요. 이역시 장단점이있습니다. 펼쳐놓은 단계구조는. 좌우가 넓은 구조에는 아주 유용합니다. 여러 뎁스를 따로 표현할 필요가없고 화면에서 보시듯이. 3단계 뎁스가 단숨에 표현되죠.
메뉴에서 1단계. 실제 편지 목록에서 2단계. 메일 세부 내용 목록에서 3단계를 모두 표기하고있는 아웃룩반면 메뉴를 적게사용하는 구조는. 상세 메일 내용을 보여주려면 개별 화면에 들어가야합니다.
메일 상세화면을 확인하려면, 별도 화면이 필요한 네이버 메일의 기본구조분명 3단계 뎁스를 한번에 풀어놓은 방식은 한눈에 보기에는 좋다는 장점이 있지만, 여러 뎁스구조가 언제나 편리한것만은 아닙니다. 여러 뎁스의 메뉴는 반응형처리시 매우 어려운 구조가되고. 동시에 모바일 연동 설계가 어려워집니다. 또한 아웃룩처처럼. 우측 탭이 따로 존재하는 규격의 경우. 4:3 규격 화면에서는 실제 컨텐츠 영역이 매우 좁아지게되죠.
세개의 뎁스구조에 다시 추가적인 우측 창이 등장하는 형태항상 PC는 4:3과 16:9. 이 두가지 해상도 비율을 모두 신경써야하기때문에 컨텐츠 영역을 최소단위에 맞추고. 16:9로 늘려쓰는경우가 대부분인데요. 그럼에도불구하고 윈도우 OS의 배율에따라. 비례가 굉장히 많이 달라진다는걸 모르는 분들이 많습니다. 다섯개의 웹페이지를 윈도우의 해상도 배율 100~ 300 단위로 크게 변화해본 시안들입니다.
이게 이렇게까지 커질수있었나 싶을정도로. 크기가 변화하는걸 알 수 있는데요. 이렇게 '특이한 배율'을 확인하는 이유는 - 모든 웹 서비스들이 - 웹브라우저 기반의 배율변환 외에도 OS 자체에 영향을 받는다는걸 확인하기위한 것입니다. 동시에 우리나 신경쓰진 않더라도 - 각각의 배율에대한 지원은 별도로 개발자들이 작업을 해줘야한다는 점 때문입니다.
실제로 adobe사의 프로그램들도. 해상도가 높거나. 큰 화면에서는. 윈도우 배율을 낮추거나, 변화함에도 불구하고 해당 해상도에맞게 프로그램 UI들이 자동으로 스케일링되질 않습니다. 말 그대로 개별 세팅 / 설정을 해줘야한다는 이야기죠.
Adobe 포토샵의 UI 스케일링 옵션물론 웹서비스의경우에는 좀더 상황이낫긴합니다. 브라우저가 일정수준은 자동으로 배율을 맞춰주니까요. 그럼에도 불구하고 스케일링에 대한 부분은 항상 고민을 하셔야하는 부분이기도 합니다.
https://brunch.co.kr/@clay1987/124
아래 화면은 실제 지메일 사이트의 모든 UI 요소들의 영역과 범위를 체크한 이미지입니다. 그리고 오늘은 바로 여기에서. 그리드 최소단위를 찾아볼겁니다.
그리드 최소단위라는 개념은 사실상 - UI 규격들이 서로 떨어져있는 간격의 최소단위라고 보시면됩니다. 그리고 거기에맞게 하나의 단위를 찾게되면. 다른 곳에서도 통일성있게 -동일한 단위를 사용하면되는것이죠.
https://brunch.co.kr/@clay1987/136
이건 기존에도 말씀드렸듯이. 모든 서비스에 적용될수있는 형식이고. 자유로운 아티스틱한 시안보다는. 시스템적 UI 설계나 분석방식에 적합합니다.
최소단위를 기준으로 - 거의모든 UI 요소의 크기와 배치를 안정적으로 확립한 Gmail아래 화면은 네이버 메일의 -UI 요소들을 체크한 화면입니다.이역시도 자체적인 그리드 최소단위가있긴합니다마는. 지메일에 비해서 훨씬 복잡하고 변형이 많더군요
해당화면은 야후 메일의 UI 요소들의 그리드를 그대로 나타낸 화면입니다 또한 그리드 최소단위를 분석해보니. 전반적인 비례는맞추고있으나. 종종 이 최소단위가 깨지는 부분들이 눈에 띱니다. 그만큼 비례가 깔끔해보이지않는 문제가 발생하네요
다음메일은 사실상... 최소단위가아니라 디자이너의 감각에기반한 디자인을 한것으로 보입니다. 개별 그리드를 확인해보면 각가이 다 픽셀단위로 달라지고 12px 단위의 간격을쓴거같긴한데. 좌측 / 우측에 쓰인 부분의 - 간격이 각각 다르고. 그것도 배율적으로 깔끔하게 나뉘어지지도않네요. 사실상 목록의 상단. 하단 영역의 크기도 간격이다르구요. 다음쪽은 참고하시지않는편이 나을듯합니다.
다음화면은 마지막으로 아웃룩의 UI 요소들의 그리드를 나타낸것입니다. 실제로 3단 레이아웃을 사용했을 때. 문제가 생길수있는 것중 하나가. 바로 이런- 1.2.3단간의 비율적 어긋남이나 조잡해보일수있는 화면적 상황인데요. 마이크로소프트는 어째 대기업인데도 이런 세세한 부분은 한국의 네이버에게도 많이 밀리는 느낌이네요. 마이크로소프트의 설계적 문제점...에대한건 나중에 클라우드 플랫폼 (구글, 마이크로소프트, 아마존 aws, 네이버)를 다룰때 강하게좀 까보곘습니다.
이런 최소단위를 기준으로 디자인을 진행할 경우. 수학적으로 매우 안정적인 결과치를 만들어낼 수 있습니다. 개개인의 감각을 믿는것보다 훨씬 나은 방식이니, 꼭 알아두어야할 방법입니다.
사실 메일시스템에서 가장 복잡한것은 따로있습니다. 바로 레이아웃 스타일의 변경인데요
사실상 메일시스템을 제가 오늘 이야기드린 이유도. CMS (회사의 결제시스템) 등에서 메일시스템의 규격을 많이 차용하거나. 역으로 메일시스템이 CMS가 그러하듯. 여러 레이아웃 스타일을 지원하기 때문입니다. 실무에서 CMS를 설계해보신적이 있는 분이 계신지는 모르겠지만. 실제로 굉장히 복잡한 화면들과. 4:3, 16:9 지원이슈에 이어 여러 레이아웃 스타일까지 겹칩니다. 심지어는 우측 탭까지 등장하게되면. 더욱더 생각해야할 요소들이 많아집니다.
네이버 메일이나, 야후 메일, 다음 메일 등에서도 여러 레이아웃을 지원한다CMS에 대해서는 나중에 다루겠지만. PC 전용 프로그램임에도불구하고. 레이아웃의 변경에따라 - 여러 컨텐츠들이 문제없이 배치 / 보여져야하고. 그게 서비스 내의 여러 화면과 유기적으로 맞물려야하기때문에. 메일링 시스템은 생각보다 그 내용이 매우 복잡한 편입니다.
야후 메일의 경우에도 이런 여러 레이아웃을 제공하는데요
3뎁스의 가로, 세로 레이아웃도 지원하고. 심지어 지메일처럼 2단계 / 상세 페이지의 레이아웃도 제공합니다.
한가지 핵심 기능을 제공하는 방식에도 수많은 레이아웃이있고 해결방법이있기 때문에 한 서비스를 신규로 제작할때에는 비슷한 컴포넌트가있는. 여러 서비스들을 들여다보면 여러 구조가 보이실겁니다. 그럼 그걸 해체해서 재배치하는 과정을 진행하시면 좋습니다.
그리고 그 해체와 변형에 필요한것이 - 위에서 이야기했던 .4:3 / 16:9 비율에 대한 제한선. 그리드 최소단위를 기반으로한 - 업체별 각각의 비례를 본인이 디자인하려는 디자인 규격 크기에 맞추어 정리하는 형태가 됩니다.
서비스마다 어떤 레이아웃을 지원하는지. 그리고 그 레이아웃과 화면사이즈 변경에 따라 어떤 화면구조가 적용되어있는지. 이런 것들을 분석하고, 프로젝트 상황에 맞게 사용할 줄 알아야합니다.
마지막으로 - 상단의 타이틀 영역 크기를 좀 보겠습니다. 지메일은 96px. 일반적인 규격들보다 좀 큰편이구요
지메일의 상단 타이틀 / 네비게이션 바 높이값 : 96px네이버와 다음은 각각 85, 80정도로 사실상 비례적으로 카카오나 네이버쪽을 추천드리는 이유가. 가장 무난하고 안정적인 경우가 많기 때문입니다.
네이버 메일의 상단 타이틀 / 네비게이션 바 높이값 : 80px
다음 메일의 상단 타이틀 / 네비게이션 바 높이값 : 85px아웃룩의경우는 72로, 일반적인 타이틀 탭보다 많이 작은편이구요
아웃룩의 상단 타이틀 / 네비게이션 바 높이값 : 72px야후의경우에는 125로. 무시무시하게 두꺼운 규격이네요
야후의 상단 타이틀 / 네비게이션 바 높이값 : 72px지메일의경우는 - 다른 웹사이트들도 동일하게 약간 두터운 형태를 띠고있구요. 실제로 체크해보시면. 크롬웹브라우저역시도. 다른 브라우저들에 비해 상단 기본 영역이 좀 긴 편입니다. 그래서 일반적으로 자료를 참고하실때는. 구글에서는 설계적인 부분. 레이아웃적인 부분. 기능적인 것을 더 참고하시는게 좋고 실제 비례나, 간격등은 국내 IT 업계쪽에서 체크하시는게 더 좋다고 추천드리는 이유입니다.
자...왠만한건 다 본것같죠?
사실 더 파고들어가자면, 들여다볼 내용이 또 있답니다. 그건 바로... 내부에서의 컨텐츠들간의- 간격조절입니다. 사용자 커스텀 영역이죠
좌측 메뉴 너비를 늘리거나, 상하 좌우 영역의 크기를 조절하는 등. CMS나 메일 시스템의 경우 이런 '최대, 최소 조절 가능 영역을 갖고있는경우가 많습니다. 그리고이게 다시한번. 4:3, 16:9 배율과 맞물리게되죠. 그렇기 때문에 이런 내용을 확인하고. 어느정도 선까지 - 사용자 커스텀 영역을 지원할 인지를 확인해야합니다.
다음 시간엔 바로 이런 - 메일서비스들에서. 사용자 커스텀 / 레이아웃 변경에 따른 최소, 최대범위를 체크해보고. 각 서비슫르의 버튼크기. 주요 타이틀, 텍스트크기에대한 상세비교도 진행해보도록 하겠습니다. 그리고 기존에 체크했던. 그리드 최소단위에 대비하여. 텍스트크기가 어떤 수학적 배율을 가질수있는지. 한번 가설을 세우고 체크해보도록 하죠.
오늘 이야기한 내용은 다음과 같습니다
1. 우리가 사용하는 OS에는 우리가 잘 알진 못해도. OS 기반 배율 (스케일링) 기능을 지원한다.
2. 동일한 목적의 서비스라하더라도, 기업별 비례와 색상, 배율 사용방식이 모두 다르다. 그러니 항상 여러 사이트들을 참조하고, 분석해보자
3. 메일 시스템은 언뜻 보면 간단해보이지만. 실제로는 4:3, 16:9 비율과, 레이아웃 변경, 커스텀 간격조절 등으로 매우 복잡한 설계기반을 갖고있다.
4. 깔끔해보이는 디자인을 분석해보면, 실제로 일관적이고, 간결한 그리드 최소단위와. 단위 배수를 사용한 버튼과 UI 간격들을 확인할 수 있다.
5. 2뎁스 + 상세페이지 구조와 3뎁스의 원페이지 구조는 서로 장단점을 갖고있다. 특히 3뎁스 구조는 편의성이 좋은 편이지만.4:3 비율에서 컨텐츠 영역이 크게 좁아지며, 디자인 규격에따라서는 매우 조잡해보일수가있다.
이 내용은 UI 디자인 연구소 - 단톡방의 내부인원들을 위해 만들어진 자료입니다.
저희 단톡방은 잡담이 불가능한 방입니다. 단톡방에 들어오시려는 분은 - 이용안내문을 꼭 확인해주세요!
단톡방 이용안내
https://brunch.co.kr/@clay1987/113
