brunch

You can make anything
by writing

C.S.Lewis

by oksambari Dec 15. 2021

#7-0. 그리드 디자인 사이트

워드프레스 사이트 따라 만들기

워드프레스로 만들어진 사이트를 둘러보던 중 그리드를 강조하는 디자인반전색을 적용하는 기능이 있는 사이트가 있어서 한 번 적용 방법을 참고해 보고 싶었습니다. 

>  참고용 사이트



대략적인 특징이나 느낌은 이렇습니다.

최근 본 어떤 박물관 사이트에서도 사용을 했던데, 열을 맞추는 정도가 아니라 아예 세로 라인을 그려 주고 콘텐츠를 표시하면 심플하지만 정렬도 돼 보이고, 공간이 비어도 뭔가 꽉 찬 느낌이 나는 듯합니다. 전체 색을 반전시켜서 또 다른 분위기를 줄 수 있는 것도 괜찮은 것 같고요.  로고가 아래쪽에 고정이 되다가 화면을 스크롤해서 내려가면 사라지게 되는 것(투명도 0.1 상태)도 조금 특이한 헤더 구조도 갖고 있습니다.  




모두를 본 것은 아니지만 최근 둘러본 워드프레스 사이트들만 가지고 생각을 해 보면, 일본 워드프레스 사이트들이 디자인적으로 신경을 쓴 예가 더 많은 것 같습니다. 테마는 대개 자체 제작을 해서 일반 웹사이트 제작 방식 + 워드프레스의 템플릿 구조를 이용해서 만드는 것 같고요. (부럽기도 하고 자괴감도 들고...)



아무튼 저는 늘 해왔듯이 이번에도 Impreza 테마를 이용해서 같은 구조를 한 번 테스트해서 만들어 보려고 합니다. 일단 테마의 특징을 기반으로 기본 골격이 잡히고 나면 이후에는 페이지 빌더가 있으면 내 콘텐츠를 추가하거나 수정하는 데에 많은 장점이 있다고 생각을 하니까요. 


참고사이트의 각 페이지들 중에서 페이지 빌더로 규격화해서 사용하면 좋을 구조 위주로 한 번 정리를 해 보겠습니다. 


> 임시 공간 : https://oks-dev.tk/grid3/



이후 계속... 

매거진의 이전글 #6-6. 토픽(blog) 글 리스트, 상세페이지
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari