어떤 화면이 필요하고 각 화면에 어떤 기능을 담을 지 생각해 보고, 전체적인 사이트맵을 작성해 봅니다.

각 화면의 레이아웃이나 와이어 프레임은 차치하고 화면에 표시할 내용이나 기능만 생각합니다

1. 메인 화면

너무나 당연한 사이트의 첫 화면입니다. 무엇을 보여줄까요?

1. 일일 방문자 카운트
   관리자 대시보드 용도로만 트래픽을 기록할 수도 있겠지만 기왕이면 사용자에게 보여주어서 사용자로 하여금 '이 블로그가 알차니까 사람들이 이만큼 왔나보다' 라고 생각하게 해주고 싶습니다. 물론 제가 알차게 기록해야 겠지만요. 100번째 방문자 같은 특정 방문자에게는 폭죽이라도 터뜨려야겠네요.

2. 카테고리 목록
   제가 기록한 글들의 카테고리 목록을 보여주자는 생각입니다. 근본적인 기능은 해당 카테고리의 글들을 조회하는 경로의 역할인데 고려해야 할 부분이 있습니다.
   (1) 카테고리를 클릭하면 아래에 하위 메뉴처럼 상세 컨텐츠의 링크를 표시할 것인지
   (2) 카테고리를 클릭하면 해당 카테고리의 컨텐츠 목록을 보여주는 페이지로 이동시킬지
   1번의 경우는, 잘 변하지 않는 하위 카테고리들이 보여야 한다고 생각합니다. 제가 만들 블로그는 한 카테고리 아래에 별다른 하위 카테고리 없이 바로 그냥 컨텐츠들 뭉탱이입니다. 고로 2번을 택합니다.

3. HOT 컨텐츠 바로가기
   (1) 조회수가 가장 많은 n개의 컨텐츠 링크를 보여주거나
   (2) 따봉이 가장 많은 n개의 컨텐츠 링크를 보여주려 합니다.
   둘 중에 어느 걸로 보여줄 지 방금 고민해 봤는데, 2번을 기본값으로 하고 라디오 버튼을 사용해서 '조회수'기준의 HOT 컨텐츠들도 보여주는게 좋겠네요.

한 페이지에 이것 저것 많은 건 좋지 않다고 생각합니다.
뭐 더 넣으려고 머리 굴리지 않고 메인 화면은 딱 저 세가지만 보여주고, 나중에 봐서 여백이 너무 과하다 싶으면 적절하게 꾸며볼게요.

2. 컨텐츠 목록

기본적으로 특정 카테고리의 컨텐츠들만 출력합니다. 내비게이션을 두어 다른 카테고리도 볼 수 있게 합시다.

목록에서 보여줄 각 컨텐츠들은 카드뉴스 모양으로 보여줄 지 일반 게시판 모양으로 보여줄 지 아직 고민해볼 차례입니다. 목록의 아이템이 어떤 정보를 보여주는 지에 따라 서버에서 받아올 데이터 형식도 달라지기 때문에 이건 꼭 지금 정하고 넘어가야 겠습니다.

(1) 카드뉴스 형식
(2) 일반 게시판 형식

여러 차이점이 있겠지만 제 주관에서 가장 큰 차이점은 카드뉴스 형식은 Grid(= 2차원) 레이아웃 표현이 가능합니다. Flex(= 1차원)도 가능하지만 모바일 뷰에서 최적인 듯하고, PC 환경에서 1차원의 세로 모양으로 보여주기엔 모양이 이상해지거나 여백이 과해지겠어요. (여기 velog의 컨텐츠들도 PC에선 2차원, 모바일에선 1차원으로 출력됩니다)
그럼 Grid로 보여주면 어떤 효과가 있을까요? 어떤 아이템인지에 따라 상이하겠지만, 아이템들의 순서가 직관적으로 와닿기 어렵습니다. 강력한 예를 아래에 들어볼게요.

만 두
찐 빵
만찐두빵? 만두찐빵?

그럼 이제 마지막 고민 포인트! 제 컨텐츠들은 보는 순서가 중요할까요?
예상컨대, 대게는 안 중요할 겁니다. 그래도 어떤 컨텐츠들은 한 포스트에 작성하지 않고 여러 편에 걸친 시리즈가 될 수도 있겠어요. 지금 이 velog 포스트만 봐도 순서가 중요한 시리즈를 올리고 있는걸요.

고민 끝났습니다. 저는 (2) 일반 게시판 형식으로 보여줍니다.

• 페이징은 구현하지 않고, 대신 무한 스크롤을 구현하려고 합니다
• 검색 기능도 넣겠습니다

3. 컨텐츠 상세

