Muffin Group의 Betheme(웹 디자이너들이 선호하는 유료 테마)(1) : 개요, 구입, 설치, 관련 플러그인, 데모 파일 설치 등은 아래노의 게시글을 참조해주세요.

Muffin Group의 Betheme(웹 디자이너들이 선호하는 유료 테마)(1) : 개요, 구입, 설치, 관련 플러그인, 데모 파일 설치 등

상세 사용법

편집기

워드프레스의 기본 편집기인 고전 편집기, Gutenberg Editor 외에 BeTheme는 Backend Editor 로 Muffin Builder라는 페이지 빌더가 제공되고 Frontend Editor 로는  WPBakery Page Builder 가 제공됩니다.

Muffin Builder 는 일반 편집기인  고전 편집기, Gutenberg Editor 그리고 elementor 편집기에 우선합니다. 따라서 Muffin Builder 으로 만든 컨텐츠는 고전 편집기, Gutenberg Editor 그리고 elementor 편집기로 만든 컨텐츠보다 상단에 위치합니다. 

WPBakery Page Builder는 (위지위그 WYSIWYG 방식이어서) 컨텐츠를 보면서고전 편집기, Gutenberg Editor 그리고 elementor 편집기로 만든 컨텐츠의 위나 아래에 쉽게 요소들을 추가할 수 있습니다.  

백엔드 편집기( Muffin Builder )

BeTheme에는 Muffin Builder라는 페이지 빌더가 기본 내장되어 있고 사내 편집기로 함께 제공됩니다. Muffin Builder는 많은 옵션을 제공하지만 기술 수준이 낮은 사용자를 위해 편집을 단순화 할 수 있는 위지위그(WYSIWIG) 지원이 없는 백엔드 빌더입니다. ( 출처 : BeTheme Review: A Responsive Multi-Purpose Theme for WordPress ). 또한 BeTheme은 헤더 빌더 (BeTheme Header Builder)를 플러그인으로 제공하고 있습니다.

Muffin Builder Guided Tour(3:48)

프론트엔드 편집기( WPBakery Page Builder )

Betheme 는 Frontend Editor 로  타사 플러그인인 WPBakery Page Builder를 제공하는데, 이 WPBakery Page Builder는 WYSIWIG(위지위그 WYSIWYG : What You See Is What You Get, “보는 대로 얻는다”는 문서 편집 과정에서 화면에 포맷된 낱말, 문장이 출력물과 동일하게 나오는 방식을 말한다.)가 지원되며 추가 수정 삭제 되는 것을 육안으로 확인하며 수정할 수 있어 Muffin Builder보다 사용하기가 쉽습니다.  Frontend Editor 는 유료이지만 BeTheme에서는 무료로 이용이 가능합니다.

( 참고 :  WPBakery Page Builder 는 유료(Total$53.55) 플러그인입니다.  출처 : PAGE BUILDER FOR ANY WORDPRESS THEME ) 워드프레스 BeTheme 테마 소개 및 사용 방법 와 알고 있으면 쓸모있는 워드프레스 페이지 빌더 플러그인 이야기에 따르면 WPBakery Page Builder는 Visual Composer(VC) 내장 되어 있는데 VC 페이지 빌더 플러그인은 평가를 받지 못하는 플러그인입니다. VC는 또한 사이트 속도를 떨어뜨리고 워드프레스가 업데이트될 때마다 호환성 문제를 야기하는 별로 바람직하지 않은 플러그인입니다. )

WPBakery Page Builder Beginners Guide – Formerly Visual Composer(35:57)

사이트 첫 페이지인 정적인 전면 페이지는 기본적으로 Muffin Builder를 이용하여 만들고 부족한 부분은 WPBakery Page Builder 또는 Elementor Page Builder를 이용하여 만드세요.(사이트의 로딩 속도를 고려한다면 WPBakery Page Builder 보다는 Elementor Page Builder 를 이용하세요)

슬라이더(slider)

이 테마는 기본으로 Layer Slider WP및 Revolution Slider 을 이용합니다.

Revolution Slider

Revolution Slider 및 상세사용법은 아래의 게시글을 참조하세요.

Revolution Slider(워드프레스 플러그인)

beTheme 에서 Revolution Slider 보여지게 하는 방법들

