부자 문자 부리기

728x90

What you see is What you get ; WYSIWYG

부자 문자의 탄생 배경

리치 텍스트 편집기가 등장하기 전에는 텍스트 편집이 훨씬 더 기술적이고 어려웠다. 주로 다음과 같은 방식들이 사용되었다.

텍스트 기반 편집기: 텍스트만 입력할 수 있는 편집기로, 워드 프로세싱 기능 없음. 텍스트의 서식을 지정하려면 특수한 제어 문자나 마크업 언어(예: TeX, troff)를 직접 입력. 이는 일반 사용자가 사용하기에는 매우 불편.
워드 프로세서의 초기 형태: 초기 워드 프로세서들은 지금의 리치 텍스트 편집기와는 달리, 서식을 지정하는 방식이 비직관적이라 특정 명령어를 입력하거나 특수한 키 조합 사용 필요.

이러한 상황에서 일반 사용자들도 쉽게 텍스트를 편집하고 서식을 지정할 수 있도록 하기 위한 필요성이 대두되었고, 그 결과 리치 텍스트 편집기가 탄생하였다.

부자 문자 도구 ; RTE

리치 텍스트 편집기(Rich Text Editor, RTE)는 텍스트를 편집할 때 텍스트의 모양(폰트, 크기, 색상, 굵기 등)과 구조(문단, 목록, 표 등)를 시각적으로 조작할 수 있도록 해주는 도구이다. 흔히 "What You See Is What You Get"(WYSIWYG, "보이는 대로 얻는다") 편집기라 불린다. 이는 사용자가 편집 화면에서 보는 내용이 최종 결과물과 거의 동일하게 나타난다는 것을 의미한다.

부자 문자 도구의 특징

리치 텍스트 편집기는 오늘날 문서 작성, 웹 콘텐츠 편집 등 다양한 분야에서 널리 사용되고 있으며, 사용자들에게 편리하고 효율적인 텍스트 편집 환경을 제공하고 있다.

특징 :

WYSIWYG 인터페이스: 사용자가 텍스트의 모양을 시각적으로 확인하면서 편집
다양한 서식 기능: 폰트, 크기, 색상, 굵기, 기울임, 밑줄 등의 텍스트 서식과 문단 정렬, 들여쓰기, 목록, 표 등의 문서 구조 서식 지원.
이미지, 링크, 미디어 삽입: 텍스트뿐만 아니라 이미지, 하이퍼링크, 비디오 등의 멀티미디어 요소를 문서에 쉽게 삽입.
직관적인 사용자 인터페이스: 아이콘, 메뉴, 도구 모음 등을 통해 사용자가 쉽게 기능을 사용할 수 있도록 구성.

리치 텍스트 편집기의 장점:

사용 편의성: 기술적인 지식이 없는 사용자도 쉽게 텍스트를 편집하고 서식을 지정 가능.
생산성 향상: 서식 지정에 필요한 시간과 노력을 줄여 문서 작성 속도 향상.
시각적인 표현력 향상: 다양한 서식 기능을 통해 문서를 보기 좋게 꾸밀 수 있음.

리치 텍스트 편집기의 단점:

서식의 호환성 문제: 편집기마다 사용하는 서식 방식이 다를 수 있기 때문에, 다른 편집기에서 문서를 열었을 때 서식이 깨지는 경우가 발생 가능성 내재.
HTML 코드의 복잡성: 리치 텍스트 편집기는 내부적으로 HTML 코드를 생성하는데, 복잡한 서식이 적용된 경우 HTML 코드가 매우 복잡해짐. 이는 웹 페이지의 성능에 영향 가중.

부자 문자 도구의 범주

리치 텍스트 에디터 (Rich Text Editor)
- 텍스트를 굵게, 기울임, 밑줄, 색상 변경 등 다양한 스타일링 옵션을 제공하는 도구.
- 예시: CKEditor, TinyMCE, Froala Editor, Summernote.
Markdown 에디터
- 간단한 마크다운 문법을 사용해 텍스트를 서식화하는 도구.
- 예시: Typora, Marked.js, SimpleMDE.
코드 에디터
- HTML, CSS, JavaScript 등 코드를 직접 작성하고 결과를 실시간으로 확인할 수 있는 도구.
- 예시: CodeMirror, Monaco Editor(VS Code에서 사용).
웹 콘텐츠 관리 도구
- CMS(콘텐츠 관리 시스템)에서 웹 페이지 콘텐츠를 편집하기 위해 제공되는 인터페이스.
- 예시: WordPress의 Gutenberg, Drupal의 CKEditor 통합.

