Bricks 세팅

완전한 초기화 후, 기초를 단단히 잡고 시작하기 위한 스텝별 세팅 가이드를 정리해 드립니다. 1. 핵심 개념 이해하기: 변수(Variables) vs 클래스(Classes) 세팅에 들어가기 전, 브릭스 스타일 매니저의 두 가지 핵심 축을 이해해야 합니다. 2. 스텝별 초기 세팅 가이드 스타일 매니저(Style Manager)에서 기존 카테고리와 변수들을 모두 삭제하여 백지상태로 만든 후 아래 순서대로…

작성일 : June 7, 2026최종 수정일 : June 7, 2026

완전한 초기화 후, 기초를 단단히 잡고 시작하기 위한 스텝별 세팅 가이드를 정리해 드립니다.

1. 핵심 개념 이해하기: 변수(Variables) vs 클래스(Classes)

세팅에 들어가기 전, 브릭스 스타일 매니저의 두 가지 핵심 축을 이해해야 합니다.

CSS 변수 (Variables): 디자인의 ‘원재료’입니다. 특정 색상코드(#2563eb)나 폰트 크기(16px)를 직접 입력하는 대신, --color-primary나 --text-m이라는 이름표를 붙여 저장해 둔 값입니다. 나중에 브랜드 색상이 바뀌어도 변수 값 하나만 수정하면 사이트 전체가 변경됩니다.
클래스 (Classes): 원재료(변수)를 조합해 만든 ‘조립품’입니다. 예를 들어 .btn-primary라는 클래스에 배경색은 --color-primary, 폰트 크기는 --text-m, 모서리는 --radius-m으로 지정해 두고, 버튼을 만들 때마다 이 클래스만 부여하는 방식입니다.

2. 스텝별 초기 세팅 가이드

스타일 매니저(Style Manager)에서 기존 카테고리와 변수들을 모두 삭제하여 백지상태로 만든 후 아래 순서대로 진행해 보세요.

Step 1: 색상 (Colors) 세팅

스크린샷(2번)에서 이미 시맨틱(의미론적) 네이밍을 아주 잘 적용하셨습니다. 이 방식을 그대로 유지하시길 권장합니다.

Background / Surface: --color-bg(전체 배경), --color-surface(카드나 박스 등 요소의 배경). 모던한 UI에서는 이 두 가지를 구분하여 깊이감을 주는 것이 중요합니다.
Text: --color-text-main(기본 텍스트), --color-text-muted(보조 텍스트, 날짜 등).
Brand: --color-primary, --color-primary-hover, --color-secondary.
State / Utility: --color-border(구분선), --color-success, --color-error.

Step 2: 타이포그래피 (Typography) 세팅

스크린샷(4번)의 Clamp 기능을 활용한 반응형 폰트 세팅은 매우 훌륭한 접근입니다. 화면 크기에 따라 폰트가 부드럽게 커지고 작아집니다.

기준점 잡기: 블로그는 가독성이 생명이므로 본문(Body) 크기를 먼저 확정하세요. 모바일 최소 16px, 데스크탑 최대 18px 정도로 설정하는 것이 최근 트렌드에 맞습니다.
비율(Scale Ratio): 너무 과격한 비율보다는 1.250 (Major Third) 또는 1.200 (Minor Third) 비율을 선택해 Heading 1부터 Heading 6까지 자연스러운 크기 차이를 만드세요.
자동 생성된 변수명(--text-s, --text-m, --text-l 등)을 테마 스타일(Theme Styles)의 Typography 설정에 매핑해 줍니다.

Step 3: 간격 (Spacing) 세팅

스크린샷(5번)의 T-shirt 사이즈 방식(--space-s, --space-m)을 사용해 일관된 여백 시스템을 만드세요.

요소 간의 간격(Gap), 박스 내부의 여백(Padding), 섹션 위아래 여백(Margin)을 하드코딩하지 않고 무조건 이 변수들만 사용한다는 규칙을 스스로 세워야 합니다.
블로그 글 본문 내의 문단 간격이나 제목과 본문 사이의 간격도 이 변수를 활용해 세팅하면 훨씬 정돈된 느낌을 줍니다.

Step 4: 컨테이너 및 레이아웃 (Layout)

스크린샷(1번)에 있는 컨테이너 변수들을 최적화합니다.

–container-width: 사이트의 최대 너비 (예: 1200px 또는 1280px).
–container-narrow: 블로그 포스트 본문을 읽기 위한 좁은 너비. 사람의 눈은 줄바꿈이 너무 길면 피로해하므로 본문 영역은 보통 700px ~ 800px로 제한하는 것이 좋습니다.

3. 블로그 제작 시 실전 적용 팁

인라인 스타일 지양: 브릭스 에디터 화면 좌측 패널에 직접 숫자를 입력하는 것(ID에 스타일을 먹이는 것)은 최대한 피하세요. 항상 클래스를 만들고, 그 클래스 안에 변수를 불러와서(Variable Manager 아이콘 클릭) 적용하는 습관을 들이셔야 합니다.
반복되는 컴포넌트 찾기: 블로그 리스트에 들어갈 ‘포스트 카드’, ‘사이드바 위젯’, ‘작성자 프로필 박스’ 등 반복되는 요소들은 반드시 클래스(예: .post-card, .post-card__title)로 만들어 관리하세요.

Advanced Themer(AT)와 Bricksforge 두 플러그인 모두 기능이 방대해서 처음엔 압도될 수 있습니다. 이전 대화에서 나누었던 ‘디자인 시스템 초기화 및 기초 공사’의 연장선에서, 이 도구들을 어떻게 세팅하고 시작해야 하는지 단계별로 안내해 드리겠습니다.

Step 1: 개념 정리 및 역할 분담

세팅에 앞서 이 강력한 두 친구의 역할을 명확히 나누는 것이 좋습니다.

Advanced Themer (AT): 브릭스 빌더의 작업 환경(UI) 개선과 디자인 시스템(색상, 변수, 클래스) 구축을 담당하는 핵심 프레임워크입니다. 이전에 브릭스 기본 기능으로 하려던 폰트, 여백, 색상 세팅을 이제 AT가 훨씬 쉽고 체계적으로 대신해 줍니다.
Bricksforge (BF): 사이트의 동적인 요소(GSAP 애니메이션)와 고급 기능(Pro Forms, 백엔드 커스텀)을 담당합니다. SaaS 사이트에서 볼 수 있는 부드럽고 고급스러운 스크롤 애니메이션이나 상호작용은 여기서 만듭니다.

Step 2: 초기 설치 및 최적화 세팅

두 플러그인은 기능이 너무 많기 때문에, 안 쓰는 기능은 꺼두어 빌더를 가볍게 유지하는 것이 중요합니다.

Advanced Themer 세팅 (AT Settings):
- 워드프레스 관리자 메뉴에서 AT 설정으로 들어갑니다.
- Theme Settings: UI 탭에서 빌더 UI를 내 입맛에 맞게 커스텀합니다 (예: 왼쪽 패널 너비 조절, 다크모드 색상 변경).
- Features: Color Manager, Class Manager, Variable Manager, Typography, Spacing 기능은 반드시 활성화합니다.
- Superpower 탭의 기능들(요소 복사/붙여넣기, 클래스 복사 등)도 켜두면 작업 속도가 비약적으로 상승합니다.
Bricksforge 세팅 (BF Settings):
- 마찬가지로 설정 패널에서 시작합니다.
- 초기에는 너무 많은 패널을 열지 말고, 핵심인 GSAP Animations, Pro Forms, Global Classes 정도만 활성화해 두고 시작하는 것을 추천합니다.

Step 3: AT로 디자인 시스템 다시 세우기 (핵심)

이전에 스크린샷으로 보여주셨던 브릭스 기본 스타일 매니저 대신, AT의 강력한 매니저를 사용해 기초를 잡습니다.

Color Manager:
- AT의 컬러 매니저를 열고 기본 팔레트를 생성합니다.
- Primary, Secondary, Surface, Text 색상 등을 지정하면, AT가 자동으로 다크모드에 대응하는 색상 변수나 투명도(Opacity)가 적용된 변수들을 생성해 줍니다.
Typography & Spacing (Fluid/Clamp):
- AT에는 자체적인 Fluid Typography(유동적 폰트)와 Spacing(유동적 여백) 생성기가 내장되어 있습니다.
- 이전처럼 복잡하게 calc() 함수를 수동으로 만질 필요 없이, 최소/최대 화면 크기와 기준 폰트 크기만 입력하면 AT가 완벽한 CSS 변수들을 자동으로 생성하여 빌더에 주입해 줍니다.
Class Manager (BEM 방식 도입):
- AT의 클래스 매니저를 사용하면 .card__title 같은 BEM 방식의 클래스 생성이 훨씬 직관적입니다. 또한 특정 요소에 부여된 클래스들을 한눈에 보고 관리하기 편해집니다.

Step 4: BF로 SaaS 스타일의 디테일 더하기

뼈대가 완성되면 Bricksforge를 활용해 생명력을 불어넣습니다.

GSAP 애니메이션: 브릭스의 기본 애니메이션 대신 BF의 GSAP 패널을 사용해 보세요. 요소가 화면에 나타날 때 부드럽게 떠오르거나(Fade up), 스크롤에 맞춰 텍스트가 타이핑되는 효과 등 고급 SaaS 웹사이트 특유의 고급스러운 모션(Motion)을 코딩 없이 구현할 수 있습니다.

지금 당장 모든 기능을 마스터하려고 하기보다는, 가장 시급한 ‘AT를 활용한 컬러 및 폰트/여백 변수 세팅’부터 차근차근 진행해 보시는 것을 강력히 추천합니다.

“브릭스에서 AT 기능을 사용한다”는 것의 의미

이전에는 브릭스 기본 설정 창을 이리저리 돌아다니며 색상, 폰트 크기, 여백을 일일이 수동으로 입력하거나 복잡한 CSS 함수(clamp, calc)를 직접 작성해야 했습니다.

AT를 사용한다는 것은 올려주신 캡처 화면인 ‘Style Manager(스타일 매니저)’라는 강력한 중앙 통제실을 갖게 되었다는 뜻입니다. 여기서 기준값만 몇 개 입력하면, AT가 알아서 사이트 전체에 적용될 반응형 변수(Variables)와 클래스(Classes)를 자동으로 계산하고 생성해 줍니다.

올려주신 스크린샷의 순서대로, 완벽한 백지상태에서 제대로 세팅하는 방법을 정리해 드립니다.

Step 1: 환경 설정 (Settings 탭 – 마지막 캡처)

가장 먼저 확인해야 할 핵심 탭입니다.

HTML font-size: 62.5% (1rem = 10px)로 설정되어 있는 것을 볼 수 있습니다. 아주 좋은 기본값입니다. 이렇게 해두면 브릭스에서 1.6rem을 입력했을 때 우리에게 익숙한 16px로 직관적으로 계산됩니다.
Min / Max screen width: 360과 1440으로 되어 있습니다. 모바일 최소폭과 데스크탑 최대폭의 기준점이며, 이 수치에 따라 폰트와 여백이 유동적으로 줄어들고 늘어납니다. 그대로 두시면 됩니다.

Step 2: 테마 스타일 생성 (Theme Styles 탭 – 첫 번째 캡처)

현재 비어있는 상태입니다. AT가 만든 변수들이 실제 사이트에 적용되려면 ‘도화지’ 역할을 하는 테마 스타일이 필요합니다.

이름을 정해서 새로 하나 만듭니다. (예: Global Style 또는 Main Theme)
브릭스 에디터의 기본 테마 스타일 설정(톱니바퀴 아이콘)으로 가서, 방금 만든 테마 스타일의 Conditions(조건)을 Entire Website(전체 웹사이트)로 지정해 주어야 합니다.

Step 3: 색상 시스템 구축 (Colors 탭 – 네 번째 캡처)

현재 브릭스의 기본 색상들(yellow, red 등)이 섞여 있습니다. 깔끔한 SaaS 느낌의 블로그를 위해 이 부분을 과감하게 정리해야 합니다.

안 쓰는 기본 색상들은 우측 휴지통 아이콘을 눌러 지워줍니다.
ADD COLOR 버튼을 눌러 다음의 5가지 핵심 변수를 먼저 생성해 보세요.
- --color-primary: 사이트의 메인 브랜드 색상 (예: 포인트가 되는 블루 계열)
- --color-surface: 카드, 박스 등 컨텐츠를 담는 배경색 (보통 완전한 흰색 #ffffff 또는 아주 밝은 회색)
- --color-bg: 사이트의 전체 배경색 (Surface와 구분을 주기 위해 약간 톤 다운된 색상, 예: #f8f9fa)
- --color-text-main: 기본 본문 텍스트 (완전 검은색보다는 #1f2937 같은 진한 흑회색이 눈이 편안합니다)
- --color-text-muted: 날짜, 카테고리, 보조 설명 등에 쓰일 연한 텍스트 (예: #6b7280)

Step 4: 유동적 타이포그래피 (Typography 탭 – 다섯 번째 캡처)

과거에 일일이 계산했던 부분입니다. 이제는 AT가 알아서 해줍니다.

CREATE 버튼을 눌러 스케일을 만듭니다.
보통 Heading(제목용)과 Body(본문용) 두 개를 나누어 만듭니다.
스케일 설정에 들어가서 기준 폰트 크기(Base size)를 16px 또는 18px로 잡고, 스케일 비율(Scale ratio, 예: 1.25)을 선택하면 H1부터 H6까지 화면 크기에 맞춰 자연스럽게 줄어들고 커지는 반응형 폰트 변수들이 자동 생성됩니다.

Step 5: 여백 시스템 (Spacing 탭 – 여섯 번째 캡처)

마찬가지로 CREATE를 눌러 여백 스케일을 만듭니다.
AT가 제공하는 승수(Multiplier) 방식을 사용하면, 기준 여백(예: 16px)을 바탕으로 XS, S, M, L, XL 사이즈의 여백 변수들을 자동으로 만들어냅니다.
앞으로 패딩(Padding)이나 갭(Gap)을 줄 때는 숫자를 직접 입력하지 않고, 여기서 생성된 변수(예: var(--space-m))만 선택하여 디자인의 일관성을 유지합니다.

이 과정이 처음에는 약간 번거롭게 느껴질 수 있지만, 이 ‘Style Manager’ 세팅만 완벽하게 끝내두면 실제 블로그 포스트 리스트나 상세 페이지를 디자인할 때 작업 속도가 몇 배는 빨라집니다.

브릭스 빌더 자체에도 당연히 테마 스타일(Theme Styles), 글로벌 클래스, 변수 관리자(Variable Manager), 색상 팔레트가 기본적으로 내장되어 있습니다. 이전에도 이 기능들을 활용해 훌륭하게 기초를 잡고 계셨고요.

그렇다면 “도대체 Advanced Themer(AT)가 뭐가 다르길래 도입해야 하는가?”에 대한 핵심 차이점 4가지를 명확히 짚어드릴게요. AT는 없는 기능을 창조했다기보다는, 기존 브릭스의 흩어진 기능들을 하나로 ‘통합’하고, 수동 작업을 ‘자동화’해주는 강력한 부스터 역할을 합니다.

브릭스 기본 기능 vs Advanced Themer(AT)의 차이점

1. 흩어진 설정들의 완벽한 중앙 통합 (Unified Interface)

브릭스 기본: 테마 스타일은 패널에, 클래스 관리는 요소 입력창에, 변수는 따로 팝업창에, 색상은 팔레트에 각각 흩어져 있어 동선이 분산됩니다.
AT 도입 후: 올려주신 캡처 화면인 ‘Style Manager’라는 거대한 단일 팝업창 안에 모든 것(클래스, 변수, 색상, 폰트, 여백)이 탭으로 통합됩니다. 창 하나만 띄우면 사이트의 전체 디자인 뼈대를 한눈에 조망하고 통제할 수 있습니다.

2. 유동적(Fluid) 폰트/여백의 ‘자동 계산’ (가장 큰 차이)

브릭스 기본: 화면 크기에 따라 부드럽게 폰트가 커지고 작아지게 하려면, 외부 사이트(계산기)에서 복잡한 clamp(...) 수식을 일일이 계산해서 브릭스 변수창에 수동으로 입력해야 합니다. (이전에 보여주신 스크린샷이 바로 이 고된 수동 작업을 하셨던 흔적입니다.)
AT 도입 후: AT 내부에 수학 계산기가 아예 내장되어 있습니다. 기준 폰트 크기(예: 16px)와 비율(예: 1.25)만 선택하고 Generate 버튼을 누르면, 골치 아픈 clamp 수식이 완벽하게 적용된 수십 개의 반응형 폰트/여백 변수들을 1초 만에 자동 생성해 줍니다.

3. 색상 셰이드(Shades) 및 다크모드 자동화

브릭스 기본: 메인 파란색을 정한 뒤 호버(Hover)용으로 약간 어두운 파란색이나 배경용으로 아주 밝은 파란색을 쓰려면, 사용자가 직접 색상 코드를 찾아 각각의 변수로 일일이 등록해야 합니다.
AT 도입 후: 메인 브랜드 색상 하나만 지정하면, Tailwind CSS처럼 100부터 900까지의 밝기별 셰이드(Shade) 컬러 변수들을 자동으로 파생시켜 줍니다. 다크모드 대응도 훨씬 수월해집니다.

4. 클래스(Classes) 관리의 시각화

브릭스 기본: 내가 지금까지 어떤 커스텀 클래스들을 만들었는지 한눈에 전체 목록으로 보거나 일괄 관리하기가 까다롭습니다.
AT 도입 후: ‘Classes’ 탭에서 내가 만든 모든 클래스를 리스트 형태로 확인하고, 이름별로 정렬하거나 불필요한 고아(Orphan) 클래스들을 한 번에 청소하기가 압도적으로 편해집니다.

요약하자면: AT의 스타일 매니저는 이전에 수동으로 계산하고 이리저리 창을 옮겨 다니며 세팅해야 했던 디자인 기초 공사를 ‘클릭 몇 번의 반자동화’로 바꿔주는 도구입니다.

BACK