Brunch (브런치스토리)
겹친 종이 표지 위 흰 사각 제목지와 큰 명조 제목, 작은 필기체 brunch 로고
Brand DNA
브랜드 DNA
- 브랜드명: Brunch · 브런치스토리. 카카오가 운영하며, 조사한 현재 홈페이지와 앱의 화면 표기는 「브런치」다.
- 한 줄 정체성: 작가의 글을 읽고, 여러 편을 하나의 브런치북으로 엮는 글쓰기·읽기 플랫폼.
- 공식 디자인 철학: 「글이 작품이 되는 공간」. 2015년 베타 공개 자료는 단순한 화면과 가독성 높은 글꼴로 인쇄물을 읽는 듯한 경험을 설명한다. 화면의 장식보다 글과 작가를 앞세우는 방향이다.
- 시그니처 요소 1개: 큰 명조 제목을 담은 표지. 사진 위에 제목을 적거나, 제본선이 있는 책 표지 안에 흰 제목 면을 놓는다. 가는 필기체 로고와 작게 쓰는 청록색이 그 표지를 돕는다.
- 관찰 범위: 2026년 11월의 공식 홈·글 읽기·브런치북 상세·출판 책방과 앱스토어 화면. 공개된 브런치 전용 디자인 시스템은 확인하지 못했다. 아래 수치는 제품 CSS에서 읽은 값과 룩북용 재구성을 나누어 적었다.
- 시점: 서비스는 2015년 6월 베타로 공개됐다. 이 해를 시각 체계의 출발점으로 보는 것은
(추정)이며, 공개 디자인 시스템이 나온 해로 확인된 값은 아니다. 최근 수정 시점도 현재 화면을 기준으로 한(추정)이다.
Tone & Mood
톤 & 무드
- 핵심 키워드 3개: 문학적인 · 담백한 · 여유로운.
- 무드 설명: 큰 명조 제목과 가늘고 낮은 목소리의 본문이 속도를 늦춘다. 흰 면에는 검정과 회색만 남기고, 청록색은 구독·선택·링크처럼 작은 행동에 쓴다. 글 표지의 사진과 브런치북의 세로 비율이 글 덩어리 사이의 리듬을 만든다.
- 비주얼 스타일: 모던 미니멀 · 휴머니즘. 정보는 단순하게 놓되, 작품의 제목과 작가의 문장이 화면의 표정을 맡는다.
- 밀도(Density): Spacious. 글 읽기 폭은 700px이며 제목·본문 사이를 넓게 띄운다. 첫 화면에 많은 숫자와 기능을 압축하지 않고 표지 한 장에 집중한다.
- 모서리 성향: Sharp. 글 표지와 종이 면은 각지고, 책 모서리만 4~6px로 작게 접는다. 시작·구독 단추와 태그는 예외로 알약 모양이다.
- 평면성: Flat. 일반 글 목록에는 떠 있는 상자를 만들지 않는다. 브런치북의 얕은 그림자는 책의 두께를 보여 주는 자리에서만 두드러진다.
Color System
컬러 시스템 (CSS 변수)
기본 청록색 #00C6BE, 흰 바탕, #333333 본문, #666666 보조 글자, #959595 곁 정보, #DDDDDD·#EEEEEE 선은 공식 CSS 확인값이다. 홈 공지의 #00C3BD는 별도 쓰임이다. 청록색의 기본값 외 단계와 의미색 묶음은 재사용 예시를 위한 (추정)이며 공식 공통 팔레트가 아니다.
:root {
/* 기본값 외 청록 단계는 (추정) */
--color-primary-50: #EAFBF9;
--color-primary-100: #C9F3EF;
--color-primary-200: #94E6E0;
--color-primary-300: #5BD9D1;
--color-primary-400: #27CEC5;
--color-primary-500: #00C6BE; /* 공식: 구독·활성·본문 링크 */
--color-primary-600: #009C96;
--color-primary-700: #007A75;
--color-primary-800: #005B58;
--color-primary-900: #003D3B;
--color-secondary-500: #333333; /* 공식: 기본 본문 */
--color-notice: #00C3BD; /* 공식: 홈 Notice */
/* 화면에서 확인한 무채색 */
--color-neutral-0: #FFFFFF;
--color-neutral-50: #FBFBFB; /* 작가 소개 면 */
--color-neutral-100: #F8F8F8; /* 책 소개의 옅은 면 */
--color-neutral-200: #EEEEEE;
--color-neutral-300: #DDDDDD;
--color-neutral-400: #BBBBBB;
--color-neutral-500: #959595;
--color-neutral-600: #666666;
--color-neutral-700: #333333;
--color-neutral-900: #171717; /* 홈 큰 제목 */
--color-neutral-1000: #000000;
/* 의미색 전체는 상태 예시를 위한 (추정) */
--color-success-bg: #EDF7F0;
--color-success-fg: #296C44;
--color-warning-bg: #FFF7E6;
--color-warning-fg: #8A651E;
--color-error-bg: #FFF1EF;
--color-error-fg: #B94942;
--color-info-bg: #EEF4FA;
--color-info-fg: #356586;
/* 화면의 역할에 붙인 이름 */
--bg-base: #FFFFFF;
--bg-subtle: #FBFBFB;
--bg-elevated: #FFFFFF;
--bg-overlay: rgba(0,0,0,.4); /* 사진 표지 덮개 실측 */
--text-primary: #333333;
--text-secondary: #666666;
--text-tertiary: #959595;
--text-on-primary: #FFFFFF;
--text-disabled: #BBBBBB; /* 비활성 배치는 (추정) */
--border-default: #DDDDDD;
--border-subtle: #EEEEEE;
--border-strong: #959595;
--border-focus: #007A75; /* 포커스 대비를 위한 (추정) */
}
- 표지의 색: 예시의 세이지색·크림색 종이는 가상 작품을 위해 재구성한 색
(추정)이다. 청록색 행동 버튼과 구분한다. - 청록색의 몫: 구독 단추·선택 표시·본문 링크에 모은다. 홈페이지의 모든 제목이나 책 표지를 청록색으로 통일하지 않는다. 책의 색과 사진은 콘텐츠에 따라 달라진다.
- 대비: 실측 청록색과 흰색의 대비는 약 2.14:1이다. 제품의 청록색 선·작은 글자에는 이 낮은 대비가 그대로 나타난다. 이 예시도 원래 버튼의 모양을 따르며, 긴 안내와 본문에는 회색을 쓴다. 대비가 필요한 포커스 등에는 짙은 청록 단계
(추정)를 사용한다. - 지원 테마: 공식 앱 안내는 스마트폰 설정에 따라 글 읽기 화면이 어두워지는 기능을 설명한다. 앱 내부의 별도 전환이나 공식 다크 토큰은 확인하지 못해 이 문서는 라이트 화면을 다룬다. 앱의 OS 연동 다크 기능 자체가 없다는 뜻은 아니다.
Typography
타이포그래피
- 폰트 페어링: 큰 한글 제목은 Nanum Myeongjo, 글 본문과 기존 UI는 Noto Sans DemiLight / Noto Sans Light, 새 홈 UI는 Pretendard다. 영문 곁말
by는 기존 글 화면에서 Georgia 이탤릭, 새 홈에서는 PT Serif 이탤릭이다. 새 홈 공지도 PT Serif 이탤릭을 쓴다. - 확인 범위: 공식 CSS의
Noto Sans DemiLight는 실제로NotoSansCJKkr-Light.woff에 연결된다. 가족 이름의 DemiLight와 파일의 Light를 다른 굵기라고 단정하지 않는다. 글쓴이가 본문 서식을 바꿀 수 있어, 모든 글의 크기가 하나로 고정된 것은 아니다. - 대체 서체: 제목은
'Nanum Myeongjo','Batang','AppleMyungjo',serif, 본문은'Noto Sans DemiLight','Noto Sans Light','Apple SD Gothic Neo','Malgun Gothic',sans-serif, 홈 UI는'Pretendard','Apple SD Gothic Neo','Malgun Gothic',sans-serif. 미리보기에서는 외부 글꼴을 불러오지 않는다. - Display: 45.33px / 400 / 53.33px / -0.01em. 글 표지의 34pt/40pt를 px로 바꾼 확인값이다. 표지 제목 한두 줄에 쓴다.
- H1: 42px / 400 / 53px / -2.1px. 홈 큰 제목 확인값. 좁은 미리보기 창에서 줄이는 크기는
(추정)이다. - H2: 32px / 400 / 42px / -0.04em
(추정). 긴 소개에서 새 주제를 시작하는 명조 제목. - H3: 24px / 600 / 32px / -0.96px. 새 홈 추천 글 표지 제목 확인값. 일반 소제목에 쓸 때는 400으로 낮춘다
(추정). - Body Large: 18px / 400 / 32px / 0
(추정). 룩북의 읽기 예시에 맞춘 확장값. 공식 글 전체의 기본값으로 보지 않는다. - Body: 14.67px / 400 / 29.33px / 0.8px. 글 기본 CSS의 11pt/22pt 확인값. Noto Sans DemiLight 자체가 가는 서체다.
- Body Small: 13px / 400 / 23px / 0. 브런치북 소개 문장 확인값. 작가 소개와 짧은 설명에 쓴다.
- Caption: 12px / 400 / 20px / 0. 브런치북 정보 줄 확인값. 날짜·읽는 시간 등 곁 정보에 한정한다.
- 공개 대체 재료: Nanum Myeongjo·Noto 계열·Pretendard는 OFL 공개 서체다. 이 예시의 큰 명조 제목은 Nanum Myeongjo Regular의 글자 윤곽이며, 작은 글자에는 시스템 대체 서체를 쓴다.
- 제목과 본문의 차이: 큰 제목은 가는 명조의 획과 넓은 면으로 힘을 낸다. 본문은 긴 문장이 이어져도 숨이 막히지 않는 행간을 쓴다. 제목을 굵은 고딕으로, 본문을 짧은 광고 문구로 바꾸면 브런치의 읽는 리듬이 사라진다.
Spacing
스페이싱
- Base unit: 4px
(추정). 공식 사이트가 공통 간격 단위를 공개한 것은 아니다. 아래 단계는 16·24·32px 등 데모에서 반복할 여백을 정리한 값이다. - Container: 글 읽기 폭 700px는 확인값이다. 현재 PC 홈은 최소 1232px 화면을 가정하고 콘텐츠폭 1168px·최대영역 1600px를 쓴다. 아래 최대폭 1100px·좌우 32px는 좁은 상세 창용 재구성
(추정)이다. - 리듬: 글의 첫 제목 앞은 넓게, 제목과 부제 사이는 가깝게 둔다. 책 표지는 세로 비율을 유지하고 주변 설명과 붙이지 않는다. 숫자를 줄여 한 화면에 더 많이 담는 것보다 문장 덩어리의 구분을 먼저 지킨다.
:root {
--space-xs: 4px;
--space-sm: 8px;
--space-md: 16px;
--space-lg: 24px;
--space-xl: 32px;
--space-2xl: 48px;
--space-3xl: 64px;
--space-4xl: 96px;
--container-max: 1100px; /* 데모용 (추정) */
--container-gutter: 32px; /* 데모용 (추정) */
--reader-max: 700px; /* 공식 글 읽기 폭 */
--header-height: 80px; /* 공식 PC 헤더 */
--font-display: 'Nanum Myeongjo','Batang','AppleMyungjo',serif;
--font-body: 'Noto Sans DemiLight','Noto Sans Light','Apple SD Gothic Neo','Malgun Gothic',sans-serif;
--font-ui: 'Pretendard','Apple SD Gothic Neo','Malgun Gothic',sans-serif;
}
Border Radius
Border Radius
글과 종이 면은 각지고, 책에는 작은 모서리, 단추에는 알약 모양을 쓴다. 각 단계를 모든 컴포넌트에 골고루 배분하지 않는다. 책의 4px·6px와 시작 단추의 16px, 태그의 40px는 실제 CSS 값이다. 아래 공통 이름으로 묶은 방식은 (추정)이다.
:root {
--radius-none: 0; /* 글 표지·일반 목록 */
--radius-sm: 3px; /* 작은 책 오른쪽 모서리 */
--radius-md: 4px; /* 책 왼쪽 모서리 */
--radius-lg: 6px; /* 책 오른쪽 모서리 */
--radius-xl: 16px; /* 헤더 시작하기 */
--radius-full: 100px; /* 공통 버튼 실측 */
--radius-book: 4px 6px 6px 4px; /* 대표 브런치북 실측 */
}
Shadow / Elevation
Shadow / Elevation
기본 글 목록은 그림자 없이 바탕에 바로 놓는다. 세로 책 표지는 얕은 그림자로 종이의 두께를 드러낸다. 작은 구매 책의 0 2px 4px와 대표 브런치북의 0 10px 20px는 공식 CSS 확인값이다. 메뉴·큰 창의 그림자 단계와 공통 이름은 재사용을 위한 (추정)이다.
:root {
--shadow-none: none; /* 기본 글 목록 */
--shadow-sm: 0 2px 4px rgba(0,0,0,.2); /* 공식: 작은 구매 책 */
--shadow-md: 0 10px 20px rgba(0,0,0,.1); /* 공식: 대표 책 표지 */
--shadow-lg: 0 12px 28px rgba(0,0,0,.12); /* 메뉴 (추정) */
--shadow-xl: 0 20px 48px rgba(0,0,0,.16); /* 큰 창 (추정) */
}
표지의 제본선은 그림자와 역할이 다르다. 공식 책에는 왼쪽 가장자리의 좁은 어두운 띠와, 그 옆의 얇은 밝은 선이 있다. 일반 정보 카드에 같은 띠를 붙이지 않는다.
Iconography
Iconography
- 스타일: Outline. 검색·메뉴·라이킷·저장·이동을 가는 단색 선으로 그린다. 글 표지와 제목이 먼저 보이고 아이콘은 기능을 찾을 때 읽힌다.
- Stroke 굵기: 20~24px 상자에서 1~1.5px
(추정). 실제 자산마다 선 굵기와 상자 비율이 달라 서비스 전체의 단일 규격으로 확인된 값은 아니다. - 모서리 처리: 메뉴는 평행선, 검색은 원과 한 획, 라이킷은 비어 있는 두 하트가 비스듬히 겹친 모양이다. 작은 기능에 입체 재질이나 여러 색을 섞지 않는다.
- 추천 라이브러리: 보조 기능에는 Lucide의 가는 선이 대체 후보
(추정)다. 브런치가 그 라이브러리를 사용한다는 뜻은 아니다. 필기체 로고와 고유 책 배지는 공식 자산을 참고한다. - 라이킷 자산: ⑫는 공식 아이콘 묶음의 20×18px 라이킷 모양을 내부 SVG 윤곽으로 옮겼다. 일반 하트나 박수 아이콘으로 대신하지 않는다.
- 크기와 이름: 핵심 동작은 20~24px
(추정), 곁 정보는 작은 아이콘과 짧은 글자를 함께 둔다. 글자 없는 단추에는 「검색」「메뉴」「라이킷」처럼 기능을 읽을 수 있는 이름을 단다. 현재 기능 이름을 다른 서비스의 「박수」나 「추천」으로 바꾸지 않는다.
Component Guide
컴포넌트 가이드 (상태별 CSS)
형태와 기본색은 공식 화면에서 가져왔다. hover·active·disabled·loading 전체를 하나의 규칙으로 묶는 방식과 오류·포커스 처리는 재사용 예시 (추정)다. 단추를 여러 종류 보이기 위한 화면을 만들지 않고, 읽기·구독·탐색에 필요한 것만 사용한다.
Button — 이 예시의 Primary는 브런치북처럼 청록색 선과 글자로 구독을 권하고, 구독 중에는 채운다. 글 읽기 화면의 구독 단추에는 기본 청록 채움형도 쓰인다. Secondary는 회색 선, Ghost는 글자만, Danger는 위험한 행동이 있을 때만 쓴다. 모든 종류가 공통 상태 규칙을 공유한다.
.br-btn {
--button-bg: transparent;
--button-fg: var(--text-secondary);
--button-line: var(--border-default);
--button-hover: var(--bg-subtle);
display:inline-flex;align-items:center;justify-content:center;gap:8px;
min-height:42px;padding:8px 20px;border:1px solid var(--button-line);
border-radius:var(--radius-full);background:var(--button-bg);color:var(--button-fg);
font:400 14px/24px var(--font-body);text-decoration:none;white-space:nowrap;cursor:pointer;
transition:background var(--duration-fast) var(--ease-out),color var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-out);
}
.br-btn-primary {
--button-fg:var(--color-primary-500);--button-line:var(--color-primary-500);
--button-hover:var(--color-primary-50);
}
.br-btn-primary.is-selected {
--button-bg:var(--color-primary-500);--button-fg:var(--text-on-primary);
--button-hover:var(--color-primary-600);
}
.br-btn-secondary {--button-fg:var(--text-secondary);--button-line:var(--border-strong)}
.br-btn-ghost {--button-line:transparent;--button-fg:var(--text-secondary)}
.br-btn-danger {
--button-fg:var(--color-error-fg);--button-line:var(--color-error-fg);
--button-hover:var(--color-error-bg);
}
.br-btn:hover:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]) {background:var(--button-hover)}
.br-btn:active:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]) {transform:translateY(1px)}
.br-btn:focus-visible {outline:2px solid var(--border-focus);outline-offset:4px}
.br-btn:disabled,.br-btn[aria-disabled="true"] {
background:var(--bg-subtle);color:var(--text-disabled);border-color:var(--border-default);
cursor:not-allowed;transform:none;
}
.br-btn[aria-busy="true"] {position:relative;color:transparent;cursor:progress;transform:none}
.br-btn[aria-busy="true"]::after {
content:"";position:absolute;left:50%;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;
border:1px solid var(--button-fg);border-right-color:transparent;border-radius:50%;animation:brunch-spin .8s linear infinite;
}
@keyframes brunch-spin {to{transform:rotate(360deg)}}
Input — 검색과 짧은 입력은 바탕과 같은 흰 면에 놓고 가는 밑줄로 구분한다. 포커스는 선 하나로, 오류는 색과 문장으로 함께 알린다. 아래 44px 높이와 상태별 모양은 (추정)이다.
.br-field {display:grid;gap:8px;color:var(--text-primary);font:400 14px/22px var(--font-body)}
.br-input {
box-sizing:border-box;width:100%;min-height:44px;padding:9px 0;border:0;
border-bottom:1px solid var(--border-default);border-radius:0;
background:var(--bg-base);color:var(--text-primary);font:inherit;
}
.br-input::placeholder {color:var(--text-tertiary)}
.br-input:focus {outline:none;border-bottom-color:var(--border-focus)}
.br-input[aria-invalid="true"] {border-bottom-color:var(--color-error-fg)}
.br-field-error {color:var(--color-error-fg);font-size:12px;line-height:20px}
.br-input:disabled {color:var(--text-disabled);background:var(--bg-subtle);cursor:not-allowed}
Card — 기본형은 선반에 놓인 글, 강조형은 큰 표지, Outlined는 소개와 목차를 나누는 얇은 경계다. 일반 목록을 둥근 흰 상자로 감싸지 않는다. 브런치북에는 별도의 세로 표지와 작은 그림자를 쓴다.
.br-card {background:var(--bg-base);color:var(--text-primary);border:0;border-radius:var(--radius-none);box-shadow:var(--shadow-none)}
.br-card h3 {margin:0;font:400 24px/1.45 var(--font-display);letter-spacing:-.035em}
.br-card p {margin:12px 0 0;color:var(--text-secondary);font:400 13px/23px var(--font-body)}
.br-card-emphasis {position:relative;overflow:hidden;background:var(--color-neutral-900);color:var(--text-on-primary)}
.br-card-emphasis p {color:var(--text-on-primary);opacity:.8}
.br-card-outlined {padding-block:var(--space-lg);border-block:1px solid var(--border-subtle)}
.br-card-link {display:block;color:inherit;text-decoration:none}
.br-card-link:hover h3 {text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.br-card-link:focus-visible {outline:2px solid var(--border-focus);outline-offset:6px}
.br-book {aspect-ratio:320/450;border-radius:var(--radius-book);box-shadow:var(--shadow-md);position:relative;overflow:hidden}
Badge / Tag — 분류는 회색 글자나 얇은 선으로 먼저 표현한다. 특별히 채워야 하는 상태에만 Solid를 쓰며, 같은 카드에 여러 배지를 겹쳐 붙이지 않는다. 아래 세 가지 공통 형태는 (추정)으로 정리했다.
.br-tag {
display:inline-flex;align-items:center;min-height:26px;padding:0 9px;
border:1px solid transparent;border-radius:40px;
font:400 12px/24px var(--font-body);white-space:nowrap;
}
.br-tag-solid {background:var(--color-neutral-700);color:var(--text-on-primary)}
.br-tag-subtle {background:var(--bg-subtle);color:var(--text-secondary)}
.br-tag-outline {border-color:var(--border-default);background:transparent;color:var(--text-tertiary)}
Navigation — 왼쪽의 메뉴와 공식 필기체 로고, 오른쪽의 시작하기·검색이 기본이다. 헤더의 로고 높이32px와 PC 높이80px는 확인값이며, 좁은 상세 창의 패딩과 재배치는 (추정)이다. 메뉴 전체를 큰 알약 탭으로 펼치지 않는다.
.br-nav {
display:flex;align-items:center;gap:14px;min-height:var(--header-height);
padding-inline:30px;background:var(--bg-base);color:var(--text-primary);
font:400 12px/20px var(--font-body);
}
.br-nav-logo {display:block;width:112px;height:32px;flex:none;color:#231F20}
.br-nav-tools {display:flex;align-items:center;gap:20px;margin-left:auto}
.br-nav-link {color:var(--text-secondary);text-decoration:none}
.br-nav-link:hover {color:var(--text-primary)}
.br-nav-link[aria-current="page"] {color:var(--color-primary-500)}
.br-nav-link:focus-visible {outline:2px solid var(--border-focus);outline-offset:5px}
.br-nav .br-btn {min-height:30px;padding:0 12px;font-size:12px;line-height:28px;border-radius:var(--radius-xl)}
Motion
Motion
공식 홈의 짧은 반응은 0.2초, 추천 표지의 확대는 0.3초, 사진의 확대는 0.5초다. 아래 시간 이름은 이 확인값에 맞춘 재사용용 분류다. 큰 카드가 옆 카드와 겹치는 원래 홈의 확대를 작은 룩북 창에 그대로 옮기지 않는다.
:root {
--duration-fast: 200ms;
--duration-base: 300ms;
--duration-slow: 500ms;
--ease-out: cubic-bezier(.2,0,.2,1);
--ease-in-out: ease-in-out; /* 일반 전환용 (추정) */
}
@media(prefers-reduced-motion:reduce) {
.br-btn,.br-card-link {transition:none}
.br-btn:active {transform:none}
.br-btn[aria-busy="true"]::after {animation:none;border-style:dotted}
}
글 읽는 동안 표지나 제목이 계속 흔들리지 않게 한다. 로딩은 자리를 유지하는 작은 표시로 끝내고, 내용이 나타날 때 큰 이동으로 읽던 위치를 바꾸지 않는다.
Anti-patterns
Anti-patterns
1. 화면 전체를 청록색으로 칠하기 — 구독과 선택에 쓰는 작은 색이 흰 종이 면을 대신하면 작품 중심의 차분함이 사라진다. 큰 색 면은 글·책 표지 안에 둔다. 2. 모든 제목을 굵은 고딕으로 바꾸기 — 큰 명조 제목과 가는 본문의 차이가 읽는 속도를 만든다. 새 홈의 Pretendard UI를 작품 제목까지 넓히지 않는다. 3. 글마다 둥근 테두리 카드와 그림자를 붙이기 — 목록은 바탕에 바로 놓고, 그림자는 브런치북이 책처럼 보이는 자리에만 쓴다. 종이의 단순한 경계를 대시보드 칸으로 바꾸지 않는다. 4. 작은 문구와 반응 숫자로 표지를 채우기 — 작품 제목과 한 장의 표지가 먼저다. 카드에서 읽히지 않는 날짜·설명·순위·기능 단추를 줄여 주인공을 지킨다. 5. 현재 자산과 다른 이름·그림 섞기 — 필기체 로고를 일반 영문 글자로 대신하지 않고, 라이킷을 박수로 부르지 않는다. 책의 세로 비율·흰 제목 면·제본선을 살리고, 모회사 노랑이나 다른 플랫폼의 멤버십 표식을 가져오지 않는다.
Sources
출처
- https://brunch.co.kr/
- https://brunch.co.kr/brunchbook/go-write
- https://brunch.co.kr/publish
- https://brunch.co.kr/@brunch/293
- https://www.kakaocorp.com/page/detail/7769
- https://www.kakaocorp.com/page/detail/11710
- https://apps.apple.com/kr/app/%EB%B8%8C%EB%9F%B0%EC%B9%98-%EC%A2%8B%EC%9D%80-%EA%B8%80%EA%B3%BC-%EC%9E%91%EA%B0%80%EB%A5%BC-%EB%A7%8C%EB%82%98%EB%B3%B4%EC%84%B8%EC%9A%94/id1001388574
- https://t1.kakaocdn.net/brunch/home_front/prod/20261113140342/_astro/pc.CpZ7dlR6.css
- https://t1.kakaocdn.net/brunch/home_front/prod/20261113140342/_astro/pc-gnb.BEb1tMXW.css
- https://t1.kakaocdn.net/brunch/home_front/prod/20261113140342/_astro/pc-common.pl_m5xQL.css
- https://t1.kakaocdn.net/brunch/home_front/prod/20261113140342/_astro/article-pc.DBHbqipM.css
- https://t1.kakaocdn.net/brunch/home_front/prod/20261113140342/_astro/pc.BX3qhZeX.css
- https://t1.kakaocdn.net/brunch/home_front/prod/20261113140342/_astro/base-layout.DFuXP1mK.css
- https://t1.kakaocdn.net/brunch/static/images/pcrtn/ico_brunch_v1_221221_v3.png
- https://github.com/google/fonts/tree/main/ofl/nanummyeongjo
Brunch (브런치스토리) 이름과 로고는 각 권리자의 상표입니다.