클론코딩

유튜브는 왜 items-per-row 속성을 사용하는가?

lamarcK 2025. 3. 31. 18:32

기본적으로 동적으로 아이템을 할당해서

  1. 한줄에 몇개의 아이템이 표시될지
  2. 동적으로 추가되는 아이템의 수가 몇개일지

를 정하는 목적이 있다.

사실 그 외엔 사용 이유가 없어보이긴한다.

반응형 웹을 구현하려고 한다면 CSS로 아이템의 크기를 조정해도 문제가 없는 부분이다.

굳이 items-per-row 속성을 끌어다가 CSS로 아이템의 크기를 조정할 필욘 없다고 생각된다.

 

고민해봤는데 실질적인 이점은 찾지 못했다.

하지만 items-per-row를 사용해야 하는 경우가 또 있다면 이런 경우가 아닐까?

1.태블릿, pc 연계

유튜브가 다양한 화면 크기와 사용자 환경(모바일, 태블릿, PC)에 대응하기 위해서 items-per-row 를 기반으로 크기를 조정하는 경우다. 이 경우엔 css에 설정된 특정 크기의 값이 아니라 부모 요소의 크기를 먼저 받고, 그 비율에 따라서 동영상의 크기를 조정하게 할 수 있다.

2. 전체적인 유지 보수 목적

items-per-row 즉 한줄에 몇개의 동영상이 보여지냐가 유튜브의 핵심이기도 하기 때문에 해당 관련 시스템의 관리를 위해서 items-per-row를 기반으로 돌아가게 시스템을 짠거 아니냔 것이다.

 

여기까지가 추측

 

실제 코드를 뜯어본 결과

파일 내용 중 items-per-row 및 이와 밀접하게 관련된 itemsPerRow 변수가 사용된 부분을 발췌했습니다. (변수명은 난독화되어 a, b, c 등으로 표시될 수 있으나, 맥락상 파악 가능)

  1. HTML 템플릿 또는 데이터 바인딩:
    • JavaScript 변수인 itemsPerRow의 값을 items-per-row라는 속성(attribute)에 전달하는 것으로 보입니다. 이는 웹 컴포넌트나 특정 프레임워크(Polymer, Angular 등)에서 흔히 사용되는 데이터 바인딩 방식입니다.
  2. HTML
    <some-element items-per-row="{{itemsPerRow}}">...</some-element>
  3. JavaScript 속성 정의:
    • itemsPerRow라는 이름의 속성을 정의하고 있으며, 이 값은 숫자(Number) 타입입니다.
    • computed 속성은 _computeItemsPerRow라는 함수가 다른 상태 값들(isTwoColumn_, isExpanded_, isCollapseRecordAndMiniGuideActive_)을 기반으로 itemsPerRow 값을 계산한다는 것을 의미합니다.
  4. JavaScript
     
    // 웹 컴포넌트나 객체의 속성(property)으로 정의
itemsPerRow: {
    type: Number, // 타입은 숫자
    computed: "_computeItemsPerRow(isTwoColumn_, isExpanded_, isCollapseRecordAndMiniGuideActive_)" // 특정 함수(_computeItemsPerRow)의 결과로 값이 계산됨
},
  5. 값 계산 함수:
    • _computeItemsPerRow 함수는 여러 조건(예: 2단 컬럼 여부, 확장/축소 상태 등)에 따라 한 행에 표시될 아이템의 개수를 결정합니다. 반환되는 값(예: 1, 4, 5, 6)이 itemsPerRow가 됩니다.
  6. JavaScript
     
    // itemsPerRow 값을 계산하는 함수
_computeItemsPerRow: function(a, b, c) { // a: isTwoColumn_, b: isExpanded_, c: isCollapseRecordAndMiniGuideActive_ 에 해당할 가능성 높음
    // ... 복잡한 조건 로직 ...
    // 예시: return c ? 1 : b ? a ? 6 : 5 : a ? 5 : 4;
    // (상태 c가 참이면 1, 아니면 상태 b가 참이고 a도 참이면 6, b는 참이고 a가 거짓이면 5, ...)
},
  7. 값 할당 및 사용:
    • 계산된 itemsPerRow 값이 실제 속성에 할당되고, 이 값은 이후 CSS 스타일(예: 각 아이템의 너비 계산)이나 다른 레이아웃 관련 로직에 사용될 수 있습니다.
  8. JavaScript
     
    // 계산된 값을 속성에 할당
this.itemsPerRow = this._computeItemsPerRow(this.isTwoColumn_, this.isExpanded_, this.isCollapseRecordAndMiniGuideActive_);

// 스타일이나 레이아웃 계산에 사용될 가능성
// 예: var columnWidth = 100 / this.itemsPerRow + '%';

items-per-row (및 itemsPerRow)의 목적 추측:

