본문 바로가기
UI 디자인 연구

UI 패턴 핵심정리 : 메일 서비스

by 리플러스 2021. 1. 20.
728x90

 

안녕하세요, 리플러스입니다. 오늘은 기존에 정리했던 - UI 디자이너라면 꼭 알아야할 9가지 서비스 카테고리에서, 메일 서비스에 대해 이야기를 해보겠습니다.

 

 

1. 메일 서비스란? 

메일은 정해진 메일 주소로 텍스트와 이미지, URL주소 등을 함께 보낼 수 있는 서비스입니다. 우리는 메일 서비스가 '전자 우편' 정도로 생각하지만. HTML (하이퍼 텍스트 마크업 언어) 뭉치로 된 문서를 보내는 것입니다. 그래서 CSS로 편집해, 기본 메일 규격과 다르게 내용을 꾸밀수도 있죠. 또한 기존에 살펴보았던 텍스트 에디터 개념까지 담고있어. 한층 복잡해집니다.

 

 

 

 

 

2. HTML이란? 

기존에 에디터에 대해서 알아볼 때. 마크다운 문법에 대해서도 이야기했었지만. HTML은 마크다운 문법과 비슷하게, 사용자 편집화면과 결과 화면이 서로 다릅니다. 가장 큰 이유는 HTML이 사람을 위한 언어가 아니라, 웹사이트를 보여주는 웹 브라우저를 위한 언어이기 때문입니다. 우리가 사용하고있는 일반적인 에디터나, 글쓰기 플랫폼들도 이런 HTML을 기반으로 만들고. 다시 보기좋게 꾸며놓았을 뿐. 복잡한 문서 덩어리라고 보시면 이해가 쉽습니다.

 

웹사이트 내부에 어떤 정보가 들어가는지, 웹 브라우저에게 설명해주는 HTML

 

 

 

3. 메일 서비스가 생각보다 복잡한 서비스인 이유

메일 서비스는 우리에게 가장 익숙한 서비스이기도 하면서. 평범하다 못해 존재감이 없는 서비스이기도합니다. 하지만 실제로 파고들어가보면. 메일 서비스가 생각보다 복잡하다는 것을 알 수 있습니다. 

 

  • A가 B에게 오늘 1시에 메일을 보낸다
  • B가 A에게 2시에 답장 메일을 보낸다
  • A가 C에게 서로 대화한 내용을 '참조'하여 보낸다
  • C는 3일 후 기존 대화내용을 읽어보고, A에게 진행상황을 묻는 메일을 보낸다
  • A는 메일에서 중요할 내용을 검색하여 C에게 보내고, B에게 '참조'한 내용을 함께 보내준다.

 

 

메일 서비스는 단순히 1:1 관계가 아니라 1대 다수가 될 수 있는 글 타래 개념입니다. 그래서 쓴 사람과 받는 사람의 구분이 꼭 필요하기 때문에. ID와 용량 저장소의 개념까지 갖고있어야합니다. 게다가 글쓰기의 방식이 '최초의 글쓰기' 외에 '답장, 참조' 같이. 기존 내용을 포함해 내용을 전달하는 부분까지 함께 담겨있습니다. 시간이 지남에 따라 타임라인이 만들어지기 때문에. 검색 시스템 역시 빼놓을 수 없죠.

 

 

 

 

 

4. 메일의 핵심기능 : 검색 필터링

메일 서비스에서 가장 중요한 두가지 내용을 다룬다면. 메일 쓰기와 기존 메일 찾기일겁니다. 메일을 일상적 새로 쓰는 사람이 아니라면, 더욱더 검색 개념이 중요해지죠. A라는 사람이 쓴 대화를 찾는데, 그게 언제쯤에 보낸 내용인지. 특정 대화내용이 키워드로 들어가있는지. 보낸 메일과 받은 메일 중 어떤 것에 들어있는지. 첨부파일이 들어있는 내용인지 등등. 메일 내용하나를 분류하는 데에도 굉장히 여러가지 방식이 있습니다. 이런 다양한 검색방식을 제공한다는건, 서버에서도 그런 '준비'를 미리 해두었다는 이야기입니다.

 

 

  • 메일의 타입 (일반 작성, 답장, 참조)
  • 메일이 생성된 날짜
  • 메일을 보내는 사람
  • 메일을 받는 사람 (혹은 그룹)
  • 메일을 참조 형태로 받는 사람 (혹은 그룹)
  • 파일 및 이미지 포함 / 미포함 
  • 포함된 텍스트의 개별 단어들

 

 

 

5. 메일의 편의기능 : 카테고리 분류 / 스팸메일 차단

대부분의 메일 서비스는 단순히 메일을 한 곳에 받아놓는것 외에도. 특정 메일을 분류하여 폴더화하는. '카테고리 분류' 기능을 제공합니다. 게다가 이런 분류를 어떻게 해놓느냐에 따라, 메일을 검색하고 확인하는 과정이 매우 손쉽게 처리되죠. 요즘은 AI기반으로 메일 내용을 분류해서, 자동으로 카테고리를 처리해주기도 하지만. 여전히 대부분의 메일은 사람이 직접 분류를 해줘야합니다. 사용자가 직접 폴더를 만들경우, 기본 폴더에, 사용자 폴더까지. 확인해야할 내용이 너무 많아, 꼼꼼하고 성실한 사람이 아니면. 일정 수준에서 이 과정을 포기해버리는 경우가 많습니다.

 

메일 서비스가 제공하는 기본 폴더와, 사용자 편집 폴더들

 

