11. 항상 만들고 나면 조금씩 아쉽다: 계속되는 다듬기

👤 관리자

조회 수 114

들어가며: 개발자의 욕심은 끝이 없고, 수정은 계속된다

지난 10편에서 Jinja2를 활용해 예쁜 웹진형 썸네일 게시판을 만들고, 페이지네이션과 추천수 기능까지 완벽하게 연동했습니다. 직접 만든 웹사이트에 접속해서 사진들이 타일처럼 예쁘게 정렬된 모습을 보고 있으니 그동안의 고생이 싹 씻겨 내려가는 듯했습니다.

"드디어 완성이구나!" 하고 두 다리 뻗고 잘 줄 알았는데, 사람의 욕심이란 참 무섭습니다. 하루 이틀 사이트를 들여다보고 이것저것 테스트를 하다 보니, 처음엔 보이지 않던 거슬리는 부분들이 하나둘 눈에 밟히기 시작했습니다. 기능이 '작동'하는 것을 넘어, 유저들이 실제로 '재미있게' 즐길 수 있는 환경을 만들려면 대대적인 다듬기 작업이 필요했습니다. 오늘 이야기는 그 아쉬움을 채워나가는 치열한 유지보수와 고도화의 기록입니다.

1. 고인물을 막아라: 최근 30일 데이터 기반 알고리즘 랭킹 시스템

가장 먼저 제 눈에 띈 문제점은 지난번 야심 차게 만들었던 **'추천수/조회수 랭킹 보드'**였습니다.

처음에는 단순히 누적 추천수가 가장 많은 게시글을 1위부터 순서대로 보여주도록 코드를 짰습니다. 그런데 며칠 지나지 않아 치명적인 단점을 발견했습니다. 예전에 올라와서 이미 추천을 잔뜩 받은 이른바 '고인물' 게시글들이 랭킹 상위권을 영원히 독식해 버리는 현상이 발생한 것입니다.

특히 제가 구상한 커뮤니티는 인스타그램 등에서 화제가 되는 최신 미디어나 핫한 사진들이 실시간으로 업로드되어야 하는 곳입니다. 어제 올라온 엄청난 화제의 신규 게시글이, 6개월 전에 올라온 평범한 글의 누적 추천수를 이기지 못해 랭킹 보드에 노출조차 되지 않는다면 커뮤니티의 역동성은 완전히 죽어버릴 것이 뻔했습니다.

그래서 SQLAlchemy 코드를 대대적으로 뜯어고쳤습니다. 전체 누적 데이터가 아니라, **'오늘을 기준으로 정확히 최근 30일 이내에 작성된 게시글'**들만 필터링(Filter)하여 그 안에서 추천수와 조회수 알고리즘을 돌리도록 로직을 변경했습니다. 파이썬의 <code>datetime</code> 모듈을 이용해 <code>현재 시간 - 30일</code>을 계산하고, 이 조건에 맞는 싱싱한 데이터들만 랭킹 보드에 올라오도록 설정한 것이죠. 이제 제 웹사이트의 랭킹 보드는 매일매일 새로운 트렌드를 반영하는 진짜 '핫플'로 거듭나게 되었습니다.

2. 심장이 철렁: VS Code CSS 문법 오류(빨간줄)의 진실

나 같은 초보는 에러만 봐도 식은땀이 흐른다.

<나 같은 초보는 에러만 봐도 식은땀이 흐른다.>

게시판과 랭킹 보드의 디자인(UI)을 조금 더 세련되게 다듬기 위해 VS Code 에디터에서 CSS 코드를 한참 만지던 중이었습니다. 썸네일 이미지 위에 마우스를 올렸을 때 자연스럽게 어두워지는 호버(Hover) 효과를 넣으려고 코드를 작성하는데, 갑자기 VS Code 화면에 살벌한 **'빨간줄(Syntax Error)'**들이 쫙 그어지기 시작했습니다.

"서버가 또 터지는 건가?!" 순간 식은땀이 확 났습니다. 예전 워드프레스 시절 코드 한 줄 잘못 넣었다가 사이트가 날아간 트라우마가 발동한 것이죠.

떨리는 손으로 원인을 분석해 보니, 이 빨간줄은 진짜 에러가 아니었습니다. 저는 HTML 파일 안의 <code><style></code> 태그에 파이썬 백엔드 데이터를 바로 꽂아 넣기 위해 <code>background-image: url('{{ post.image_url }}');</code> 처럼 Jinja2 템플릿 문법을 섞어서 사용하고 있었습니다. 그런데 VS Code에 내장된 기본 CSS 검사기(Linter)는 이 <code>{{ }}</code>라는 낯선 기호를 순수한 CSS 문법으로 인식하지 못하고 "문법이 틀렸다"라며 억울한 빨간줄을 그어대고 있었던 것입니다.

