밝은 모드: 생생한 색상, 패턴 및 사용자 정의 블록 스타일이 포함된 새로운 블록 테마

StudioPress의 설립자이자 Genesis Framework의 공동 제작자인 Brian Gardner는 Bright Mode라는 디렉토리에 새로운 블록 테마를 가지고 있습니다. 테마는 세련된 그라디언트가 있는 생생한 색상 팔레트, 아름답게 디자인된 14개의 블록 패턴 및 사용자 정의 블록 스타일에 많은 재미있는 변형이 포함되어 있습니다.

패턴과 템플릿으로 인해 거의 모든 사용 사례를 지원할 수 있을 만큼 유연하기 때문에 많은 블록 테마에 대해 틈새 시장을 정하기가 어렵습니다. 밝은 모드는 이 범주에 속합니다. 비즈니스 또는 개인 웹사이트, 블로그 또는 포트폴리오로 쉽게 사용할 수 있습니다.

자세히 보면 가드너의 트레이드마크 스타일의 미묘한 힌트를 볼 수 있습니다. 타이포그래피와 간격에 세심한 주의를 기울인 솔직하고 미니멀합니다. 색상은 밝지만 조화롭고 균형이 잡혀 있어 전문적인 상황에서 밝은 모드를 사용하는 것을 배제하지 않습니다.

Gardner는 모든 것이 막 시작되던 초기 WordPress 테마의 OG 테마 작성자 중 한 명으로서 독특한 관점을 가지고 있습니다. 그는 자신의 Revolution 테마로 상업 테마 생태계를 시작하는 데 도움을 주었고 블록 테마의 새로운 세계에 동일한 선구자 정신을 계속해서 제공하고 있습니다.

Gardner는 "지난 여름에 블록 패턴과 패턴 디렉토리(당시 베타 버전)에 대해 Justin Tadlock이 작성한 기사를 읽었습니다."라고 말했습니다. "그는 그것에 연결했고 나는 몇 분 동안 여기저기를 클릭했습니다. 드디어 멋있다고 생각한 패턴을 보고 '패턴 복사' 버튼을 눌렀습니다. 이 모든 것이 어떻게 작동하는지 보고 싶었기 때문에 블로그에 게시물을 열고 코드를 붙여넣었습니다. 짜잔, 거기 있었어요. 그 순간 현대 워드프레스의 잠재력이 내 앞에 번쩍였다는 것을 알았습니다.”

Gardner의 새로운 테마는 패턴을 사용하여 데모에서 볼 수 있는 모든 섹션을 정의합니다. 밝은 모드는 제목, 텍스트 및 버튼이 있는 표지 이미지, 여러 평가, 다양한 쿼리 레이아웃, 여러 바닥글 및 머리글 디자인을 포함하여 사용자가 사이트에 삽입할 수 있는 다채로운 패턴 배열을 제공합니다. 데모를 보고 샘플 콘텐츠와 함께 작동하는 모든 것을 확인하십시오.

Gardner는 현재 Bright Mode의 컬렉션에 추가할 더 많은 패턴을 만들고 있습니다. 그는 다음에 올 가능성이 있는 것은 영웅 섹션, 추천 상자, 클릭 유도문안, 링크 페이지 및 포트폴리오 패턴이라고 말했습니다.

Gardner는 "밝은 모드의 디자인을 반복하는 데 몇 달을 보냈기 때문에 두 가지를 달성해야 한다고 느꼈습니다. 배송하고 더 추가할 수 있는 문을 열어 두었습니다."라고 말했습니다.

밝은 모드를 처음 설치하고 사용자 지정을 클릭하면 데모처럼 보이지 않습니다. 사용자는 스크린샷에 더 가깝게 보이도록 패턴을 삽입해야 합니다. 나는 Gardner에게 기본적으로 데모와 일치하도록 홈 페이지에 패턴을 삽입하는 것에 대해 물었고 그는 그것이 향후 업데이트의 가능성이 있다고 말했습니다.

"기본적으로 패턴을 삽입하는 경우 유용할 수 있는 유일한 인스턴스는 단순히 환영 패턴인 밝은 모드 홈 페이지와 아래의 그리드 루프입니다."라고 그는 말했습니다. "물론 더 많은 패턴을 추가하면 업데이트의 일부가 될 수 있습니다."

이 테마의 독특한 기능 중 하나는 제목 블록에 텍스트에 대한 다양한 색상 그라디언트를 만드는 재미있는 블록 스타일 세트가 있다는 것입니다.

