아임웹 공통 디자인·폰트·버튼 커스터마이징

페이지마다 매번 색·폰트·버튼 모양을 따로 지정하면 너무 번거롭습니다. 공통 디자인 설정으로 한 번에 통일하십시오. 폰트는 구글 폰트도 적용 가능합니다.

시작하기 전에

• 디자인 모드 진입 필요.
• HTML/CSS 약간의 이해가 있으면 구글 폰트·코드 위젯 활용에 유리 (필수는 아님).
• 변경 후 게시하기까지 해야 방문자에게 적용됨.

공통 디자인 설정 — 한 번에 통일

위치

디자인 모드 우측 상단 톱니바퀴 아이콘 → 공통 디자인 설정.

설정 항목 (5분류)

1. 본문

• 브랜드 색: 메인 컬러 (버튼·강조·링크에 자동 반영)
• 링크 색: 본문 안 링크
• 배지 색: NEW, SALE 등 라벨
• 글자 색: 본문 기본
• 배경 색: 페이지 배경
• 본문 폭: 콘텐츠 최대 너비 (보통 1200~1400px)
• 그리드 간격: 컬럼 사이 여백

2. 텍스트

• 본문 글꼴: 한/중/일/영문 각각 다르게 가능
• 제목 글꼴: 본문과 다르게 가능 (헤딩 강조용)
• 텍스트 정의: H1~H6 크기·굵기·자간 일괄 설정

3. 구성요소

• 버튼 스타일: 기본·강조 버튼 디자인
• 입력 필드: 폼 인풋 스타일
• 말풍선: 툴팁 스타일
• 페이징: 게시판 페이지네이션
• 기본/차단 No-Image: 이미지 없을 때 대체 이미지

4. 옵션

• 원페이지 구성: 한 페이지 안에서 섹션 단위 풀스크린 스크롤
• 모바일 폰트 크기: PC와 다르게
• PC보기 버튼: 모바일에서 “PC 화면으로 보기” 버튼 표시 여부
• 로그인 모달: 로그인을 별도 페이지로 vs 팝업으로
• 페이지 전환 효과: 페이드·슬라이드 등
• 애니메이션 설정: 스크롤 등장 효과

저장 방법

설정 변경 후 우상단 아이콘 클릭 → 경고창에서 저장 선택. 저장 안 하면 변경 무효.

구글 폰트 적용하기 (사이트 전체)

아임웹 기본 폰트 외에 구글 폰트(Pretendard, Noto Sans KR, Nanum 등)를 >적용할 수 있습니다.

>

시작하기 전에

• HTML/CSS 이해 권장
• 한글 폰트는 용량이 크므로 사이트 속도에 영향 있을 수 있음

1단계: Google Fonts에서 폰트 코드 받기

1. Google Fonts 접속.
2. 검색창에 폰트명 입력 (영문, 예: Pretendard, Noto Sans Korean).
3. 원하는 폰트 클릭 → Style 섹션에서 weight 선택 (보통 400 Regular, 700 Bold).
4. 우측 패널에서 다음 두 코드 복사:
5. <link> 태그 (HTML 코드, 위쪽)
6. font-family: '...' (CSS 코드)

한글 지원 폰트인지 반드시 확인. 영문 전용 폰트를 한글에 적용하면 시스템 폰트로 fallback돼서 의도와 달라집니다.

2단계: 아임웹에 코드 삽입

1. 관리자 → 환경설정 > SEO > 고급 설정.
2. 공통 코드 삽입 활성화.
3. Header Code 영역에 1단계의 <link> 태그 붙여넣기.
4. Body Code 영역에 아래 코드 붙여넣기:

“`html

body, h1, h2, h3, h4, h5, h6, p, span {
font-family: ‘Pretendard’!important;
}

“`

1. 'Pretendard' 자리에 1단계의 실제 폰트명 입력 (작은따옴표 사이만 변경).
2. 저장.

3단계: 확인

1. 사이트 새로고침.
2. 본문·헤딩이 새 폰트로 바뀌었는지 확인.

폰트 일부 영역에만 적용하려면

위 CSS에서 body, h1, h2... 부분을 클래스 선택자로 바꿔서 특정 영역에만:

.headline, .hero h1 {
  font-family: 'Pretendard'!important;
}

버튼 스타일 커스터마이징

공통 디자인 설정에서

