컴포넌트 클로닝(7) - 프로덕트 헌트

www.producthunt.com/

Product Hunt – The best new products in tech.

가끔 둘러보는 사이트인데요. 새로 나오는 서비스나 프로덕트가 매일 업데이트되는 사이트입니다. 투표 기능을 통해 인기 있는 프로덕트가 상위에 노출되는데요. 가끔 쓸만한 생산성 도구나 신박한 서비스를 찾게 됩니다.

 

포함되는 데이터는 

• 프로덕트 로고
• 프로덕트 이름 - 리스트에 마우스 호버 하면 이름 우측에 프로덕트의 사이트로 바로 이동하는 링크가 나오게 됩니다.
• 설명
• 코멘트
• 카테고리
• 투표

간단한 컴포넌트입니다. 다만 카테고리가 컴포넌트의 하단에 위치하며, 코멘트 우측에 위치해있습니다. 시각적 위계에 약간 맞지 않는 배치라고 생각은 들지만 제가 나름대로 개선하는 형태로 수정을 해도 좀 부족한 부분이 있기 때문에 각각 장단점이 있다고 생각합니다. 기존 컴포넌트와 저의 개선점이 있는 컴포넌트를 정리했습니다.

 

그리고 마우스 호버를 하면 프로덕트 이름 우측에 사이트로 이동하는 링크가 생기고, 리스트 자체를 클릭하면, 프로덕트 헌트 내에 있는 소개 페이지로 이동하게 됩니다. 처음 사이트를 사용할 때 소개 페이지를 통해 계속 프로덕트 사이트로 이동해서 불편했는데, 조그맣게 나오는 게 인지하기 힘들었던 거 같습니다. 그래도 개선한 컴포넌트의 링크 버튼도 심미적으로 만족스럽지 않아서 기존 컴포넌트가 이 부분은 더 나아 보입니다.😅

 

제가 개선한 컴포넌트도 컴포넌트에만 국한해서 나름 개선했지만, 서비스 전체의 일관성을 생각한다면 기존 컴포넌트가 더 낫다고 생각합니다. UI 디자인이라는 게 그림을 그리는 게 아니라 서비스 전체를 설계하는 과정이기 때문에 일관성, 심미성을 유지하며 설계하는 건 장거리 마라톤에 가깝다고 생각합니다. 그렇기 때문에 명백한 문제가 아니라면 외부에서 3자의 시각으로 함부로 평가하는 건 지향해야 할거 같습니다.😚