용도에 따른 명칭

WYSIWYG 에디터: 사용자가 코드를 몰라도 시각적으로 편집 가능.
HTML 에디터: HTML 기반의 콘텐츠 제작 도구.
웹 텍스트 에디터: 웹 애플리케이션에서 텍스트를 편집할 때 사용.

이러한 도구들은 웹 콘텐츠 제작, 블로그 작성, 이메일 템플릿 편집 등 다양한 분야에서 활용된다.

Rich Text Editor 소개

이름	제작사	특징	비용
CKEditor	CKSource	- 풍부한 플러그인 - 이미지 업로드 지원 - 실시간 협업 기능	기본 무료, 상용 라이선스
TinyMCE	Tiny Technologies	- 가벼운 설치 - 테마와 플러그인 지원 - 다양한 언어 지원	기본 무료, 상용 라이선스
Froala Editor	Froala	- 현대적 UI - 빠른 로딩 속도 - 모바일 최적화	유료
Quill.js	Slab (오픈소스)	- JSON 데이터 저장 - 가벼운 설치 - 오픈소스 기반	무료 (오픈소스)
Summernote	오픈소스 커뮤니티	- Bootstrap 기반 - 간단한 사용법 - HTML 출력	무료 (오픈소스)
ProseMirror	Marijn Haverbeke	- 모듈식 설계 - 확장성 높은 구조 - JSON 기반 데이터	무료 (오픈소스)
Trix	Basecamp	- 간단한 기능 - Ruby on Rails와 잘 통합	무료 (오픈소스)
Slate.js	오픈소스 커뮤니티	- 완전한 커스터마이즈 가능 - React 기반	무료 (오픈소스)
Redactor	Imperavi	- 빠르고 가벼움 - 문서 중심 디자인	유료
ContentTools	Getme	- 인라인 편집 지원 - 간단한 통합	무료 (오픈소스)

무료/유료 기준: 대부분의 에디터는 기본 무료 기능을 제공하며, 고급 기능이나 상용 라이선스는 유료로 제공됨
사용자 인기 순위: CKEditor와 TinyMCE 가장 널리 사용. 오픈소스 프로젝트에는 Quill.js와 Summernote 인기 높음
특별한 요구사항: JSON 저장 방식이 필요하면 Quill.js나 ProseMirror가 적합하며, React 환경에서는 Slate.js 추천

부자 문자는 조심해서 부려야되

1. 과도한 서식 지정:

"리치 텍스트 편집기로 문서를 작성했는데, 폰트 종류가 무지개보다 많고, 형광펜 색깔은 크레파스 한 상자보다 많아졌어. 이젠 내용을 읽는 게 아니라 감상하게 돼." (다양한 서식 기능을 과도하게 사용하여 오히려 가독성을 해치는 상황을 묘사)
"리치 텍스트 편집기가 너무 좋아서 모든 단어에 다른 폰트와 색깔을 썼더니, 문장이 마치 패치워크 이불 같아졌어." (과도한 서식으로 인해 문서가 조잡해진 상황을 비유)

2. WYSIWYG의 함정:

"WYSIWYG는 'What You See Is What You Get'의 약자라지만, 가끔 'What You See Is What You Might Get'(보이는 것이 어쩌면 얻을 것)이 될 때도 있어. 다른 환경에서 열어보면 서식이 다 깨져 있거든." (서식 호환성 문제를 지적)
"리치 텍스트 편집기에서 완벽하게 정렬된 표를 만들었는데, 웹 브라우저에서 보니 엉망진창이네. WYSIWYG는 거짓말쟁이야!" (웹 환경에서의 렌더링 차이로 인해 WYSIWYG가 제대로 작동하지 않는 상황)

3. HTML 코드 관련:

