Editus(에디투스) 프론트앤드 에디터 기능을 알아보자. Part1.

인터넷과 웹 정보

"Editus : Simpler, Faster, Easier Writing in WordPress"

앞 선 블로그 포스트 “Editus 프론트 앤드(front-end) 에디터”를 통해서 43Gear가 선택한 Editus(에디투스) 프론트앤드 에디터(Editor)를 소개했었다. 오늘은 Editus의 기능을 살펴보려 한다.

너무나 직관적이고 쉬운 “Editus(에디투스)” 에디터인데, 너무나 다루기 쉬운 이 프론트 앤드 에디터를 좀 더 쉽게 설명할 수 있는 방법은 뭘까? 43Gear.com을 오랫동안 방문한 기어(Gear)라면, 43Gear에 “FCPX(Final Cut Pro)”에 관한 블로그 포스트가 연재되어 있다는 사실을 알고 있을 것이다. 개인적으로 메뉴얼 또는 어떤 앱이나 하드웨어를 설명할때 작업의 흐름을 보여주는 설명방식을 좋아한다. 그래서 “FCPX(Final Cut Pro)”를 소개하면서도 내가 작업하는 흐름을 제일 처음 보여줬었다. 

“Editus 프론트 앤드(front-end) 에디터”의 기능을 소개하려는 이 블로그 포스트 역시 그와같은 방식으로 소개해 보면 어떨까? 내가 43Gear.com에 로그인을 한 후 > 어떻게 “Editus 프론트 앤드(front-end) 에디터”를 통해 블로그 포스트를 작성하는지 말이다.

1. 직관적인 “Editus 프론트 앤드(front-end) 에디터”! 새 블로그 포스트 작성을 시작해 보자!

< 로그인을 하면 Editus 에디터가 활성화 되어 있는 것을 볼 수 있다. >

43Gear.com에 로그인을 하면 위 이미지와 같이 화면 하단에 “Editus 프론트 앤드(front-end) 에디터”가 기어(Gear)들이 블로그 포스트를 작성해 주길 기다리고 있는 모습을 보게 될 것이다. 하단 “Editus 프론트 앤드(front-end) 에디터”의 두 개의 메뉴중 노란색 마크가 되어있는 “Add Post”를 클릭한다.

2. 제일 먼저, 블로그 포스트의 제목을 입력하자.

“Add Post”를 클릭했다면 > 제일 먼저 위 이미지와 같이 제목을 입력하는 창이 나타난다. 내 경우 “Editus(에디투스) 프론트앤드 에디터 기능을 알아보자.”를 입력했다. 그리고 “Create” 버튼을 클릭하면 블로그 포스트 페이지가 자동을 생성된다.

3. 이제 자유롭게 블로그 포스트 작성을 하면 된다.

< 위 이미지 중 마우스로 색인한 “Once upon a time…” 부터 블로그 작성을 시작하면 된다. >

“2”번에서 “Create”을 클릭하고 본문 화면으로 이동했다면, 위 이미지와 같이 마우스로 색인한 “Once upon a time…” 부터 블로그 포스트 작성을 시작하면 되겠다.

이게 전부다! 화면 하단에 나타난 에디터 역시 마이크로 소프트 워드 또는 아래 한글, 또는 에버노트 일지라도 사용자 경험은 동일하다. 너무너무 직관적이고 너무너무 쉽다. 그럼에도 불구하고, 이왕 작성하는 43Gear.com의 “Editus 프론트 앤드(front-end) 에디터” 기능편인데, 좀 더 구체적으로 내가 블로그 포스트를 작성해 나아가는 모습을 보여주려고 한다.

4. 글을 작성하고 자유로운 편집!

우선 난, 위 이미지를 통해 알 수 있듯이 "Editus : Simpler, Faster, Easier Writing in WordPress” 부분과 "1. 직관적인 “Editus 프론트 앤드(front-end) 에디터”! 새 블로그 포스트 작성을 시작해 보자!” 두 부분을 “H3 Heading”으로 글자의 헤드라인을 만들었다(글자 크기 H3로 변경).