beTheme 에서 Revolution Slider 보여지게 하는 방법들에는 1. Page Options(0:27)으로 보여주는 방법, 2. Slider Plugin Item(0:52)으로 보여주는 방법, 3. Shortcode(1:15)으로 보여주는 방법 이렇게 3가지 방법이 있습니다. 1의 방법은 페이지의 상단에 Full width로 보여주므로 광장 세련됩니다. 2.3은 사용하는 캔버스에 따라 크기가 결정되며 1의 방법처럼 전면에 표시되지 않습니다.

How to display sliders on pages?(1:48)

1. Page Options(0:27)으로 보여주는 방법

백엔드 편집기인 Muffin Builder 하단에 보면 [MEDIA]가 있습니다. Layer Slider WP 와 Revolution Slider 둘 중 하나를 선택하여 이용할 수 있습니다. 동시에 이용할 수는 없습니다.  둘다 적용하면 Revolution Slider가 적용됩니다.

편리하면서 큰 장점은 페이지별로 헤더에 슬라이더(아래으 이미지의 분홍색 부분)를 멋지게 설정할 수 있다는 점입니다.

참고 : Betheme에서 minify HTML 플러그인을 같이 사용하면 Slider Revolution이 보여지지 않습니다.(작동하지 않습니다.)

Layer Slider WP

아직까지는 Revolution Slider 만 주로 사용하고 있습니다. 이 슬라이더를 이용하게 되면 정보를 업데이트하겠습니다.

정적인 전면 페이지(Static front page)

상세 사용법의 자습서(Documents)의 URL

Documentation https://support.muffingroup.com/documentation

beTheme 의 유튜브 채널

https://www.youtube.com/channel/UCtRjzmn2XfjnH-Vu8-sajbQ

Theme Option

Bethem 상세 설정은 기본적으로 Theme Option에서 합니다.

How to use Muffin Options(4:47)

목차는 아래와 같습니다.

• Theme options
  • Global
  • Header & Subheader
  • Menu & Action bar
  • Sidebars
  • Blog, Portfolio
  • Shop
  • Pages
  • Footer
  • Responsive
  • SEO
  • Social : 1,000개 이상의 구글지도, SNS 백링크를 거는 노하우가 있습니다. 꼭 적용해주세요.
  • Addons & Plugins
  • Colors
  • Fonts
  • Translate
  • Custom CSS & JS
  • Backup & Reset

Global

General, Logo, Buttons, Image frame, Sliders, Navigation & share, Advanced, Hooks 으로 구성되어 있습니다.

General

Logo

로고를 설정하는 부분입니다. 스크롤시 같이 움직이는 Sticky header logo가 인상적입니다.

• Logo
• Sticky header logo
• Options
• Advanced

Text Logo에 텍스트(글자)를 넣으면 로고 대시 입력한 글자가 표시됩니다.

svg logo width : SVG logo의 width(폭)을 쉽게 편집할 수 있습니다. XML 문법을 적용하여 tag를 작성할지 몰라도 업로드한 이미지의 가로 세로 비율에 맞추어 폭을 조정할 수 있습니다. 폭을 조정하지 않으면 아래의 이미지처럼 작게 표시되어 웹사이트의 전체 디자인 또는 슬라이드에 어울리지 않습니다. SVG 파일을 로고로 사용하는 경우, 폭을 조정하여주세요.

^{svg 변환 방법 및 svg 파일의 특징}

^{벡터 형식은 확대 축소에 강하고 화질이 열화되지 않기 때문에 어떤 화면에서도 선명하고 선명한 이미지를 표시할 수 있다는 장점이 있습니다. SVG 파일을 활용하면 어느 화면에서도 아름다운 이 미지를 사용자에게 보여줄 수 있습니다. 파일 크기도 작아서 리소스에 한계가 있는 경우에도 사용 하기 쉬운 형식입니다.}

^{svg 파일은 텍스트 편집기로 편집이 가능합니다.
SVG 이미지 파일은 XML 문법을 기본으로 하는 이미지 형식이어서 소소한 태그 코딩을 할 줄 알아야 편집 사용이 가능합니다.
편집 방법은 SVG 다루기 정리 (크기 / 색상 변경) 을 참조하세요.}

Buttons

Image frame

Sliders

Navigation & share