결론적으로, 웹 브라우저에서 사이트를 새로고침 했을 때 디자인이 찰떡같이 잘 적용되어 나온다면 이 빨간줄은 과감하게 무시해도 되는 경고였습니다. 에디터의 경고에 쫄지(?) 않고 뚝심 있게 개발을 이어나갈 수 있는 깡이 조금 생겼달까요?

3. 서버 폭파 방지 위원회: Git과 .gitignore를 활용한 미디어 백업 제외하기

코드가 잘되어도 언제들 백업가능한 든든한 Git

<코드가 잘되어도 언제들 백업가능한 든든한 Git>

기능이 하나둘 고도화될수록, 제 노트북 서버에 담긴 이 파이썬 코드들이 너무나도 소중해졌습니다. 만약 노트북 하드디스크가 날아가면 이 피 같은 코드들을 다 잃는다는 생각에 아찔해졌고, 드디어 미뤄두었던 Git(깃)과 GitHub를 도입하여 서버 코드를 안전하게 백업하기로 결심했습니다.

그런데 여기서 아주 큰 문제가 하나 있었습니다. 제 웹사이트는 유저들이 직접 사진이나 미디어를 업로드하고 다운로드하는 기능이 핵심입니다. 만약 전체 폴더를 생각 없이 <code>git add .</code> 명령어로 깃허브에 백업해 버린다면? 유저들이 올려둔 수백 메가, 수 기가바이트의 고화질 이미지 파일들까지 몽땅 깃허브 서버로 전송되다가 용량 초과로 백업 자체가 터져버릴 것이 분명했습니다.

이때 저를 구원해 준 것이 바로 <code>.gitignore</code> 파일입니다.

.gitignore 란?: 깃(Git)에게 "이 폴더와 파일들은 백업하지 말고 그냥 무시해 줘!"라고 알려주는 블랙리스트 명단입니다.

</li></ul>

저는 프로젝트 최상단에 <code>.gitignore</code> 파일을 만들고, 유저들의 사진이 저장되는 <code>/static/uploads/</code> 폴더 경로를 살포시 적어두었습니다. 아, 혹시 몰라서 파이썬 가상환경 폴더(<code>venv</code>)와 비밀번호가 담긴 환경 변수 파일(<code>.env</code>)도 함께 적어 넣었죠.

이렇게 설정하고 깃허브에 백업을 진행하니, 무거운 미디어 파일들은 쏙 빠지고 오로지 제가 땀 흘려 작성한 '가벼운 코드 파일'들만 아주 빠르고 안전하게 클라우드 저장소에 안착했습니다. 이제 노트북이 부서져도(?) 언제든 코드를 살려낼 수 있는 완벽한 불사신 서버가 된 것입니다.

마치며: 운영의 묘미를 향해

랭킹 시스템을 트렌디하게 바꾸고, UI의 디테일을 잡고, 완벽한 코드 백업 체계까지 갖추니 이제 정말 번듯한 하나의 웹 서비스가 돌아가고 있다는 실감이 납니다. "항상 만들고 나면 아쉽다"는 제 푸념은, 어쩌면 사이트를 향한 깊은 애정의 또 다른 표현이었던 것 같습니다.

다음 12편에서는 개발을 넘어 **'본격적인 사이트 관리 및 운영기'**를 다뤄볼까 합니다. 예를 들어, 남자 아이돌 게시판에 실수로 올라간 여자 아이돌 사진을 관리자 아이디로 접속해 올바른 게시판으로 쓱싹 이동시키는 '관리자 전용 제어 기능', 혹은 사이트 유지보수 시 대문을 블로그처럼 임시로 가려두는 '위장막(블라인드) 코드' 세팅 등 진짜 운영자만이 겪는 리얼한 에피소드들을 준비해 오겠습니다. 계속해서 다듬어지는 저의 웹사이트를 지켜봐 주세요!

지난편 보러가기: 10. 방구석 서버의 한계를 넘다: Render 백업부터 웹진형 게시판 개발까지

다음편 보러가기: 12. 모바일 유저를 잡아라! 반응형 웹 디자인과 Jinja2 디테일의 완성

<code><style></code> 태그에 파이썬 백엔드 데이터를 바로 꽂아 넣기 위해 <code>background-image: url('{{ post.image_url }}');</code> 처럼 Jinja2 템플릿 문법을 섞어서 사용하고 있었습니다. 그런데 VS Code에 내장된 기본 CSS 검사기(Linter)는 이 <code>{{ }}</code>라는 낯선 기호를 순수한 CSS 문법으로 인식하지 못하고 "문법이 틀렸다"라며 억울한 빨간줄을 그어대고 있었던 것입니다.