GOLPRO Design System

이 문서는 골프로 웹사이트의 모든 블록 개발 시 반드시 참조해야 하는 단일 디자인 시스템입니다. 

2026 웹 트렌드 조사 및 골프로 프로젝트 적합성 독립 분석 기반으로 설계되었습니다.

0. 디자인 철학

"프리미엄 커뮤니티의 정보 밀도"

골프로의 핵심 사용자는 30~50대 한국 남성 골퍼입니다. 이들은 정보에 능숙하고 품질에 민감하며, 과도한 장식보다 신뢰감 있는 완성도를 선호합니다. 

OP.GG처럼 정보 밀도는 높되, 골프라는 스포츠가 지닌 프리미엄 클래식 이미지를 유지하는 것이 목표입니다.

2026 트렌드 채택 근거

1. 컬러 시스템

분석 근거

클라이언트 브리프의 "딥 그린"과 "화이트 배경"을 방향성으로 삼되, HEX 값은 독립적으로 유도합니다.

딥 그린 선정 과정:

• 골프장 잔디 → 선명한 초록이 아닌 깊고 침착한 포레스트 그린
• 30~50대 한국 남성 → 신뢰·권위·안정감 → 쿨하거나 밝은 그린 제외
• 2026 트렌드 "웜 뉴트럴 + 멀티토널" → 블루-그린보다 옐로우-그린 언더톤이 더 프리미엄
• 레퍼런스: Augusta National 페어웨이, 클래식 컨트리클럽 브랜딩
• 최종: #1A4731 — 웜 포레스트 그린 (HSL 150°, 46%, 18%)

화이트 배경: 클라이언트 브리프 + 2026 Clean Interface 트렌드 일치 → #FFFFFF 유지 단, 텍스트는 순수 블랙(#000000) 대신 Off-Black(#111111) 적용 (2026 트렌드)

1-1. Brand Green (Primary Palette)

Green-900: #0D2419   /* 극단적 다크, 특수 배경에만 */
Green-800: #13332B   /* 매우 어두운 그린, 강조 텍스트 */
Green-700: #1A4731   /* BRAND PRIMARY — 핵심 포인트 컬러 */
Green-600: #225C3E   /* CTA 호버 상태 */
Green-500: #2A724D   /* 보조 강조, 아이콘 */
Green-400: #38956A   /* 체크박스, 인디케이터 */
Green-300: #5CB387   /* 구분선, 경계 포인트 */
Green-200: #93CEAE   /* 뱃지 배경 */
Green-100: #C5E8D8   /* 섹션 틴트 배경 */
Green-050: #E8F6EF   /* 매우 연한 배경, hover 상태 배경 */

1-2. Neutral (Base Palette)

2026 트렌드: 순수 #000/#FFF 대신 Off-Black/Off-White 기반

Neutral-950: #111111   /* 기본 텍스트 (Off-Black) */
Neutral-800: #2D2D2D   /* 소제목, 강조 텍스트 */
Neutral-600: #525252   /* 본문 텍스트 */
Neutral-500: #737373   /* 보조 정보 */
Neutral-400: #A3A3A3   /* 플레이스홀더, 메타 */
Neutral-300: #D4D4D4   /* 비활성 상태 */
Neutral-200: #E5E5E5   /* 카드 보더 기본값 */
Neutral-100: #F0F0F0   /* 구분선 배경 */
Neutral-050: #F7F7F7   /* 섹션 서브 배경 */
Neutral-000: #FFFFFF   /* 기본 배경, 카드 배경 */

1-3. Semantic (상태·기능 컬러)

Live-Red:    #DC3030   /* 라이브스레드 인디케이터 — 강렬하되 과하지 않게 */
Gold-1st:    #C89B3C   /* 랭킹 1위, 프리미엄 뱃지 — 골드 트로피 레퍼런스 */
Silver-2nd:  #9CA3AF   /* 랭킹 2위 */
Bronze-3rd:  #B07D3A   /* 랭킹 3위 */
Info:        #2563EB   /* 정보 링크, 알림 */
Warning:     #D97706   /* 경고 */
Error:       #DC3030   /* 오류 — Live-Red와 동일 */

