이번 편에서는 각 페이지 별로 UI가 어떻게 배치되면 좋은지,
간단한 그림과 설명으로 알아보자
1. 블로그 구조
- 3차 카테고리
: 크게 메인(홈) -> 테마(1차) -> 메인 카테고리(2차) -> 서브 카테고리(3차) -> 포스트 로 이어지는 구조를 생각하고 있다.
필자가 써왔던 블로그들은 카테고리를 2개밖에 만들 수 없어서 조금 불편했다.
2. 메인(홈) 페이지
크게 헤더 영역과 본문/푸터 영역으로 나눠서 짜보았다
- 헤더 영역
무테지만 알아보기 쉽도록 도형을 그렸다.
헤더의 메인은 블로그 이름이며, 밑에 자기소개 글을 넣을
수 있도록 하였다.
왼쪽에는 드롭다운 카테고리가 존재하고, 빠른 카테고리 이동을 위해3차까지 이동 가능하도록 구현할 것이다.
오른쪽은 아무것도 없다면 비어보일까봐 홈버튼을 하나 넣어보았다.
메인에 아무것도 없으므로 검색을 통해 찾을 수 있도록, 검색바를 넣을 것이다. 물론카테고리도 지정할 수 있다.
- 본문/푸터 영역
본문의 내용은 비교적 깔끔하게 구성한다.
테마들이라는 이름 아래 블로그의 테마들이 리스트 형식으로 출력되며, 5개는 뭔가 많아서 4개 단위로 페이징 처리한다.
이는 PREV와 NEXT버튼으로 페이지 이동이 가능하다.
푸터에는 요즘 트렌드인지, 원형 주소 링크 버튼을 넣길래 동일하게 넣을 것이다. 각각 Git, 보안 블로그, 메일이다.
3. 테마(1차) 페이지
- 헤더 영역
메인 페이지와 동일하다.
다만 블로그 이름 대신, 테마 이름이 들어가고,
자기소개 대신, 테마에 대한 간단 소개글이 들어간다.
- 본문 영역
테마 페이지의 본문 배열은 좀 다르다.
리스트 형식이 아닌 바둑판 형식으로 배열되며, 여기서 각각의 컨텐츠는 테두리가 존재한다.
메인 카테고리의 이름과 간단 설명이 있으며,
3X2 단위로 페이징 처리한다.
(1줄에 3개, 2줄에 3개라는 의미이다)
4. 메인 카테고리(2차) 페이지
테마 페이지와 동일하므로 생략한다.
5. 카테고리(3차) 페이지
-
헤더 영역
역시 동일하다. 하지만 헤더 영역에서 검색바가 사라진다.
-
본문 영역
전형적인 게시판의 리스팅 형식.
각 리스트에는 제목과 내용 일부, 작성 날짜가 들어있으며,
8개 단위로 페이징 처리를 한다.
그리고 없앤 검색바를 맨 하단에 위치시킨다.
6. 포스트 페이지
-
헤더 영역
3차 페이지와 동일하다. 다만 소개글이 없고, 제목만 존재한다.
-
본문 영역
포스트답게 아무것도 없다. 오로지 작성한 글만 있을 뿐이다.
PREV와 NEXT는 존재한다
작성하다보니 뭔가 다른 블로그들을 비슷해졌다..ㅇㅅㅇ...
특히 카테고리 페이지의 리스팅은 다들 비슷비슷해서 어쩔 수 없는 것 같다ㅠㅠ
이만한 것을 과연 무사히 만들 수 있을진 모르겠지만, 일단 노력해보겠다! 그럼 이만 :D
개발을 이야기하는 개발자입니다