인프런 커뮤니티 질문&답변
작성한 질문수
Stack 컴포넌트 관련하여 궁금한 점이 있습니다.
작성
·
25
0
Stack 컴포넌트 관련하여 궁금한 점이 있습니다.
해당 컴포넌트의 실용성은 '다양한 화면에서 동일한 간격으로 컴포넌트를 사용할 수 있다' 정도일까요?
더한다면, 추후 사용하는 Slot 컴포넌트를 활용하기 위함일 것 같은데 제가 현재 Slot 컴포넌트는 활용하고 있지 않아서..
궁금한 점이, 만약 버튼의 간격같은 것을 토큰화하여 해당 토큰으로만 사용을 한다면, 버튼 스택 컴포넌트의 활용도가 다소 떨어지게되는 것이 아닌가? 하는 생각에서 볼드 선생님의 의견이 궁금합니다
Stack 형태로 여러 컴포넌트를 활용하는 라이브러리들을 봤지만, 결국에는 적절한 수만큼 자유롭게 늘리는것이 어려워서, 처음에는 2개만 쌓아놨다가, 3개, 4개, 드롭다운 메뉴 등에서는 10개 20개까지 늘려버리는 경우를 종종 본 터라, 어떻게 생각하시는지 궁금합니다.
답변 1
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개가 보이고 스크롤 된다”까지만 보여주면 충분하고
나머지 값은 엑셀/데이터/개발 라이브러리에서 가져다 쓰는 구조가 더 현실적입니다.
질문 하신 부분에 대한 것은 정답은 없지만, 저의 생각을 정리해서 답변드립니다. 생각을 정리할 시간이 필요해서 다소 답변이 늦은 점 죄송합니다. 좋은 질문 주셔서 정말 감사합니다.