Options에는 Header arrows, Sticky arrows, Show all posts가 있습니다.
Header arrows : 게시글(psot)의 제목 밑에 이전 게시글과 다음 게시글로 이동하는 화살표가 생성됩니다.
Sticky arrows : 게시글(psot)의 컨텐츠 밑에 이전 게시글과 다음 게시글로 이동하는 화살표가 생성됩니다.
Show all posts : 동일한 카테고리(상점 제외) 내에서만 이전 게시글과 다음 게시글을 탐색하도록 하려면 비활성화하세요.(Disable to navigate only in the same category (excluding Shop))

Sticky arrows의 경우, AI챗봇 창을 열리지 않도록 하거나 OneSignal과 같은 Push Notification의 대화창을 막습니다. 이런 경우, 꼭 Sticky arrows를 사용 안 함으로 변경해주세요.

[Global] -> [Navigation & share] -> [Navigation]의 [Option]에서 [Sticky arrows]를 풀어주세요.

Advanced, Hooks

Hooks

Blog, Portfolio

Shop

General

General, Badges, Header icons, Wishlist, Mobile 으로 구성되어 있습니다.

General

• Catalogue Mode(카탈로그 모드) : 활성화하면 장바구니에 추가 버튼이 모두 제거됩니다. 사용자는 아무것도 구매할 수 없습니다. 실제 제품을 판매하지 않고 상점을 회사 상품 카탈로그로 이용하도록 설정하는 기능입니다.

활성화(Enable)하면 아래의 왼쪽 이미지처럼 상품페이지에서 [주문 수량 수정] 버튼과 [장바구니(Add to Cart)] 추가 버튼이 안 보여서 장바구니에 추가할 수 없고 장바구니에 추가가 되지 않으니 결제페이지로 이동할 수도 없는 문제가 발생합니다.

Badges

Header icons

Wishlist

Mobile

[Sticky shop menu]를 [Show]로 체크하시면 아래와 같이 스마트폰 하단에 고정 샵 메뉴가 표시됩니다. 사이트 하단에 바로 전화하기 버튼이나 푸쉬 알람 수락/거부 버튼, AI chatbot등을 표시한 경우가 있는데 이 경우 이들 버튼과 Sticky shop menu가 겹쳐서 표시되어 보기 싫은 경우에는 [Show](보이게 하기) 대신 [Hide](숨기기)를 선택해주세요.

Product List

Layout

• 페이지 당 제품(Products per page)메인 샵 페이지에서 상품 수량을 설정합니다.(Set the amount of products on main shop page.)
• Layout메인 상점 페이지의 레이아웃을 선택하고 그리드 3 열, 그리드 4 열, 석조 및 목록 중에서 선택할 수 있습니다.(Choose the layout of a main shop page, you can select from: Grid 3 col, Grid 4 col, Masonry and List.)
• Catalogue ModeEnabled는 모든 Add to Cart 버튼을 제거합니다. 사용자는 아무것도 살 수 없습니다.(Enabled will remove all Add to Cart buttons. Users will not be able to buy anything.)
•  

Options

• 이미지(Images)제품 이미지로 사용할 이미지를 지정하십시오. 이미지를 표시하고 외부 플러그인을 사용하는 기본 옵션을 비활성화하도록 선택할 수 있습니다.(Specify, which image you want to use as a product image. You can choose to disable the default option to display images and use an external plugin.)
• 장바구니 버튼 추가(Add to Cart Button)아카이브에 장바구니 버튼 표시.(Show Cart button on archives.)
• 설명(Descriptions)아카이브에 대한 설명을 표시합니다.(Display descriptions on archives.)
• 사이드 바(Sidebar)사이드 바를 표시 할 페이지를 선택하십시오. 옵션은 모두 (쇼핑, 카테고리, 제품) 및 쇼핑, 카테고리 만입니다.(Select on which pages do you want to display the sidebar. Options are: All (Shop, Categories, Products) and Shop, Categories only.)
• 슬라이더(Slider)

슬라이더를 표시 할 페이지를 선택하십시오.(Select on which pages do you want to display the slider.)

• 매진(Sold Out)“품절”라벨을 변경합니다.(Change the “Sold Out” label.). 영어로 “Sold Out”으로 표시되므로 한글 “품절”로 변경해 주세요.

상품 페이지(Single Product)

