01 · Philosophy

디자인 철학

Bibong.dev 패밀리 서비스는 네오 브루탈리즘(Neo-Brutalism)을 기반으로 한 독자적 비주얼 아이덴티티를 유지합니다. 블러·그라디언트로 입체를 흉내 내지 않고, 진짜 테두리와 오프셋 그림자로 깊이를 표현합니다.

정직한 구조

그림자·그라디언트 효과로 입체를 흉내 내지 않고, 진짜 테두리와 오프셋 그림자로 깊이를 표현한다.

크림-에스프레소 팔레트

따뜻한 크림 배경 위에 짙은 에스프레소 브라운 테두리·텍스트를 얹어 종이 인쇄물 같은 질감을 만든다.

미니멀 & 기능 중심

장식 요소를 최소화하고, 필요한 정보만 명확하게 전달한다.

일관된 간격 & 접근성

8px 배수 그리드 기반 여백·패딩. 대비 WCAG AA 이상 — Espresso(#4A3E25)와 Cream(#FAF7F2)의 대비율 ≈ 10:1.

02 · Color

컬러 팔레트

컬러 칩을 클릭하면 HEX 코드가 클립보드에 복사됩니다. 다크모드에서는 라이트 → 다크 대응 팔레트로 자동 전환됩니다.

RULE — Golden Straw 사용 규칙
허용: 배지 배경, 강조 텍스트 하이라이트, active 인디케이터.
금지: 버튼 배경의 주 컬러 사용 불가. 버튼 주 컬러는 #4A3E25(Primary) 또는 #FFFFFF(Secondary).
배지 배경 O 텍스트 하이라이트 O Active 탭 표시 O
03 · Typography

타이포그래피

폰트 패밀리: Pretendard → Apple SD Gothic Neo → Noto Sans KR → 시스템 폴백. 7단계 타입 스케일(0.72rem~2.25rem).

행간 & 자간 규칙

본문 — line-height: 1.7 / letter-spacing: -0.01em

Bibong.dev 패밀리 서비스는 네오 브루탈리즘을 기반으로 한 독자적 비주얼 아이덴티티를 유지합니다. 장식 요소를 최소화하고, 필요한 정보만 명확하게 전달합니다.

제목 — line-height: 1.2 / letter-spacing: -0.025em

디자인 시스템의 명확한 구조

배지/레이블 — line-height: 1 / letter-spacing: 0.08em / uppercase

DESIGN SYSTEM LABEL
CSS
font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR',
             -apple-system, BlinkMacSystemFont, sans-serif;

/* 본문 */
line-height: 1.7;
letter-spacing: -0.01em;

/* 제목 */
line-height: 1.2;
letter-spacing: -0.025em;

/* 배지 / 레이블 */
line-height: 1;
letter-spacing: 0.08em;
text-transform: uppercase;
04 · Layout

그리드 & 레이아웃

8px 배수 간격 시스템. 모든 여백·패딩은 이 토큰으로 정의합니다.

컨테이너max-width용도
.container1100px일반 페이지 레이아웃
.container--narrow560px로그인, 회원가입 등 좁은 폼 페이지
Sticky Footer 레이아웃 구조
콘텐츠 양과 관계없이 푸터가 항상 화면 최하단에 고정됩니다. body에 flex-column, main에 flex: 1 부여.
CSS
html, body { height: 100%; }

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main   { flex: 1; }       /* 남은 공간을 모두 차지 */
footer { flex-shrink: 0; } /* 푸터는 압축되지 않음 */
05 · Border & Shadow

테두리 & 그림자 규칙

네오 브루탈리즘의 핵심. 테두리는 항상 불투명 단색 #4A3E25, 그림자는 블러(blur) 없는 플랫 오프셋만 사용합니다.

RULE — 테두리
금지: border: 1px solid rgba(...) 반투명 테두리. 항상 불투명 단색 사용.
기본 2px
강조 2.5px
연한 구분선 1px
CSS
/* 기본 (카드, 버튼, 입력 필드) */
border: 2px solid #4A3E25;

/* 강조 (포커스, 선택 상태) */
border: 2.5px solid #4A3E25;

/* 연한 구분선 (hr, 섹션 분리) */
border: 1px solid #D4C9B0;

/* 금지 — 반투명 테두리 사용 불가 */
border: 1px solid rgba(0,0,0,0.1);  /* X */
RULE — 박스 그림자
blur 값이 0인 플랫 오프셋 그림자만 사용. box-shadow: 0 4px 20px rgba(0,0,0,0.15) 방식은 사용 금지.
CSS
--shadow-sm:     2px 2px 0 #4A3E25;   /* 소형 컴포넌트 */
--shadow:        4px 4px 0 #4A3E25;   /* 기본 카드 */
--shadow-lg:     6px 6px 0 #4A3E25;   /* 모달, 대형 카드 */
--shadow-accent: 4px 4px 0 #E0D38B;   /* 포인트 강조 */

/* 버튼 인터랙션 패턴 */
.btn {
  box-shadow: 3px 3px 0 #4A3E25;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.btn:hover  { transform: translate(-1px,-1px); box-shadow: 5px 5px 0 #4A3E25; }
.btn:active { transform: translate(2px,2px);   box-shadow: 1px 1px 0 #4A3E25; }

/* 금지 */
box-shadow: 0 4px 20px rgba(0,0,0,0.15);  /* blur 사용 금지 */
06 · Border-radius

모서리 곡률

기본적으로 직각(0px)을 선호하되, UX를 위해 소량 허용. 같은 페이지에서 두 가지 이상의 border-radius 혼용 금지.

모서리 토큰 스펙
--r-none
0px
--r-xs
2px 배지
--r-sm
4px 버튼
--r-md
8px 카드
--r-lg
12px 모달
--r-full
9999px 아바타
07 · States

상태별 색상 변화

상태배경테두리그림자기타
기본 (Default) #FFFFFF 2px solid #4A3E25 4px 4px 0 #4A3E25 —
호버 (Hover) #FAF7F2 2px solid #4A3E25 5px 5px 0 #4A3E25 translate(-1px, -1px)
포커스 (Focus) #FFFFFF 2.5px solid #4A3E25 3px 3px 0 #4A3E25 outline: none
클릭 (Active) #F2EDE4 2px solid #4A3E25 1px 1px 0 #4A3E25 translate(2px, 2px)
비활성 (Disabled) #F2EDE4 1px solid #D4C9B0 없음 opacity: 0.45; cursor: not-allowed
08 · Button

버튼 컴포넌트

3종 버튼. 모두 호버·클릭 인터랙션 포함. 실제로 눌러보세요.

Primary Button
가장 중요한 단일 CTA. 배경 #4A3E25, 텍스트 #FAF7F2. 기본 shadow 3px 3px 0, 호버 5px 5px 0 + translate(-1px,-1px), 클릭 1px 1px 0 + translate(2px,2px).
HTML + CSS
<button class="btn-primary">저장하기</button>

.btn-primary {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 24px; border-radius: 4px;
  font-size: 0.9rem; font-weight: 700; color: #FAF7F2;
  background: #4A3E25; border: 2px solid #4A3E25;
  box-shadow: 3px 3px 0 #4A3E25;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.btn-primary:hover  { transform: translate(-1px,-1px); box-shadow: 5px 5px 0 #4A3E25; }
.btn-primary:active { transform: translate(2px,2px);   box-shadow: 1px 1px 0 #4A3E25; }
.btn-primary:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
Secondary Button (Outline)
보조 액션. 배경 #FFFFFF, 테두리·텍스트 #4A3E25. 기본 상태에서도 box-shadow: 3px 3px 0 #4A3E25 유지.
CSS
.btn-secondary {
  background: #FFFFFF; color: #4A3E25;
  border: 2px solid #4A3E25; border-radius: 4px;
  box-shadow: 3px 3px 0 #4A3E25; padding: 12px 24px;
  font-weight: 700; cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s, background 0.12s;
}
.btn-secondary:hover  { background: #FAF7F2; transform: translate(-1px,-1px); box-shadow: 5px 5px 0 #4A3E25; }
.btn-secondary:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 #4A3E25; }
Golden Button (Accent)
포인트 강조 CTA. 배경 #E0D38B (Golden Straw), 텍스트·테두리 #4A3E25. 주 컬러 버튼으로 사용하지 않고 강조가 필요한 단일 지점에서만 사용.
CSS
.btn-golden {
  background: #E0D38B; color: #4A3E25;
  border: 2px solid #4A3E25; border-radius: 4px;
  box-shadow: 3px 3px 0 #4A3E25; padding: 12px 24px;
  font-weight: 700; cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s;
}
.btn-golden:hover  { transform: translate(-1px,-1px); box-shadow: 5px 5px 0 #4A3E25; }
.btn-golden:active { transform: translate(2px,2px);   box-shadow: 1px 1px 0 #4A3E25; }
09 · Card

카드 컴포넌트

호버 시 translate(-2px, -2px) + 그림자 6px. 카드 위에 마우스를 올려보세요.

기본 카드
배경 #FFFFFF, 테두리 2px solid #4A3E25, 그림자 4px 4px 0 #4A3E25. 내부 패딩 24px (--sp-6). border-radius 8px (--r-md).

카드 제목

카드 본문 텍스트입니다. 주요 정보가 여기에 표시됩니다.

New

배지 포함 카드

Golden Straw 배지와 함께 사용하는 카드 예시입니다.

HTML + CSS
<article class="card">
  <h4>카드 제목</h4>
  <p>카드 본문 텍스트.</p>
</article>

.card {
  background: #FFFFFF;
  border: 2px solid #4A3E25;
  border-radius: 8px;           /* --r-md */
  box-shadow: 4px 4px 0 #4A3E25; /* --shadow */
  padding: 24px;                /* --sp-6 */
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 #4A3E25; /* --shadow-lg */
}
10 · Form

폼 입력 필드

Input Field — 상태별
기본: border: 2px solid #4A3E25. 포커스: box-shadow: 3px 3px 0 #4A3E25. 오류: border-color: #C0392B; box-shadow: 3px 3px 0 #C0392B.

이메일 형식이 올바르지 않습니다.

CSS
.form-input {
  width: 100%; padding: 10px 14px;
  font-family: inherit; font-size: 0.9rem; color: #4A3E25;
  background: #FFFFFF;
  border: 2px solid #4A3E25;
  border-radius: 4px; outline: none;
  transition: box-shadow 0.15s ease;
}
.form-input::placeholder { color: #A89880; }
.form-input:focus        { box-shadow: 3px 3px 0 #4A3E25; }
.form-input.error        { border-color: #C0392B; box-shadow: 3px 3px 0 #C0392B; }
.form-input:disabled {
  background: #F2EDE4; border-color: #D4C9B0;
  color: #A89880; cursor: not-allowed;
}
11 · Badge

배지 & 태그

배지 종류
모든 배지: text-transform: uppercase, letter-spacing: 0.08em, border-radius: 2px (--r-xs).
Default Outline Success Error Muted
HTML + CSS
<span class="badge">Default</span>
<span class="badge-outline">Outline</span>

.badge {
  display: inline-block; padding: 3px 10px;
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: #4A3E25; background: #E0D38B;
  border: 1.5px solid #4A3E25;
  border-radius: 2px; /* --r-xs */
}
.badge-outline { background: transparent; color: #4A3E25; }
12 · Toast

토스트 / 알림

토스트 스펙
위치: 고정 우측 하단 (position: fixed; bottom: 24px; right: 24px). 블러 없는 오프셋 그림자. 성공/오류 시 테두리·그림자 색상 변경.
작업이 완료되었습니다.
저장이 완료되었습니다.
오류가 발생했습니다.
CSS
.toast {
  position: fixed; bottom: 24px; right: 24px; z-index: 9999;
  padding: 12px 18px;
  background: #FFFFFF;
  border: 2px solid #4A3E25; border-radius: 4px;
  box-shadow: 4px 4px 0 #4A3E25;
  font-size: 0.875rem; font-weight: 600; color: #4A3E25;
  /* 등장 애니메이션 */
  opacity: 0; transition: opacity 0.3s, bottom 0.3s;
}
.toast.show    { opacity: 1; bottom: 32px; }
.toast--success { border-color: #27AE60; box-shadow: 4px 4px 0 #27AE60; color: #166534; }
.toast--error   { border-color: #C0392B; box-shadow: 4px 4px 0 #C0392B; color: #C0392B; }
13 · Dark Mode

다크모드 초기화 원칙

Bibong.dev는 라이트 모드 우선. 모든 페이지 <head> 최상단에 프리플라이트 스크립트를 포함하여 FOUC(깜빡임)를 방지합니다.

다크모드 프리플라이트 — head 최상단 필수
localStorage key: 'bd-theme'. 값: 'light' 또는 'dark'. localStorage 우선 → 없으면 시스템 prefers-color-scheme 적용.
JavaScript — <head> 최상단
<script>
(function () {
  var s = localStorage.getItem('bd-theme');
  if (s) {
    document.documentElement.setAttribute('data-theme', s);
  } else {
    document.documentElement.setAttribute('data-theme',
      window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
    );
  }
})();
</script>
라이트 → 다크 대응라이트다크
페이지 배경#FAF7F2#1A1410
카드/폼 배경#FFFFFF#241D17
메인 텍스트/테두리#4A3E25#E8DEC8
보조 텍스트#6B5C3E#B5A48A
14 · Scrollbar

브랜드 스크롤바

이 페이지 자체의 스크롤바가 브랜드 그라디언트 스크롤바의 실물 예시입니다.

스크롤바 CSS
CSS — 전체 복사
::-webkit-scrollbar              { width: 6px; height: 6px; }
::-webkit-scrollbar-track        { background: transparent; }
::-webkit-scrollbar-thumb        {
  background: linear-gradient(180deg, #1565C0, #0D9488, #3CB878);
  border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover  { background: #0D9488; }
::-webkit-scrollbar-corner       { background: transparent; }
* { scrollbar-width: thin; scrollbar-color: #0D9488 transparent; }
15 · Emoji Policy

이모지 사용 정책

모든 UI에서 감정형 장식 이모지의 사용을 금지합니다. 이모지는 OS·브라우저마다 렌더링이 달라 전문적 미니멀 디자인과 충돌합니다.

금지 (Forbidden)

X  "시작하기 🚀" — 감정형 이모지

X  "새 기능 ✨" — 장식용 이모지

X  "좋아요 👍" — 반응형 이모지

X  "주의 ⚠️" — 이모지 경고 표시

X  UI 텍스트 내 이모지 일체

허용 (Allowed)

O  성공: ✓ (텍스트 기호)

O  실패: ✕ (텍스트 기호)

O  방향: → ← ↑ ↓

O  SVG 아이콘 (Heroicons, Lucide, Tabler)

O  stroke="currentColor" 로 CSS color 상속

16 · CSS Tokens

CSS 토큰 전체 레퍼런스

모든 Bibong.dev 서비스 페이지의 :root에 선언합니다.

:root 전체 토큰 — 복사하여 사용
CSS — :root 전체
:root {
  /* ── 컬러 ── */
  --c-bg:          #FAF7F2;    /* 페이지 배경 */
  --c-bg-alt:      #F2EDE4;    /* 교차 섹션 배경 */
  --c-surface:     #FFFFFF;    /* 카드, 폼 배경 */
  --c-accent:      #E0D38B;    /* 시그니처 포인트 (Golden Straw) */
  --c-ink:         #4A3E25;    /* 메인 텍스트 & 테두리 (Espresso Brown) */
  --c-ink-2:       #6B5C3E;    /* 보조 텍스트 (Warm Umber) */
  --c-muted:       #A89880;    /* 비활성, placeholder (Dusty Taupe) */
  --c-border-soft: #D4C9B0;    /* 연한 구분선 (Parchment) */
  --c-error:       #C0392B;    /* 오류 (Crimson) */
  --c-success:     #27AE60;    /* 성공 (Forest) */

  /* ── 그림자 — 블러 없는 플랫 오프셋 ── */
  --shadow-sm:     2px 2px 0 var(--c-ink);
  --shadow:        4px 4px 0 var(--c-ink);
  --shadow-lg:     6px 6px 0 var(--c-ink);
  --shadow-accent: 4px 4px 0 var(--c-accent);

  /* ── 테두리 ── */
  --border:      2px solid var(--c-ink);
  --border-soft: 1px solid var(--c-border-soft);

  /* ── 모서리 곡률 ── */
  --r-none: 0px;
  --r-xs:   2px;    /* 배지, 태그 */
  --r-sm:   4px;    /* 버튼, 입력 필드 */
  --r-md:   8px;    /* 카드 */
  --r-lg:   12px;   /* 모달, 큰 카드 */
  --r-full: 9999px; /* 아바타, 토글 */

  /* ── 레이아웃 ── */
  --header-h: 64px;
  --max-w:    1100px;
  --max-w-sm: 560px;

  /* ── 간격 (8px 배수) ── */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* ── 전환 ── */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur:  0.15s;
}