홈페이지 색상·서체 바꾸는 방법 4단계 (디자인 모드)업데이트

소식 · 업데이트

홈페이지 색상·서체 바꾸는 방법 4단계 (디자인 모드)

· 읽는 시간 5분

공유하기

이 글의 요약

  • 홈페이지 색상·서체·모서리는 디자인 모드의 「테마」에서 한 번에 바꿀 수 있습니다.
  • 섹션 순서는 ▲▼ 버튼으로 옮기고, 필요 없는 섹션은 「숨기기」로 가리면 됩니다.
  • 저장하기 전에는 방문자에게 아무것도 바뀌지 않으니, 「방문자 화면」으로 먼저 확인하세요.
  • 레이아웃 변경이나 새 섹션 추가는 디자인 모드 범위가 아니라 유지보수로 요청합니다.

홈페이지 색상 하나 바꾸려고 업체에 연락하기, 번거로우셨죠? 결론부터 말하면, 잇다웹에서 새로 만든 홈페이지는 디자인 모드에서 사장님이 직접 바꿀 수 있습니다. 이 글은 현재 사이트에서 이용 가능한 테마·섹션 기능을 4단계로 안내합니다.

홈페이지 색상 변경, 어디서 하나요?

관리자로 로그인한 뒤 디자인 모드를 켜고, 상단 도구 바의 「테마」를 누르면 됩니다.

디자인 모드는 홈페이지 화면 위에서 바로 고치는 편집 기능입니다. 비유하면, 가게 간판을 떼어 공장에 보내는 게 아니라 그 자리에서 페인트만 다시 칠하는 셈입니다.

테마에서 바꿀 수 있는 항목은 세 가지입니다.

테마 항목 고를 수 있는 것 이럴 때 쓰세요
대표 색상 팔레트에서 고르기, 색상 코드 직접 입력 로고 색과 홈페이지 색을 맞출 때
제목 서체 기본(Pretendard), 명조·세리프 고급스럽거나 차분한 느낌을 낼 때
모서리 각진, 둥근, 더 둥근 버튼·카드 인상을 부드럽게 바꿀 때

한 줄 정리: 색상·서체·모서리는 「테마」 한 곳에서 사이트 전체에 한 번에 적용됩니다.

홈페이지 색상 변경 전에 여러 색 견본을 펼쳐 놓고 대표 색을 고르는 모습
홈페이지 색상 변경 전에 여러 색 견본을 펼쳐 놓고 대표 색을 고르는 모습

테마와 섹션을 바꾸는 방법 4단계

로그인 → 테마 → 섹션 정리 → 확인 후 저장, 이 네 단계면 끝납니다.

  1. 관리자로 로그인하고 디자인 모드를 켭니다.
  2. 도구 바의 「테마」에서 대표 색상, 제목 서체, 모서리를 고릅니다.
  3. 섹션 위의 ▲▼ 버튼으로 순서를 바꾸고, 안 쓰는 섹션은 「숨기기」를 누릅니다.
  4. 「방문자 화면」을 새 창으로 열어 확인한 뒤 저장(Ctrl+S, 맥은 ⌘S)합니다.

섹션은 홈페이지를 위아래로 나눈 한 덩어리입니다. 메인 배너, 메뉴 소개, 오시는 길 같은 것들이죠. 순서만 바꿔도 인상이 크게 달라집니다.

예를 들어, 동네 브런치 카페라면 겨울에 대표 색을 갈색으로 바꾸고 「시즌 메뉴」 섹션을 위로 올리면 됩니다. 여름 이벤트 섹션은 숨겨 두면 내년에 다시 씁니다.

한 줄 정리: 지우지 말고 숨기세요. 숨긴 섹션은 언제든 다시 보이게 할 수 있습니다.

저장하면 손님에게 바로 보이나요?

네, 저장하는 순간 반영되고, 저장 전까지는 방문자 화면이 그대로입니다.

고치는 도중에 손님이 어색한 화면을 볼 걱정은 없습니다. 저장하지 않고 창을 닫아도 변경 내용이 브라우저에 남아, 다시 열면 「이어서 편집」할 수 있습니다.

