4 asked

0

안녕하세요, 허이짜님.

제가 생각하는 Stack 컴포넌트의 실용성은 “여러 화면에서 동일한 간격을 유지한다”를 넘어, 반복되는 배치 패턴을 규칙으로 고정해서 디자인/개발 모두의 결정 비용을 줄여주는 것에 더 가깝다고 생각합니다.

Stack이 간격 외에 줄 수 있는 장점을 예로 들자면..

버튼 스택의 경우, 간격(spacing)만 통일하는 게 아니라 아래 같은 것들이 같이 정리될 수 있어요.

• 방향: 가로/세로, 또는 모바일에서 세로로 자동 전환 등

• 정렬: 왼쪽 정렬 / 오른쪽 정렬 / 양쪽 끝 정렬(space-between)

• 레이아웃: 버튼이 콘텐츠만큼(Hug)인지, 부모 폭을 꽉 채우는(Fill)인지

• 우선순위 패턴: 주요 버튼이 오른쪽에 오는지, 양쪽에 나뉘는지 등

   

즉 Stack은 “간격 컴포넌트”라기보다, 자주 쓰는 조합을 ‘하나의 레이아웃 규칙’으로 묶는 도구로 보는 편이 더 맞는 것 같습니다.

“간격 토큰만 쓰면 Stack 활용도가 떨어지지 않나?”에 대한 생각에 대해서는버튼 간격을 토큰화해서 모두가 그 토큰만 쓰게 된다면, ‘간격을 통일하는 목적’만 놓고 보면 Stack의 이점이 줄어드는 건 맞아요.

다만 Stack의 장점은 간격 하나가 아니라, 앞에서 언급했드이 간격 + 방향 + 정렬 + 폭 정책 같은 레이아웃 결정을 한 번에 묶어서 화면마다 “이거는 gap 8일까 12일까 / fill일까 hug일까 / 오른쪽 정렬일까?” 같은 고민을 줄이는 데 있어요.

그래서 토큰이 잘 되어 있어도 Stack은 여전히 의미가 있고, 오히려 “토큰을 올바르게 쓰게 만드는 안전장치” 역할도 할 수 있다고 생각합니다.

“2개 → 3개 → 10개 → 20개로 늘어나서 Stack이 애매해지는 이 부분은 저도 공감합니다. 그래서 저는 Stack을 ‘무한 확장 가능한 만능 컨테이너’로 설계하기보다는, 용도가 명확한 Stack을 따로 두는 방식을 선호해요.

예를 들어:

• ButtonStack: 보통 1~3개(많아도 4개) 정도를 전제로 한 패턴

• MenuList / DropdownList: 10개, 20개 이상 늘어날 수 있는 리스트 전용 패턴

특히 드롭다운처럼 항목 수가 무한대로 늘어나는 케이스는, 말씀하신 것처럼 “스택 갯수 예시를 전부 UI로 다 보여주기”보다 보이는 영역은 최대 높이/표시 개수를 제한하고(스크롤), 나머지는 예시 데이터로 채우는 형태를 원칙으로 추천드립니다.

예: 국제 전화번호처럼 리스트가 길 경우

• UI 예시는 “열었을 때 최대 N개가 보이고 스크롤 된다”까지만 보여주면 충분하고

• 나머지 값은 엑셀/데이터/개발 라이브러리에서 가져다 쓰는 구조가 더 현실적입니다.

질문 하신 부분에 대한 것은 정답은 없지만, 저의 생각을 정리해서 답변드립니다. 생각을 정리할 시간이 필요해서 다소 답변이 늦은 점 죄송합니다. 좋은 질문 주셔서 정말 감사합니다.