1. 디자인 모드 → 톱니바퀴 → 공통 디자인 설정.
2. 구성요소 → 버튼 스타일.
3. 항목별 조정:
4. 텍스트·배경·테두리 색
5. 마우스 롤오버(hover) 색
6. 버튼 모서리(라운드)
7. 좌우/상하 패딩

1. 저장.

강조 버튼 vs 일반 버튼

• 일반 버튼: 보조 액션 (예: “더 보기”, “다음”)
• 강조 버튼: 메인 CTA (예: “예약하기”, “문의하기”)

브랜드 색을 강조 버튼에, 회색·외곽선 버튼을 일반 버튼에 적용하면 시각적 위계가 잡힙니다.

개별 버튼만 다르게 하려면

위젯 추가 → 버튼 위젯 → 우클릭 → 버튼 설정에서 그 버튼만의 색·모양 변경.

색 팔레트 잡는 팁

3색 원칙

업종별 권장

• 병원: 청결감(파랑·민트) + 따뜻한 포인트(주황·연분홍)
• 기업: 신뢰감(네이비·진회색) + 명확한 액센트
• F&B: 식욕 자극 색(빨강·주황) + 따뜻한 톤
• 교육: 활력 + 신뢰 (파랑·녹색 + 노랑)

HEX 코드 직접 입력

브랜드 색 정확한 코드(예: #2563eb)를 가지고 있다면 색 선택창의 HEX 입력란에 직접 붙여넣기.

자주 막히는 포인트

• “공통 디자인 변경했는데 페이지에 반영 안 됨” → 위젯·섹션마다 개별 설정이 우선합니다. 개별 설정을 초기화해야 공통 디자인이 적용.
• “폰트 적용했는데 모바일에서 깨짐” → 모바일 폰트가 별도로 잡혀 있을 수 있음. 공통 디자인 설정 > 옵션에서 모바일 폰트 크기 확인.
• 구글 폰트 로딩이 느림 → weight를 너무 많이 불러오면 느려집니다. 400·700 정도만 권장.
• 버튼이 모바일에서 너무 작음/큼 → 모바일 뷰포트에서 따로 확인. 패딩을 px가 아닌 em·rem으로 잡으면 자동 스케일.

FAQ

Q. 공통 디자인 설정과 개별 위젯 설정 중 뭐가 우선?
A. 개별 위젯 설정이 우선입니다. 공통 설정을 바꿔도 개별 설정된 부분은 그대로입니다. 일관성을 원한다면 위젯·섹션의 개별 설정을 “기본값으로 되돌리기” 후 공통 설정만 사용하십시오.

Q. 구글 폰트 말고 직접 만든 폰트 파일을 쓸 수 있나요?
A. 가능합니다. 코드 위젯 또는 공통 코드 삽입의 Body Code에 @font-face 규칙을 추가하고 폰트 파일을 외부 호스팅(예: jsDelivr CDN)에 올린 후 그 URL을 사용하면 됩니다. 다만 저작권·라이선스 확인 필수.

Q. 다크모드도 가능한가요?
A. 아임웹 기본 기능에는 없습니다. 코드 위젯으로 자체 구현은 가능하지만 권장하지 않습니다. 대부분의 클라이언트 사이트는 라이트모드 하나로 충분합니다.

Q. >모바일·PC에서 폰트가 다르게 보입니다.>
A. 모바일은 시스템 폰트 fallback이 더 자주 발생합니다. 폰트 적용 CSS에 !important를 빼먹지 않았는지, 한글 지원 폰트인지 확인.

Q. 브랜드 가이드(컬러·폰트)를 디자이너가 정해줬는데 적용 방법은?
A. HEX 코드와 폰트명만 받으면 됩니다. HEX는 공통 디자인 설정 색 선택창에 직접 입력, 폰트는 위 구글 폰트 가이드대로.

관련 가이드

• imweb-widget-section — 위젯·섹션 다루기
• imweb-mobile-design — 모바일 편집 (예정)
• imweb-popup-banner — 팝업·비주얼섹션 (예정)
• 홈페이지 제작 비용 가이드 — 빌더 직접 제작과 외주 제작의 비용 비교 기준

출처 및 검증
본 가이드는 아임웹 공식 도움말과 구글 폰트 공식 문서를 기반으로 언웹스가 실무 노하우를 더해 재구성했습니다. 최종 확인: 2026-05.