위 코드들을 종합해 볼 때, items-per-row 또는 itemsPerRow는 UI(사용자 인터페이스) 상에서 한 행(row)에 몇 개의 아이템(item)을 표시할지를 결정하는 값으로 사용된 것으로 강력히 추측됩니다.

  • 반응형 레이아웃: 화면 크기, 사이드바 확장/축소 상태, 특정 모드 활성화 여부 등 다양한 조건에 따라 한 행에 보여줄 아이템의 개수를 동적으로 조절하여 최적의 레이아웃을 구성하려는 목적으로 보입니다. 예를 들어, 화면이 넓거나 사이드바가 닫혀 있을 때는 한 행에 더 많은 아이템(예: 5개 또는 6개)을 보여주고, 화면이 좁거나 사이드바가 열려 있을 때는 더 적은 아이템(예: 4개 또는 1개)을 보여주는 식입니다.
  • 그리드 시스템 제어: 웹 페이지에서 콘텐츠(예: 비디오 썸네일, 상품 목록 등)를 격자(grid) 형태로 배열할 때, 이 값을 사용하여 한 행에 들어갈 열(column)의 개수를 제어하는 데 사용될 가능성이 높습니다.
  • 동적 스타일링: 계산된 itemsPerRow 값은 CSS 변수나 직접적인 스타일 계산(예: 각 아이템의 width 비율 계산)에 사용되어 아이템들의 크기와 배치를 동적으로 변경하는 역할을 할 수 있습니다.

요약하자면, items-per-row는 화면 상태와 조건에 맞춰 콘텐츠 목록이나 그리드의 한 행에 표시될 아이템 수를 동적으로 제어하여 반응형 웹 디자인을 구현하기 위한 목적으로 사용된 것으로 보입니다.

 

네, 두 번째로 제공해주신 root {.txt 파일에서도 items-per-row와 관련된 부분을 찾아 목적을 추측해 보겠습니다. 이 파일은 CSS 코드인 것으로 보입니다.

파일 내 관련 코드:

이 파일에서는 items-per-row가 CSS Custom Property (사용자 지정 속성, 또는 CSS 변수) 형태로 사용된 것으로 보입니다.

CSS
 
/* 예시 1: CSS 변수 정의 */
:host([use-one-column-layout_]) {
  --ytd-grid-items-per-row: 1; /* 특정 조건(:host가 use-one-column-layout_ 속성을 가질 때)에서 변수 값을 1로 설정 */
}

:host([use-two-column-layout_]) {
  --ytd-grid-items-per-row: 2; /* 2단 컬럼 레이아웃일 때 변수 값을 2로 설정 */
}

/* 미디어 쿼리를 이용한 반응형 설정 */
@media (min-width: 800px) {
  :host(:not([use-one-column-layout_]):not([use-two-column-layout_])) {
     --ytd-grid-items-per-row: 3; /* 화면 너비가 800px 이상이고 특정 레이아웃이 아닐 때 3으로 설정 */
  }
}

@media (min-width: 1200px) {
   :host(:not([use-one-column-layout_]):not([use-two-column-layout_])) {
      --ytd-grid-items-per-row: 4; /* 화면 너비가 1200px 이상이고 특정 레이아웃이 아닐 때 4로 설정 */
   }
}

/* 예시 2: 정의된 CSS 변수 사용 (다른 CSS 규칙 내에서) */
#items.ytd-grid-renderer {
  /* grid-template-columns 와 같은 속성에서 var() 함수를 통해 변수 값을 참조할 가능성이 높음 */
  grid-template-columns: repeat(var(--ytd-grid-items-per-row, 1), 1fr);
  /* var(--ytd-grid-items-per-row, 1) -> --ytd-grid-items-per-row 변수 값을 사용하되, 정의되지 않았으면 기본값 1을 사용 */
  /* repeat(N, 1fr) -> 너비가 동일한(1fr) 컬럼을 N개 만듦 */
}

/* 혹은 JavaScript에서 이 변수 값을 읽어 사용할 수도 있습니다. */
  • --ytd-grid-items-per-row 와 같이 -- 로 시작하는 이름은 CSS 변수를 정의하는 방식입니다. ytd-grid- 접두사는 YouTube의 그리드 시스템과 관련된 변수임을 시사합니다.
  • :host(...) 나 @media (...) 와 같은 선택자와 규칙을 사용하여 특정 조건(컴포넌트 상태, 화면 너비 등)에 따라 --ytd-grid-items-per-row 변수의 값을 다르게 설정합니다 (예: 1, 2, 3, 4 등).
  • 이렇게 정의된 변수는 다른 CSS 규칙에서 var(--ytd-grid-items-per-row) 형태로 참조하여 사용됩니다. 위 예시에서는 grid-template-columns 속성에서 이 변수 값을 사용하여 그리드 레이아웃의 열(column) 개수를 동적으로 설정하고 있습니다.

--ytd-grid-items-per-row (CSS 변수)의 목적 추측:

