오픈소스 WYSIWYG 편집기 기능 확장 경험기
안녕하세요! 리얼월드의 웹 프론트엔드 개발을 담당하고 있는 개발자 김무훈입니다. 리얼월드의 여러 웹 서비스 중에 리얼월드 앱 내 게임의 인터렉티브 스토리 게임 콘텐츠를 창작하는 “리얼월드 스튜디오”라는 저작 도구가 있는데요, 사내 게임 기획 팀(인터렉티브 콘텐츠 팀)과 콘텐츠 디자인 팀(디자인솔루션팀)이 업무 도구로 사용하고 있고 외부 사용자 또한 리얼월드 앱에 게임을 발행하고자 사용을 하고 있습니다.
이 글에서는 리얼월드 스튜디오의 프론트엔드 개발 사례 중 하나로 HTML 위지윅 편집기의 기능을 확장한 사례에 대해 엔지니어링 측면으로 어떤 노력이 들어갔는지, 변경되는 기능에 대해 특별히 기존 사용자와 소통에 들인 노력에 대해 간단히 소개를 하려고 합니다.
여기서 잠깐, 위지윅(WYSIWYG)이란 What You See Is What You Get, “보는 대로 얻는다” 라는 문서 편집 과정에서 화면에 포맷된 낱말, 문장이 출력물과 동일하게 나오는 방식을 말합니다. 대표적인 예로 네이버의 스마트 에디터나 UI 프로토타이핑 도구인 Figma가 이에 해당이 됩니다.
리얼월드의 게임 콘텐츠는 HTML 콘텐츠 바탕의 웹뷰로 만들어졌는데요, 리얼월드 스튜디오에서는 게임 창작자가 코딩을 하지 않아도 콘텐츠를 만들 수 있게 하기 위해 HTML 위지윅 편집기를 콘텐츠 편집 도구로 사용하고 있습니다.
저희는 서비스 런칭 초기부터 지금까지 Quill 라는 오픈소스 HTML 위지윅 편집기를 사용하고 있습니다. 초기 개발을 진행했던 동료에게 Quill 를 선택한 이유를 물어보니 당시 한글 입력에 대해 신뢰성을 느낀 편집기가 Quill 밖에 없었고, 가장 많이 쓰이는 오픈소스 라이브러리라 선택을 하게 되었다고 합니다.
문제
Quill은 가장 많이 쓰이는 라이브러리지만 저희가 사용하는 입장에서는 문제점들이 몇몇 있었습니다. 폰트 크기가 제한적이었고, 컬러 팔래트를 벗어나서 더 다양한 색상을 선택할 수 없는 등 편집기의 기본 기능으로는 리얼월드의 다양한 게임 콘텐츠를 만들기에는 제한적이라는 의견을 사내 기획 팀과 콘텐츠 디자인 팀에게 꾸준히 받았었습니다.
요구사항 분석
의견을 통해 취합한 요구사항은 아래와 같았습니다.
- 4가지로 제한된 폰트 크기 목록을 더 많은 많은 범위를 지원하기
- 자간
line-height설정 기능 추가, 구체적인 수치로 0.1 부터 2.8까지 지원하게 하기 - 현재 커서에 위치한 색상 정보에 대해 조금 더 친절하게 알려주기
- 커스텀 컬러 피커 UI 추가로 보다 더 다양한 색상을 선택할 수 있게 하기
4가지 기능 모두 작업이 잘 되어서 서비스에 올라갔는데요, 작업한 기능의 구현 방법을 모두 소개하기에는 분량이 길어서 컬러 피커 확장 모듈의 제작 과정과 폰트 크기 목록을 확장한 방법을 골라 소개해드리려고 합니다.
컬러 피커 확장 제작하기
디자인팀의 세부 요구 사항 중에 “컬러 피커의 시인성을 올려주었으면 좋겠다” 라는 피드백이 있엇습니다.
앞에서 미리 설명한 불편함이 있는데요, 현재 선택한 색상 정보에 대해 아는 힌트가 A 밑에 옅게 그려진 밑줄 뿐이라 시인성이 낮았습니다.
- 글자 색 툴바 버튼: ‘A’ 레이블 밑줄 뿐만이 아닌 A 글자의 색상을 칠하기
- 글자 배경 색 툴바 버튼: 컬러 배경색을 반전 시키기
컬러 피커 레이블 글자 ‘A’ 의 밑줄 색상을 어떻게 구현 했는지 확인하기 위해 코드를 살펴보았는데, quill 의 ui/color-picker.js 소스에서 SVG shape Element 의 색상을 커서를 움직일 때마다 수정하고 있었습니다.
하지만 살펴본 코드에서는 컬러 팔레트 목록의 색상만 인식을 해서 그 바깎의 색상을 지정 가능한 커스텀 컬러 피커와 같이 사용을 할 경우 커스텀으로 지정한 색상에 대해 하이라이팅하지 않는 문제가 있습니다.
quill.formatText(0, 1, 'color', 'red');
quill.getFormat(0, 3); // { color: 'red' } // 메타 데이터이 문제로 고민하던 중에, API 문서를 참고해보니 현재 커서가 가리키는 문서 형식(format) 정보를 제공해주는 API getFormat 를 찾았습니다. Quill 에서 형식이란 글자에 입혀진 색상이나 굵기 정보, 이미지 주소 등을 담은 메타 데이터를 의미합니다. 해당 API를 활용해서 컬러 팔레트 외의 색상도 하이라이팅이 가능하도록 수정을 했습니다.
글자 배경색의 경우도 ui/color-picker.js 를 사용하고 있습니다. 해당 소스를 추가 수정을 해서 적용을 했습니다. 처음에는 오픈소스 포크를 해서 빠르게 수정을 했지만, 현재는 코드 일부분만 확장 기능으로 분리를 해서 관리하고 있습니다.
더 많은 폰트 크기 목록을 지원하기
Quill 문서의 Attributors 커스터마이징을 참고해서 작업을 했습니다.
import Quill from 'quill';
const fontSizes = [
'0.55em',
'0.61em',
'0.66em',
'0.75em',
'0.77em',
'0.83em',
'0.88em',
'0.94em',
false, // false 는 기본 값(초기 폰트 크기)을 의미합니다.
'1.05em',
'1.17em',
'1.5em',
'1.75em',
'2em',
'2.25em',
'2.5em',
'2.75em',
'3em',
'3.75em',
'4em',
'5em'
];
const SizeStyle = Quill.import('attributors/style/size');
SizeStyle.whitelist = fontSizes;
Quill.register(SizeStyle, true);리얼월드의 게임 콘텐츠는 글자 크기 단위가 상대적 폰트 단위인 em 으로 구성되어 있어서 폰트 크기로 em 으로 지정을 했습니다.
$font-sizes: (
'10': 0.55em,
'11': 0.61em,
'12': 0.66em,
'13 (작게)': 0.75em,
'14': 0.77em,
'15': 0.83em,
'16': 0.88em,
'17': 0.94em,
'19': 1.05em,
'22': 1.17em,
'27 (크게)': 1.5em,
'32': 1.75em,
'36': 2em,
'40': 2.25em,
'45 (매우 크게)': 2.5em,
'50': 2.75em,
'54': 3em,
'68': 3.75em,
'72': 4em,
'90': 5em
);
.ql-snow .ql-picker.ql-size {
width: 108px;
@each $key, $value in $font-sizes {
.ql-picker-item[data-value='#{$value}']::before,
.ql-picker-label[data-value='#{$value}']::before {
content: '#{$key}';
}
.ql-picker-item[data-value='#{$value}']::before {
content: '#{$key}';
font-size: $value;
}
}
.ql-picker-label::before,
.ql-picker-item::before {
content: '18 (일반)';
}
}폰트 크기에 대한 레이블을 CSS 를 통해 명시해야 합니다.
변경되는 기능에 대해 사용자와 소통하기
리얼월드의 게임 콘텐츠는 글자 크기 단위가 상대적 폰트 단위인 em 으로 구성되어 있습니다. 위지윅 편집기에서 1em 이 13px 로 되어 있지만, 앱에서는 18px로 되어 있는 환경을 위지윅과 앱의 폰트 크기가 달라 보이는 문제를 피드백을 취합하는 과정에서 발견했습니다.
위지윅 편집기와 앱 중에 어느 걸 기준으로 기본 폰트 크기를 유지할지 고민했습니다. 사내 사용자를 대상으로 검수를 가지는 시간에 이를 물어보았고, 인게임 내 폰트가 변하면 레이아웃에 영향을 미칠 수 있다는 피드백이 모아졌습니다. 그래서 위지윅 편집기 상의 폰트 크기를 18px로 조정하기로 결정했습니다.
마치며
위지윅 편집기와 뷰어(앱) 환경에서 글자의 크기가 서로 다른 문제를 사내 사용자에게 설명할 때 전문적인 개념 설명이 꼭 필요했었는데, 사실 어떻게 하면 이 문제를 친절하게 설명하는게 꽤 고민이었습니다.
완성되고 나서 사내와 외부 크리에이터 잘 활용하는 모습을 보고 뿌듯함을 느꼈고, 요구사항에 대한 구현 방법을 찾기 위해 오랜만에 오픈소스 도구의 코드 내부를 직접 다뤄보아서 즐거웠었습니다.
저는 개인적인 용도로 오픈소스 라이브러리를 분석하고 수정한 적은 있었지만, 상용 제품을 위해 오픈소스를 수정하는 것을 이번에 처음 해보았습니다. 또한 Quill 를 직접 분석한 경험을 바탕으로 Yorkie 라는 오픈소스 프로젝트에서 Quill 를 사용하는 예제의 특정한 포멧 지원에 대한 기여를 하게 된 계기가 되어서 좋은 경험이 되었다고 생각하고 있습니다.