• 당연하게도 제가 업로드한 컨텐츠 제목 및 본문을 보여줍니다
• 컨텐츠 목록 화면에 있던 내비게이션을 동일하게 보여줍니다
• 본문 아래에는 이전 글, 다음 글 링크를 둡니다
• 따봉 기능을 넣겠습니다. 메인에서 HOT 컨텐츠 보여줘야 합니다!
• 댓글 기능은 넣지 않겠습니다. 구현 비용에 비해 효용성이 극히 떨어질 듯합니다.

서비스를 위해 꼭 필요한 화면들은 사실 저 세개 뿐이죠.. 이제 관리자 페이지를 생각해 봅시다.

(관리자) 1. 대시보드

제가 간간히 소소하게 보고 싶은 통계 데이터들입니다.

• 기간 별 방문자 수
• 총 따봉, 카테고리별 따봉 등 각종 따봉 수
• 컨텐츠 총 갯수, 카테고리별 컨텐츠 갯수
• 카테고리별 따봉지수: (따봉 총합) / (컨텐츠 수)

(관리자) 2. 컨텐츠 업로드 및 수정

• velog처럼 마크다운 문법으로 본문 작성
• 파일 업로드 버튼 (only 이미지)

(관리자) 3. 컨텐츠 목록

대시보드에서 갑자기 대뜸 어떤 컨텐츠를 수정하러 갈 수는 없죠. 삭제할 수도 있어야 하니까 컨텐츠 목록을 화면을 두고, 빠릿빠릿하게 제목만 툭툭 띄워놓고 우측에 수정/삭제 버튼을 둡시다.

(관리자) 4. 카테고리 편집

• 컨텐츠 목록처럼 카테고리들을 보여주고 수정/삭제 버튼을 둡니다
• 사용자에게 보여지는 카테고리 순서를 바꿀 수 있도록 위/아래 화살표 버튼까지 한 줄에 표시합니다
• 목록 아래에 새로운 카테고리를 추가하는 인풋을 둡니다
• 한 번에 수정할 사항이 많은 경우도 있을 수 있고, 변경 사항을 되돌리고 싶을 수도 있습니다. 고로 하나하나 바꿀 때마다 백엔드에 요청하지 말고 '반영' 버튼을 두고 클릭 시 한꺼번에 반영되도록 하겠습니다

(관리자) 5. 관리자 로그인

중요한 게 빠졌네요. 관리자 신원을 인증하고 관리자 페이지에 접근할 권한을 받기 위한 로그인 페이지를 관리자 페이지의 진입점으로 두겠습니다.

• 로그인 폼만 두고 id, pw를 입력합니다

정리

필요한 화면과 주요 기능을 다시 깔끔하게 정리하고, 화면이 몇개 없지만 사이트맵을 그려봅시다

화면 구성 및 기능

1. 메인 화면

   (1) 일일 방문자 카운트, 총 방문자 카운트 표시
   (2) 카테고리 목록 표시. 카테고리 클릭시 해당 카테고리 목록 페이지로 이동.
   (3) HOT 컨텐츠 바로가기

   • 따봉 순으로 n개의 컨텐츠 링크 표시
   • 조회수 순으로 n개의 컨텐츠 링크 표시
   • 라디오 버튼으로 따봉순/조회수순 전환하며 표시 (기본값: 따봉순)

2. 컨텐츠 목록 화면

   (1) 일반 게시판 형식의 컨텐츠 목록

   • 무한 스크롤
   • 컨텐츠 제목으로 검색

   (2) 카테고리 내비게이션

3. 컨텐츠 상세 화면

   (1) 컨텐츠 내용 표시
   (2) 컨텐츠 목록 화면과 동일한 카테고리 내비게이션
   (3) 따봉 기능
   (4) 이전 글, 다음 글 링크

4. (관리자) 로그인 화면

   (1) ID, PW 폼

5. (관리자) 대시보드 화면

   (1) 기간별 방문자 수 표시
   (2) 각종 따봉 수 표시

   • 총 따봉
   • 카테고리별 따봉

   (3) 컨텐츠 총 갯수, 카테고리별 컨텐츠 갯수 표시
   (4) 카테고리별 따봉지수

   • (따봉 총합) / (컨텐츠 수)

6. (관리자) 컨텐츠 목록 화면

   (1) 컨텐츠 목록

   • 컨텐츠 제목
   • 수정/삭제 버튼

7. (관리자) 컨텐츠 작성 및 수정 화면
   (1) 마크다운 문법으로 본문을 작성하는 폼
   (2) 파일 업로드 버튼 (only 이미지)

8. (관리자) 카테고리 편집 화면

   (1) 카테고리 목록

   • 카테고리명
   • 수정/삭제 버튼
   • 위/아래 화살표 버튼

   (2) 카테고리 추가 인풋

   • 목록 아래에 배치

   (3) '반영'버튼을 두어 클릭 시 변경사항 일괄 반영

작성된 사이트맵

대단한걸 한 것도 아닌데 시간이 생각보다 오래 걸렸네요.. 다음 포스트에선 화면별로 통신 시점과 데이터 형식을 정의하겠습니다.