Home 화면은 왜 포털처럼 설계했는가
CY Mini Project를 개발하면서 가장 많이 수정한 부분을 하나만 꼽는다면 Home 화면이다.
처음에는 일반적인 워드프레스 블로그처럼 최신 글 목록을 첫 화면에 배치했다.
하지만 프로젝트 규모가 커질수록 이 방식에는 한계가 있다는 것을 느끼게 되었다.
현재 CY Mini Project에는 블로그 글만 있는 것이 아니다.
- Wiki 문서
- Gallery 작품
- 개발 기록
- 창작 설정
- 리뷰
- 노트
처럼 성격이 다른 콘텐츠가 함께 존재한다.
최신 글만 나열하는 방식으로는 사이트 전체를 충분히 보여줄 수 없었다.
첫 화면은 사이트의 ‘입구’
대부분의 방문자는 첫 화면부터 접하게 된다.
그렇다면 첫 화면은 단순히 최신 글을 보여주는 곳이 아니라 사이트 전체를 소개하는 역할을 해야 한다고 생각했다.
그래서 Home 화면을 하나의 포털처럼 설계하기 시작했다.
방문자가 첫 화면만 둘러봐도
- 어떤 콘텐츠가 있는지
- 최근 무엇이 업데이트되었는지
- 무엇부터 읽으면 좋을지
자연스럽게 알 수 있도록 하는 것이 목표였다.
최신 글보다 중요한 것은 콘텐츠의 다양성
블로그에서는 최신 글이 가장 중요한 콘텐츠가 된다.
하지만 CY Mini Project에서는 그렇지 않았다.
어떤 날은 Wiki 문서를 수정하고,
어떤 날은 그림을 추가하고,
어떤 날은 리뷰를 작성한다.
이 모든 작업이 사이트에서는 동일하게 의미 있는 업데이트다.
그래서 Home 화면에서는 최신 글만 보여주는 대신 다양한 콘텐츠를 함께 소개하도록 변경했다.
현재는 다음과 같은 영역을 운영하고 있다.
- 오늘의 추천
- 오늘의 그림
- 최근 글
- 최근 Wiki
- 최근 Gallery
- 최근 업데이트
- 공지사항
- 소개 영역
‘오늘의 추천’을 만든 이유
사이트에 글이 많아질수록 무엇부터 읽어야 하는지 고민하는 방문자가 늘어난다.
최신 글이 항상 가장 읽을 만한 글은 아니기 때문이다.
그래서 첫 화면에 ‘오늘의 추천’ 영역을 추가했다.
관리자가 직접 추천할 수도 있고, 프로젝트의 방향에 맞게 추천 기준을 변경할 수도 있도록 설계했다.
사이트에서 가장 먼저 보여주고 싶은 콘텐츠를 선택할 수 있다는 점에서 Home 화면의 중요한 요소가 되었다.
‘오늘의 그림’은 첫인상을 위한 공간
Gallery 플러그인을 만들면서 자연스럽게 생긴 기능이다.
이미지는 텍스트보다 먼저 시선을 끈다.
그래서 첫 화면에 하나의 대표 이미지를 배치하면 사이트의 분위기를 전달하는 데 도움이 된다고 생각했다.
현재는 대표 이미지를 크게 보여주고, 클릭하면 Gallery 콘텐츠로 이동하는 구조를 사용하고 있다.
최근에는 슬라이더 디자인도 여러 차례 수정하면서 제목과 설명, 오버레이 효과 등을 추가했다.
최근 업데이트는 최신 글과 다르다
최근 업데이트 영역도 처음부터 있었던 기능은 아니다.
프로젝트를 사용하다 보니 위키 문서를 수정하거나 Gallery 이미지를 교체하는 경우가 많아졌다.
하지만 이런 변경은 최신 글 목록에서는 확인하기 어려웠다.
그래서 콘텐츠 종류와 관계없이 최근 변경된 항목을 모아 보여주는 기능을 추가했다.
이 기능 덕분에 자주 방문하는 사용자도 어떤 내용이 바뀌었는지 쉽게 확인할 수 있게 되었다.
Home 화면도 관리자에서 관리한다
프로젝트를 개발하면서 중요하게 생각한 것 가운데 하나는 관리 편의성이다.
첫 화면의 구성을 바꾸기 위해 매번 코드를 수정하는 방식은 유지보수가 어렵다.
그래서 Home 화면에서 사용하는 대부분의 항목을 관리자 설정에서 변경할 수 있도록 구성했다.
대표적으로 다음과 같은 항목을 관리할 수 있다.
- 소개글
- 추천 콘텐츠
- 공지사항
- 표시 여부
- 일부 레이아웃 옵션
기능이 추가될 때마다 관리자 설정도 함께 개선하는 방향으로 개발을 진행하고 있다.
디자인보다 흐름을 먼저 생각했다
Home 화면을 구성하면서 가장 중요하게 생각한 것은 화려한 디자인이 아니었다.
사용자가 어떤 순서로 콘텐츠를 만나게 되는지가 더 중요했다.
그래서 화면을 구성할 때도 다음과 같은 흐름을 기준으로 배치했다.
- 사이트의 첫인상
- 추천 콘텐츠
- 새로운 업데이트
- 다양한 콘텐츠 소개
- 추가 탐색
방문자가 자연스럽게 다음 콘텐츠를 읽게 만드는 것이 Home 화면의 역할이라고 생각한다.
계속 바뀌는 화면
Home 화면은 지금도 가장 자주 수정되는 부분이다.
프로젝트가 커질수록 새로운 콘텐츠가 추가되고, 첫 화면이 담당해야 하는 역할도 계속 변하기 때문이다.
최근에는 다음과 같은 작업을 진행했다.
- 갤러리 슬라이더 개선
- 모바일 레이아웃 수정
- 추천 콘텐츠 표시 방식 변경
- 접근성 개선
- 위키와 갤러리 연동 강화
앞으로도 프로젝트가 발전하면 Home 화면 역시 계속 변화할 것으로 생각한다.
다음 개발기
다음 글에서는 현재 프로젝트에서 가장 만족하는 기능 가운데 하나인 Tree Archive를 개발하게 된 과정과, 일반적인 카테고리 목록 대신 트리 구조를 선택한 이유를 정리해 보려고 한다.
💬 댓글 (0)