"리치 텍스트 편집기로 간단한 문서를 작성했는데, HTML 코드를 보니 마치 소설책 한 권 분량이네. 편집기가 너무 친절한 나머지 필요 이상으로 코드를 많이 생성했나 봐." (리치 텍스트 편집기가 생성하는 과도한 HTML 코드를 비꼬는 유머)
"리치 텍스트 편집기는 '마법 상자' 같아. 겉으로는 간단한 텍스트처럼 보이지만, 안에는 엄청나게 복잡한 HTML 코드가 숨겨져 있지." (리치 텍스트 편집기의 내부 작동 방식에 대한 유머)

4. 리치 텍스트 편집기의 역설적인 상황:

"리치 텍스트 편집기에서 '서식 없음으로 붙여넣기' 기능을 가장 많이 사용하는 아이러니." (서식을 제거하기 위해 리치 텍스트 편집기를 사용하는 역설적인 상황)

가난 문자 종류

단어	의미	부자 문자와 차이
플레인 텍스트(Plain Text)	서식이 전혀 없는 순수한 텍스트	서식, 멀티미디어 요소 없음
순수 텍스트(Pure Text)	서식이나 제어 문자가 없는 깨끗한 텍스트	서식, 제어 문자 없음
서식 없는 텍스트(Unformatted Text)	서식이 적용되지 않은 텍스트	서식 없음
일반 텍스트(Normal Text)	특별한 서식이 적용되지 않은 기본적인 텍스트	특별한 서식 없음
기본 텍스트(Basic Text)	최소한의 서식만 적용되었거나, 서식이 전혀 없는 텍스트	최소한의 서식 또는 서식 없음
텍스트 전용(Text-only)	오직 텍스트만으로 구성된 콘텐츠	멀티미디어 요소 없음
ASCII 텍스트(ASCII Text)	7비트 ASCII 문자 코드만 사용한 텍스트	유니코드 등 다른 문자 코드 사용 불가
유니코드 텍스트(Unicode Text)	유니코드 문자 코드를 사용한 텍스트 (플레인 텍스트의 일종)	다양한 언어의 문자 표현 가능
로우 텍스트(Raw Text)	가공되지 않은 원시적인 형태의 텍스트	서식뿐만 아니라 특수 문자나 제어 문자도 포함 가능
마크업 없는 텍스트(Unmarked-up Text)	HTML, XML 등 마크업 언어로 태그가 추가되지 않은 텍스트	HTML 등의 마크업을 포함하지 않음

`가난 문자`라는 단어는 쓰면 안됨

"poor text"를 "리치 텍스트(Rich Text)"의 반대말로 사용하는 것은 적절하지 않다. "poor text"는 텍스트 품질이 낮다는 의미다. 즉, 내용이 부실하거나, 문법이 틀리거나, 가독성이 나쁜 텍스트를 의미한다. 리치 텍스트는 텍스트의 서식에 초점을 맞춘 용어이므로, 두 용어는 반대 개념이 아니다.

예를 들어, 화려한 서식(다양한 폰트, 색상, 이미지 등)으로 꾸며져 있지만 내용이 형편없는 텍스트는 "리치 텍스트"이면서 동시에 "poor text"라고 할 수 있다. 반대로, 서식이 전혀 없는 단순한 텍스트(플레인 텍스트)이지만 내용이 매우 훌륭하다면 "플레인 텍스트"이면서 "poor text"는 아니라고 할 수 있다.

따라서 리치 텍스트의 반대 개념을 나타낼 때는 "플레인 텍스트(Plain Text)", "순수 텍스트(Pure Text)", "서식 없는 텍스트(Unformatted Text)" 등의 용어를 사용한다.

리치 텍스트 (Rich Text): 텍스트의 표현 방식에 초점을 맞춘 용어. 다양한 서식(폰트, 크기, 색상, 굵기, 이미지, 표 등) 정보를 포함한 텍스트.
플레인 텍스트 (Plain Text): 텍스트의 내용 자체에 초점을 맞춘 용어. 서식이 전혀 없는 순수한 문자열.
푸어 텍스트 (Poor Text): 텍스트의 품질에 초점을 맞춘 용어. 내용, 문법, 가독성 등이 좋지 않은 텍스트.

결론적으로 "poor text"는 리치 텍스트의 반의어로 사용하기에 적절하지 않으며, 의미 전달에 혼란을 줄 수 있다. 리치 텍스트의 반의어를 사용할 때는 "플레인 텍스트"와 같은 용어를 사용한다.