12. 모바일 유저를 잡아라! 반응형 웹 디자인과 Jinja2 디테일의 완성

👤 관리자

조회 수 101

들어가며: 내 웹사이트, 스마트폰으로 접속해 본 적 있으신가요?

지난 11편에서 30일 기반의 랭킹 알고리즘을 완성하고 서버 코드까지 안전하게 깃허브에 백업해 두었습니다. 시스템적으로는 제법 탄탄해진 것 같아 뿌듯한 마음에, 퇴근길 지하철에서 스마트폰을 꺼내 제 웹사이트에 접속해 보았습니다.

그런데 웬걸, 화면을 보는 순간 경악을 금치 못했습니다. 넓은 PC 모니터에 맞춰 예쁘게 배열해 두었던 썸네일 이미지들이 모바일의 좁은 화면에서는 개미만 하게 쪼그라들어 있었고, 상단 메뉴바는 줄 바꿈이 되면서 화면의 절반을 가리고 있었습니다.

아무리 서버를 무중단으로 튼튼하게 돌리고 알고리즘을 기가 막히게 짜놓아도, 결국 유저의 90% 이상이 접속하는 '모바일 환경'이 엉망이라면 아무도 이 커뮤니티를 이용하지 않을 것이 뻔했습니다. 오늘 이야기는 모바일 유저의 마음을 사로잡기 위해 밤을 새워가며 뜯어고친 UI/UX(사용자 환경 및 경험) 개선기입니다.

1. PC는 2열, 모바일은 1열! CSS 미디어 쿼리(Media Query)의 마법

가장 시급한 문제는 썸네일 게시판의 배열이었습니다. 인스타그램 같은 미디어 중심의 커뮤니티는 사진이 큼직하고 시원하게 보여야 제맛입니다. 하지만 화면이 좁은 스마트폰에서 PC와 똑같이 여러 열로 사진을 욱여넣으니, 사진 속 인물이 누구인지조차 알아보기 힘들었습니다.

이 문제를 해결하기 위해 도입한 기술이 바로 **'반응형 웹(Responsive Web)'**의 핵심인 **CSS 미디어 쿼리(Media Query)**입니다.

미디어 쿼리란?: 접속한 기기의 화면 너비(Width)를 인식해서, PC, 태블릿, 스마트폰 등 각각의 기기에 맞는 별도의 디자인(CSS)을 입혀주는 마법 같은 기술입니다.

</li></ul>

저는 CSS 파일에 <code>@media screen and (max-width: 768px)</code>라는 코드를 추가했습니다. "화면 너비가 768픽셀 이하(스마트폰 사이즈)로 줄어들면 이 디자인을 적용해라!"라는 뜻이죠. 이 조건문 안에, 스마트폰에서는 사진이 화면 가로를 꽉 채우도록 '모바일 1열(1 Column)' 배치를 지시했습니다. 반대로 넓은 모니터에서는 사진이 너무 거대해지는 것을 막기 위해 **'PC 2열(2 Columns)'**로 나란히 보이도록 그리드(Grid)를 세팅했습니다.

코드를 서버에 올리고 PC 브라우저 창의 크기를 마우스로 잡고 줄여보았습니다. 특정 크기 이하로 창이 좁아지는 순간, 나란히 있던 2개의 사진이 스르륵 하고 세로 1줄로 예쁘게 재배치되는 것을 보며 "이게 진짜 웹 디자인이구나!" 하는 짜릿함을 느꼈습니다.

2. 앱(App)처럼 매끄럽게, 모바일 가로 스와이프 네비게이션 바

게시글 배치를 해결하고 나니, 이번엔 화면 상단의 **네비게이션 바(메뉴바)**가 거슬렸습니다. 자유게시판, 아이돌 사진 게시판, 랭킹 보드 등 메뉴 개수가 늘어나다 보니 모바일 화면에서는 이 메뉴들이 두 줄, 세 줄로 밀려 내려와 버렸습니다. 화면을 스크롤하기도 전에 메뉴가 공간을 다 차지해 버리니 여간 답답한 게 아니었습니다.

"요즘 나오는 모바일 앱들처럼, 메뉴를 한 줄로 길게 늘어뜨리고 손가락으로 옆으로 슥슥 밀어서(스와이프) 볼 수는 없을까?"

