‘자유로운 웹 구축’ 이라는 본래의 목표

워드프레스는 초창기부터 콘텐츠 관리의 혁신을 선도해 왔습니다. 초기에는 고정된 레이아웃과 제한된 커스터마이징 옵션으로 시작했지만, 사용자의 요구에 따라 지속적으로 발전해왔습니다. 그 중에서도 블록 테마는 워드프레스의 중요한 진화 중 하나입니다. 블록 테마는 워드프레스 사용자에게 더욱 유연하고 직관적인 웹사이트 구축 경험을 제공합니다. 기존 테마에서는 PHP 코드를 수정하거나 테마 파일을 직접 편집해야 했던 작업들이 블록 테마에서는 간단한 드래그 앤 드롭 방식으로 해결됩니다. 이는 코딩 지식이 없어도 누구나 쉽게 자신만의 웹사이트를 만들 수 있도록 해주며, 사용자 친화적인 경험을 제공합니다.

또한 블록 테마는 ‘사이트 전체 편집(Full Site Editing)’ 기능을 통해 헤더, 푸터, 페이지 콘텐츠 등 웹사이트의 모든 영역을 하나의 통합된 인터페이스에서 관리할 수 있게 해줍니다. 이로 인해 워드프레스 사용자는 더 이상 테마의 제한에 얽매이지 않고, 자신의 창의력을 발휘해 웹사이트의 모든 부분을 자유롭게 디자인할 수 있습니다.

결국, 블록 테마는 워드프레스가 ‘자유로운 웹 구축’이라는 본래의 목표를 더 효과적으로 달성할 수 있게 하며, 개인 블로거부터 대형 기업까지 모든 사용자가 빠르고 효율적으로 자신만의 웹사이트를 만들 수 있는 강력한 도구입니다. 블록 테마를 채택하는 것은 단순한 선택이 아닌, 워드프레스의 미래에 발맞춰 나가는 필연적인 변화입니다.

페이지로 사용할 몇가지 샘플을 준비해봤어요.
패턴을 조합해서 더욱 멋진 페이지를 만들어 보세요.

클릭 한번으로 아름다운 디자인

디자인 전문가가 만들어낸 1,000개 이상의 디자인 패턴을 사용해서 몇분안에 디자인을 뚝딱 만들어 낼 수 있습니다. 이제 컨텐츠에만 집중하세요. 디자인은 걱정 할 필요가 없습니다. 제목, 구분선, 이미지, 슬라이더 등 필요한 요소에 맞게 사용할 수 있도록 구분되어 다양한 컨텐츠에 쉽게 디자인을 완성할 수 있도록 제작되었습니다.

패턴 디자인 사용법

디자인 전문가가 만들어낸 1,000개 이상의 디자인 패턴을 사용해서 몇분안에 디자인디자인 블록 패턴만 많다고 생각하시면 섭섭합니다. 우리는 코어 블록의 스타일을 300개 이상 제작해서 언제 어느때나 쉽게 사용할 수 있도록 스타일을 적용할 수 있습니다. 박스 그림자, 형태 변환, 애니메이션 등 여러분이 생각하는 웹사이트를 제작하는 요소 대부분이 제작되어 있으며 편리하게 관리할 수 있는 기능을 제공합니다.

테마가 지겹다면 다른 테마로 쓱! 바꿔보세요.

헬로우판다는 기본적으로 모든 플러그인을 직접 제작합니다. 따라서 테마에 사용하지 않는 무의미한 플러그인은 제작하지 않으며, 실제로 웹사이트에 사용될만한 플러그인만 가볍게 개발하기 때문에 매우 가벼운 코드를 자랑합니다. 팝업창의 경우도 다양한 블록 중 하나에 해당하지만, 팝업창을 특별한 기능이라고 생각하시는 분들도 계시기 때문에 별도로 소개합니다.

팝업창은 간단하게 토글 기능을 활용해서 비활성화 할 수 있으며, 내부에 들어가는 모든 디자인은 직접적으로 개발이 가능하도록 설계되어 있습니다. 이 모든 기능들은 당연히 블록 테마를 바탕으로 하고 있기 때문에 워드프래스의 모든 블록 기능들을 활용해서 아름다운 팝업창을 직접 꾸밀 수 있습니다. 이 테마에서 사용된 팝업창도 이 블록으로 만든 기능입니다.

