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

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

시작하기 전에

• 디자인 모드 진입 필요.
• 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. 우측 패널에서 다음 두 코드 복사:
   • <link> 태그 (HTML 코드, 위쪽)
   • font-family: '...' (CSS 코드)

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

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

1. 관리자 → 환경설정 > SEO > 고급 설정.

2. 공통 코드 삽입 활성화.

3. Header Code 영역에 1단계의 <link> 태그 붙여넣기.

4. Body Code 영역에 아래 코드 붙여넣기:

   <style>
   body, h1, h2, h3, h4, h5, h6, p, span {
     font-family: 'Pretendard'!important;
   }
   </style>

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

6. 저장.

3단계: 확인

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

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

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

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

버튼 스타일 커스터마이징

공통 디자인 설정에서

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

4. 저장.

강조 버튼 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.