1-4. 컬러 사용 규칙

• 배경: 항상 #FFFFFF (카드·컴포넌트) 또는 #F7F7F7 (섹션 서브)
• 텍스트: 항상 #111111 기본, 보조는 #525252, 메타는 #A3A3A3
• 그린: CTA, 강조, 링크, 아이콘에 집중 사용. 배경에 쓸 땐 Green-050만 허용
• Gold: 랭킹·프리미엄 요소에만 — 희소성 유지, 남용 금지

• 그라데이션: 최대 2색 조합. 배경 그라데이션은 금지, 텍스트·버튼에만 제한적 허용

   

2. 타이포그래피 시스템

식스샵 프로 시스템 변수 의존

• 헤딩: var(--font-family-heading) · var(--font-weight-heading)
• 본문: var(--font-family-body) · var(--font-weight-body)

2-1. 타입 스케일 (Base 16px, 비율 1.25)

/* ── 헤딩 계열 ────────────────────────── */

Display         데스크탑 52px / 모바일 34px
                weight 900 · line-height 1.08 · letter-spacing -0.03em
                용도: 히어로 섹션 임팩트 타이틀

H1              데스크탑 38px / 모바일 28px
                weight 800 · line-height 1.15 · letter-spacing -0.025em
                용도: 페이지 제목

H2              데스크탑 28px / 모바일 22px
                weight 800 · line-height 1.25 · letter-spacing -0.015em
                용도: 섹션 제목

H3              데스크탑 21px / 모바일 18px
                weight 700 · line-height 1.35 · letter-spacing -0.005em
                용도: 카드 제목, 서브섹션

H4              데스크탑 17px / 모바일 16px
                weight 700 · line-height 1.4  · letter-spacing 0
                용도: 소제목, 리스트 헤더

/* ── 본문 계열 ────────────────────────── */

Body-LG         데스크탑 17px / 모바일 16px
                weight 400 · line-height 1.75 · letter-spacing 0
                용도: 주요 본문, 리드 카피

Body            데스크탑 15px / 모바일 15px
                weight 400 · line-height 1.70 · letter-spacing 0
                용도: 일반 본문, 게시글

Body-SM         데스크탑 13px / 모바일 13px
                weight 400 · line-height 1.55 · letter-spacing 0
                용도: 보조 정보, 메타

/* ── UI 계열 ─────────────────────────── */

Label-LG        14px (고정)
                weight 600 · line-height 1.2 · letter-spacing 0.01em
                용도: 버튼, 내비게이션

Label           13px (고정)
                weight 600 · line-height 1.2 · letter-spacing 0.02em
                용도: 태그, 뱃지, UI 레이블

Caption         11px (고정)
                weight 400 · line-height 1.4 · letter-spacing 0.03em
                용도: 타임스탬프, 저작권, 보조 설명

/* ── 통계·수치 전용 (CC 랭킹, 별점) ───── */

Stat-XL         데스크탑 40px / 모바일 28px
                weight 900 · line-height 1.0  · letter-spacing -0.03em

Stat-LG         데스크탑 28px / 모바일 22px
                weight 800 · line-height 1.1  · letter-spacing -0.02em

Stat-MD         데스크탑 20px / 모바일 17px
                weight 700 · line-height 1.2  · letter-spacing -0.01em

3. 스페이싱 시스템 (8px 그리드)

space-1:    4px
space-2:    8px    /* 기본 내부 여백 최소단위 */
space-3:    12px
space-4:    16px   /* 카드 내부 패딩 기본 */
space-5:    20px
space-6:    24px   /* 컴포넌트 간 기본 간격 */
space-8:    32px
space-10:   40px
space-12:   48px   /* 섹션 내부 상하 패딩 기본 */
space-14:   56px
space-16:   64px
space-20:   80px   /* 섹션 간 간격 기본 */
space-24:   96px
space-32:  128px   /* 큰 섹션 상하 여백 */

3-1. 섹션 패딩 가이드