웹사이트의 크기, 색상, 폰트를 변경

헬로우판다는 테마를 변경하는 기능 외에도 웹사이트의 크기, 글로벌 여백, 폰트 CDN 설정, 웹사이트 색상 등 다양하 설정을 변경할 수 있는 기능을 제공합니다. 혹시라도 잘 못 설정했다면, 초기 값으로 돌릴 수 있는 리셋 기능을 제공하기 때문에 맘 편하게 얼마든지 변경을 해보고 마음에 드는 모습으로 운영할 수 있습니다.

이 기능은 각 테마별로 다른 설정 값을 가지고 있기 때문에 그에 맞게 조금씩 수정하면서 가장 마음에 드는 레이아웃을 선택하실 수 있습니다. 또한 Primary, Secondary, Base, Contrast 색상을 간단히 변경해서 강조되는 색과 배경색, 전경색을 원하시는대로 설정이 가능하기 때문에 완전히 다른 사이트를 구성할 수도 있습니다.

직접 개발된 99%의 플러그인

헬로우판다는 기본적으로 모든 플러그인을 직접 제작합니다. 따라서 테마에 사용하지 않는 무의미한 플러그인은 제작하지 않으며, 실제로 웹사이트에 사용될만한 플러그인만 가볍게 개발하기 때문에 매우 가벼운 코드를 자랑합니다. 팝업창의 경우도 다양한 블록 중 하나에 해당하지만, 팝업창을 특별한 기능이라고 생각하시는 분들도 계시기 때문에 별도로 소개합니다.

팝업창은 간단하게 토글 기능을 활용해서 비활성화 할 수 있으며, 내부에 들어가는 모든 디자인은 직접적으로 개발이 가능하도록 설계되어 있습니다. 이 모든 기능들은 당연히 블록 테마를 바탕으로 하고 있기 때문에 워드프래스의 모든 블록 기능들을 활용해서 아름다운 팝업창을 직접 꾸밀 수 있습니다. 이 테마에서 사용된 팝업창도 이 블록으로 만든 기능입니다.

미니멀리즘과 타이포그라피의 조합

헬로우판다는 현대적인 디자인을 추구하지만, 많은 사용자들이 요구하는 블록에 대한 욕구를 해소해드리고자 노력하고 있습니다. 아래에 소개해드리는 타이포그라피에 도움이 되는 애니메이션 블록들이 그 중 일부이며, 앞으로도 사용자들이 원하는 블록이 있다면 끊임없이 개발을 해서 선보일 예정입니다.

타이핑 블록, 마스크 블록, 마퀴태그 블록은 각각의 스타일을 별도로 설정할 수 있는 기능을 갖고 있습니다. 예를 들어 타이밍 되는 속도, 화면에 있을때만 보여주거나, 그것을 반복할수도 있습니다. 마우스 커서를 보여주거나 끌 수 있으며, 글자가 삭제되는 타이밍도 설정할 수 있습니다. ease 기능은 cubic 같은 복합적인 타이밍을 제공하며, 마퀴태그 블록은 글자가 흘러가는 시간을 설정할 수 있도록 제작되었습니다. 이 모든 블록이 헬로우판다에 포함되어 있습니다.

간단한 코드를 입력할 수 있는 커스텀 블록

이 두 블록은 웹사이트에 외부 코드를 입력할 때 활용할 수 있습니다. 예를 들어 광고를 담는다던가, 외부 스크립트를 삽입한다던가 하는 기능으로 활용할 수 있습니다. 구글 애드센스를 넣거나 혹은 네이버 지도를 넣기도 합니다. 광고 분석 스크립트를 넣을 수도 있고, 다른 사이트를 홍보하는 배너를 삽입할수도 있습니다.

가장 보편적으로 사용되는 구글 지도의 모습입니다. API를 이용하지 않고 간단하게 IFRAME 으로 제공하면서 사용자 편의성을 높였습니다. 복잡한 코드를 삽입해야 할 때도 활용할 수 있지만 블록 테마는 기본적으로 많은 양의 코드를 저장하는것을 권장하지는 않으니 기본적인 코드만 삽입하시는게 좋겠습니다.