• 스타일단일 제품 페이지의 스타일 중 하나를 선택하십시오. 아코디언, 탭 또는 모던 중에서 선택할 수 있습니다. 선택할 수 있는 스타일은 아래와 같이 5개입니다.

         – Accordion | Next to image
– Accordion | Below to image
– Tabs | Next to image
– Tabs | Below to image
– Modern : 모던 스타일의 경우, 상품 이미지가 너무 커서 보기에 안 좋습니다. 기본 페이지와 같아서 보통의 상품 페이지와 모양이 많이 달라서 이질감이 느껴집니다.

모던 스타일의 경우 선호하는 이미지 크기( Preferred image size )모던 스타일의 경우 권장 이미지 너비는 900px (사이드 바없이 1200px)입니다. WordPress 커스터 마이저 에서 WooCommerce 이미지 크기를 변경할 수 있습니다 .( For Modern style recommended image width is 900px (1200px without sidebar). You can change the WooCommerce image sizes in the WordPress customizer. )

Accordion은 “설명”과 “상품평”을 접었다 펼수 있습니다. tabs 가 일반적 워드프레스 쇼핑몰의 상품 페이지이고 Accordion 은 betheme 의 고급 기능입니다.

Tabs은 “설명”과 “상품평”을 접었다 펼수 있는 Accordion 기능이 없이 “설명”과 “상품평”이 그대로 표시됩니다.

Next to image는 이미지 다음이 아니고 설명의 아래쪽으로 우측으로 치우쳐 표시됩니다.

Below to image 를 선택하면 아래와 같이 이미지 앞이 아니고 설명이 있는 우측 아래가 아니고 전페 사이즈로 이미지의 아래에 표시됩니다.

• 표제제품 제목이 표시되어야하는 위치를 선택하십시오. 콘텐츠, 콘텐츠 및 부제목, 부제목 중에서 선택할 수 있습니다.( TitleSelect where the titles of products should appear. You can choose from: Content, Content & Subheader, Subheader. )
• 관련 제품 | 카운트표시 할 관련 상품의 수량을 제공하십시오.( Related Products | CountProvide the amount of related products to display. )
  0 값은 관련 프로젝트를 비활성화합니다.(The 0 value will disable related projects.)

고급 설정(Advanced)

• 카트 | 아이콘(Cart | Icon)헤더에서 장바구니 아이콘을 선택하십시오.(Select icon for the shop cart in the header.)

중요! 아이콘이 업데이트되지 않았습니까?(Icon did not update?)

선택한 아이콘이 업데이트되지 않은 경우 WooCommerce 플러그인이 다시로드 할 수 있도록 장바구니에 항목을 추가해보십시오.(If the icon you selected did not update, try adding something to your cart so the WooCommerce plugin can re-load it.)

Pages

페이지는 게시물 다음으로 WordPress에서 두 번째로 중요한 사용자 지정 게시물 유형입니다. 다음은 테마 옵션에서 설정할 수 있는 몇 가지 옵션입니다.

---

일반적인

• 페이지 댓글페이지에 대한 설명 표시 : Hide를 하나 Show를 하나 차이를 모르겠습니다.

---

오류 404

• Icon : 404 페이지(404 Not Found 또는 요청한 페이지를 찾을 수 없습니다.) 아이콘 선택
• Custom Page(사용자 정의 페이지) : 이 페이지는 404 페이지(요청한 페이지를 찾을 수 없는 경우)에 이동할 페이지를 선택할 수 있는 부분으로 비워두면 기본페이지가 404 페이지가 나타납니다.

betheme 에서 처리하지 않고 따로 처리하고 싶은 경우, 아래의 글을 참조하여 플러그인을 별도 설치하여 처리하셔도 됩니다.

WordPress용 최고의 무료 301, 404 리디렉션 플러그인 7개

---

Under Construction(사이트 제작중)

사이트 제작중이고 아직 일반에 공개되지 않았을때 사이트 접속자에게 표시되는 것을 설정합니다. 맨위에 Under Construction 부분에 Disable과 Enable이 있는데, 사이트를 공개(live)한 이후에는 반드시 Disable로 변경해주세요.

