보드게임메이트에 Meta의 Astryx를 적용해봤습니다

지난번 소개했던 보드게임메이트의 화면을 정리했습니다.

두 아이와 보드게임을 하며 만든 서비스인데, 기능을 하나씩 붙이다 보니 화면마다 버튼과 카드의 모양이 조금씩 달라져 있었습니다.

이번에는 Meta의 오픈소스 디자인 시스템 Astryx를 적용했습니다. 따뜻한 바탕과 녹색을 쓰는 Matcha 테마를 바탕으로, 버튼·입력창을 맞추고 정보가 보이는 순서도 손봤습니다.

가장 크게 바꾼 건 홈입니다.

긴 소개와 메뉴를 먼저 보여주던 화면에서, 가족에게 맞는 게임을 찾는 버튼과 실제 게임 사진이 먼저 보이도록 바꿨습니다.

다른 탭도 함께 정리했습니다.

• 검색: 나이·인원·시간을 바로 고르고, 사진·제목·컬렉션 버튼이 겹치지 않도록 카드 배치를 정리했습니다.
• 랭킹: 순위와 게임 이미지를 함께 보여주고, 분류 탭과 목록의 스타일을 맞췄습니다.
• 도구: 용도별 아이콘과 설명을 붙이고, 게임 이름으로 점수 계산기를 찾기 쉽게 다듬었습니다.
• 점수표: 입력칸을 키우고, 합계와 현재 선두가 더 잘 보이도록 했습니다.

적용하면서 느낀 점도 있습니다.

공통 테마를 연결해도 각 페이지에 예전 스타일이 남아 있으면 통일감이 생기지 않더라구요. 처음에는 홈 중심으로 바꿨다가, 검색·랭킹·도구 본문까지 다시 살펴보고 정리했습니다.

아직 사용성이 얼마나 좋아졌는지는 더 확인해봐야 합니다. 이번에는 “처음 들어온 사람이 무엇을 눌러야 할지 조금 더 쉽게 알 수 있는 화면”을 목표로 했습니다.

직접 써보시고, 게임을 찾거나 도구를 여는 과정에서 헷갈리는 부분이 있으면 알려주세요. 특히 아이와 함께 보드게임을 하시는 분들의 의견이 궁금합니다.

https://boardgamemate.com