ASP.NET Core + SixLabors 이모티콘 생성 및 실시간 미리보기 기능

 

 

ASP.NET Core + SixLabors 라이브러리 기반으로
이모티콘 생성 및 실시간 미리보기 기능을 단계별로 구현하겠습니다.

---

🚩 Step-by-Step 완벽 구현 가이드 (미리보기 + 다운로드)

최종 결과물은

• 사용자가 선택한 텍스트, 폰트, 컬러로 미리보기
• 미리보기 확인 후 이미지 다운로드
  형태입니다.

---

✅ Step 1: 사전 설치 및 준비

다음과 같은 최신 버전을 권장합니다.

• ASP.NET Core 8
• SixLabors.ImageSharp, SixLabors.Fonts
• JavaScript (Fetch API)
• Tailwind CSS (UI 구성)

📌 NuGet 라이브러리 설치

dotnet add package SixLabors.ImageSharp
dotnet add package SixLabors.Fonts

📌 폰트 준비

• 폰트 파일을 프로젝트의 wwwroot/fonts/ 경로에 저장합니다.

wwwroot
 └─ fonts
    ├─ NotoSansMonoCJKkr-Bold.ttf
    ├─ NanumSquareRoundEB.ttf
    ├─ NanumMyeongjoEB.ttf
    └─ ...

---

✅ Step 2: Backend API 구현 (ASP.NET Core)

• 미리보기와 다운로드를 위한 컨트롤러를 구성합니다.

📌 컨트롤러 코드 (ImageController.cs)

using Microsoft.AspNetCore.Mvc;
using SixLabors.Fonts;
using SixLabors.ImageSharp;
using SixLabors.ImageSharp.Drawing.Processing;
using SixLabors.ImageSharp.PixelFormats;
using SixLabors.ImageSharp.Processing;

namespace YourNamespace.Controllers
{
    [ApiController]
    [Route("api/[controller]")]
    public class ImageController : ControllerBase
    {
        private const string FontPath = "wwwroot/fonts/";

        [HttpGet("Preview")]
        public IActionResult Preview(string text, string fontFile, string hexColor)
        {
            var image = GenerateImage(text, fontFile, hexColor);
            var ms = new MemoryStream();
            image.SaveAsPng(ms);
            ms.Seek(0, SeekOrigin.Begin);

            return File(ms.ToArray(), "image/png");
        }

        [HttpGet("Download")]
        public IActionResult Download(string text, string fontFile, string hexColor)
        {
            var image = GenerateImage(text, fontFile, hexColor);
            var ms = new MemoryStream();
            image.SaveAsPng(ms);
            ms.Seek(0, SeekOrigin.Begin);

            return File(ms.ToArray(), "image/png", "emoticon.png");
        }

        private Image<Rgba32> GenerateImage(string text, string fontFile, string hexColor)
        {
            var fontCollection = new FontCollection();
            var fontFamily = fontCollection.Add(Path.Combine(FontPath, fontFile));
            var font = fontFamily.CreateFont(48);

            var image = new Image<Rgba32>(400, 400);
            image.Mutate(ctx =>
            {
                ctx.Fill(Color.ParseHex(hexColor));
                ctx.DrawText(text, font, Color.White, new PointF(20, 160));
            });

            return image;
        }
    }
}

---

✅ Step 3: Frontend 화면 구성 (HTML + Tailwind CSS)

📌 Index.cshtml 예시 코드

<div class="container mx-auto p-8">
    <h2 class="text-2xl font-bold mb-4">이모티콘 생성기</h2>
    
    <textarea id="textInput" placeholder="텍스트 입력" class="border rounded p-4 w-full mb-4"></textarea>

    <select id="fontSelect" class="border rounded p-2 mb-4 w-full">
        <option value="NotoSansMonoCJKkr-Bold.ttf">Noto Sans Mono CJK KR Bold</option>
        <option value="NanumSquareRoundEB.ttf">나눔스퀘어라운드 Extra Bold</option>
        <option value="NanumMyeongjoEB.ttf">나눔명조 Extra Bold</option>
    </select>

    <input type="color" id="colorPicker" value="#00AACC" class="border-none rounded mb-4 w-16 h-10"/>

    <button id="previewBtn" class="bg-blue-500 text-white px-4 py-2 rounded mr-2">
        미리보기
    </button>

    <button id="downloadBtn" class="bg-green-500 text-white px-4 py-2 rounded">
        다운로드
    </button>

    <div id="previewContainer" class="mt-4">
        <img id="previewImage" src="" alt="미리보기 이미지" class="border rounded shadow-lg" />
    </div>
</div>

<script src="/js/script.js"></script>

---

✅ Step 4: 프론트엔드 로직 구현 (JavaScript - Fetch API)

📌 wwwroot/js/script.js 구현

document.getElementById("previewBtn").addEventListener("click", () => {
    const text = document.getElementById("textInput").value;
    const fontFile = document.getElementById("fontSelect").value;
    const hexColor = document.getElementById("colorPicker").value.replace("#", "");

    const url = `/api/Image/Preview?text=${encodeURIComponent(text)}&fontFile=${encodeURIComponent(fontFile)}&hexColor=${hexColor}`;

    fetch(url)
        .then(response => response.blob())
        .then(blob => {
            const imageUrl = URL.createObjectURL(blob);
            document.getElementById("previewImage").src = imageUrl;
        });
});

document.getElementById("downloadBtn").addEventListener("click", () => {
    const text = document.getElementById("textInput").value;
    const fontFile = document.getElementById("fontSelect").value;
    const hexColor = document.getElementById("colorPicker").value.replace("#", "");

    const url = `/api/Image/Download?text=${encodeURIComponent(text)}&fontFile=${encodeURIComponent(fontFile)}&hexColor=${hexColor}`;

    fetch(url)
        .then(response => response.blob())
        .then(blob => {
            const downloadUrl = URL.createObjectURL(blob);
            const a = document.createElement("a");
            a.href = downloadUrl;
            a.download = "emoticon.png";
            document.body.appendChild(a);
            a.click();
            a.remove();
        });
});

• HTML 파일에서 script 연결 추가

<script src="/js/script.js"></script>

---

✅ Step 5: 결과물 및 작동 방식 정리

버튼 기능

미리보기	서버에 이미지 생성 요청 후, 즉시 프리뷰
다운로드	서버에 이미지 생성 요청 후, 바로 다운로드

미리보기에서 나온 결과가 마음에 들면 다운로드 버튼으로 다운로드 가능
최신 트렌드를 반영하여 JavaScript Fetch API로 구현하였습니다.

---

🚩 Step 6: 최신 트렌드를 반영한 향후 확장 방안

• SPA(Single Page Application) 형태로 전환하여 Vue.js 또는 React.js로 더 풍부한 UX 제공 가능
• Docker 컨테이너화 및 클라우드 배포 (AWS/Azure) 로 안정적인 서비스 운영
• CI/CD (GitHub Actions) 자동화를 통한 빠른 배포 및 서비스 유지 보수 지원

---

🌟 마무리하며

이 가이드로 명확하고 직관적인 이미지 생성 및 다운로드 서비스를 ASP.NET Core 최신 환경에서 완성할 수 있습니다.
추가적으로 궁금한 사항이 있으면 언제든지 편하게 말씀해 주세요!

 

 

 

 

1> 무료 폰트 구하기

 

https://blog.naver.com/sonyalpha1004/222936667294

[무료폰트] Noto Sans(노토 산스 폰트) TTF 파일 다운로드