점점 늘어나는 작은 가상 펫 컬렉션을 표시하는 방법

작은 펫은 주로 시각적인 요소이므로 규칙적인 그리드가 좋은 출발점입니다. 동일한 크기의 셀을 사용하고, 왼쪽에서 오른쪽으로, 위에서 아래로 이어지는 일관된 읽기 순서를 유지하세요. 이렇게 하면 새로 추가된 펫이 예측 가능한 위치에 배치되어 다시 방문한 수집가가 갤러리를 훑어보는 데 도움이 됩니다. Apple은 시각적 컬렉션에 친숙한 행 또는 그리드 레이아웃을 권장하며, Material Design에서는 가벼운 그리드 타일이 이미지 갤러리에 적합하다고 설명합니다. (Apple 휴먼 인터페이스 지침: 컬렉션, Material Design: 카드)

각 셀에 펫 이미지와 이름을 표시할 수 있는 충분한 공간을 확보하세요. 모든 펫과 함께 이름, 유형 또는 간단한 상태를 표시해야 한다면 테두리, 버튼, 장식 요소가 들어간 완전한 카드를 추가하는 대신 명확한 위계를 가진 단순한 타일을 사용하세요. Material의 지침에서는 이미지 갤러리를 항목마다 콘텐츠나 동작이 다양한 경우에 더 유용한 카드와 구분합니다. 대부분 균일한 형태의 펫 세트라면 불필요한 카드 프레임이 오히려 컬렉션에 대한 집중을 방해합니다.

컬렉션이 사용 가능한 화면 영역을 넘어 커지면 그리드 하나로 모든 펫을 한 번에 보여줄 수 없습니다. 한눈에 최대한 많은 수를 보기, 이름으로 특정 펫을 빠르게 찾기, 추천 디스플레이를 즐기기 등 주요 목표를 하나 선택하세요. 이러한 목표에 따라 적합한 레이아웃이 달라집니다.

주요 목표	유용한 디스플레이 선택지	장단점(절충점)
많은 펫 훑어보기	조밀하고 균일한 그리드	개별 펫이 차지하는 공간이 줄어듦
알고 있는 펫 찾기	그리드에 검색 또는 가나다순 정렬 추가	컨트롤이 일부 화면 공간을 차지함
소수의 즐겨찾기 표시	그리드 상단의 추천 행 또는 더 큰 디스플레이 영역	전체 컬렉션의 더 많은 부분이 아래쪽에 위치함
펫 세부 정보 비교	목록 또는 상세 뷰	초기 화면에 들어가는 펫의 수가 줄어듦

추천 영역은 컬렉션을 대체하는 것이 아니라 컬렉션을 들여다보는 작은 창으로 다루어야 합니다. 예를 들어 상단에 소수의 즐겨찾기를 표시하고 그 아래에 전체 그리드를 유지하는 식입니다. Android의 반응형 펫 갤러리 샘플은 눈에 띄는 펫 영역과 레이아웃 공간이 넓어질수록 더 많은 펫을 표시할 수 있는 그리드를 사용합니다. 이는 추천 영역에 시각적 우선순위를 부여하면서도 그 아래에 둘러볼 수 있는 갤러리를 유지하는 일반적인 디자인 선택을 뒷받침합니다. (Android Developers: 털복숭이 친구들과 적응형 API)

그리드가 길어지면 수집가가 펫에 대해 생각하는 방식과 일치하는 카테고리를 사용하여 그리드를 나누세요. 종이나 세계관, 컬렉션 세트, 색상 계열, 획득 시기 등이 선택지가 될 수 있으며, 컬렉션에 실제로 존재하는 카테고리만 사용해야 합니다. 처음에는 적은 수의 그룹으로 시작하세요. 너무 잘게 쪼갠 섹션이 많아지면 서로 다른 별개의 컬렉션을 오가는 것처럼 느껴질 수 있습니다.

"모든 펫"과 같이 명확한 기본 뷰를 하나 유지하고, 현재 활성화된 그룹이 눈에 띄도록 하세요. 펫이 둘 이상의 그룹에 속할 수 있다면 동일한 펫을 여러 섹션에 중복 배치하는 것보다 필터를 사용하는 것이 대체로 더 명확합니다. 각 펫이 정확히 하나의 고정된 그룹에 속한다면 라벨이 지정된 섹션을 통해 전체 컬렉션을 더 쉽게 훑어볼 수 있습니다. 이는 콘텐츠 구조에 맞춰 콘텐츠를 배열하는 실질적인 적용 방법입니다. 가장 적합한 그룹화는 범용적인 카테고리 체계가 아니라 컬렉션의 실제 속성에 따라 결정됩니다.

소유자는 펫 이미지만 보고도 알아볼 수 있지만, 목록이 늘어나고 비슷하게 생긴 변종을 구별하는 데는 이름이 도움이 됩니다. 각 썸네일 바로 아래에 짧은 이름을 넣으세요. 두 마리의 펫이 이름을 공유할 수 있다면 세트나 형태와 같은 간결한 보조 식별자를 하나 추가하세요. 모든 타일에 여러 개의 능력치 수치, 배지, 컨트롤을 넣는 것은 피해야 합니다. 이러한 세부 정보는 이미지와 시선 경쟁을 벌여 그리드를 복잡하게 만듭니다.

