카페 만월경 웹사이트 참고해서 분석 및 UX 기획 가이드 공부
카페 만월경 웹사이트(https://www.cafewhale.com/)
1. 그리드 시스템의 구성 요소
컬럼 (Column)
컬럼은 콘텐츠를 배치하는 영역으로, 그리드 시스템에서 가장 중요한 단위임
일반적으로 12컬럼 그리드를 많이 사용하며, 필요에 따라 8컬럼, 16컬럼 등으로 변경 가능함
반응형 디자인에서는 화면 크기에 따라 컬럼 수가 줄어들거나 변형됨
컬럼의 너비는 고정될 수도 있고, 유동적인 크기를 가질 수도 있음
마진 (Margin)
레이아웃 전체 바깥쪽 여백을 의미하며, 컨테이너의 경계와 화면의 끝 사이의 공간임
콘텐츠가 화면 끝에 너무 붙지 않도록 하기 위해 사용됨
일반적으로 양쪽 마진을 동일하게 설정하여 균형 잡힌 레이아웃을 구성함
거터 (Gutter)
컬럼과 컬럼 사이의 간격을 의미함
컬럼들이 너무 밀착되지 않도록 하고, 콘텐츠 간 여백을 유지하여 가독성을 높임
UI에서 정렬된 레이아웃을 만들 때 중요한 역할을 함
컨테이너 (Container)
그리드 시스템을 감싸는 전체적인 영역을 의미함
웹사이트의 전체적인 너비를 지정하며, 반응형 웹에서는 유동적 또는 고정형 컨테이너를 사용함
컨테이너는 내부에 컬럼을 포함하고 있으며, 좌우 마진과 함께 화면 중앙 정렬이 일반적임
2. 카페 만월경 웹사이트 분석 및 UX 기획 가이드
주요 기능과 UI 구조
카페 만월경 웹사이트는 브랜드의 감성을 강조하면서도 사용자가 정보를 쉽게 탐색할 수 있도록 설계되었음
홈페이지는 브랜드 아이덴티티를 강조하는 풀스크린 이미지와 감각적인 타이포그래피를 사용함
메뉴 페이지는 이미지 중심의 UI 구성으로 직관적인 메뉴 탐색을 지원함
스토어 페이지에서는 오프라인 매장 위치 및 정보를 제공하며 예약 기능이 포함됨
뉴스룸에서는 브랜드 소식 및 이벤트 정보를 제공함
멤버십 및 앱 기능을 통해 사용자 참여를 유도하며, 포인트 적립 및 멤버십 혜택을 안내함
내비게이션은 데스크탑에서는 수평 메뉴, 모바일에서는 햄버거 메뉴로 변경됨
사용된 그리드 시스템
카페 만월경 웹사이트는 12컬럼 그리드 시스템을 기반으로 디자인되었으며, 유동적인 레이아웃을 지원하기 위해 플루이드 그리드 방식을 사용함
데스크탑에서는 12컬럼 그리드를 적용하여 컬럼 너비는 고정하고, 여백은 가변적으로 설정됨
태블릿에서는 8컬럼 그리드로 변형되어 일부 사이드바 요소가 숨겨지거나 축소됨
모바일에서는 4컬럼 또는 단일 컬럼 구조로 변경되며, 콘텐츠가 세로 스크롤 중심으로 재배치됨
각 디바이스 해상도에 따라 미디어 쿼리를 활용하여 그리드가 동적으로 조정됨
반응형 디자인 전략
데스크탑 환경에서는 넓은 화면을 활용하여 여러 열의 레이아웃을 구성하며, 주요 콘텐츠와 사이드바를 배치함
풀스크린 이미지 및 대형 타이포그래피를 활용하며, 상단에 고정된 내비게이션 바를 사용함
태블릿 환경에서는 8컬럼 그리드를 적용하고, 일부 UI 요소가 축소되거나 접힘
내비게이션 바의 크기가 조정되며 일부 메뉴는 아이콘화됨
콘텐츠 크기는 텍스트 크기 자동 조절, 이미지 최적화 등을 통해 가독성을 유지함
모바일 환경에서는 단일 열 레이아웃이 적용되어 세로 스크롤 방식으로 콘텐츠가 배치됨
햄버거 메뉴 아이콘을 활용하여 내비게이션이 숨김 처리되며, 터치 최적화 버튼 및 인터랙션이 적용됨
디자인 시스템과 사용성의 균형
컬러 시스템은 브랜드 아이덴티티를 강조하는 크림색, 우드 브라운, 다크 그린 등의 따뜻한 색감으로 구성됨
타이포그래피는 브랜드 아이덴티티를 강조하기 위해 세리프 폰트를 사용하되, 본문에는 가독성을 고려한 산세리프 폰트를 적용함
UI 컴포넌트는 주요 액션 버튼은 명확한 대비를 주고, 보조 버튼은 낮은 대비를 적용하는 방식을 사용함
카드 레이아웃을 활용하여 메뉴 및 제품을 강조하고, 부드러운 페이드인 및 페이드아웃 효과를 적용하여 자연스러운 전환을 제공함
접근성을 고려하여 색상 대비를 준수하고 충분한 터치 영역을 확보하며, 반응형 인터랙션을 최적화함
디자이너와 개발자의 협업 방식
디자인 시스템 문서를 통해 Figma에서 컬러, 폰트, UI 컴포넌트를 정의하고 공유함
핸드오프 툴로 Zeplin을 활용하여 개발자가 정확한 스펙을 확인할 수 있도록 함
인터랙션이 포함된 프로토타입을 제작하여 개발자가 UI 동작을 직관적으로 이해할 수 있도록 함
코드 가이드 작성 시 CSS 변수 활용 및 UI 재사용을 위한 공통 컴포넌트를 구축함
실시간 커뮤니케이션을 위해 Slack, Notion, Jira 등을 활용하여 피드백 및 진행 상황을 공유함