이 CSS 코드에서의 items-per-row (정확히는 --ytd-grid-items-per-row 변수)는 다음과 같은 목적으로 사용된 것으로 추측됩니다.

  1. 그리드 레이아웃의 열(Column) 개수 제어: 이름에서 알 수 있듯이, 그리드(grid) 시스템에서 한 행(row)에 표시될 아이템(item)의 수, 즉 열의 개수를 정의하는 데 사용됩니다.
  2. 반응형 디자인 구현: 미디어 쿼리(@media)나 호스트 요소의 상태(:host([...]))에 따라 --ytd-grid-items-per-row 변수 값을 변경함으로써, 화면 크기나 특정 UI 상태에 맞춰 그리드의 열 개수를 자동으로 조절합니다. 이를 통해 다양한 환경에서 최적화된 레이아웃을 보여주는 반응형 디자인을 CSS 레벨에서 구현합니다.
  3. 유지보수성 및 일관성: 아이템 개수를 변수로 관리하면, 레이아웃 변경이 필요할 때 여러 곳의 CSS 코드를 수정하는 대신 이 변수 정의 부분만 수정하면 되므로 유지보수가 용이해집니다. 또한, 일관된 그리드 규칙을 여러 컴포넌트에 쉽게 적용할 수 있습니다.

요약:

root {.txt 파일의 --ytd-grid-items-per-row는 CSS 변수로서, 그리드 레이아웃에서 한 행에 표시할 아이템(열)의 개수를 정의하고, 화면 크기나 상태에 따라 이 개수를 동적으로 변경하여 반응형 레이아웃을 구현하기 위한 목적으로 사용된 것으로 보입니다. 이는 이전 파일(use strict;.txt)에서 JavaScript로 계산된 itemsPerRow 값을 CSS에 전달하여 사용하던 것과 유사한 목적을 CSS 자체 기능(CSS 변수와 미디어 쿼리 등)을 통해 달성하는 방식이라고 볼 수 있습니다.

 

items-per-row의 종합적인 목적 (추측)

items-per-row는 웹 애플리케이션(특히 YouTube로 추정됨)의 사용자 인터페이스(UI)에서 콘텐츠 아이템(예: 동영상 썸네일, 상품 목록 등)을 배열하는 방식, 특히 한 행(row)에 몇 개의 아이템을 표시할지를 제어하기 위해 사용되는 값 또는 변수입니다. 이 값은 고정된 것이 아니라 동적으로 변경될 수 있습니다.

주요 목적은 다음과 같이 요약할 수 있습니다.

  1. 반응형 레이아웃 구현:
    • 화면의 너비(데스크톱, 태블릿, 모바일 등)나 브라우저 창 크기에 따라 한 행에 표시되는 아이템 수를 자동으로 조절합니다. (CSS 미디어 쿼리 또는 JavaScript 화면 크기 감지)
    • 사이드바(메뉴)의 확장/축소 상태, 특정 기능(예: 1열 보기 모드)의 활성화 여부 등 UI의 현재 상태에 맞춰 아이템 수를 변경하여 가용 공간을 최적으로 활용합니다. (JavaScript 상태 변수 또는 CSS 속성 선택자)
  2. 그리드 시스템 제어:
    • 콘텐츠를 격자(grid) 형태로 표시할 때, 한 행에 들어갈 열(column)의 개수를 명시적으로 정의하고 관리합니다.
    • JavaScript로 계산된 값을 HTML 템플릿 속성(items-per-row="{{itemsPerRow}}")으로 전달하거나, CSS 변수(--ytd-grid-items-per-row)를 정의하여 grid-template-columns와 같은 CSS 속성에서 참조함으로써 그리드 구조를 결정합니다.
  3. 동적 스타일링 및 레이아웃 조정:
    • 결정된 '행당 아이템 수' 값을 기반으로 각 아이템의 너비(예: width: calc(100% / var(--ytd-grid-items-per-row)))나 다른 레이아웃 관련 CSS 속성을 동적으로 계산하고 적용하는 데 사용될 수 있습니다.
  4. 코드의 유지보수성 및 일관성 향상:
    • 레이아웃 규칙(한 행에 몇 개를 보여줄지)을 JavaScript 변수나 CSS 변수로 중앙에서 관리함으로써, 디자인 변경 시 여러 곳을 수정할 필요 없이 해당 변수 정의 부분만 변경하면 되므로 코드 관리가 용이해집니다.
    • 애플리케이션 전체 또는 특정 섹션에서 일관된 그리드 레이아웃 규칙을 적용하는 데 도움을 줍니다.

결론적으로 items-per-row는 다양한 환경과 조건에 맞춰 콘텐츠 그리드의 행당 아이템 수를 동적으로 제어하여 사용자에게 최적화된 반응형 레이아웃을 제공하기 위한 핵심적인 설정값으로 사용된 것으로 보입니다. 이는 JavaScript 로직과 CSS 스타일링 규칙 양쪽에서 구현될 수 있으며, 두 방식이 함께 사용될 수도 있습니다.