아름다운 유튜브 영상을 배경으로 활용

이 블록은 유튜브 영상을 배경으로 활용할 수 있는 블록입니다. API가 아닌 Iframe을 활용했기 때문에 기술적인 추가 작업이 필요하지 않습니다. 또한 반응형 코드를 지원하도록 설계 했고, 풀사이즈가 될 수 있는 코드 트릭도 일부 구현되었습니다. 시작시간, 종료시간 설정 및 풀사이즈로의 변환에 대한 기능을 제공합니다. 또한 화면의 비율을 선택할 수 있는 옵션을 통해서 원하는 모습으로 유튜브 영상을 배경으로 설정할 수 있습니다.

최 상단의 영상으로 확인할 수 있습니다 ↑

구글 메테리얼 아이콘을 손쉽게 설정

Hellopanda 테마는 아이콘 폰트를 구글 메테리얼 아이콘을 채택했습니다. 가장 신뢰가 가는 구글 서비스 중 하나입니다. 메테리얼 심볼은 다양한 디자인 변형이 포함된 단일 글꼴 파일에 3,271개 이상의 글리프를 통합한 최신 아이콘입니다. 기호는 세 가지 스타일과 네 가지 조정 가능한 가변 글꼴 스타일(채우기, 무게, 등급 및 광학 크기)로 제공됩니다.

CDN 으로 css를 불러오기 때문에 구글에 서버 상태에 따라 속도 차이가 있을 순 있겠으나 워낙에 많이 쓰는 폰트라 사용자 컴퓨터에 캐싱 되어 있을 확률이 높아 속도면에서는 어떤 CDN 보다 빠를 것 같습니다. 사용중인 옵션은 Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0 입니다. 버전에 따라 아이콘이 나오지 않을 수 있으나 그런 경우는 거의 없다고 보는게 좋습니다.

수치를 표현하고 싶을 때 간단히 활용

이 블록은 개인적으로 애착이 많이 가능 프로그래스 바 블록 입니다. 막대형, 원형 두가지의 프로그래스바를 지원합니다. 기본적으로 이 블록은 3가지의 영역이 있는데 텍스트, 값, 배경 이 블록 세개의 디자인을 모두 별도로 설정할 수 있습니다. 아래 보여드리는 디자인은 그 중 몇가지이며, 수백, 수천가지 이상의 디자인을 만들어낼 수 있는 확장성이 뛰어난 블록입니다. 모두 보여드리고 싶은데 그럴 수 없는게 아쉬울 따름입니다.

프로그래스바는 모든 영역이 SVG로 구성되며, 블록 테마의 설정으로 반응하도록 설계 되었습니다. 때문에 화면이 커지거나 작아져도 모습을 그대로 유지하여 디자인을 해치지 않는 백터형 디자인이라고 생각하시면 됩니다.

디자이너들이 좋아하는 토글형 블록

이 블록은 블록테마의 단점을 보완할 수 있는 몇개 안되는 position 을 설정할 수 있는 블록입니다. Block 타입으로 설정을 할 수 있지만 토글 컨텐츠 특성상 포지션을 설정하는 경우가 많습니다. 아래 디자인은 Footer 에서 자주 자용되는 패밀리사이트로 이동할 수 있는 토글 블록 이며, 간단한 예시일 수 있습니다.

이 블록은 메뉴를 구성할수도 있으며, 때때로 Tooltip의 역할을 수행하기도 합니다. 워낙에 확장성이 넓은 블록인 만큼 디자이너들이 너무나 좋아할 수 밖에 없는 커스텀 블록입니다. 기본적으로 메인 컨텐츠, 오버레이 컨텐츠 두영역으로 나뉘어져 있으며, 포지션이 설정 될 경우 닫기 버튼을 함께 제공합니다. ( 삭제하셔도 괜찮아요 ) 그리고 오버레이의 방향을 설정할 수 있는 옵션과 애니메이션을 설정할 수 있는 옵션도 함께 제공하기 때문에 다양한 디자인으로 활용할 수 있습니다. 헬로우판다 테마에서도 몇가지 테마는 이 블록을 이용해서 상단의 큰 메뉴를 구성했습니다.

