WYSIWYG: "What You See Is What You Get"

WYSIWYG 이란?

• “WYSIWYG(위지윅)”은 What You See Is What You Get의 약자

  • "보이는 대로 얻는다", 즉 "내가 화면에서 보는 모습이 실제 결과(출력)와 같다"는 뜻입니다.

• 전통적인 편집 방식

  • 예를 들어, 워드프로세서 없이 HTML 소스나 마크다운, LaTeX처럼 직접 코드를 써야 했던 시대에는

  • “코드를 입력 → 별도의 미리보기나 출력 → 실제 결과 확인” 방식이 일반적이었습니다.

  <strong>굵게</strong>

  • 위처럼 태그나 명령어 등 '내용+서식'을 직접 입력해야 하고, 결과는 “완성품”을 따로 확인해야 했습니다.

• WYSIWYG 편집기

  

  • 이와 달리, 에디터 화면에 보이는 모습이 최종 완성본(인쇄물, 웹페이지 등)과 똑같이 보여지는 방식이 WYSIWYG입니다.

    • “툴바에서 굵은 글씨 버튼 클릭 → 에디터에서 곧바로 굵은 글씨로 변경”

    • 표, 이미지, 글꼴, 색상, 정렬, 들여쓰기, 링크 등을 실제 결과물과 거의 똑같이 실시간으로 보면서 편집할 수 있음

WYSIWYG의 특징

• 실시간 시각화

  • 사용자가 편집하는 즉시, 그 결과를 바로 볼 수 있습니다.

  • 아래 사진처럼 글씨를 굵게/컬러 변경하면 즉시 스타일이 적용됨

• 코딩이 필요 없음

  • 특별한 태그, 마크다운, 코딩이 필요없이, 마치 MS Word나 한글처럼 편집만 하면 됨.

• 툴바, 단축키, 드래그앤드롭 등 직관적 조작
  [B], [I], [U], [표], [이미지] 등 여러 버튼 클릭 & 마우스 조작만으로 원하는 결과를 만들 수 있음.

• 출력 결과와 99% 일치

  • 실제 웹페이지/문서로 출력했을 때의 결과와 거의 동일!

반대 개념: 코드/마크다운 에디터

• 마크다운 에디터, HTML 작성 모드 등에서는 작성할 때는 스타일 태그·문법 등만 보임 → 별도 미리보기에서만 최종 결과를 볼 수 있음.

• 예시(마크다운 에디터)

  • 위 코드를 입력해야 하며, 실제 모습은 미리보기창에서만 확인 가능.

**굵게**  
[링크](https://www.naver.com)

대표적인 WYSIWYG 에디터 예시

• MS Word, 한글, Google Docs 등 워드프로세서

• Toast UI Editor의 WYSIWYG 모드

• TinyMCE, CKEditor, Quill 등의 웹용 WYSIWYG 에디터

• 블로그/홈페이지 관리자 등에서 ‘비주얼 에디터’

웹 개발에서 WYSIWYG의 장점

• 비개발자도 손쉽게 문서/콘텐츠 생성

  • 코딩을 몰라도, 누구나 ‘결과 예시’와 똑같은 페이지를 만들 수 있음.

• 시간 절약, 실수 감소, 접근성 향상

정리

• WYSIWYG은 “보이는 대로 결과를 얻는” 방식입니다.

• 내가 화면에서 편집하는 모습이 곧 결과물(웹/문서/출력물)과 동일하게 반영됩니다.

• 복잡한 코드나 별도 미리보기가 필요 없고, 직관적으로 클릭하고 편집하며 즉시 결과를 볼 수 있다는 큰 장점이 있습니다.