워드프레스 글쓰기 편집기 쿠텐베르그 간단 사용법 동영상

Step-by-step walkthrough of WordPress Gutenberg block editor. Learn to format text, manage blocks, add images and media, create layouts with columns and buttons, and embed YouTube, Instagram, and Spotify.
Chapters
자 오늘은 이 WordPress로 로그인을 했어요. 저번에도 설명 드렸지만 여기서 wp-admin 이었죠. 로그인을 해서 글쓰기 모드를 한번 배워 보도록 하겠습니다. 자 이렇게 들어오시면 여기에서 새로 추가를 누르셔도 됩니다 그리고 사이트로 나가서 새로 추가를 누르셔도 상관없어요 자 이렇게 글 버튼을 눌러보세요 워드프레스 워드프레스 이 에디터 모드 글쓰기 모드를 한번 해보도록 하겠습니다. 제목을 추가 어 그냥 이렇게 할게요. 슬기로운 마케터 생활 자 그 다음에 슬기로운 마케터 생활을 이렇게 복제를 한번 해보겠습니다. 그죠? 생활 그 다음에 이건 뭘까요? 어쩌고저쩌고 저쩌고 저쩌고 이렇게 해보겠습니다. 첫번째 이제 이렇게 보면은 클릭을 하시면 요런식으로 이 문단 하나가 선택이 되는거 보이실 겁니다. 그죠? 자 그리고 이 문단에 대해서 유형, 스타일 뭐 이런 것들을 여기서도 바꿀 수가 있어요. 여기서 이렇게 일단은 요런 것들이 있다고만 이해를 하시구요. 다음으로 먼저 넘어갈게요. 그 다음에 여기 클릭을 하시고 만약에 여기에서 어 이거를 내가 가운데 정렬을 하고 싶다 이런거 뭔지 아시겠죠 그죠 우측 정렬 좌측 정렬 그 다음에 두껍게 해주고 싶다 그죠 그 다음에 눕히고 싶다 옆으로 그죠 자 그 다음에 아이고 그 다음에 여기에다가 링크를 부여하고 싶다. 예를 들면 제 마케팅 닥터 홈페이지 링크를 한번 넣어 보도록 하겠습니다. 자 그러면 여기에다가 슬기로운 마케팅 닥터 생활 해놓고 마케팅 닥터 홈페이지를 한번 집어 넣어 볼게요. 자 링크 세탭에서 열기 해도 하셔도 되구요. 그렇지 않으셔도 상관없습니다. 자 그러면 링크가 이렇게 글속에 삽입이 된게 보이시죠. 자 그 다음에 더보기 이렇게 누르시면 이제 좀 더 이제 확장된 요런 것들이 나옵니다. 뭐 아래 참자 같은 경우는 한번 해보세요. 뭐 이런식으로 아래쪽에 참자가 붙죠. 그죠? 그 다음에 예를 들어서 위 참자 같은 경우도 위 참자가 되겠죠. 위에 참자가 붙는 그죠? 이런 것들 이런 것들이 해당이 됩니다. 그 다음에 여기 밑에 보시면 또 여러가지 있으니까 뭐 인라인 이미지라는 요런 것도 있구요. 잠시만요 한번 해볼게요. 요렇게 보이시죠? 자 그래서 이게 많이 쓰는 기능들은 아닙니다. 이것들은. 근데 여기에 기능들은 요런 것들이 있다라고 이해를 하시면 될 것 같아요. 그 다음에 많이 쓸 것 같은 것은 요런 것들. 텍스트 색상 그죠? 예를 들어서 이렇게 하시고 텍스트 색상을 지정을 하는 겁니다. 사용자 정의 색상을 누르시고 요런 색상으로 하고 싶다. 그러면 이렇게 바뀐게 보이시죠? 이런 것은 많이 쓸 수 있지만 다른 것들은 뭐 그다지 뭐 많이 쓸만한 그런 것들은 아니라고 생각을 하시면 될 것 같습니다. 다시 뒤로 넘어갈게요. 그 다음에 그 다음에 이제 여기 옆에 보시면 요런게 있어요. 이렇게 그죠? 이거는 뭐냐면 이 블록에 대한 겁니다. 예를 들면 이 블록을 복제를 하겠다. 그러면 하나가 복제가 되죠. 그 다음에 이 블록을 그냥 복사를 하겠다. 그러면 복사가 되는 거고, 앞에 삽입을 하겠다. 그러면 앞에 삽입이 되는 겁니다. 이런 식으로. 그 다음에 뒤에 삽입을 하면 D가 되겠죠. 다음으로 이동 자 다음으로 요게 지금 바가 보이시죠. 이제 요거를 갖다 놓고 요렇게 바를 요렇게 갖다 놓고 엔터를 치면 쭉 내려온게 보이시죠. 이런식입니다. 자 그리고 여기에서 재사용 가능 블록에 추가라는 요런게 있습니다. 요거는 클릭을 하면요. 재사용 가능 블록이라는 거에 추가가 되는데요. 이게 어떤 건지 한번 보여드릴게요. 자 여기 블록이 생성됨이라고 되었죠. 여기에서 보시면은 재사용 가능 이라는 요런 단어가 보이시죠. 그리고 제목 없는 재사용 가능 블록 이런 식으로 나오고 있죠. 그죠? 그럼 이미 저장되어 있는 그런 재사용 가능 블록을 써먹을 수가 있는 거에요. 그래서 이제 가장 최근에 우리가 했던 거는 여기 지금 보시는 요거죠. 재사용 가능. 이제 여기 이게 아마 가장 최근에 사용했던 거죠. 그래서 똑같은 게 이렇게 뜨죠. 자 이런식으로 내가 좀 자주 사용하는 어떤 패턴의 그런 문구 같은거 이런거는 재사용 가능 블록이라는거에 등록을 해놓고 쓸 수가 있는 것 같아요. 자 그 다음에 그리고 또 이런것도 있습니다. 그룹화라는게 있는데요. 이거는 이제 예를 들어서 지금 이 두개의 그룹을 하나로 한번 묶어 볼게요. 이 두개를 이렇게 드래그를 한 다음에 그룹화를 한번 해 볼게요. 그러면 하나의 그룹이 됐죠. 그죠? 하나의 그룹이 된거를 우리는 이렇게 이동 같은 것도 할 수 있는 거고, 그죠? 하나의 그룹으로 할 수 있는 어떤 액션들, 이런걸 취할 수 있게 되는 거죠. 그래서 이제 여기에는 대충 이제 이런 기능들이 있다라는 것을 이해하시면 될 것 같고 내가 어떤 특정 블록을 제거하고 싶다 그럴 때는 이렇게 해서 블록 제거를 누르면 이 블록 자체가 사라지는 겁니다 이 블록 자체가 자 해볼게요 블록 제거 굉장히 이게 처음에는 좀 복잡할 것 같은데 이게 조금만 익숙해지면 오히려 훨씬 더 쓰기도 편하고 좋을 것 같다는 느낌이 많이 듭니다. 테스트해 본 결과. 자 그 다음에요. 그리고 이제 여러분들이 가장 많이 쓰시게 될게 여기 보시면 이제 이렇게 플러스 버튼 있잖아요 그죠 블럭 추가 라고 하는 거 요거를 이제 누르게 되면 그렇게 모두 찾아 보기라는 게 있어요 이렇게 누르면 여기 보시면 이제 지원되는 블록들이 다 나옵니다. 여기 보시면 문단, 제목 보이시죠? 그 다음에 목록은 요런 형태고, 인용은 요런 형태, 코드는 요런 형태, 클래식이라는 건 또 요런 형태, 그 다음에 사전 서식화, 내부 인용, 그 다음에 테이블, 그 다음에 운문이라는 것도 있네요. 식구 같은 것도 있네요. 그 다음에 이제 미디어. 우리가 이제 많이 쓰게 될 것 중에 하나가 또 요거겠죠. 그죠. 미디어도 이미지 한 장 짜리. 그 다음에 이제 갤러리. 여러 장의 이미지 넣는 거. 그 다음에 오디오 넣는 거. 그 다음에 커버. 이렇게 이미지에 이렇게 또 글자를 집어 넣는 거. 그 다음에 파일. 그 다음에 미디어 앤 텍스트. 이제 사진과 텍스트를 이제 결합해서 넣는 거. 비디오. 그러면 일단은 우리가 가장 많이 쓰게 될 기능들은 요런 기능들이 되겠죠. 이거부터 이제 먼저 한번 해보도록 할게요. 간단하게 한번 해보면 여기 이제 클릭하시고 마찬가지로 누르고 이제 이미지 한번 넣어 볼게요. 그냥 이미지를 이렇게 넣고 이미지 이렇게 넣으라는게 나오죠. 그러면 업로드. 내가 만약에 이미지를 내 홈페이지에 있다. 그러면은 업로드를 해야겠죠. 자 그러면... 블로그 관련 이미지로 한번 올려보도록 하겠습니다. Flow 관련 이미지로 넣어놓은게 여기 쭉 보면 있을겁니다. 요런 이미지가 하나 있다. 이런거 한번 올려보도록 할게요. 나이키 신발 이미지죠. 이런 이미지를 하나 올렸습니다. 그리고 이번에는 또 다른 이미지도 한번 올려볼게요. 갤러리도 한번 올려보도록 하겠습니다. 갤러리 업로드.. 여러장의 이미지를 올리는게 되겠죠? 어떤식으로 올라갈지 궁금해지네요. 한번 해보도록 할게요. 갤러리.. 어떤 이런 이미지들을 동시다발적으로.. 아이고 너무 많이 눌러버렸네요. 다시.. 요고 요고 그 다음에 요고 그 다음에 요고 요고 그 다음에 요고 그 다음에 요고 요 정도만 눌러볼게요. 한 6장 정도. 자 갤러리 이미지를 눌렀습니다. 음 갤러리 이미지는 이런 식으로 됐네요. 지금 마지막에는 이런 식으로 나오고 그죠? 갤러리 캡션 쓰기. 요런 구성으로 되네요. 갤러리 이미시는. 자 이번에는 커버 한번 해 보도록 할게요. 커버. 이렇게 들어가서 커버. 아까 보았을 때.. 아무 사진이나 가지고 한번 해 보도록 할게요. 이렇게 하고.. 여기에 이제 글자 타이틀 적는 란이 나오죠? 여기에 타이틀을 적어 주시면 되는 것 같아요. 이렇게 커버.. 그죠? 자 이번에는 여기 보시면 미디어 앤 텍스트를 한번 눌러볼게요. 그럼 미디어 영역과 콘텐츠 영역이 이미 구분되어서 나와지고 있죠. 그죠? 그러면 콘텐츠 영역에서는 또 이렇게 콘텐츠 콘텐츠를 요렇게 또 그죠? 이런 식으로 작성을 할 수 있게끔 이렇게 나오고 있죠. 그죠? 자 이런거는 다 한번 해보시면 금방 아마 이해가 되실겁니다. 자 그 다음에 비디오 마찬가지로 비디오도 마찬가지입니다. 업로드를 할 수도 있구요. url 에서 삽입. 이거는 이제 결국에는 유튜브 같은거를 이제 퍼오는게 되겠죠. 뭐 예를 들면 이런거. 제 유튜브에 동영상을 하나 퍼와 볼게요. 이렇게 하고 그 다음에 자 그럼 인베드 중이라고 해가지고 인스타그램 카달로그의 상품을 등록하는 방법이란 요 동영상을 가져왔죠 그죠 자 그래서 여러분들이 가장 많이 아마도 쓰실 부분들이 이 부분이 아닐까 싶어요 이미지, 갤러리, 오디오, 커버, 파일은 이제 파일 업로드하면 다운받을 수 있게끔 하는 거구요. 요런 부분들 가장 많이 쓰실 것 같고, 그 다음에 하나의 문단에 대한 부분은 앞에서 해드렸었죠. 그 다음에 이제 요런 것들도 있어요. 디자인, 버튼, 컬럼, 그룹, 더보기, 페이지 나눔, 구분자, 여백도구 이런게 있는데요. 이것도 이제 몇 가지만 중요한 것만 간단하게 한번 알아볼게요. 여기 보시면은 자 여기 보시면은 버튼. 버튼은 이런 겁니다. 한번 넣어 볼게요. 예 이렇게 되어 있고 여기 버튼 이름을 버튼.. 버튼 예를 들어서 버튼 텍스트 입력 이렇게 해줄 수가 있습니다. 그죠? 그리고 이 버튼 자체를 뭐 가운데 정렬로 할 수도 있고, 복제를 할 수도 있고, 아래 위로 이렇게 이동을 할 수도 있구요. 그죠? 이 버튼을 중앙으로 옮기려면 뭐 요런식으로 중앙 맞춤 요런것들을 선택을 해주시면 되요. 그 다음에 이렇게 요런걸 누르면 전체 포 넓어졌죠? 그 다음에 넓은 포 요런것도 있고 요렇게 아이템을 이동할 수도 있어요. 이런식으로 아래 위로 이 화살표는 아래 위로 이렇게 이동하는 겁니다. 그런 식으로 이렇게 버튼 같은 것도 입력을 할 수가 있어요. 그 다음에 또 밑에 내려보면 column 이라고 있어요. column. column 이라는게 뭐냐 이렇게 칸을 나누는 걸 column 이라고 하는 것 같아요. 여기서는. 만약에 나는 한 30대 70 비율로 하나를 나눠보겠다 그러면 이쪽에는 30대 그죠 30대 비율로 뭐 문단을 집어넣을 수도 있고 이미지를 집어넣을 수도 있어요 이미지 한번 집어넣어 볼까요 거의 한 30%의 비율이 되겠죠 그죠 30%의 비율로 이미지가 들어가게 될 겁니다 그죠 들어가게 됐고 그러면 나는 여기에다가는 어 다른 어떤 글을 내가 글을 하나 작성을 해보고 싶다 그럴 수 있잖아요. 그죠? 글을 작성하고 싶다. 그럴 때는 문단을 집어넣는 거죠. 그러면 여기에는 문단을 집어 넣었습니다. 어떻게 글자가 보여질지 궁금하네요. 뭐 이런 식으로 적는 거겠죠. 뭐 이런 것들이 가능합니다. 이 칼럼 이라는 것을 통해서 그래서 할 수 있는 것들이 너무 많은 것 같아요. 너무 좋은 것 같아요. 자 그 다음에 또 보시면은 또 여러분들이 쓸만한 것들은 보면 뭐 더보기 페이지 나눔 이런거는 뭐 그냥 이렇게 한번 해보시면 금방 이해되실 거에요. 이렇게 구분자 같은 걸 나누게 하는 거에요. 구분선도 마찬가지구요. 자 이런거는 뭐 해보시면 금방 이해가 되실 겁니다. 이런 것들은 그 다음에 뭐 위젯, 보관함, 캘린더 뭐 이런 것들을 집어 넣을 수 있게 되어 있는 것 같아요. 뭐 최근 댓글 같은 것도 집어 넣을 수가 있고 캘린더 한번 집어넣어 볼까요? 이런식으로 안에 캘린더가 들어오게끔 만들 수도 있고 기능이 굉장히 다양하고 많은 것 같습니다. 지금 보시면은 그 다음에 최신글, 이건 이제 글이 좀 있을 때 좋겠죠. 그 다음에 소셜 아이콘 이런거 해야 되겠죠. 이제 끝나고 여기에 이제 소셜 아이콘 설정이 돼 있으면은 여기에 뭐 트위터 페이스북 이런식으로 해서 소셜 아이콘이 들어올 수 있다는 겁니다. 자 그 다음에 그 다음에 카테고리 같은 것들도 여기에다가 만들어서 지금 집어넣을 수 있고. 이렇게 뭐 집어넣을 수 있는 것들이 너무 많은 것 같아요. 너무 많고 기능들이 너무 다양해진 것 같습니다. 그래서 이런 것들은 태그 클라우드부터 시작해서 여러분들이 한번 해보시면 될 것 같구요. 이런 것들은 제가 봤을 때 유튜브 비디오 같은 거를 가져오는 그런 것들을 아예 여기에서 이제 자동으로 서비스 별로 이제 연동이 가능한 것들을 표시해 주는 것 같습니다 이렇게 인베드라고 하는 것은 주로 이제 가져오는 그런 경우가 많죠 영상을 이쪽으로 땡겨 오든지 특정 워드프레스의 글을 땡겨 온다든지 그죠 비메오의 영상을 땡겨 온다든지 플리커의 이미지들을 땡겨 온다든지 그죠? 이런 것들.. 스포티파이의 음원인가요? 이게 아마 음악을 땡겨온다든지.. 그런 것들에 해당하는 겁니다. 그래서 이런 부분들도 여러분들이 한번씩 해보시면 여기는 뭐 크게 어려운 거 없이 금방 다 이해가 되실 걸로 보입니다. 자 그래서 어.. 에디터 모드는 글쓰기, 편집기, 에디터 모드는 요 정도만 하도록 할게요.