이 역시 CSS의 힘으로 간단하게 해결할 수 있었습니다. 메뉴를 감싸고 있는 박스에 <code>white-space: nowrap;</code>을 주어 글씨가 밑으로 줄 바꿈 되는 것을 강제로 막아버렸습니다. 그리고 삐져나간 메뉴들은 <code>overflow-x: auto;</code> 속성을 주어 가로로 스크롤이 가능하게 만들었죠. 여기에 스크롤바가 보이면 못생겨 보이니까 <code>::-webkit-scrollbar { display: none; }</code>을 추가해 스크롤바를 투명하게 숨겨버렸습니다.

스마트폰으로 접속해 상단 메뉴를 손가락으로 부드럽게 좌우로 밀어보는 순간, 제 웹사이트가 단순한 웹페이지를 넘어 진짜 네이티브 '어플리케이션'에 한 발짝 다가선 것 같은 고급스러움이 느껴졌습니다.

3. 철통 보안 랭킹 보드: Jinja2 조건문으로 글쓰기 버튼 숨기기

디자인을 예쁘게 다듬고 나니, 이번엔 논리적인(Logic) 헛점이 하나 눈에 띄었습니다. 제 커뮤니티에는 유저들의 추천수와 알고리즘으로 자동으로 순위가 매겨지는 '랭킹 보드(명예의 전당)' 게시판이 있습니다. 그런데 이 랭킹 보드 페이지 우측 하단에 버젓이 [글쓰기] 버튼이 활성화되어 있는 것이 아니겠습니까?

랭킹 보드는 시스템이 알고리즘을 돌려 기존 게시글들을 진열해 주는 전시관 같은 곳입니다. 유저가 이 게시판에 직접 다이렉트로 새 글을 작성한다는 것은 논리적으로 말이 안 되는 상황이었죠. 하지만 [글쓰기] 버튼은 사이트의 기본 뼈대(Base Template)에 박혀있었기 때문에 모든 게시판에서 공통으로 출력되고 있었습니다.

이 버튼을 특정 게시판에서만 안 보이게 하려면 파이썬 백엔드와 HTML 프론트엔드를 연결해 주는 Jinja2(진자2) 템플릿의 조건문이 필요했습니다.

저는 HTML 코드의 글쓰기 버튼 태그 주변을 다음과 같은 Jinja2 문법으로 감쌌습니다. <code>{% if board_name != 'ranking' %}</code> <code><button>글쓰기</button></code> <code>{% endif %}</code>

해석하자면 **"현재 접속한 게시판의 이름이 'ranking(랭킹 보드)'이 아닐 때만 글쓰기 버튼을 화면에 그려라!"**라는 뜻입니다. 코드를 적용하고 랭킹 보드에 들어가 보니, 눈에 가시 같았던 글쓰기 버튼이 마법처럼 싹 사라졌습니다. 반대로 자유게시판이나 일반 사진 게시판으로 이동하면 버튼이 다시 정상적으로 나타났고요.

프론트엔드의 디자인(CSS)과 백엔드의 논리(Jinja2)를 자유자재로 다루며 사이트의 디테일을 통제하는 법을 배우게 된 값진 경험이었습니다.

마치며: 모바일까지 챙긴 완성도 높은 커뮤니티의 탄생

스마트폰 한 손으로 슥슥 메뉴를 스와이프하고, 세로로 시원하게 뻗은 1열 썸네일을 감상하며, 랭킹 보드에서는 깔끔하게 전시된 인기 글만 소비할 수 있는 환경. 드디어 제가 기획했던 인스타그램 스타일의 미디어 커뮤니티가 PC와 모바일을 가리지 않고 완벽한 모습을 갖추게 되었습니다. 눈에 보이는 디테일들을 하나하나 잡아나가다 보니 웹 개발이 이토록 재밌는 것이었나 새삼 감탄하게 됩니다.

지난편 보러가기: 11. 항상 만들고 나면 조금씩 아쉽다: 계속되는 다듬기

다음편 보러가기: 13. 완벽한 커뮤니티를 위한 관리자의 고군분투: OpenCV 썸네일과 에러 대처법