섹션 상하 패딩          Desktop: 80~96px   /  Mobile: 48~64px
컨테이너 좌우 패딩   Desktop: 32~40px   /  Mobile: 16~20px
최대 컨테이너 폭      1280px
컴포넌트 내부 패딩   카드: 16~20px  /  섹션헤더: 0 0 24px
카드 그리드 갭          Desktop: 20~24px   /  Mobile: 12~16px

4. 보더 레디어스 (Bento Grid 2.0 기준)

radius-none:   0px
radius-xs:     4px    /* 인풋 필드, 인라인 태그 */
radius-sm:     6px    /* 소형 버튼, 토스트 */
radius-md:     10px   /* 버튼, 드롭다운 */
radius-lg:     14px   /* 작은 카드, 피드 아이템 컨테이너 */
radius-xl:     18px   /* 기본 카드 (Bento 2.0 권장: 12~24px) */
radius-2xl:    22px   /* 히어로 카드, 대형 카드 */
radius-3xl:    28px   /* 프로필 섹션, 특별 강조 블록 */
radius-full:   9999px /* 태그, 뱃지, 아바타, 라이브 도트 */

5. 그림자 시스템

/* 카드 기본 — 배경에서 살짝 뜨는 느낌 */
shadow-sm:  0 1px 4px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.03)

/* 카드 기본 활성 */
shadow-md:  0 4px 14px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.04)

/* 카드 호버 */
shadow-lg:  0 8px 28px rgba(0,0,0,0.09), 0 4px 10px rgba(0,0,0,0.05)

/* 강조 / 선택됨 */
shadow-xl:  0 16px 44px rgba(0,0,0,0.10), 0 8px 18px rgba(0,0,0,0.06)

/* 그린 글로우 — 활성 카드, CTA 강조 */
shadow-green: 0 8px 28px rgba(26,71,49,0.18), 0 3px 8px rgba(26,71,49,0.10)

/* 오버레이 요소 (모달, 드롭다운) */
shadow-overlay: 0 24px 64px rgba(0,0,0,0.13), 0 8px 24px rgba(0,0,0,0.07)

6. 트랜지션 & 애니메이션 시스템

식스샵 프로 QA 규칙: 애니메이션 지속시간 1초(1000ms) 이하 강제

6-1. 기준값

transition-instant:  100ms ease              /* 색상 즉각 변화 */
transition-fast:     150ms ease              /* 배경, 컬러 전환 */
transition-base:     200ms ease              /* ★ 호버 기본값 */
transition-smooth:   260ms ease              /* 크기·위치 변화 */
transition-enter:    360ms ease-out          /* 패널·드롭다운 진입 */
transition-spring:   420ms cubic-bezier(0.34, 1.56, 0.64, 1)  /* 탄성 효과 */

6-2. 호버 인터랙션 스펙

/* ━━ 일반 카드 ━━ */
transform:      translateY(-3px)
box-shadow:     shadow-md → shadow-green
border-color:   #E5E5E5 → rgba(26,71,49,0.28)
transition:     200ms ease
img scale:      1.0 → 1.07  (부모에 overflow:hidden)

/* ━━ 히어로 Grid Break 카드 (특별 처리) ━━ */
transform:      scale(1.0) → scale(1.13)
overflow:       visible (부모)  ← 프레임 돌출 핵심
z-index:        1 → 12
img scale:      1.0 → 1.08
box-shadow:     shadow-green
transition:     280ms cubic-bezier(0.34, 1.56, 0.64, 1)

/* ━━ 버튼 Primary ━━ */
background:     #1A4731 → #225C3E
transform:      translateY(-1px)
box-shadow:     none → shadow-sm
transition:     150ms ease

/* ━━ 텍스트 링크 ━━ */
color:          #111111 → #1A4731
text-decoration: none → underline (opacity 0.4)
transition:     120ms ease

6-3. 스크롤 등장 애니메이션

/* Fade Up — 기본 등장 (모든 섹션) */
@keyframes golpro-fadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* duration: 480ms ease-out | threshold: 0.08 | once: true */

