컴포넌트 클로닝(3) - 핀터레스트 리스트 아이템

https://www.pinterest.co.kr/

 

이번에는 레퍼런스나 참고할만한 화면 설계를 빠르게 찾아볼 때 사용하는 핀터레스트의 리스트 아이템을 클로닝 했습니다. 핀터레스트의 주요 사용자들은 이미지를 자신이 만든 보드(즐겨찾기)에 빠르게 정리하기 위해 사용하는데요. 그러기 위해 화면 설계가 잘되어 있다는 생각이 드네요. 저는 단순 참고만 하지 막상 이미지들을 정리하지는 않네요.

 

또 세로 비율의 형태를 가지고 있어서 모바일에도 거의 동일하게 적용하기에도 편하고 디자이너 관련된 사용자말고 다른 사용자가 많을까 싶은 서비스였는데 상장도 하고 주가도 많이 오르는 의외의 서비스라고 생각이 드네요. 생각보다 SNS 형태의 서비스라고 사용자들이 인식하는 거 같습니다.

 

 

Target

이미지 전체가 컴포넌트 배경에 깔려있고 상단에는 보드를 선택하고 저장하기 위한 요소가 있습니다. 드롭다운 + 버튼의 형태입니다.

 

Elements

아이콘, 원본 이미지URL로 통하는 버튼, 공유 및 기능 버튼, 아이템 타이틀, 드롭다운 버튼으로 이루어져 있습니다.

 

모든 요소들은 마우스 호버 이벤트 시에만 나타나게 됩니다.

 

Components

구조는 굉장히 단순합니다. 눈에 잘 띄는 이미지 영역 상단에 보드에 추가를 위한 드롭다운, 하단엔 원본 링크 및 다른 기능이 있는 버튼 영역, 이미지 밖에는 리스트 타이틀이 위치했습니다. 구조가 단순한 덕분에 형태가 조금 달라져도 별다른 수정이 필요가 없습니다.

 

클로닝 할 때는 단순해 보이고 쉬워도 아무것도 없는 상태에서는 이런 형태를 쉽게 생각하기 어려울 거 같습니다. 이렇게 말끔하게 떨어지는 화면 설계가 필요한 서비스를 해보면 소원이 없을 거 같습니다.