인용구 스타일 6가지 옵션 추가

출판 에디터의 인용 기능에 스타일 선택지를 추가했다. lib_publish.js에서 로직을 확장하고 ui.html에서 사용자 인터페이스를 구현해, 따옴표부터 코너 처리까지 6가지 중에서 선택할 수 있게 만들었다.

왜 인용 스타일이 선택지가 되어야 했나

콘텐츠를 만드는 입장에서 보면, 인용 텍스트는 단순한 참고 자료가 아니라 강조와 표현의 도구다. 같은 문장이라도 따옴표로 처리하는지, 라인으로 강조하는지, 시각적 박스로 감싸는지에 따라 독자가 받는 인상이 달라진다. 기존에 고정된 하나의 인용 표현만 지원했다면, 작성자의 의도나 콘텐츠의 성격을 덜 유연하게 표현할 수밖에 없었다. 이번 기능은 그 제약을 풀기 위한 것이다.

두 계층에 걸친 구현

백엔드 엔진(lib_publish.js)에서는 각 스타일의 렌더링 방식을 정의하고, 프론트엔드(ui.html)에서는 그 선택지를 명확하게 시각화해야 한다. 둘 다 수정되어야 기능이 제대로 작동하는 구조다.

6가지로 결정한 이유와 순서의 의미

커밋 메시지의 스타일 나열이 흥미로운데, 따옴표(기본) → 라인 → 말풍선 → 밑줄 → 포스트잇 → 코너 순서다. 이는 시각적 강조도가 낮은 것에서 높은 것으로 점진적으로 진행되는 구조로 보인다.

선택지 개수 6개의 배경:
- 너무 적으면(2~3개) 표현 자유도가 부족하다
- 너무 많으면(10개 이상) 사용자가 선택 자체에 피로감을 느낀다
- 6개는 다양성과 실용성의 균형을 맞춘 지점이다

각 스타일의 예상 역할:

1. 따옴표   – 기본적이고 중립적인 인용
2. 라인     – 살짝 더 강조하고 싶을 때
3. 말풍선   – 대화체 또는 강한 주장
4. 밑줄     – 중요도를 시각적으로 구분
5. 포스트잇 – 임시 메모나 여백감 강조
6. 코너     – 개성 있고 강렬한 표현

선택형 기능 추가 시 생각할 점

이런 작업을 반복하면서 배운 체크포인트들이 있다:

• 기본값 설정: 사용자가 명시적으로 선택하지 않았을 때 자동 적용되는 스타일(대부분 1번 따옴표)이 명확해야 한다
• 호환성 관리: 기존 콘텐츠가 새 스타일 옵션으로 인해 손상되지 않도록 주의해야 한다. 저장 형식이 바뀌면 기존 문서 로드에 문제가 생길 수 있다
• 각 옵션의 품질 일관성: 6가지 스타일이 모두 동일한 수준에서 작동하는지 검증해야 한다. 하나라도 이상하면 전체 기능에 대한 신뢰가 떨어진다
• 초기 사용 패턴 모니터링: 출시 초기엔 대부분 기본값을 쓸 것이다. 시간이 지나면서 다른 스타일 사용률을 추적하면, 향후 개선 방향을 알 수 있다

처음부터 과도하게 많은 선택지를 제공하기보다는, 핵심적인 수개로 시작한 뒤 실제 사용 데이터에 기반해 진화시키는 방식이 더 효율적이다. 6가지라는 결정이 바로 그 철학을 잘 반영한 것 같다.

🛒 이 글과 어울리는 추천 상품

• 모니터 쿠팡에서 보기 →
• 외장SSD 쿠팡에서 보기 →
• 기계식키보드 쿠팡에서 보기 →

*위 링크는 쿠팡파트너스 활동의 일환이며, 일정액의 수수료를 제공받을 수 있습니다.