컴포넌트 클로닝(4) - 미디움 아티클 리스트

https://medium.com/

 

이번에는 저만 알고 싶은 서비스인 Medium(이하 미디움)의 아티클 클로닝입니다. 미디움은 퀄리티 높은 블로그의 글을 모아서 큐레이션 해주는 서비스 인대요. 거의 대부분의 분야에 대해 최신 트렌드나 기술 동향을 파악할 수 있습니다. 영어라 좀 불편할 수도 있지만 저는 갤럭시탭을 사용하는데요. 구글 번역 앱을 깔아 두면 텍스트 선택 영역을 번역할 수 있는 기능을 사용할 수 있습니다. 아이폰에서 똑같이 시도했지만 아직은 되지 않네요. 아이폰에서도 얼른 번역이 가능하면 좋을 거 같습니다.

 

어쨌든 미디움 메인에는 아티클 목록이 있는데요. 깔끔, 단순하게 배치하고, 여백을 잘 사용한 화면 설계로 보입니다. 서비스의 대부분이 텍스트 위주라 심심해 보일 수 있는데 이미지를 영리하게 배치하여 따분해 보이지 않게 설계되어 있습니다. 

 

위의 캡쳐된 메인 페이지를 보시면 크게 4가지의 아티클 리스트 형태가 있습니다. 임의로 구분했지만 좌측 상단부터 headline, sub, trending, default로 구분했습니다.

 

정보 구조는 

• 썸네일 이미지
• 아바타 - 기고자 이름 - 기고자 소속 블로그
• 타이틀
• 서브 타이틀
• 기고 날짜 - 예상 읽기 시간 - 기타 기능들

4가지로 구분된 형태 모두가 위의 정보 구조에서 크게 벗어나지 않고 필요에 따라 제외되는 형태입니다. 보통 서브타이틀이 제외되네요. 그렇다면 리스트 아이템 내부의 정보 구조들은 대부분 재활용이 가능하고 리스트의 형태를 조금씩 바꾸어 배치한다면 사용자가 볼 때 화면 구성이 지루해 보이지 않으면서 통일성을 유지됩니다. 그 의미는 심미적으로 아름답게 보일 수 있는 여지가 생기게 되며, 종합적으로 기교 있는 화면 설계라고 볼 수 있습니다.

 

Elements

• 폰트 - 단순히 크기에 따라 4가지로 분류했지만 실제로는 더 다양합니다.
• 썸네일 이미지 -  4:3, 3:2, 1:1 비율의 썸네일이 있습니다. 
• 아바타 정보 - 아바타 이미지와 기고자 이름, 기고자 소속이 포함되어 있습니다.
• 썸네일 정보 - 타이틀, 서브 타이틀, 기고 날짜, 예상 읽기 시간, 기타 기능들이 포함되어 있습니다.

위의 요소들로 모든 정보 구조들이 빠짐없이 채워졌습니다. 이제는 컴포넌트로 합치면 됩니다.

 

Components

• headline - 플렉스 박스의 정렬 방향을 기준으로 Column이며, 모든 정보를 포함하고 있습니다.
• sub - 정렬 방향은 Row이며, 서브 타이틀이 없습니다.
• trending - 다른 아티클 아이템과 달리 순위가 있으며 정렬 방향은 Row입니다. 서브 타이틀이 없습니다.
• default - 정렬 방향은 Row이며, 모든 정보를 포함하고 있습니다.

 

Examples

완성된 컴포넌트들을 별다른 간격없이 배치하고 중간에 디바이더만 넣고 만든 화면입니다.

 

미디움 구독하세요~