[Flask로 블로그 만들기] 3. 글 목록과 본문 보여주기
DB에 저장된 글을 사용자에게 보여주면 기본적인 블로그 기능은 끝입니다. 관리자가 적은 글을 일방적으로 보여주기만 하면 일단은 '블로그'니까요. 이제 적은 글을 사용자가 볼 수 있게 목록화해서 보여주고, 사용자가 목록의 글을 누르면 전체 본문이 보여지게 해보도록 합시다.
프론트 페이지 구성
프론트 페이지엔 7개의 글을 보여주기로 했습니다. 가장 최근의 글 한 개는 사이트의 대문에서 보이게, 나머지 글은 점점 축소되는 모양새로 시선이 흘러가게 구성했습니다. 최종적으로 구성된 페이지는 아래와 같습니다.
가장 위의 포스트가 최신 글이며, 아래로 갈수록 오래된 글입니다. 가장 썸네일이 작은 맨 아래의 글은 최대 세 개까지 표시되며, 그 이전의 글은 "전체 글보기" 버튼을 눌러 볼 수 있게 하였습니다.
일반적인 FHD 해상도의 전체 화면 브라우저에선 아래와 같이 첫 번째 글이 배너 형식으로 보이는 듯한 착각이 들어, 마치 소프트웨어의 랜딩 페이지같은 느낌을 받을 수 있습니다.
전체 글 목록 페이지
프론트 페이지 하단엔 전체 글을 한 번에 보여주는 "전체 글보기" 버튼이 있습니다. <a> 태그를 block 요소로 보이게 하여 버튼처럼 되었는데, 링크를 이동하는 역할이니 <button> 태그가 아닌 <a> 태그를 사용하는 것이 표준적인 사용법에 맞을 것입니다. 그래야 스크린 리더에서 링크로 인식하기도 하고요. 그러나 기술적인 구현 방법이 어떤 것이든 사용자가 보았을 땐 "버튼" 이므로 버튼이라고 말하겠습니다.
아무튼, 이 버튼을 누르면 이 블로그에 쓰인 모든 글을 한 눈에 볼 수 있는 통칭 '아카이브' 페이지로 넘어갑니다. 이 페이지에서 모든 글을 볼 수 있고, 글 목록은 간단하게 "발행일"과 "제목"만 보이도록 했습니다. 동적으로 조금씩 보여주는 것이 아닌 모든 글 목록을 한번에 보여주므로 복잡한 구성을 하지 않는 것이 산만하지 않을 것입니다.
글이 많아지면 연도별로 볼 수 있도록 추가하면 됩니다. 일반적인 글 본문 페이지와 같은 양식을 갖기 때문에, 사이드바 부분에 연도 선택을 넣는 것은 쉽습니다. 블로그에 글을 수천개씩 쓸 것도 아니고, 1년에 많아봐야 수십 건 쓸 것인데 연도별로만 보이게 해도 목록이 너무 길어지지 않을 것입니다.
Flask가 하는 일
카테고리 분류별로 글을 보여주는 것도 역시 같습니다. 각 카테고리 링크를 누르면 Flask에서 이를 라우트하여 각각의 분류로 된 글을 가져온 후 이를 jinja2의 반복문을 이용하여 HTML을 구성해줍니다. 실로 간단한 방법입니다. Flask에는 글 목록을 리스트에 담아서 render_template() 함수의 인수로 넘겨주기만 하고, HTML에선 jinja2의 반복문을 이용하여 목록만 구성해주면 됩니다. 정확히는 테이블로 구현했지만요.
전체 글보기 버튼은 "더보기" 버튼이 아니다
흔히 전체 글보기 버튼을 "더보기" 버튼으로 구현하곤 합니다. 버튼을 누르면 사용자가 탐색하던 그 페이지의 목록에 다음 항목이 추가되어 출력되는 것이죠. 그러나 이는 자바스크립트의 함수(주로 appendChild())를 이용한 기능이며, 사용자가 자바 스크립트를 사용해야 구현할 수 있습니다.
자신이 설정한 개인정보 위협 모델에 따라 다르지만, 소수의 사람들은 디바이스 핑거프린팅을 막거나 통계나 광고를 위한 여러 추적기를 막기 위해 자바스크립트를 비활성화한 후 웹서핑을 할 수 있습니다. 앞서 '[Flask로 블로그 만들기] 1. 블로그를 설계하자!'에서 자바스크립트의 사용을 최소화하기로 했습니다. 그래서 '전체 글보기' 버튼을 누르면 글 목록이 메인 페이지에 추가되는 것이 아닌, 목록만 쭉 나오는 별도 페이지로 넘어가도록 구현한 것입니다.
글 보여주기
앞서 구현한 글 목록엔 글 링크가 걸려있습니다. 글 링크는 글의 번호(DB에서 글 정보가 담긴 테이블의 인덱스)와 같으며, 한마디로 첫번째 쓴 글의 주소는 /1이고 두번째 쓴 글 주소는 /2입니다. 만약 글 인덱스가 num이라는 필드로 관리되고 있고 사용자가 요청한 주소가 /1이면 WHERE num=1 인 글을 불러와주면 되는 것이죠. 이렇게 글을 불러와서 본문 레이아웃에 넣으면 아래와 같은 모습이 됩니다.
글 좌측엔 글의 정보가 나열되어있습니다. 글 정보에서 볼 수 있는 글의 발행일, 분류, 라이선스는 직접 DB에 저장되어있고, 글자 수는 저장된 글을 가지고 Flask에서 매번 계산합니다. 연관 글이 보이는데 이 역시 연관 글이 있을 경우 사용자가 글을 요청할 때 Flask에서 그때그때 계산해서 보여주는 것입니다.
우측의 콘텐츠 내비게이션은 id 앵커 기능을 사용합니다. h2, h3 태그에 각각 id를 주고 그 id로 이동하는 앵커를 우측 콘텐츠 내비게이션에 넣은 것이지요. 부드럽게 스크롤 되는 것은 css에 scroll-behavior 속성을 사용한 것입니다. 결국 상단의 스크린숏 화면에서 자바스크립트는 하나도 쓰지 않았습니다. (단, 스크롤 위치에 따라 콘텐츠 내비게이션의 각 목록에 하이라이트가 들어가는데, 이는 자바스크립트를 사용했습니다. 이 기능은 없어도 주기능 이용에 문제 없으니까요.)
HTML5와 CSS3는 정말 놀라울 정도로 많은 기능을 지원합니다. 아직 :has 가상 선택자 등 일부 환경에서만 지원하는 속성을 제외하면 상상하는 웬만한 기능을 JS의 도움 없이 만들 수 있습니다. 물론 JS를 사용하면 더욱 사용자 친화적으로 만들 수 있지만, 불가피한 경우가 아니면 JS를 사용하지 않을 때 서비스의 주기능을 이용하지 못하게 만들 필요는 없습니다. 물론 실제 대부분의 웹 서비스에선 JS를 필요로 할 것입니다.
다음엔 검색 기능과 댓글 기능을 구현해보도록 하겠습니다.
시리즈: Flask로 완전 처음부터 블로그 만들기
3. 글 목록과 본문 보여주기 (현재)