StackExchange 사이트의 오른쪽 열에서 태그가 사용하는 공간을 최적화하는 방법은 무엇입니까?

StackExchange UI 사이트의 모양에 대한이 메타 질문 에서 사이트 디자인을 연구하고 있습니다 (읽기 : 엉망). 웹 기반 도구를 사용하여 페이지의 CSS를 편집하고 있으므로 서버에서 렌더링하는 사용 가능한 HTML로 제한하면서 내용을 자유롭게 변경할 수 있습니다.

주로 타이포그래피 및 시각적 무게와 같은 요소를 변경하고 재구성하는 동안 거의 모든 StackExchange 웹 사이트에 표시된 오른쪽 열이 매우 비효율적이라는 것을 깨달았습니다. 메타 사이트에 표시되는 방식은 다음과 같습니다.

태그 (및 배지)는 세로보다 가로로 길이가 작은 작은 개체입니다. 각각에는 몇 가지 속성이 있습니다.

• 객체의 이름
• 태그가 수여되거나 배지가 할당 된 회원 수
• 객체의 개념을 강화하는 시각적 요소
• 이름의 길이에 따라 뚜렷한 가로 너비

사물이 조직되는 방식은 이제 매우 비효율적입니다.

• 전체 가로 너비가 필요하지 않더라도 각 태그/배지는 한 줄의 공간을 차지합니다.
• 이 페이지의 태그 및 배지 시각적 표현이 적절하지 않습니다. 태그 및 배지는 질문에 대한 태그 또는 회원 프로필의 배지와 같이 자체적으로 표시되도록 설계되었지만 이러한 경우 태그가 적용된 횟수 또는 회원과 같은 메타 데이터가 동반됩니다. 배지가 수여됩니다. 그러나 시각적 표현은 여전히 ​​일반적인 응용 프로그램을 가정합니다.
• 대부분의 StackExchange 사이트에서 이러한 요소는 경계가 튼튼하여 각 요소가 한 줄에 배치 될 때 각 요소 사이에 많은 부정적인 공간을 만듭니다.

my redesign 에서 나는 시각적 소음을 줄이기 위해 태그의 강도를 줄이려고 노력했지만 (아직 배지를 다루지 않았지만) 태그를 표현하는 좋은 방법을 찾지 못했습니다. 아직 적용된 횟수와 함께. 나는 몇 가지 아이디어를 가지고 있지만 아무도 생각하지 않습니다.

• 태그 클라우드로 렌더링하십시오. 이것은 더 많은 수평과 더 적은 수직 공간을 사용합니다. 그러나 태그 클라우드는 대부분 스캔 가능하고 읽을 수 없습니다. 그래도 문제인지 확실하지 않습니다.
• 태그와 여러 응용 프로그램의 조합에 대한 새로운 시각적 표현을 고려하십시오. 아마도 태그에 숫자를 포함시킴으로써 : <토론] x14는 <토론 | 14]가 될 것입니다. 또는 태그 요소의 높이를 높이고 이름 아래에 "14"를 배치하십시오. 전체적으로 더 많은 수직 공간을 차지하지만 각 행에 여러 개의 태그를 허용합니다.
• 특정 수의 응용 프로그램에 대한 참조를 제거하고 시각적 은유를 사용하여 적용 횟수를 나타냅니다. 아마도 온도계 팔레트를 사용하여 "핫"태그가 더 빨갛고 차가운 태그가 더 파란색 일 수 있습니다. 그러나 이것은 새로운 사용자에게는 즉시 명백하지 않을 것입니다.
• 특정 응용 프로그램 수에 대한 참조를 제거하고 대신 너비를 사용하여 뜨거움을 나타냅니다. 오른쪽 열에있는 태그가 넓을수록 더 인기가 있습니다. 그러나 위와 같이 처음에는 다소 혼란 스러울 수 있습니다.

질문 시간 : CSS 만 수정할 수 있고 변조 할 수없는 경우 오른쪽 열에 태그와 배지가 표시되는 방식을 재 설계하는 효과적인 방법은 무엇입니까? HTML?