구현할 기능은 아래와 같습니다. 채팅 형식의 UI를 구현할 수 있습니다.
코멧에서는 HTML 렌더링을 지원합니다.
마크다운과 동일한 목적의 언어이나, 웹 표준으로 쓰이는 만큼 훨씬 더 다채로운 기능을 지원합니다.
(모든 기능을 지원하지는 않습니다. XSS 공격으로부터 안전한 컴포넌트만 사용됩니다.)
디자인은 자유롭게 설정 가능합니다. 해당 예제는 개발자가 만들어둔 하나의 UI입니다.
(style component는 sanitize에서 제거되기 때문에, 인라인으로 구성해야 합니다.)
<div style="display: flex; gap: 6px; width: 100%">
<div style="overflow: hidden;margin-top: 10px; width: 32px; height: 32px; border-radius: 16px; background-color: white">
<img src="이미지 링크">
</div>
<div style="max-width: calc(100% - 38px);">
<p style="font-size:11px;color:#aaa; margin-bottom: 2px;">
(캐릭터명)
</p>
<div style="border-radius: 0 10px 10px 10px; background-color: #444; color: white; padding: 10px 15px; font-size:14px;">
(대사)
</div>
</div>
</div>
HTML
복사
이미지 링크와 캐릭터명은 노가다를 해준다면 캡쳐할 부분은 대사밖에 남지 않게 됩니다.
따라서, 어떤 캐릭터의 채팅 UI를 만들고 싶다면:
1.
이미지를 업로드한다.
2.
이미지의 링크를 따와서 img src="이미지 링크" 부분의 이미지 링크 자리에 링크를 붙여넣는다.
3.
정규식 치환 매크로를 정의한다. (정규식 매칭 + 항등원 조합도 가능)
아래는 캐릭터 ‘린’에 대해 구성한 예시입니다. 문법은 {{린::(대사)}}입니다.
정규식: \{\{린::([^}]+)\}\}
대체 키워드:
<div style="display: flex; gap: 6px; width: 100%">
<div style="overflow: hidden;margin-top: 10px; width: 32px; height: 32px; border-radius: 16px; background-color: white">
<img src="https://imagedelivery.net/Cb2jYbj7stBAuGlUBthj1Q/4a1e812d-4b86-4572-9dde-61ec11a5ae00/w=200,h=200,fit=cover">
</div>
<div style="max-width: calc(100% - 38px);">
<p style="font-size:11px;color:#aaa; margin-bottom: 2px;">
린
</p>
<div style="border-radius: 0 10px 10px 10px; background-color: #444; color: white; padding: 10px 15px; font-size:14px;">
$1
</div>
</div>
</div>
HTML
복사