또한 이런 자동 분류 기능은 스팸 메일이나 광고성 메일을 구분하여 자동으로 처리하는 스팸차단 개념과도 관련이 있습니다. 불필요한 정보를 모두 사람이 처리하는 것에는 한계가 있죠. 그래서 AI기반으로 이 내용을 얼마나 잘 처리하느냐가 매우 중요한 기준점이 되기도 합니다.

 

 

 

6. 메일의 편의기능 : 다른 메일 계정, 타 서비스 메일을 불러오기

대부분의 메일 서비스들은 자신의 서비스에서 생성된 메일 외에도. 타 서비스에서 생성된 메일을 다시 불러올 수 있게 되어있습니다. 심지어는 여러 다른 계정의 메일들을 한데 묶어서. 다시 또다른 계정에서 한번에 확인 / 답장을 보내거나. 개별 이메일 주소를 사용해 각각의 답장을 보낼 수도 있죠. 마치 휴대폰에 있는 주소록과, 기존 데이터들을 새로운 기기에 연결하듯이. 메일 서비스도 사용자가 갖고있는 주소록, 대화내용 등을 한꺼번에 묶어 타 서비스로 보내거나. 백업할 수 있습니다. 

 

 

 

 

 

7. PC웹, 모바일 웹, 모바일 앱, 타블렛 모두를 지원하기

메일 서비스는 우리에게 익숙하지만. 파고들면 파고들수록 다양한 내용을 확인할 수 있는 서비스입니다. 게다가 PC에서 사용하던 복잡한 사용성 + 풍부한 기능의 텍스트에디터를 모바일로 가져와야하기에. PC와 모바일간의 일관적인 사용성을 유지하기 어려운 서비스이기도 합니다. 구글의 디자인 시스템인 마테리얼 디자인이 중요한 것도. 이런 이유에서인데요. PC에서 유지하던 서비스를 모바일로 옮기기 위해. 자체적인 디자인 문법을 만들어내어 PC와 타블렛, 모바일 모두에 적용될 수 있는 설계방식을 만들었습니다.

 

일관적인 디자인 규격을 만들기 위해, 디자인 시스템을 만든 구글의 사례

 

이 글에서 디자인 시스템을 집중적으로 다루진 않겠지만. 이 내용이 중요한 이유는 - 메일 서비스가 단독 서비스의 개념에서 끝나지않고. 포탈의 연계 서비스로 연결되는 길목에 있는, 기본적인 서비스이기 때문입니다.

 

 

 

 

8. 그렇다면, 잘 만들어진 메일 서비스를 가르는 기준점은?

잘 만들어진 메일 서비스의 기준을 정리해보면, 이런 내용들을 확인해봐야합니다. 

 

  • 메일 작성시, 텍스트 에디터가 지원하는 범위가 어디까지인지
  • 메일 내용을 수정해 다시 보내거나, 참조하기가 쉬운지
  • 1 대 다수의 대화시 기존 히스토리를 손쉽게 확인할 수 있는지
  • 기존 메일 검색시 여러 기준점을 기반으로 결과값을 제공하는지
  • 다른 메일 서비스를 불러오거나, 한꺼번에 내용을 정리할 수 있는지
  • 기본적인 메일 카테고리 분류가 직관적인지
  • 메일 분류 (카테고리) 편집 및 관리가 편리한지
  • 단체나 회사 등. 그룹 기반으로 내용을 모아볼 수 있는지
  • 고급 사용자를 위해, HTML 편집 및 메일 내용 꾸미기가 가능한지
  • 포탈 서비스인 경우, 다른 주요 서비스와 동일한 디자인 규격을 사용하고있는지

 

 


 

 

정리하는 글 

메일 서비스는 정말 기초적인 서비스들 중 하나입니다. 대부분 포탈 서비스에서 제공하지만. 구글의 경우를 제외하고는 완성도가 높지 않은 경우가 많습니다. 이런 문제가 발생하는 이유는 메일 서비스가 돈이 되는 서비스가 아니라. 포탈에서 제공하는 '무료 서비스'라고 인식되기 때문입니다. 그래서인지 에디터의 편집 기능이 매우 구식이거나. 메일 서명편집조차 자유롭지 못한 경우도 종종 등장합니다. 

 

그러나 시간이 지날수록 개선되지않고. 손이 많이 가는 기존의 서비스들은 점점 더 뒤떨어질 수 밖에 없고. 기본적인 기능에 충실한 메일 서비스들만 살아남게 될 것입니다. 그래서 메일 서비스를 분석할 때는 텍스트 에디터와 필터링 개념. 기본 UI 규격들의 완성도를 잘 지켜보면서. 해당 포탈 서비스의 다른 서비스들과 비교해보면 좋습니다. 

 

오늘은 여기까지입니다. 앞으로도 위의 9가지 서비스 카테고리에서 다뤘던 것처럼. 핵심 키워드들과 어떤 점을 주요하게 분석해야하는지. 그 핵심내용을 정리하는 글을 작성할 예정입니다. 그럼 다음에 다시 만나요 !

 

 


 

 

리플러스의 UD LAB에 대해 더 궁금하시다면, 다음 링크를 확인해보세요!

 

udlab.tistory.com/2

 

UD LAB - 이용안내

안녕하세요, 리플러스입니다. UD LAB (구 UI 디자인 연구소)은 UI 디자인과, IT 생태계를 집중적으로 다루고있는 커뮤니티입니다. 크게 단톡방과 디스코드 채널로 이루어져있으며, 주기적으로 디스

udlab.tistory.com

 

728x90

댓글