Awwwards
강한 헤드라인과 카드 배열이 화면을 끌고 갑니다
상단은 강하게, 중단은 카드로 넓게, 하단은 메타와 보조 정보로 정리하면 탐색형 화면이 살아납니다.
오늘의 소스는 서로 결이 달랐지만 공통적으로 여백, 명확한 메타 정보, 읽기 쉬운 카드 구조를 밀고 있었습니다.
상단은 강하게, 중단은 카드로 넓게, 하단은 메타와 보조 정보로 정리하면 탐색형 화면이 살아납니다.
편집형 레이아웃은 텍스트 양이 많아질수록 위계를 더 명확하게 해야 합니다. 링크, 제목, 설명의 관계가 핵심입니다.
경계를 너무 많이 긋지 않고도 박스와 카드가 구분되게 만드는 쪽이 훨씬 요즘 감각입니다.
오늘은 Awwwards 웹사이트 컬렉션을 기준점으로 삼았습니다. 카드 기반 발견 흐름이 명확해서, 포트폴리오형 화면에 잘 이식됩니다.
화려한 장치보다 정보 구조가 먼저 보였습니다. 그래서 우리 프로덕트에 맞는 차분한 카드형 발견 화면으로 옮기기 좋았습니다.
초안에서 바로 손본 부분을 남깁니다. 더 편하게 읽히도록 색과 여백, 카드 밀도를 조절했습니다.
어두운 배경을 과하게 쓰지 않고 라이트를 기본값으로 두어 첫 화면 피로도를 낮췄습니다.
헤드라인과 메트릭 크기 차이를 더 벌려서 정보 우선순위가 바로 보이게 했습니다.
980px 이하에서 모든 그리드를 한 줄로 접어, 작은 화면에서도 카드 흐름이 끊기지 않게 했습니다.