풀스크린 검색폼 & 메뉴 만들기
IMPREZA 테마로 워드프레스 웹사이트 만들기
신문 사이트들을 둘러보다가 따라 만들기를 하면 좋을 구조를 하나 발견했습니다. 바로 검색폼이 있는 풀스크린 메뉴인데, 이것도 사이트에 따라 종종 구현이 필요한 구조라, 이참에 wpcomponent 모음 사이트를 이용해서 한 번 미리 제작을 해 봤습니다.
한겨레 온라인 검색 화면
비슷한 구조로 만든 화면먼저, 이런 구조를 만들 때 해야 하는 큰 흐름을 요약해 봅니다.
1. 헤더에 아이콘 버튼을 만든다.
2. 화면을 전체 덮는(min-height:100vh) 구조(섹션)를 하나 만든다.
3. 1번의 버튼을 클릭하면 2번이 보였다가, 닫기를 누르면 숨겨진다.
큰 흐름은 이렇게 간단합니다.
전에 사이트에 로딩 화면을 추가하는 방법을 작성했습니다. 이 로딩 화면과의 차이점이라 하면, 화면을 덮는 구조가 좀 복잡해졌다는 점, 그리고 페이지가 로딩 시 알아서 표시됐다가 숨겨졌었는데 버튼으로 직접 컨트롤한다는 것뿐입니다.
https://brunch.co.kr/@oksambari/120
Impreza 테마를 이용하면, html을 코딩, css 스타일 정의, 다음으로 버튼 클릭에 대한 이벤트 처리를 위해 스크립트 코딩 없이도, 위 순서를 지켜서 페이지 빌더로 요소를 만들고 연결 고리만 만들어 주면 난도가 높지 않게 원하는 구조를 완성을 할 수 있습니다.
이제 세부 작업을 확인해 보겠습니다.
1. 헤더에 아이콘 버튼 만들기
헤더에 버튼 요소를 하나 추가하고, 아이콘은 돋보기 모양을 선택했습니다. 이 버튼은 링크 주소 없이 이거 자체로는 클릭해도 아무 동작이 일어나지 않는 형태로 만듭니다. 이제 사이트를 열어 보면 헤더에 아이콘 버튼이 추가된 걸 볼 수 있습니다.
2. 화면 전체를 덮는 섹션 만들기
전에 사이트 로딩 화면 만들기에는 헤더 태그 바로 뒤에 표시되는 간단한 형태의 html 구조라 훅을 이용해서 구조를 추가했었습니다. 그런데, 이번에 만들 검색 폼과 사이트 전체의 메뉴를 html로 만들어 관리를 하면 너무 복잡하겠죠.
Impreza 테마에는 이러한 것을 페이지 빌더를 이용해서 제작할 수 있는 '재사용 블록'이 있습니다.
전체 화면을 덮는 구조를 페이지 빌더로 만들 수 있으니 편리합니다.
참고할 뉴스 사이트의 구조부터 파악을 해 보면, 검색폼이 있는 상단, 그 아래 메뉴 리스트 묶음이 좌측에 연속되어 나열이 되고, 오른쪽은 사이드바 형태로 왼쪽의 리스트 높이에 맞춰서 표시되는 걸 볼 수 있습니다.
이 구조를 참고로 빌더로 구성을 해 보면 이렇게 됩니다. (보통의 사이트를 고려해서 왼쪽에는 5개의 리스트가 나오는 것으로 구성) 검색 폼을 넣고, 그 아래 'Inner Row'를 넣을 때 크게 6조각으로 나눠서 왼쪽에는 5개, 오른쪽에는 1개의 넓이를 지정했습니다.
5/6 영역의 칼럼 안에는 가로형 wrapper를 크게 묶고, 그 안에 세로형 wrapper들을 주욱 나열했습니다.(총 10 묶음) 이 wrapper는 css의 flex 스타일을 통해 요소를 표시하도록 만들어져 있기 때문에 화면에 표시될 때에는 각 세로형 wrapper에 20% 넓이를 주면 한 줄에 5개, 그다음에는 아래 라인으로 내려가 표시됩니다.
1/6 칼럼에는 세로로 원하는 링크들을 순서대로 넣습니다. 맨 아래 SNS 링크들은 끝에 붙을 수 있게, css의 position 속성을 추가해서 사이드 영역의 맨 아래로 붙입니다.
3. 2번에 만들어진 구조를 표시했다 숨기는 방법 추가
테마의 화면 요소 중에 '팝업(popup)'이 있습니다. 팝업 요소는 2번과 같이 '재사용 블록'으로 만들어진 콘텐츠도 연결해서 표시할 수 있도록, 그리고 표시될 때 화면 전체를 덮는 형태로 보일 수 있도록 만들어져 있습니다.
즉, 팝업이라는 요소를 푸터쪽에 추가하고, 1번에서 만든 아이콘 버튼을 클릭하면 팝업을 전체 화면으로 띄우는데, 그 안에 내용은 2번에서 만든 블록이 표시되면 목표가 완성되는 겁니다. (클릭 이벤트 처리 등은 이미 다 개발돼 있어서 할 게 없음)
마무리로 반응형 디자인을 위해 화면이 줄었을 때 필요한 css 정의들을 추가하여 화면을 정리하면 끝입니다.
완성된 모습 예 : https://oks-dev.tk/wpcomponent/gsap/
이상 코딩을 최소화하고, 각 요소의 연결고리를 활용하여 화면 전체를 덮는 검색폼과 메뉴 구조가 합쳐진 섹션을 추가하는 방법을 정리해 봤습니다.
Impreza의 경우 '재사용 블록'이라는 자주 쓰는 화면 구조를 페이지 빌더로 구성할 수 있는 방법, 이를 또 팝업으로 연결해서 표시할 수 있는 방법이 있기에 비교적 쉽게 구성이 가능합니다.
끝.
