MMX_BOARD_UI_POLICY_001

문서 목적

이 문서는 MMX의 게시판형 화면을 구현할 때 공통으로 따라야 하는 UI/UX 기준을 정의한다.

적용 대상:

• www 외부 커뮤니티 게시판
• www 공지사항 게시판
• project_document 내부 팀 개발 게시판(dev-board)

이 문서는 카드형 커뮤니티가 아니라 전통적인 리스트형 게시판 UX를 기준으로 한다.

1. 핵심 원칙

1. 게시판은 한눈에 읽혀야 한다.
2. 목록에서 정보 비교가 쉬워야 한다.
3. 제목 클릭 중심 흐름이어야 한다.
4. 보이는 버튼은 전부 동작해야 한다.
5. 상세/댓글/이전글/다음글/글쓰기까지 자연스럽게 이어져야 한다.
6. 커뮤니티와 dev-board는 같은 패턴을 공유하되, tone과 badge만 다르게 간다.

2. 게시판 공통 구조

2-1. 목록 페이지 공통 구조

상단 영역:

• 게시판 제목
• 게시판 설명 1줄
• 상단 탭
• 카테고리 필터
• 정렬
• 페이지 크기
• 글쓰기 버튼

목록 본문 컬럼 기본형:

• 번호
• 말머리
• 제목
• 글쓴이
• 작성일
• 조회
• 추천

선택 확장 컬럼:

• 댓글 수
• 상태
• 우선순위
• 작성자 역할 배지

2-2. 상세 페이지 공통 구조

• 제목
• 말머리/상태/우선순위 배지
• 작성자 / 역할 / 작성일 / 수정일
• 조회 / 추천 / 댓글 수
• 본문
• 이전글 / 다음글
• 목록 버튼
• 댓글 목록
• 댓글 입력

2-3. 글쓰기 페이지 공통 구조

• 말머리 선택
• 제목 입력
• 본문 입력
• 등록 버튼
• 취소 버튼

선택 확장:

• 상태 선택
• 우선순위 선택
• 작성자 역할 선택
• 이미지 첨부 영역

3. 상단 탭 규칙

게시판 상단 탭은 아래 계열을 사용한다.

• 전체글
• 공지
• 인기글 또는 개념글

규칙:

1. 기본 진입은 전체글
2. 공지는 pinned 또는 notice 개념과 연결
3. 인기글/개념글은 추후 likes/views/comments 기준으로 계산 가능해야 함

4. 카테고리 규칙

4-1. 외부 커뮤니티 기본 카테고리

• 일반
• 질문
• 팁
• 후기
• 모집
• 홍보
• 공지

4-2. dev-board 기본 구간

• M0
• M1
• M2
• M3
• M4

규칙:

1. dev-board에서는 카테고리 대신 구간 개념으로 노출
2. 목록에서 제목보다 먼저 인식돼야 함
3. 색상은 과하지 않게 구분되되, 읽기성을 해치지 말 것

5. 컬럼 규칙

필수 컬럼

• 번호
• 말머리 (dev-board에서는 구간)
• 제목
• 글쓴이
• 작성일
• 조회
• 추천

제목 영역 규칙

제목 영역은 다음 요소를 포함할 수 있다.

• 제목 텍스트
• 댓글 수
• NEW 표시
• 공지/고정 여부

작성일 규칙

• 목록에서는 짧은 포맷 우선
• 상세에서는 전체 날짜/시간 표시

조회/추천 규칙

• 우측 정렬
• 숫자 비교가 쉬워야 함

6. 배지 규칙

6-1. 공통 배지

• 공지
• 고정
• NEW

6-2. dev-board 전용 배지

상태

• open
• in_progress
• blocked
• done

우선순위

• low
• medium
• high
• urgent

역할

• owner
• pm
• frontend
• backend
• design
• gm

규칙:

1. 상태와 우선순위는 목록에서도 빠르게 읽혀야 함
2. 색은 쓰되 장난스럽지 않게 운용
3. 운영자/개발자/PM 구분은 role badge로 가능하게 설계

7. 목록 UX 규칙

1. 공지는 일반 글보다 상단에 고정 가능해야 함
2. 제목 클릭 시 상세로 이동
3. 글쓰기 버튼은 항상 눈에 띄는 위치에 둔다
4. 정렬/필터는 실제 동작하거나, mock 단계에서도 동작하는 것처럼 연결해야 함
5. empty 상태에서도 화면이 어색하지 않아야 함

empty state 권장 문구

• 커뮤니티: 아직 등록된 글이 없습니다. 첫 글을 남겨보세요.
• dev-board: 아직 등록된 개발 이슈가 없습니다. 새 요청을 등록해 주세요.

8. 상세 UX 규칙

1. 본문 가독성이 최우선
2. 댓글은 본문 하단에서 자연스럽게 이어짐
3. 이전글/다음글은 목록 탐색을 돕는 정도로 배치
4. 목록 복귀 버튼은 항상 명확하게 제공
5. 추천/댓글 동작은 dead state 없이 처리

9. 반응형 규칙

PC

• 게시판 테이블 가독성 최우선
• 컬럼 정렬 명확히 유지

Tablet

• 일부 컬럼 축소 가능
• 제목/말머리/작성자/날짜 우선

Mobile

• 완전한 테이블 유지보다 읽기 가능한 리스트형 축약 허용
• 단, 게시판 같다는 인상은 유지해야 함
• 제목 / 말머리(또는 구간) / 작성자 / 날짜 / 조회·추천 정도는 남겨야 함

10. 톤 구분

외부 커뮤니티

• MMX 브랜드 톤 유지
• 다크/네온 계열 가능
• 그러나 게시판 가독성이 브랜드 연출보다 우선

dev-board

• 실무적이고 운영툴 같은 느낌
• 문서 저장소처럼 보이지 말 것
• 팀이 매일 들어와 쓰는 게시판처럼 보여야 함
• 스크린샷/참고 이미지 붙여넣기와 첨부가 가능해야 함

11. 구현 원칙

1. 보이는 버튼은 모두 동작
2. 목록 → 상세 → 글쓰기 → 목록 흐름 전부 연결
3. mock 단계에서도 interaction이 있어야 함
4. API 연결 전환을 고려해 types / data / view 분리
5. snake_case 기반 API와 쉽게 연결 가능해야 함

12. 프론트/백엔드 공통 요구

프론트와 백엔드는 아래 정보를 기준으로 맞춘다.

목록에서 필요한 대표 필드:

• id
• category
• title
• author_name
• created_at
• views
• likes_count
• comments_count
• is_pinned

dev-board 추가 필드:

• status
• priority
• author_role
• image_urls 또는 이에 준하는 첨부 이미지 필드

13. 이 문서의 성격

이 문서는 선택형 아이디어 모음이 아니라, MMX 게시판 구현의 기준선이다.

Claude Code는 이 기준에 맞는 API 구조를 준비하고, Cursor는 이 기준에 맞는 화면 구조를 구현한다.

14. 결론

MMX의 게시판은 단순 카드 피드가 아니라, 익숙하고 빠르게 읽히는 전통적인 게시판형 UI를 기준으로 통일한다.

이 원칙은

• 홈페이지 커뮤니티
• 공지사항
• 내부 개발 게시판 에 공통 적용한다.