한 줄 정리: 저장 버튼을 누르기 전까지는 연습이라고 생각하셔도 됩니다.

잘못 바꿨다면 어떻게 되돌리나요?

저장 전에는 Ctrl+Z(⌘Z), 저장 후에는 「테마 기본값으로」나 「변경 이력」을 쓰면 됩니다.

저장한 뒤라도 「변경 이력」에서 이전 값을 눌러 되살린 다음 다시 저장하면 됩니다. 처음 상태가 그리우면 「테마 기본값으로」 버튼 하나로 돌아갑니다.

한 줄 정리: 실수해도 괜찮습니다. 되돌리는 길이 세 가지나 있습니다.

디자인 모드로 홈페이지 색상 변경 결과를 노트북에서 함께 확인하는 모습
디자인 모드로 홈페이지 색상 변경 결과를 노트북에서 함께 확인하는 모습

디자인 모드로 안 되는 것은 무엇인가요?

디자인의 '틀'을 바꾸는 작업은 유지보수로 요청해 주셔야 합니다.

페인트칠과 가구 옮기기는 직접, 벽을 허무는 공사는 전문가 몫이라고 보면 됩니다.

구분 디자인 모드로 직접 유지보수로 요청
색·서체 대표 색상, 제목 서체, 모서리 글씨 크기, 간격, 본문 서체
섹션 순서 이동, 숨기기 새 섹션·새 페이지 추가
구조 메뉴 이름(문구) 수정 레이아웃 변경(2단→3단), 메뉴 항목 추가·삭제

요청할 작업의 예상 비용은 홈페이지 유지보수 단가표에서 미리 볼 수 있습니다. 이미 운영 중인 사이트는 구조에 따라 디자인 모드 적용 범위가 달라 먼저 확인이 필요합니다.

한 줄 정리: 칠하기·옮기기는 직접, 틀 바꾸기는 요청 — 이 기준만 기억하세요.

실행 체크리스트

  • □ 로고 색상 코드(예: #2B5D3A)를 미리 메모해 두기
  • □ 제목 서체를 기본으로 둘지 명조로 바꿀지 정하기
  • □ 지금 메인 화면 섹션 순서를 종이에 적어 보기
  • □ 안 쓰는 섹션은 삭제 대신 숨기기로 정리하기
  • □ 저장 전 「방문자 화면」과 휴대폰 화면으로 확인하기

한 줄 정리: 색상 코드와 섹션 순서만 정해 두면 금방 끝나는 작업입니다.

자주 묻는 질문

홈페이지 색상 변경하면 모든 페이지가 같이 바뀌나요?

네, 테마는 사이트 전체에 한 번에 적용됩니다. 버튼과 강조 부분이 모두 같은 대표 색으로 맞춰집니다. 페이지별로 다른 디자인이 필요하면 유지보수로 상담해 주세요.

휴대폰으로도 섹션 순서를 바꿀 수 있나요?

휴대폰에서도 도구 바가 접혀서 동작합니다. 다만 정확히 누르고 확인하기에는 PC 화면을 권합니다. 저장 후에는 휴대폰으로 한 번 열어 실제 모습을 꼭 확인하세요.

직원 2명이 동시에 고쳐도 괜찮나요?

괜찮습니다. 다른 관리자가 같은 항목을 먼저 저장했다면 저장할 때 알려 줍니다. 그때 새로 불러올지, 덮어쓸지 고르면 됩니다.

한 줄 정리: 테마는 사이트 전체, 확인은 휴대폰까지, 동시 수정도 안전합니다.

관리 화면이 궁금하시면 관리자 데모에서 미리 둘러보실 수 있습니다. 우리 가게 홈페이지에 맞는 디자인과 범위가 궁금하시면 무료 견적 상담에서 편하게 물어보세요.

사진: Unsplash (photo-1739145974146-c310088417ca, photo-1702838646785-1e2379337b12, photo-1651684195895-38708dc94cfa)

디자인 · 웹사이트 · 모바일 앱, 어디부터 시작할지 고민이세요?

디자인부터 웹사이트, 모바일 앱까지 —
무료 견적 상담으로 우리 프로젝트에 맞는 방향을 먼저 확인하세요