워드프레스 블록에디터 꿀팁-1탄
오늘은 워드프레스 블록에디터 꿀팁-1탄 이라는 주제로 포스팅을 해보겠습니다. 한 포스팅에 다 담기에는 내용일 많아서 시리즈 형태로 포스팅 할 계획입니다.
워드프레스를 설치하고 나의 사이트를 포털에 등록했다면 이제 나의 사이트의 정체성을 만들어줄 글을 써야 하는데요. 현재 워드프레스는 블록편집기를 사용하고 있습니다. 제가 자주 사용하는 노션(Notion)도 이런 블록 형태로 글을 편집하기 때문에 저에게는 거부감이 있거나 하지는 않았습니다. 오히려 직관적이라서 그런지 클래식 편집기 보다는 더 편한거 같습니다.그런데 클래식 편집기를 오랫동안 사용하셨던 분들은 블록 편집기(구텐베르크)형식이 불편하기도 하신 듯 합니다.
그래서 오늘은 블록 에디터 간단한 기초 설명과 작업하실 때 알아두면 좋은 팁들을 몇 가지 알려드리겠습니다.
블록편집기 기본기능
1. 블록추가
블록을 추가 하는 방법은 3가지가 있습니다.
1. 오른쪽 끝에 +버튼 눌러주기
2. Enter 누르고 “/” 눌러서 작업하기
헤딩 작업은 ‘제목’, 본문 작업은 ‘문단’ 이라고 적어주고 Enter키 누르면 됩니다.
3. 왼쪽에 블록 삽입기 + 버튼 눌러서 삽입하기.
저는 2번 방법을 가장 많이 쓰는 것 같습니다. 글 쓸때에는 아무래도 마우스 사용을 최소화 하는게 가장 편합니다.
2. 헤딩설정
워드프레스는 헤딩에 따라서 목차를 나누어 주는 기능을 하고 있습니다. 따라서 주제목 일수록 큰 헤딩을 사용하고 부제목으로 나누어 질 수록 작은 헤딩을 쓰면서 글을 작성해야 합니다. h1은 글의 제목으로 쓰이기 때문에 사용하지 않고 보통 본문에서는 h2부터 사용합니다. 헤딩은 6개까지 나누어 쓸 수 있지만 일반적으로 h2~h4 사이를 가장 많이 쓰는 거 같습니다.
헤딩 설정 방법은 블록 추가와 같이 2가지 입니다.
1. “/” 버튼 누르고 “제목” 쓴 뒤 Enter 버튼을 누르기
이 옵션은 모든 기능에서 공통으로 적용되니 상황에 맞게 사용하면 됩니다. 그럼 H2로 세팅 되어있고 마우스 커서를 갖다 대고 있으면 옵션이나 탭이 뜹니다. 여기서 내가 원하는 헤딩을 사용하시면 됩니다.
2. 왼쪽 블록 삽입기에서 제목 탭 추가하기
위에 블록 추가하기와 같은 내용입니다. 왼쪽 상단에 플러스 버튼 눌러주고 제목 아이콘을 클릭해주면 됩니다.
3. 버튼만들기
글을 작성하다보면 내부 혹은 외부링크를 걸어서 내 글을 더 편하게 읽을 수 있도록 하는 경우가 많은데요. 이때 버튼을 사용하면 깔끔하고 디자인 적으로도 이쁘게 활용이 가능합니다. 밋밋한 글을 계속 읽으면 보는 사람도 지루하기 때문에 가끔 이미지, 도식, 버튼과 같은 소스를 활용하면 좋습니다. 버튼 만드는 방법은 다음과 같습니다.
1. ‘/’ 누르고 버튼이라고 적고 Enter를 누릅니다.
2. 왼쪽 상단에 + 버튼을 눌러 버튼 아이콘을 클릭하거나 검색창에 버튼이라고 검색
합니다.
4. 버튼 꾸미기
버튼은 아래 처럼 크기를 조절 할 수 있고 텍스트와 배경을 꾸밀 수 있습니다.
1. 텍스트 색 변경하기
버튼에 글씨 부분을 한번 클릭하고 편집기 오른쪽 상단에 있는 편집 버튼을 누르면 아래처럼 버튼 속성 변경이 가능한 창이 뜹니다. 1번 아이콘 클릭하고 텍스트를 누르면 샘플 색상들이 있고 그 위에 상자를 클릭하면 왼쪽처럼 색상표가 뜹니다. 여기서 사용하고 싶은 색상을 사용하시면 됩니다.
2.배경꾸미기
배경은 똑같은 절차인데 단색으로 변경 할 수 있고 그라데이션으로 바꿀 수도 있습니다. 생각 보다 디테일한 그라데이션을 만들수 있습니다. 하지만 한 가지 단점은 아웃라인색을 변경하면 텍스트 색상도 함께 변경이 됩니다.
2-1. 기본값 그라데이션 설정
아래 처럼 변경하고 싶은 버튼을 한번 클릭한 후 우측에 버튼 에디터가 뜨면 1번 아이콘을 누르고 배경을 눌러줍니다. 단색은 텍스트 처럼 바꿀 수 있고 그라데이션은 밑에 사진처럼 다양하게 선택 가능하고 햐안 동그라미를 꾹 누르고 조절하면 그라데이션 정도도 조절이 가능합니다. 한번 짧게 클릭하면 원하는 색상 변경도 가능하니 원하는 그라데이션 색상을 고를 수도 있습니다. 4번을 반지름이라고 나오는데 테두리를 둥글게 만들어 주는 효과입니다. 둥근 정도도 조절이 가능하니 잘 조절해서 쓰면 됩니다.
2-2 아웃라인
아웃라인은 아래 버튼과 같이 아웃라인이 생기는 상자가 만들어 지는 건데 텍스트 색과 함께 변합니다. 대신 배경 버튼을 눌러서 버튼의 배경색은 다르게 바꿀 수 있습니다.
마무리
알면 알 수록 재미있는 블록 에디터에 대한 내용 이였습니다. 정말 기초적인 것들로 우선 적어보았는데요. 확실히 블록 에디터가 직관적으로 디자인을 해놔서 그런지 초보자들도 쉽게 찾아볼 수 있게 만들어진 것 같습니다. 이 기능 말고도 더 다양한 기능들이 많으니 부지런히 공부해서 더 다양한 기능들을 소개해드리겠습니다. 함께 다양한 기능들을 공부하고 이 과정을통해 더 재밌고 효율적으로 웹 사이트를 제작하고 싶습니다. 다음 포스팅에서 뵙겠습니다.