방법은 간단하다. 헤드라인으로 표시하고 싶은 문장을 마우스로 색인한 후 > 화면 하단의 “Editus 에디터 기능”을 클릭하면 된다.

Editus(에디투스) 에디터는, 글자색, 글자 크기, 헤드라인 선택 등 모든 에디팅이 동일하다. 다시 말해서, 원하는 글자 또는 문장의 크기, 색 등을 바꾸고 싶다면 원하는 글자 또는 문장을 마우스로 색인 한 후 > 화면 하단의 에디터 기능을 클릭하면 된다.

5. 이미지 첨부.

< 노란색 “+” 아이콘을 클릭하면 이미지 삽입 옵션 아이콘과 따옴표(quote) 삽입 옵션 아이콘이 나타난다. >

다음으로 이미지를 삽입하였다. 위 이미지에서 노란색 “+” 아이콘을 살펴보자. 마우스로 노란색 “+” 아이콘을 클릭하면 > 위 이미지와 같이 이미지 삽입 옵션과 따옴표(quote) 삽입 옵션 아이콘이 나타난다.

이제 마우스로 “카메라” 아이콘을 드래그하여 자신이 원하는 이미지가 삽입될 위치로 드래그 앤 드롭한다. 그러면 자동으로 아래 이미지와 같이 워드프레스의 “미디어 라이브러리” 창이 열린다.

이제 원하는 이미지 또는 사진을 업로드 한 후 “Insert Image” 버튼을 클릭하면, 이전에 마우스로 드래그 앤 드롭한 "카메라 아이콘”이 자리하고 있는 위치에 이미지 또는 사진이 삽입되어 있을 것이다.

6. Quote(따옴표)도 삽입해 보았다.

< 노란색 “+” 아이콘을 클릭하면 이미지 삽입 옵션 아이콘과 따옴표(quote) 삽입 옵션 아이콘이 나타난다. >

다음으로 따옴표(quote)를 삽입하였다. 방법은 이미지(또는 사진) 삽입하는 방법과 동일하다. 위 이미지에서 노란색 “+” 아이콘을 살펴보자. 마우스로 노란색 “+” 아이콘을 클릭하면 > 위 이미지와 같이 이미지 삽입 옵션과 따옴표(quote) 삽입 옵션 아이콘이 나타난다.

이제 마우스로 “따옴표(quote)” 아이콘을 드래그하여 자신이 원하는 따옴표(quote)가 삽입될 위치로 드래그 앤 드롭한다. 그러면 역시 자동으로 “따옴표(quote)”를 삽입할 수 있는 공간이 만들어지고 > 만들어진 공간에 원하는 문구 또는 문장을 삽입하면 되겠다.

7. Editus editor workflow: 에디투스 작업 환경.

< Editus Editor Workflow >

만약 43Gear의 기어(Gear)들이, 앞 선 “1, 2”를 통해서 새로운 블로그 포스트 작성을 위해 “Create” 버튼을 클릭했다면, 글을 작성할 본문 하단에 위 이미지와 같은 “Editus Editor” 워크플로우(Workflow)를 볼 수 있을 것이다.

Editus(에디투스) 에디터의 특정을 잠시 설명하면, 

• 맨 왼쪽 “노란색 X” 표시 아이콘은 위 이미지의 “Editus Editor” 워크플로우(Workflow)를 나가기 위한 버튼이다.
• 오른쪽 첫번째 “디스크 이미지” 아이콘은 작성하고 있는 블로그 포스트를 저장하기 위한 버튼이다.
• 오른쪽 맨 끝 “펜(Pen) 이미지” 아이콘은 작성한 블로그 포스트를 공개할 때 클릭하는 버튼이다.

따라서 “Editus Editor”는 작성하고 있는 블로그 포스트를 공개하지 않아도 된다. 수정이 필요하거나 아직 글 작성이 끝이 나지 않았다면 그냥 저장만 해 둔 채 글 작성이 끝이 나면 공개하면 된다.