• Under Construction(제작중) :
• Title(제목) : 제목과 텍스트는 시계 아이콘 아래에 표시됩니다.
• TextT(텍스트) : 제목 아래에 표시될 안내 문구입니다.
• Launch Date(출시일) : 웹 사이트가 Live될(보여질) 예상 시간을 입력하여 사용자에게 표시
• UTC Timezone(UTC 시간대) : +9:00 Seoul, Tokyo, Ambon, Yakutsk를 선택하시면 됩니다.
• 문의 양식 단축 코드연락처 양식의 단축 코드를 삽입하여 표시하십시오.
• Custom Page(사용자 정의 페이지) : 이 페이지는 공사중으로 사용되며 비워두면 기본 페이지가 나타납니다. 설정을 안하셔도 기본 페이지가 표시되므로 따로 만질 필요가 없습니다.

Social

[대단한 Know-How]CID로 1,000개의 1,000개의 백링크 만들기

이 동영상에서 배운 중요한 점은 cid를 loacl business schema의 hasMap 속성으로 넣는 방법도 의미가 중요하지만 웹사이트의 지도에 링크를 cid로 걸면 loacl business schema를 전부 적용한 효과까지는 아니지만 인용(백링크)의 효과를 얻을 수 있다는 점입니다.

Betheme를 이용하는 경우, [Theme Option] -> [Social] -> General의 맨아래에 Custom에 GBP(구글 지도 cid)를 넣어주세요. 이렇게 하면 Social이 Header 위에 계속 표시되므로 웹사이트가 1,000페이지면 1,000개의 백링크가 걸립니다. Betheme를 이용하지 않는 경우에는 header나 footer에 넣어주면 동일한 효과를 볼 수 있습니다.

아이콘은 map으로 검색하여 적당한 것을 골라주고 링크에 CID를 넣어줍니다.

kpco.kr의 경우, 2,300페이지인데 이 경우, 2,300개의 구글지도 백링크가 생성됨

How to Find the CID URL for GMB Listings(3:17)

아래의 Vimeo 동영상은 “GatherUp” Chrome 확장 프로그램 사용하여 CID를 넣는 방법을 설명합니다.

웹사이트에 인용문에 CID URL을 사용했을때 구글 지역 정보 순위에 미치는 영향

(출처 : Find Out What Happened To Our Rankings When We Used The CID URL In Our Citations )

테스트 목록 #1은 테스트 후반부에 훌륭한 결과를 보여주기 시작했지만 며칠 후 갑자기 급락하여 선택한 일부 훌륭한 “내 주변” 키워드에 대한 순위가 대부분 상실되었습니다.
테스트 목록 #2는 매우 긍정적인 결과를 매우 빠르게 생성했습니다.
테스트 목록 #3은 배치의 거북이입니다. 이 목록은 긍정적인 움직임을 보이고 있지만 매우 느리게 진행되고 있습니다.
테스트 목록 #4는 전반적으로 이 상장은 매우 견고한 상승세를 보였습니다.

소셜 링크 연결하기

워드프레스 관리자 페이지에서 [Betheme( 또는 테마디자인 또는 외모)] -> [Theme Options] -> [Social] -> [General]에서 해당 소셜의 페이지/채널 URL 을 넣어주시면 됩니다. #을 넣어주면 해당 소셜로 연결은 되지 않으나 소셜 아이콘이 표시됩니다.  새창에 여는 경우 target=”_blank”에 체크해주시고, rel=”nofollow”는 기본 체크해주시는 것이 검색엔진이 더 이상 크롤링하지 않게 하여 검색엔진 친화적이므로 체크해 주세요.

부족한 부분은 아래의 동영상의 1:20부터 살펴 보세요.

WordPress BeTheme Tricks – Action Bar & Social Links(3:22)

 

소셜 아이콘의 크기 및 색상을 변경하는 방법

아래의 동영상을 참조하세요.

Customize social icons on betheme Translations Home(7:09)

Colors(색상)

테마의 모든 색상을 설정활 수 있습니다.

Inline Shortcodes(인라인 단축 코드)

• Dropcap & Highlight background( 드롭캡 및 하이라이트 배경 ) : 드롭캡 및 하이라이트 단축코드의 배경색
• Hr color(HR 색상) : HR 태그의 색상에는 Dots, ZigZag 색상도 포함됩니다.

• List color(목록 색상) : HTML 목록의 텍스트 색상, 순서, 순서 없음 및 글머리 기호 목록