/* Scale In — 통계·숫자·카드 강조 */
@keyframes golpro-scaleIn {
  from { opacity: 0; transform: scale(0.90); }
  to   { opacity: 1; transform: scale(1); }
}
/* duration: 380ms cubic-bezier(0.34,1.56,0.64,1) */

/* Stagger 딜레이 — 리스트·카드 그룹 */
/* 아이템 인덱스 × 65ms | 최대 인덱스 5 이후 동시 (325ms 고정) */

6-4. 스켈레톤 로딩

@keyframes golpro-shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}
/* background: linear-gradient(90deg, #EEEEEE 25%, #E4E4E4 50%, #EEEEEE 75%) */
/* background-size: 200% 100% | animation: 1.6s infinite | radius: radius-xl */

7. 그리드 시스템

/* Desktop (> 1024px) */
columns: 12 | gap: 24px | max-width: 1280px | padding: 0 40px

/* Tablet (768px ~ 1024px) */
columns: 8  | gap: 20px | padding: 0 24px

/* Mobile (< 768px) */
columns: 4  | gap: 16px | padding: 0 16px

7-1. 골프로 레이아웃 패턴

히어로 카드 그리드
  Desktop: repeat(6, 1fr) | gap 12px
  Tablet:  repeat(3, 1fr) | gap 12px
  Mobile:  repeat(2, 1fr) | gap 10px

WITB 선수 카드 그리드
  Desktop: repeat(4, 1fr) | gap 20px
  Tablet:  repeat(3, 1fr) | gap 16px
  Mobile:  repeat(2, 1fr) | gap 12px

CC 랭킹 레이아웃
  Desktop: 2열 (1fr + 1fr) | gap 20px
  Mobile:  1열 풀폭

게시글 피드
  항상 1열 풀폭

8. 컴포넌트 스펙

8-1. 카드 (기본)

background:      #FFFFFF
border:          1px solid #E5E5E5
border-radius:   18px  (radius-xl)
padding:         18px
box-shadow:      shadow-md
overflow:        hidden

/* 호버 */
border-color:    rgba(26, 71, 49, 0.28)
box-shadow:      shadow-green
transform:       translateY(-3px)
transition:      200ms ease

8-2. 버튼

/* ── Primary ── */
background:     #1A4731
color:          #FFFFFF
border-radius:  10px  (radius-md)
padding:        11px 26px
font-size:      14px
font-weight:    700
letter-spacing: 0.01em
transition:     150ms ease
hover-bg:       #225C3E
active-bg:      #13332B

/* ── Secondary (Outline) ── */
background:     transparent
border:         1.5px solid #1A4731
color:          #1A4731
hover-bg:       #E8F6EF
hover-border:   #13332B

/* ── Ghost ── */
background:     transparent
color:          #1A4731
hover-bg:       #E8F6EF

/* ── Danger/Live ── */
background:     #DC3030
color:          #FFFFFF

8-3. 태그 / 뱃지

/* Default */
background:     #F0F0F0
color:          #525252
border-radius:  9999px
padding:        4px 11px
font-size:      12px
font-weight:    600
letter-spacing: 0.03em

/* Green (카테고리) */
background:     #E8F6EF
color:          #1A4731

/* Live */
background:     #DC3030
color:          #FFFFFF
+ pulse animation (1.5s infinite)

/* Gold (랭킹 1위) */
background:     #FEF3C7
color:          #92400E

8-4. 게시글 피드 아이템

padding:        13px 0
border-bottom:  1px solid #F0F0F0
layout:         flex | align-items: baseline | gap: 12px

순위 번호:      font-size 13px | weight 800 | color #D4D4D4 | min-width 22px
제목:           font-size 15px | weight 500 | color #111111
                overflow: hidden | text-overflow: ellipsis | white-space: nowrap
메타:           font-size 12px | color #A3A3A3 | white-space: nowrap

8-5. 별점 (CC Rating 전용)

채워진 별:      #C89B3C  (Gold)
빈 별:          #E5E5E5
점수 숫자:      Stat-LG(28px) | weight 800 | #111111
참여자 수:      13px | #A3A3A3
카테고리 라벨:  Label(13px) | weight 600 | #525252