“Editus Editor”는 작성하고 있는 블로그 포스트를 공개하지 않아도 된다. 수정이 필요하거나 아직 글 작성이 끝이 나지 않았다면 그냥 저장만 해 둔 채 글 작성이 끝이 나면 공개하면 된다.

그런데 이쯤 되었으면 기어(Gear)들은 궁금할 것이다. 도대체 특성 이미지(featured image) 어떻게 삽입을 해야하며? 카테고리 지정은? 태그 지정은? 어떻게 해야 하는걸까? 이제부터 그 부분을 설명하려 한다.

하지만 먼저 "Editus Toolbar"를 살펴봐야 할 것이다.

8. Editus Toolbar를 살펴보자.

위 “7”번을 참고하여 제일 왼쪽 “노란색 X” 아이콘을 클릭하여 “Editus Editor Workflow”를 빠져나오자. 그러면 아래 이미지와 같이 기어(Gear)들이 작성하고 포스팅한 모든 글(블로그 포스트)을 관리할 수 있는 툴바(Toolbar)를 보게 될 것이다.

• 1. Edit Post: 위 “7”번의 “Editus Editor Workflow”로 돌아가기 위한 기능이다.
• 2. Post Setting: 바로 특성 이미지(featured image), 카테고리 지정, 태그삽입을 하기 위한 기능이다.
• 3. All Posts: 내가 작성한 모든 블로그 포스트를 한 눈에 볼 수 있는 기능이다.
• 4. Revisions: 내가 작성한 모든 블로그 포스트를 재검토하고 다시 작성할때 사용하는 기능이다.
• 5. Add Post: 새로운 블로그 포스트를 작성할때 사용하는 기능이다.

Tip: 앞 선, “1”번의 내용을 살펴보자. 제일 처음 43Gear.com에 로그인을 하게되면 보게 될 “Editus(에디투시) 활성화” 아이콘을 기억하고 있을 것이다. 위 이미지 “Editus Toolbar” 중 “3. All Posts”와 “5.Add Post”는 앞 선 “1”번의 “Editus 활성화” 아이콘과 동일한 아이콘이며 동일한 기능임을 기억하자.

Editus Editor가 다른 다른 기타 에디터나 워드프레스 대시보드 환경과 조금 다른 부분은 바로 이 부분이다. Editus Editor는 글 작성 이후에, 특성 이미지 삽입, 카테고리 지정, 태그 삽입이 가능하다.

이 직관적이고, 너무나 쉬운 “Editus(에디투스) 프론트 앤드 에디터”를,, 할 수 있는한 자세하게 설명을 하려고 하니,, 이 또한 정리해야 할 내용이 매우 방대해진다.

오늘은 여기까지 블로그 포스트 작성을 하겠다. 그리고 다음 시간엔 “Editus(에디투스) 프론트앤드 에디터 기능을 알아보자. Part 2.”로 “Editus Toolbar”의 기능들을 꼼꼼히 살펴보고 마지막으로 “Editus(에디투스) 프론트앤드 에디터의 숨은 기능. Part 3.”를 통해서 Editus(에디투스)의 숨겨진 기능들을 알아보고, 유튜브 삽입방법(Tip), “UL, OL” 리스트 태그 삽입 Tip 등을 살펴보려 한다.

시간이 많이 지나더라도,, Editus(에디투스)에 관한 블로그 포스트는 따로 메뉴얼 페이지를 만들 것이다. 누구라도 한 번만 사용해보면 메뉴얼 페이지가 왜 필요한지 이해 할 수 없겠지만, 그래도 43Gear.com의 프론트앤드 에디터 “Editus(에디투스)”를 기념하기 위해서, 그리고 누구라도 좀 더 쉽게 블로그 포스트 작성을 할 수 있게 하기 위해서 그렇게 하도록 하겠다.

• Editus(에디투스) 프론트앤드 에디터 기능을 알아보자. Part 1.
• Editus(에디투스) 프론트앤드 에디터 기능을 알아보자. Part 2.
• Editus(에디투스) 프론트앤드 에디터의 숨은 기능. Part 3.

 

Editus(에디투스) 프론트앤드 에디터 기능을 알아보자. Part1.

-잼-