# design-type-06 — 스타일 프로파일 (출처: dev-forum-type-b.vercel.app)

원본: https://dev-forum-type-b.vercel.app/ (INCODING Community Forum 제품 데모, 테넌트: "CLUB CAR SPORT" 자동차 동호인 커뮤니티)
실측일: 2026-07-21, viewport 1440×900, 페이지 총높이 11450px (홈 피드 기준)
실제 사용 스택: Next.js + Tailwind + (Swiper — 이미지 슬라이더), 다국어(한/영/일) AI 자동번역 배너 내장. GSAP/canvas/video 배경 없음 — 애니메이션이 아니라 **정보 밀도와 구조**가 스타일을 결정하는 사이트.

## 한 줄 요약

레딧(Reddit)류 **3컬럼 피드 커뮤니티**의 정석 — 좌측 고정 내비(홈/인기/보드 카테고리), 중앙 무한 스크롤 게시글 피드(작성자·보드태그·미디어·반응 카운트), 우측 sticky 위젯 레일(로그인 CTA/투표/최근글 랭킹). 화이트 배경 + 잉크 텍스트 + **레딧 오렌지(#FF4500) 단일 포인트 컬러**로 절제된 실용주의 톤.

## 배경 매체

- video/canvas 없음. 시각적 임팩트는 게시글 첨부 이미지(16:9~4:3 실사 사진)가 담당
- 헤더 아래 공지 띠배너(오렌지 배경, 흰 텍스트, "오늘 하루 안 보기" 닫기) + 로드 시 AI 번역 홍보 모달(오렌지 CTA 버튼) — 둘 다 dismiss 가능한 오버레이형 공지 패턴

## 타이포 스케일 (실측)

| 용도 | 값 |
|---|---|
| 폰트 | "Pretendard Variable", Pretendard, -apple-system, system-ui |
| body | 16px / line-height 25.6px(1.6) / color rgb(26,26,26) |
| h1 (페이지 타이틀, 예: "CLUB CAR SPORT") | 30px / weight 700 / letter-spacing -1.5px |
| h3 (게시글 제목) | 20px / weight 600 |
| 보드 태그·메타(작성자/날짜) | 13px / weight 400 |
| 버튼 (LOGIN/JOIN, 상단 로그인) | 13px / weight 700 |

## 컬러 사용 방식 (실측)

| 색 | 값 | 어디에 쓰나 |
|---|---|---|
| 잉크 | rgb(26,26,26) | 본문 텍스트 기본 (순검정 아님) |
| 배경 | #fff | 전역 배경, 카드 배경 |
| **포인트 오렌지** | **rgb(255,69,0) = #FF4500** (레딧 오렌지, 유채색 1위) | 로고 포인트("CLUB"), LOGIN/JOIN 버튼, 보드 태그 라벨(Community/Blind 등), 공지 배너, 투표 위젯 헤더 아이콘 |
| 회색 텍스트 | lab(34.9 0 0) ≈ #565656 계열 | 보조 메타 텍스트, 비활성 상태 |
| 카드 구분선 | 헤어라인(1px 옅은 회색) | 데스크탑 피드는 카드 사이 보더 없이 hairline 구분, 모바일은 카드형 border+shadow로 전환 |

## 레이아웃 구조 (3컬럼 sticky)

- **좌측 사이드바(220px 고정)**: 로고 아래 홈/인기 + "BOARDS" 라벨 + # 아이콘 보드 목록(새소식/블라인드/자유게시판/미디어갤러리/레딧스타일). 데스크탑에서 `position: static`(스크롤 시 같이 흐름), 상단에 "탐색 메뉴 접기" 토글 버튼 존재
- **중앙 피드(가변폭, 무한 스크롤)**: 게시글 카드 반복 — 아바타+닉네임 → 보드태그(오렌지) → 날짜 → 제목(h3, 20px/600) → 본문 발췌(2~3줄) → 미디어(있으면) → 반응 바(좋아요/댓글/조회 pill 버튼 3개, `rounded-full` 회색 배경)
- **우측 레일(고정폭, `position: sticky`)**: ①로그인 유도 카드(오렌지 CTA) ②Community Polls 위젯(오렌지 아이콘 헤더 + 진행률 "1/2" + 질문 + 2×2 선택 버튼) ③Recent Posts 랭킹(1~5 번호 리스트, 좋아요/댓글 카운트 메타) ④SNS 아이콘 줄 + 회사 정보 푸터(사업자번호/주소/연락처)
- **헤더**: `position: sticky`, 로고 + 언어 선택(EN/KO 드롭다운, 실제 AI 자동번역 동작) + 로그인 버튼(오렌지)

## 반응형 (실측, 768/390 스크린샷)

- 768px(태블릿): 좌측 사이드바 유지, 우측 레일 폭 축소
- 390px(모바일): 좌/우 사이드바 완전히 접힘 → 헤더 우측 햄버거 메뉴로 통합, 중앙 피드만 단일 컬럼 노출, **카드가 border+shadow가 있는 명확한 카드형으로 전환**(데스크탑의 hairline 구분과 다름)

## 다국어/커뮤니티 정체성 장치

- 헤더의 언어 드롭다운(EN/KO/JP)으로 즉시 전체 UI + 게시글 본문까지 AI 번역 — 로드 시 이를 알리는 프로모션 모달 노출("Instantly Build a Global Community with AI Translation")
- 보드(게시판) 자체가 카테고리 태그로 시각화되어 피드에 섞여 노출되는 방식(별도 게시판 페이지 이동 없이 홈 피드에서 전체 통합 열람 가능) — 이것이 이 템플릿의 핵심 정보구조 차별점

## 스크린샷

- `screenshots/full_1440.png`, `hero_intro/hero_2s/hero_settled.png`(정적 레이아웃 — 로드 애니메이션 없음, 동일 프레임 확인됨)
- `screenshots/section_01~12.png` (스크롤 시퀀스, 무한 피드)
- `screenshots/tablet_768.png`, `screenshots/mobile_390.png`
- 원시 실측: `tokens-raw.json`