마우스 오버, 마우스 클릭 등 인터렉션을 선택할 수 있고, Fade In, Slide up, Zoom in 등 다양한 트랜지션 효과를 제공하기 때문에 디자이너 분들이 활용하시면 깜짝 놀랄 만큼의 효과를 낼 수 있습니다.

확장성이 무궁무진한 아코디언

이 블록은 많은 컨텐츠를 숨겨서 섹션별로 보여줄 수 있는 아코디언 블록 입니다. 고정된 스타일이 아닌 모든 블록 디자인을 활용할 수 있는 블록으로 이루어져 있습니다. QNA, 자주 묻는 질문 외에도 제품 소개에도 활용될 수 있는 만능형 블록입니다. 어떤 컨텐츠든지 자유롭게 활용할 수 있습니다.

아코디언 블록은 단일 블록, 다중 블록으로 열릴 수 있으며 열린 상태로 시작할 수 있습니다. 또한 애니메이션의 속도를 설정할 수 있어서 다양하게 활용이 가능합니다. 또한 각 아코디언 아이템은 토글 아이콘의 변형상태를 설정할 수 있으며, 마우스 오버, 활성화 등 상태에 따른 색상 디자인도 상세하게 설정이 가능합니다.

이 블록은 정말 다양한 분야에 사용이 가능하기 때문에 여러분의 창의적인 생각이 열려 있다면 정말 무궁무진한 디자인으로 설정할 수 있는 점 참고하시길 바랍니다. 아디오스 !

간단하게 설정이 가능한 탭 메뉴

이 블록은 웹사이트에서 가장 흔하게 사용되는 메뉴중에 하나인 탭 메뉴 블록 입니다. 탭 버튼과 컨텐츠 영역의 위치는 자유롭게 구성하실 수 있도록 블록 테마에서 자유롭게 구성이 가능합니다. 특정 디자인에 귀속되지 않는 자신만의 탭 메뉴를 만들 수 있습니다. 반응형으로 구성할수도 있고, 단순하게도 가능합니다.

또한 탭 메뉴의 마우스 오버, 활성화 상태의 디자인을 할 수 있기 때문에 정말 다양한 모습으로 구성할 수 있습니다. 모든것은 여러분의 상상력에 따라 천차만별의 디자인이 태어나도록 되어 있습니다.

헬로우판다 테마는 이게 끝이 아닙니다.

이 페이지 하나로 모든 기능을 소개할 수 없을 정도로 다양한 기능들이 있습니다.

Hellopanda 테마는 페이지 디자인, 포스팅에 최적화된 테마 입니다. 1,000여개가 넘는 패턴으로 자유롭게 요소들을 디자인할 수 있으며 손쉽게 패턴을 변경할 수 있습니다. 또한 코어 블록의 스타일을 확장해서 더욱 상세한 디자인 설정까지 할 수 있도록 제작되었습니다. 워드프래스의 블록 테마를 기준으로 제작되었으며, 블록 테마는 차세대 웹 제작 방식임에 동의하고 그에 따른 개발을 함께 이어나갈 것 입니다.

우리 테마 개발자들은 20년 이상의 백, 프론트엔드 경력을 가진 전문가 중에 전문가 입니다. 워드프래스를 만나면서 날개를 달고 더 멋지고 더 강력한 디자인 툴을 제작하고 있으며 Hellopanda 테마는 더욱 더 발전 해 나갈 것입니다.

Hellopanda 테마는 모든 코드가 반응형으로 제작되어 있습니다. 워드프래스의 기본적인 시스템을 헤치지 않는 선으로 개발되었으며, 조금 더 세분화된 반응형 코드들을 지원하고 있습니다. 1600px, 1400px, 1280px, 800px, 600px 을 기준으로 가장 완벽한 반응형 코드를 여러분들에게 경험시켜 드릴 것 입니다.

끝으로 저희는 테마 개발을 여기서 멈추지 않고 지속적으로 더 편리한 애드온 기능들을 제작할 예정입니다. 페이지 생성을 손쉽게 하는것에 주안점을 두어 헤더, 푸터, 패널, 사이드바 등을 손쉽게 변경할 수 있는 패턴 역시 개발 예정입니다. 이제 테마는 하나만 있으면 됩니다. Hellopanda 테마가 여러분의 워드프래스를 더욱 즐겁게 만들어 줄 것 입니다.