9. 이미지 처리 기준

object-fit:         cover
object-position:    center top  (인물 사진 기준 — 얼굴 잘림 방지)

이미지 비율
  히어로 카드:     16:9
  WITB 선수 카드:  3:4  (세로형 — 전신 또는 상반신 사진)
  CC 썸네일:       16:9
  게시글 썸네일:   4:3
  프로필 아바타:   1:1

배경 이미지:   CSS background-image 사용 (img 태그 금지)
오버레이:      히어로 배경: linear-gradient(to bottom, transparent 35%, rgba(0,0,0,0.68))
               일반 카드: 없음 (호버 시 rgba(0,0,0,0.04) 약하게만)

로딩:          loading="lazy" 필수
               onerror 폴백 이미지 필수
               스켈레톤 shimmer 적용

10. 라이브 인디케이터

도트:
  크기:           8px × 8px
  shape:          circle
  color:          #DC3030
  animation:      golpro-livepulse 1.6s infinite

@keyframes golpro-livepulse {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%       { transform: scale(1.45); opacity: 0.65; }
}

텍스트:
  content:        "LIVE"
  font-size:      10px
  font-weight:    800
  color:          #DC3030
  letter-spacing: 0.1em

11. 설정 패널 수치 범위 가이드

블록 설정 패널 RANGE/NUMBER 타입의 기준값입니다.

폰트 크기
  RANGE font-size:        min 12 / max 52 / step 2
  default: body 15 | h2 28 | display 52

패딩
  RANGE paddingY:         min 24 / max 128 / step 8 / default 80
  RANGE paddingX:         min 16 / max 80  / step 8 / default 40

간격
  RANGE gap:              min 8  / max 48  / step 4 / default 20

보더 레디어스
  RANGE radius:           min 0  / max 32  / step 2 / default 18

그림자 강도
  SELECT shadowStrength:  options: none / soft(1) / medium(2) / strong(3) / default soft

트랜지션 속도
  RANGE transitionMs:     min 100 / max 500 / step 50 / default 200

호버 스케일
  RANGE hoverScale:       min 100 / max 115 / step 1 / default 107
  (% 단위, 템플릿에서 / 100 적용)

최대 컨테이너 폭
  RANGE maxWidth:         min 960 / max 1440 / step 40 / default 1280

12. 설정 패널 컬러 기본값

각 블록 COLOR_PICKER의 기본값으로 사용합니다.

bgColor:              #FFFFFF   /* 카드·컴포넌트 배경 */
bgColorSub:           #F7F7F7   /* 섹션 서브 배경 */
bgColorAccent:        #E8F6EF   /* 그린 틴트 배경 */
textColorPrimary:     #111111   /* 기본 텍스트 */
textColorSecondary:   #525252   /* 보조 텍스트 */
textColorMuted:       #A3A3A3   /* 메타, 캡션 */
accentColor:          #1A4731   /* 포인트 컬러 */
borderColor:          #E5E5E5   /* 보더 기본 */

13. QA 체크리스트

블록 코드 완성 후 납품 전 반드시 확인:

[ ] 컬러     — 팔레트 외 임의 색상 없음, accentColor: #1A4731
[ ] 폰트     — var(--font-family-heading/body) 적용
[ ] 레디어스  — 카드 18px / 버튼 10px / 태그 9999px
[ ] 호버     — translateY(-3px) + shadow-green 적용
[ ] 트랜지션  — 200ms ease 기준
[ ] 스켈레톤  — 이미지 영역 shimmer 처리
[ ] 반응형   — Mobile(<768px) 스타일 별도 적용
[ ] 애니메이션 — IntersectionObserver 사용 + bm.onDestroy 정리
[ ] 텍스트   — ellipsis 처리 (피드 아이템 필수)
[ ] 이미지   — loading="lazy" + onerror 폴백
[ ] 설정 패널 — 3탭(콘텐츠/디자인/개발자) + description 2문장 이상
[ ] QA 규칙  — R001~R018 통과

GOLPRO Design System — VESPUR