게시글과 페이지 중간에 분홍색 네모와 같이 붉은 색 계열의 글자가 생성되어 1시간은 헤메다 찾은 원인은 List color(목록 색상)이었습니다.

워드프레스 구덴베르크에서 (아래 이미지의 분홍색 네모처럼)[목록]으로 입력된 블록이 여기에 해당합니다.

참고로 글머리 기호는 아래와 같은 것들이 대표적인데, 위의 예처럼 1, 2, 3 과 같은 숫자도도 순서가 목록으로 입력되는 경우가 있어서 betheme에서는 List color(목록 색상)을 따로 설정할 수 있다는 사실을 모르면 사람을 무척 곤역스럽게 하오니 알아두세요.

• Note color(참고 색상) : 블로그 메타, 필터, 위젯 메타를 포함한 노트의 색상

Fonts(폰트, 글꼴)

Family

Betheme는 기본적으로 600 개가 넘는 Google font(글꼴)을 이용할 수 있습니다. 또한 Google 글꼴을 좋아하지 않는 사용자를 위해 Custom 에서는 .woff 나 .ttf 로 된 글꼴도 업로드하여 이용할 수 있는 것 같은데 상세한 활용법은 아직 모르겠습니다.

Content, Main Menu, Page Title, Big Headings, Small Headings, Blockquote, Decorative의 폰트를 변경할 수 있습니다. 현재 ngs, Blockquote, Decorative 의 의미는 정확히 모르겠습니다. 파악되면 보완하겠습니다.

Blockquote element

영어에서 번역됨-HTML, XHTML 및 MediaWiki에서 blockquote 요소는 “다른 소스에서 인용 된 [문서 내] 섹션”을 정의합니다. 구문은 <blockquote> <p> 블록 인용 텍스트는 여기에 표시됩니다 </ p> </ blockquote>. 위키백과(영어)

사용할 구글 폰트 선택 및 설정

구글 폰트( https://fonts.google.com/ ) 로 이동하여 언어를 한국어(Korean)로 선택하시면 아래와 같이 26개의 한글폰트들이 보이는데 어떤 모양인지 확인하신후 영문으로 된 폰트이름을 확인한 후 betheme의 폰트에서 선택하시면 됩니다.  네이버의 글자체는 Nanum Gothic입니다. 국내에서 가장 많이 접하는 글자체이므로 저는 이것으로 설정하였습니다.

구글 폰트는 html 의 header 안이나 CSS로도 쉽게 이용할 수 있습니다. (파랑색 네모안을 참조하세요.)

구글 폰트( https://fonts.google.com/ )는  아래의 분홍색 링크를 눌러 바로 이동할 수도 있습니다.

참조 : 혹시 betheme이전에 무료 테마를 사용하면서 한글 폰트를 활용하기 위해 Rocket 폰트 플러그인을 이용하고 있었다면 이 플러그인을 비활성화해주세요.

워드프레스에서 한글 폰트 사용하기 : Rocket Font 플러그인

Size & Style

content(기본 텍스트), 메뉴, 페이지 타이틀, h1 ~ h6의 거의 모든 글자체의 사이즈(Size)와 굵기(bold)를 수정할 수 있습니다.

예를들어, 메뉴의 글자체를 BOLD(굵고 진한 글꼴)로 바꾸고 싶다면 , betheme -> [Theme options] -> [Fonts] -> [Size & Style]중 Main menu를 선택하고 기존의 것이 500 midium이었다면 ‘700 bold’로 변경하여 메뉴를 굵은체(bold)로 변경할 수 있습니다.
여기서 500, 700 과 같은 숫자가 폰트 굵기를 의미하는 font-weight이고 bold(굵음체), italic(기울임체)등 style에 해당합니다.

메뉴에 소셜 아이콘을 추가하는 방법

Creating Navigation Menus 을 참조하세요.

---

참고자료  : 1. Creating Navigation Menus

2. 워드프레스 BeTheme 테마 소개 및 사용 방법

3. BeTheme Review: A Responsive Multi-Purpose Theme for WordPress : PAGE BUILDER FOR ANY WORDPRESS THEME

4. 알고 있으면 쓸모있는 워드프레스 페이지 빌더 플러그인 이야기

5. svg 변환 방법 및 svg 파일의 특징

6. SVG 다루기 정리 (크기 / 색상 변경)