디스플레이가 웹사이트나 앱의 일부라면 펫의 식별 정보를 이미지뿐만 아니라 텍스트로도 제공해야 합니다. W3C 지침에 따르면 정보를 전달하는 이미지는 관련 정보를 전달하는 대체 텍스트가 필요하지만, 인접한 라벨에서 이미 동일한 정보를 제공하는 경우 이미지의 대체 텍스트로 이를 반복할 필요는 없습니다. 실제로 화면에 보이는 이름과 적절한 접근성 라벨을 짝지어 사용하고, 고유한 펫을 색상이나 이미지만으로 구별하게 만들지 마세요. (W3C WAI: 이미지 튜토리얼)

모든 화면에 고정된 열 수를 강제하기보다는 사용 가능한 너비에 따라 열 수를 변경하세요. 작은 스마트폰 화면에서는 2개의 열을 표시할 수 있고, 더 넓은 화면에서는 각 이미지와 이름의 가독성이 유지되는 한 더 많은 열을 표시할 수 있습니다. 레이아웃이 유연하게 바뀌더라도 간격을 일정하게 유지하고 기본적인 순서를 보존하세요. Android의 적응형 디자인 예시에서는 소형 화면에서 2열 갤러리를 사용하고 공간이 더 확보되면 더 많은 콘텐츠를 표시하는 방식을 설명합니다. (Android Developers: 털복숭이 친구들과 적응형 API)

사람들이 사용할 가능성이 가장 높은 가장 좁은 크기와 넓은 데스크톱 크기에서 디스플레이를 확인하세요. 이름이 잘리거나, 이미지가 고유한 디테일을 잃거나, 타일 높이가 일정하지 않거나, 컨트롤이 어색하게 줄 바꿈되는 현상이 없는지 살펴보세요. 특정 펫의 이름이 길어져야 한다면 의도적으로 두 번째 줄을 허용하거나 전체 이름을 볼 수 있는 방법과 함께 일관되게 말줄임표 처리를 하세요. 특이한 항목 하나 때문에 전체 그리드가 흐트러져서는 안 됩니다.

컬렉션 크기가 작다면 그리드 하나를 스크롤하는 것만으로 충분할 수 있습니다. 더 긴 목록에서 알고 있는 펫을 찾아야 할 때 검색 기능을 추가하세요. 가나다순이나 펫이 추가된 시기 등 순서가 중요할 때 정렬 기능을 추가하세요. 항목을 구별하는 데 도움이 되는 속성에만 필터를 추가하세요. 이러한 컨트롤은 결과 위에 배치하고 선택한 정렬 또는 필터를 표시하여 현재 뷰의 상태를 쉽게 파악할 수 있도록 하세요. Material의 컬렉션 지침에서는 필터링과 정렬을 카드 외부로 배치하여 각 항목이 콘텐츠 자체에 집중할 수 있도록 권장합니다. (Material Design: 카드)

진행 상황을 가늠할 수 없는 무한 스크롤에만 의존하지 마세요. 전체 컬렉션 수, 섹션 제목, 명확한 "더 보기" 버튼 등이 표시되면 얼마나 더 남아 있는지 이해하는 데 도움이 됩니다. 이는 필수 사항이 아닌 선택적 요소이므로 시각적인 복잡성을 더하지 않으면서 탐색 위치를 파악하는 데 도움이 되는 가장 가벼운 방식을 선택하세요.

비슷하게 생긴 펫과 이름이 가장 긴 펫을 포함하여 대표적인 펫 몇 마리를 추가한 다음 모바일과 데스크톱 너비에서 컬렉션을 검토해 보세요. 다음 사항을 자문해 보세요. 각 펫을 알아볼 수 있는가? 이름을 읽을 수 있는가? 현재 그룹이나 정렬 상태를 이해할 수 있는가? 추측에 의존하지 않고 전체 컬렉션에 접근할 수 있는가? 모든 항목을 하나하나 훑어보지 않고도 익숙한 펫을 찾을 수 있는가? 이미지가 여전히 핵심 초점으로 유지되는가?

식별하기 어렵다면 타일을 확대하거나 눈에 보이는 세부 정보를 줄이세요. 항목을 찾기 어렵다면 이름 검색이나 적절한 정렬을 추가하세요. 첫 화면이 너무 복잡하게 느껴진다면 작은 추천 영역을 따로 마련하고 전체 컬렉션은 그 아래에 두세요. 한 번에 하나씩 변경하고 컬렉션이 늘어남에 따라 점검을 반복하세요. 올바른 디스플레이란 사용자가 사용하는 크기와 밀도에서 실제 작업 흐름을 안정적으로 지원하는 디스플레이입니다.

• Apple Developer, “Collections” — https://developer.apple.com/design/human-interface-guidelines/collections
• Material Design, “Cards” — https://m1.material.io/components/cards.html
• Android Developers, “Furry friends and adaptive APIs” — https://developer.android.com/design/ui/gallery/social/pawparazzi
• W3C Web Accessibility Initiative, “Images Tutorial” — https://www.w3.org/WAI/tutorials/images/