CY Mini Theme 설계 – 왜 이런 구조를 선택했는가
첫 번째 개발기에서는 CY Mini Project를 시작하게 된 배경을 정리했다.
이번 글에서는 프로젝트의 중심이 되는 CY Mini Theme를 어떻게 설계했는지, 그리고 현재의 레이아웃이 만들어지기까지 어떤 과정을 거쳤는지 기록하려고 한다.
시작은 ‘미니홈피’였지만 그대로 재현하는 것이 목표는 아니었다
프로젝트 이름에 CY가 들어가는 이유는 싸이월드 미니홈피에서 아이디어를 얻었기 때문이다.
하지만 목표는 과거 서비스를 그대로 재현하는 것이 아니었다.
당시 미니홈피가 가지고 있던 정보 배치 방식과 사용 흐름을 현대적인 워드프레스 환경에서 다시 구현하는 것이 목표였다.
따라서 레이아웃은 참고했지만, HTML과 CSS를 그대로 따라 하거나 디자인을 복제하는 방식은 처음부터 고려하지 않았다.
가장 먼저 결정한 것은 화면 구조였다
대부분의 워드프레스 테마는 콘텐츠가 화면 폭에 따라 계속 넓어지는 구조를 사용한다.
하지만 장문의 글이나 위키 문서를 자주 읽는 사이트에서는 지나치게 넓은 본문이 오히려 가독성을 떨어뜨린다고 판단했다.
그래서 초기에 가장 먼저 결정한 것은 중앙 고정 프레임이었다.
콘텐츠 영역의 폭을 일정하게 유지하면 글을 읽을 때 시선 이동이 줄어들고, 레이아웃도 안정적으로 유지된다.
현재까지도 이 구조는 프로젝트의 기본 설계로 유지되고 있다.
좌우 영역은 서로 다른 역할을 담당한다
레이아웃은 크게 세 개의 영역으로 구성했다.
- 좌측 : 프로필과 개인 정보
- 중앙 : 콘텐츠
- 우측 : 탐색 메뉴
이 구조는 단순히 싸이월드를 연상시키기 위한 것이 아니다.
각 영역의 역할을 명확하게 분리하기 위한 설계이다.
좌측은 사이트 자체보다 사용자를 보여주는 공간으로 사용하고,
중앙은 글을 읽는 데 집중할 수 있도록 최대한 단순하게 구성했다.
우측은 카테고리와 책갈피, 최근 항목처럼 사이트를 탐색하기 위한 기능을 배치했다.
첫 화면은 포털이 아니라 안내 페이지를 목표로 했다
일반적인 블로그에서는 첫 화면에 최신 글을 시간순으로 나열하는 경우가 많다.
하지만 CY Mini Project에서는 홈페이지를 사이트의 입구로 생각했다.
그래서 단순한 최신 글 목록 대신 다양한 콘텐츠를 소개하는 화면으로 설계했다.
현재 Home 화면에는 다음과 같은 요소가 포함되어 있다.
- 오늘의 그림
- 오늘의 추천
- 최근 업데이트
- 최근 글
- 최근 위키
- 최근 갤러리
- 소개 영역
- 공지사항
방문자가 첫 화면만 보더라도 사이트 전체의 구조를 이해할 수 있도록 하는 것이 목적이다.
기능보다 관리가 중요했다
프로젝트가 커질수록 가장 중요하게 생각한 것은 관리 편의성이었다.
테마 옵션을 수정하기 위해 코드를 직접 편집하는 방식은 유지보수에 적합하지 않았다.
그래서 대부분의 설정을 워드프레스 관리자 화면에서 변경할 수 있도록 별도의 설정 페이지를 만들었다.
현재는 다음과 같은 항목을 관리자 화면에서 관리할 수 있다.
- 색상
- 프로필
- 레이아웃
- 홈 화면 설정
- 게시판 설정
- 플러그인 연동
- 방문자 관련 설정
기능을 추가할 때마다 관리 화면도 함께 개선하는 방향으로 개발을 진행하고 있다.
프로젝트가 커지면서 테마의 역할도 달라졌다
초기에는 대부분의 기능이 테마 안에 포함되어 있었다.
하지만 개발을 계속하면서 위키, 갤러리, 일정, 통계처럼 다른 프로젝트에서도 사용할 수 있는 기능이 늘어나기 시작했다.
결국 이러한 기능들은 하나씩 플러그인으로 분리했다.
현재 CY Mini Theme는 사이트의 디자인과 레이아웃을 담당하고,
기능은 각각의 플러그인이 담당하는 구조로 변경되었다.
이러한 구조 덕분에 필요한 기능만 선택적으로 사용할 수 있고, 유지보수도 훨씬 쉬워졌다.
계속 수정하고 있는 부분
현재도 가장 많은 변경이 이루어지는 부분은 Home 화면이다.
콘텐츠가 늘어날수록 첫 화면이 해야 하는 역할도 함께 변하고 있기 때문이다.
최근에는 다음과 같은 기능들이 추가되었다.
- 추천 콘텐츠 개선
- 갤러리 슬라이더 디자인 개선
- 위키 연동 강화
- 최근 업데이트 표시
- 모바일 레이아웃 개선
- 접근성 개선
앞으로도 Home 화면은 프로젝트의 변화에 맞추어 계속 수정될 가능성이 높다.
다음 개발기
다음 글에서는 CY Mini Wiki를 개발하게 된 이유와 일반 블로그 카테고리를 사용하지 않고 별도의 위키 시스템을 만든 이유를 정리해 보려고 한다.
또한 트리형 아카이브와 위키 전용 화면이 어떤 과정을 거쳐 만들어졌는지도 함께 기록할 예정이다.
💬 댓글 (0)