컴포넌트 클로닝(1) - 유튜브 썸네일

• 디자이너 입장에서 컴포넌트를 Flexbox로 레이아웃만 잡는다는 가정하에 클론 해보고 연구하는 글입니다
• 레이아웃만 구성하기에 html/css를 사용하지만 반응형 및 시맨틱한 요소는 고려하지 않습니다
• 마우스 이벤트 혹은 상태에 따른 컴포넌트 변화는 작성하는데 너무 오래 걸리기 때문에 고려하지 않습니다

요즘 플러터를 공부중인데 레이아웃을 잡는 게 기존 웹에서 많이 쓰이는 Flexbox를 기준으로 하고 가벼운 마음으로 플러터로 코드를 작성해보았습니다. 그런데 디자인 파트에서부터 레이아웃을 정확하기 잡지 않으니 코드 작성 시에 막히거나 실제로 이벤트 혹은 상태에 따른 고려도 많이 해야 하기에 예습 및 복습 겸으로 웹에 있는 컴포넌트를 클론 하면서 공부하기 위해 작성합니다.

 

첫 번째로 많이 사용하는 유튜브 썸네일을 클론 해 보았는데, 홈에 있는 썸네일과 영상을 볼 때 우측에 column으로 정렬되는 썸네일이 재활용이 어느 정도 가능하게 설계되어 있어서 클로닝 해보았습니다.

 

See the Pen gOMyeYX by GSH (@oldkong88) on CodePen.

구조

• 컴포넌트(column or row)
  • 썸네일 이미지(column)
    • 나중에 볼 동영상
    • 목록에 추가
    • 동영상 길이
    • 프로그레시브 바
  • 정보 영역(row)
    • 프로필 영역(컴포넌트 row시에 제외)
    • 텍스트 영역(column)
      • 제목
      • 작성자 이름
      • 조회수
      • 시간
    • 펑션 버튼

컴포넌트를 크게 분리하면 썸네일 이미지와 정보 영역을 column으로 나누고

각 하위 영역에서는 필요에 따라 column이나 row로 요소들을 배치하는 게 효율적으로 보이네요.

 

몇 가지(프로그레시브 바, 펑션 버튼 등)는 상대적인 위치보다는 절대적인 위치로 배치하는 게 효율적으로 보입니다.

 

컴포넌트는 필요에 따라 column 혹은 row로 레이아웃을 잡게 되어 있습니다.

일반적인 유튜브 홈에서는 column으로 썸네일 이미지와 정보 영역이 세로로 배치되고,

동영상 시청 시에 우측에 있는 리스트에는 row로 배치되고 프로필 이미지가 제외되어서 가로로 배치되는데, 이럴 경우에는 컴포넌트를 row로 변경하고 프로필 이미지만 제거해도 그럴듯하게 수정이 가능합니다. 이렇게 빠르게 레이아웃 변경이 가능하고 시각적으로 정리되어 보이는 거 때문에 Flexbox를 많이 사용하는 거 같습니다.