Gardner는 "접근성과 색상 대비가 이 테마의 디자인에서 가장 중요하여 색상 페이지까지 만들었습니다."라고 말했습니다. 그는 새로 출시된 많은 FSE 테마에 색상에 대한 의도적인 접근 방식이 없다는 점을 감안할 때 더 많은 테마 작성자가 색상을 고려하도록 고무하는 것을 목표로 합니다. Gardner는 테마 전체에 걸쳐 다양한 블록 스타일에 사용되는 기본, 2차 및 3차 색상 세트를 식별했습니다.

Gardner는 "기본, 2차 및 3차 색상은 일반 텍스트, 큰 텍스트, 그래픽 개체 및 사용자 인터페이스 구성 요소에 대한 WCAG 2.0 레벨 AA 및 WCAG 레벨 AAA 대비 테스트를 모두 통과했습니다."라고 말했습니다.

스타일 가이드를 보면 버튼, 따옴표, 소셜 아이콘에 적용된 색상을 확인할 수 있습니다.

밝은 모드는 Quotes 블록 내에서 다양한 스타일 옵션을 제공합니다. 그들은 평범하거나 컬러 배경 또는 그라데이션 배경을 가질 수 있습니다. 배경이 없는 인용문에도 색상 그라데이션 밑줄이 적용될 수 있습니다. 이것에 대한 좋은 점은 이것이 견적별로 변경될 수 있고 각 블록 견적에 대해 동일할 필요가 없다는 것입니다. 사용자는 다양한 디자인으로 견적을 사용자 정의하는 데 많은 재미를 느낄 수 있습니다. 그 중 몇 가지가 아래에 나와 있습니다. 사이트 전체에서 드물게 사용하면 매우 인상적입니다.

Gardner가 테마에 대해 가장 좋아하는 Bright Mode의 측면 중 하나는 Cover Block이 단일 페이지에 사용되는 방식입니다. 추천 이미지를 Cover 블록으로 가져오고 그림자 및 전체 높이 옵션에 대한 사용자 정의 블록 스타일도 제공합니다. (대체는 제목이 있는 검은색 헤더일 뿐입니다.) Gardner는 "이것이 현대 WordPress에서 가능한 것을 실제로 보여주는 것 같습니다."라고 말했습니다.

테마를 테스트한 후 블록 스타일에서 발견할 수 있는 숨겨진 보석이 얼마나 많은지, 모든 측면에서 사용자가 얼마나 창의적으로 제어할 수 있는지에 놀랐습니다. 내가 변경할 수 있는 유일한 것은 홈 페이지가 데모와 유사하게 보이도록 하여 사용자가 데모를 재현하기 위해 패턴을 찾아 헤매지 않고도 견고한 시작 지점이 있다고 느낄 수 있도록 하는 것입니다. Gardner는 미학적으로 즐거운 패턴을 만드는 데 재능이 있으며 이 경우 그가 계획하고 있는 보다 다양한 세트(포트폴리오, 클릭 유도문안 등)를 통해 더 많은 상황에서 밝은 모드를 사용할 수 있습니다.

많은 전통적인 테마 작성자가 여전히 테마 디렉토리에서 더 많은 가시성을 확보하기 위해 테마를 차단하는 것에 대해 약간의 저항을 가지고 있지만, Gardner는 WP Engine에서 개발자 옹호자로 하루 일을 할 수 있는 특권을 누리며 여기에서 커뮤니티에 참여하고 사용자가 블록 편집기 및 전체 사이트 편집.

Gardner는 "기본적으로 Gutenberg 개발 속도와 WordPress의 새로운 기능에 보조를 맞추는 것이 내가 하는 일입니다."라고 말했습니다. "자연스럽게 이것은 Frost에서 하는 것처럼 테마를 쉽게 실험하고 빌더를 위해 새로 출시된 사이트와 같은 리소스를 제공합니다. 게다가 밤과 주말에는 자유 시간을 보내며 창의적으로 어디까지 할 수 있는지 깊이 파고든다”고 말했다.

브라이트 모드는 블록 테마로 가능한 것에 대한 개인적인 탐구의 결과입니다. WordPress.org 또는 관리자 내부의 테마 설치 화면을 통해 무료로 사용할 수 있습니다. 테마에 대한 향후 업데이트에서 더 많은 패턴, 템플릿 및 변형이 제공될 예정입니다. 밝은 모드는 디렉토리의 첫 100개 블록 테마 중 하나로 WordPress.org가 오늘 통과한 이정표입니다.