HTML, CSS, JavaScript로 무료 아라비아 서예 생성기를 만든 방법

Source: Dev.to

Introduction

아라비아 서예는 세계에서 가장 아름다운 예술 형태 중 하나입니다. 디자인 기술 없이도 누구나 영어 텍스트를 아라비아 서예로 변환할 수 있는 간단한 웹 도구를 만들고 싶었습니다. 이 글에서는 HTML, CSS, 그리고 순수 JavaScript만을 사용해 아라비아 서예 생성기를 어떻게 구축했는지 공유합니다.

Challenges

• Right-to-Left (RTL) text rendering — 아라비아어는 오른쪽에서 왼쪽으로 읽습니다
• Font loading — 아라비아 서예 폰트는 파일 크기가 큽니다
• Translation — 영어 입력을 아라비아 문자로 변환하기
• Export options — 사용자가 만든 작품을 다운로드할 수 있어야 합니다

Implementation

Rendering

• HTML5 Canvas 를 사용해 서예를 렌더링
• Vanilla JavaScript (프레임워크 없이) 로 입력, 번역, 그리고 그리기 처리
• Google Fonts 로 아라비아 서체 제공
• Canvas API 로 PNG/JPG 내보내기

Important CSS

.arabic-text {
  direction: rtl;
  text-align: right;
  font-family: 'Noto Naskh Arabic', serif;
}

Export Function

function exportAsImage(format) {
  const canvas = document.getElementById('calligraphy-canvas');
  const link = document.createElement('a');
  link.download = `calligraphy.${format}`;
  link.href = canvas.toDataURL(`image/${format}`);
  link.click();
}

Lessons Learned

• Start simple — 처음에는 3개의 폰트로 시작했지만 현재는 11개가 되었습니다.
• Performance matters — 아라비아 폰트는 무겁기 때문에 지연 로딩이 도움이 됩니다.
• User feedback is gold — 실제 사용자들이 제가 상상하지 못한 버그를 찾아냈습니다.

Live Demo

실제 도구를 확인하려면 여기에서 확인하세요: Arabic Calligraphy Generator

Future Plans

• 더 많은 서예 스타일 (디와니, 마그레비)
• 사용자 지정 색상 옵션
• 소셜 공유 기능

Conclusion

읽어 주셔서 감사합니다! 다국어 웹 도구 제작에 대해 궁금한 점이 있으면 아래에 댓글을 남겨 주세요.