컴포넌트 클로닝(2) - 레딧 쓰레드

첫 번째 컴포넌트 클로닝은 어설프게 html/css로 작업을 했지만

최근에 피그마가 엄청난 업데이트가 되어서 실제 화면 설계를 플렉스 박스를 활용하는 것과 거의 유사하게 작업이 가능하게 되었습니다. 그래서 효율적인 리서치 및 기록을 위해서 피그마를 활용하기로 하였습니다.

 

 

컨트롤 + 마우스휠로 줌인/아웃 가능합니다.

레딧이라는 해외 커뮤니티의 스레드 리스트를 타깃으로 클로닝 했습니다.

elements

• icon - 카본 디자인 시스템의 아이콘을 사용했으며, 타깃과는 다르고 형태가 비슷한 걸 가져다 사용했습니다.
• badge - 뒤에 따라오는 텍스트는 들여 쓰기를 활용해 줄 바꿈 시 자연스럽게 나오게 하였습니다.
• meta-lnik - 링크된 URL의 메타 데이터를 표시하는 게 있어서 따로 엘리먼트로 작업했습니다.
• thread-function-button - 아래의 스레드 관련 기능이 모여있는 곳에 있는 고스트 버튼을 엘리먼트로 작업했습니다.

Components

• 좌측의 투표하는 영역을 템플릿의 전체 높이를 따르게 하였습니다.
• 템플릿의 전체 높이는 우측의 쓰레드 내용 영역과 기능 버튼 영역의 합입니다.

Examples

• 반응형에 적용을 위해서 다른 가공 없이 컴포넌트의 크기만을 수정해 활용하는 예제입니다.

단순히 메타데이터를 가진 URL을 링크했을 경우 말고도 살펴보니 다양한 형태가 많지만 그나마 이게 가장 복잡해 보여서 이걸 클로닝 해보았습니다. 단순 클로닝이라서 수월했지만 생각보다 보이는 정보들이 다양한 편이라 데이터가 정리되어 있지 않은 상태에서 화면 설계를 했으면 많이 헤매었을 거 같습니다. 개인적으로 화려한 면을 치중하는 국내보다는 투박하지만 해외에 정리된 UI를 선호하는 성향이라 앞으로도 해외 쪽 UI를 많이 리서치할 거 같습니다.