커뮤니티 탭을 사이드 메뉴로 다시 정리했다

시작은 Filter 버튼이었다

원래 커뮤니티 탭 우측 상단에 Filter 버튼이 있었습니다. 누르면 별도 화면으로 들어가서 카테고리/검색/정렬을 할 수 있었죠.

문제는, 같은 기능들이 이미 화면 안쪽에 인라인으로 깔려 있었습니다. 카테고리 chip도 있고, 검색창도 있고, 정렬 아이콘도 있고. Filter 화면은 그냥 같은 기능을 더 큰 폼팩터로 한 번 더 보여주는 역할이었어요. 중복.

그래서 빼기로 했습니다. 시작은 그게 다였습니다.

”그 자리에 뭘 넣지?” 에서 시작된 도미노

Filter 버튼 자리가 비니까 거기에 정보 버튼을 넣자고 했습니다. 누르면 “여기는 커뮤니티예요” 같은 안내가 나오는 거. 마침 menu-community.tsx라는 화면이 코드에는 있는데 어디서도 navigate되지 않는 죽은 라우트로 남아 있었어요. 본문 텍스트가 꽤 정성스럽게 적혀 있었고요.

그래서 그 dead route를 살리는 걸로 시작했습니다. 트레일링에 메뉴 버튼을 넣고, 그 안에 “About Community” 항목 하나를 두고. 자유 게시판도 같이 넣고, 공지사항도 옮겨 오고.

근데 그러다 보니 “각 섹션을 별도 화면으로 navigate하는 것보다 커뮤니티 탭 안에서 직접 전환하면 어떨까?”라는 생각이 들었습니다. 디스코드/슬랙처럼요.

사이드 메뉴 패턴

좌측 상단에 새 버튼을 만들고, 누르면 좌측에서 사이드 메뉴가 슬라이드로 나옵니다. 그 안에:

• 공개 보관함 (Public Library)
• 자유 게시판 (Freeboard)
• 공지사항 (Notice)

3개 섹션. 선택하면 커뮤니티 탭의 본문이 그 섹션으로 바뀝니다. URL 이동 없이.

각 섹션은 컴포넌트로 분리했습니다:

• components/page/PublicLibrarySection.tsx
• components/page/FreeboardSection.tsx
• components/page/NoticeSection.tsx

좌측 상단 아이콘은 적당한 게 없어서 직접 SVG를 만들었습니다. 사각형 + 좌측에 수직 분리선이 들어간 “서랍” 모양. 햄버거 아이콘은 우측에 이미 있어서 좌측까지 햄버거면 어색했거든요.

”햄버거 메뉴도 섹션별로 다르게”

여기서 또 한 단계. 우측 햄버거 메뉴는 어쨌든 살려두기로 했는데, 거기서 보이는 메뉴도 현재 어떤 섹션을 보고 있느냐에 따라 달라져야 한다는 결론. 그래서:

• menu-public-library / menu-free-board / menu-notice 3개로 분리
• 각각 그 섹션 전용 액션 (예: “내가 쓴 글”, “정보”)
• 정보(About)도 about-public-library / about-free-board / about-notice로 분리

기존 menuCommunity.body라는 i18n 키 하나에 길게 적혀 있던 본문도 섹션별로 쪼갰습니다. 공개 보관함 단락은 menuPublicLibrary.body로, 자유 게시판 단락은 menuFreeboard.body로. 공지사항은 본문이 없어서 새로 짧게 썼습니다.

”내가 쓴 글” 추가

각 섹션 메뉴에 “내가 쓴 글”이 있으면 좋겠다는 요청. 이건 서버 변경이 필요했습니다.

기존 gather_overview, gather_freeboards 엔드포인트에 mine: bool = False 파라미터를 추가하고, true면 created_by == 본인 ID로 필터링. mongo 쿼리도 vector search 파이프라인까지 같이 조정.

모바일에서는 별개의 화면 list-my-overview.tsx, list-my-freeboard.tsx을 만들어서 mine=true로 호출. atom은 글로벌 공유 atom이 아니라 로컬 state로 격리해서 일반 리스트와 충돌 없게.

Freeboard → 밤 하늘 / Nox Caelo

자유 게시판이라는 이름은 너무 generic하다는 생각이 들어서 한국어는 “밤 하늘”, 영어는 “Nox Caelo”(라틴어로 밤 하늘)로 리네임했습니다. 라우트나 파일명은 그대로(list-freeboard 등)이고 표시 라벨만.

브랜드 정체성이라는 측면에서, “자유 게시판”보다 “밤 하늘”이 좀 더 그곳의 분위기를 잘 표현할 것 같았습니다. 누군가 조용히 글을 올리고, 누군가 그걸 보고 별처럼 가끔 빛나는. 너무 거창한가요. 일단 그렇게 갑니다.

데스크탑에도 같은 멘탈 모델

모바일 작업이 끝난 다음 데스크탑에도 같은 패턴을 적용했습니다. 데스크탑은 슬라이드 drawer는 어울리지 않으니 영구 좌측 사이드바로. SplitLayout 좌측에 200px짜리 narrow sidebar를 두고, 거기에 3섹션 + 각 섹션의 sub-item(내 글 / 정보).

About은 모바일처럼 별도 화면으로 navigate하기보단 모달로 띄워서 그 자리에서 본문을 보여주는 방식으로. 데스크탑은 그게 더 자연스럽습니다.

i18n은 모바일 locale을 데스크탑이 그대로 import하고 있어서, 라벨 변경은 양쪽에 자동 반영됐습니다. 이건 살짝 운이 좋았습니다.

사이드 메뉴 자체의 디테일

사이드 메뉴를 처음 만들었을 때는 평범했습니다. 그래서 “조금 매력적으로 만들 방법 없을까?”라는 피드백.

• 상단에 “커뮤니티” 헤더 + 큰 아이콘을 넣어봤습니다 → 너무 큼 → 같은 사이즈로 줄임 → 결국 “없는 게 낫다”로 결론. 빼버림.
• 선택된 항목 좌측에 4px PRIMARY 세로 바를 넣었습니다. 이건 살아남음.
• 항목 사이 가로선을 NEUTRAL200 → NEUTRAL300으로 살짝 진하게.

elevation(그림자)도 시도했는데 어색해서 뺐습니다.

결과

• 커뮤니티 탭 = 하나의 콘테이너, 그 안에서 3섹션을 사이드 메뉴로 전환
• 각 섹션은 자기 맥락에 맞는 햄버거 메뉴를 가짐
• 같은 멘탈 모델이 모바일/데스크탑 양쪽에 적용
• “내가 쓴 글” 같은 개인화 기능도 자연스러운 자리에 배치
• “자유 게시판”이 “밤 하늘 / Nox Caelo”로 리네임

Filter 버튼 하나 치우는 걸로 시작해서 여기까지 왔습니다. 처음부터 이렇게 하려고 한 건 아니었는데, 한 단계씩 따라가다 보니 자연스럽게 도착했네요.

리팩토링은 종종 이렇습니다. 처음엔 “이 버튼 하나 빼자”였는데, 그게 다른 버튼의 의미를 흔들고, 그 버튼을 다시 정의하니 또 다른 부분이 어색해지고. 그렇게 한 바퀴 돌아서 전체가 정돈됩니다. 매번 이게 옳은 길인지는 모르겠습니다만, 적어도 오늘은 마지막 모양이 더 마음에 드네요.