뷰컴포넌트 기반 도메인별 로고 텍스트 변경

• 4/7/2025
• 4 minutes to read

ViewComponent 기반 도메인별 로고 텍스트 변경

웹 애플리케이션에서 접속하는 도메인에 따라 사이트 이름이나 로고를 다르게 표시해야 하는 요구는 자주 발생합니다.
ASP.NET Core MVC에서는 ViewComponent를 활용하여 로직과 뷰를 분리하면서 깔끔하게 이를 구현할 수 있습니다.
특히 뷰 파일에서 조건문으로 분기 처리하면, 추후 텍스트뿐 아니라 이미지나 복합적인 HTML 코드로 확장하기 쉬운 구조를 만들 수 있습니다.

이 문서에서는 도메인 이름에 따라 로고 텍스트를 동적으로 변경하는 방법을 설명합니다.

1. ViewComponent 클래스 생성

먼저, 프로젝트 내에 ViewComponents 폴더를 생성하고 ViewComponent 클래스를 작성합니다.

폴더 경로:

/ViewComponents/LogoViewComponent.cs

클래스 코드:

using Microsoft.AspNetCore.Mvc;

namespace Azunt.ViewComponents
{
    public class LogoViewComponent : ViewComponent
    {
        public IViewComponentResult Invoke()
        {
            var host = HttpContext.Request.Host.Host;

            return View("Default", host);
        }
    }
}

요청이 들어온 도메인 이름을 읽어 뷰로 전달합니다.
뷰 파일에서 도메인 값에 따라 로고를 동적으로 출력할 수 있도록 준비합니다.

2. ViewComponent 뷰 작성

다음으로 ViewComponent 뷰 파일을 생성합니다.
프로젝트의 뷰 공유 폴더에 위치시킵니다.

뷰 파일 경로:

/Views/Shared/Components/Logo/Default.cshtml

뷰 파일 내용:

@model string

@{
    var host = Model;
}

@if (host.Contains("localhost"))
{
    <a class="navbar-brand" href="/Home">
        Azunt
    </a>
}
else if (host.Contains("example.com"))
{
    <a class="navbar-brand" href="/Home">
        ExampleSite
    </a>
}
else
{
    <a class="navbar-brand" href="/Home">
        Hawaso
    </a>
}

도메인 이름을 기준으로 출력할 내용을 조건문으로 분기합니다.
지금은 단순히 텍스트를 출력하지만, 추후 이미지나 복잡한 레이아웃으로 확장하기 좋은 형태입니다.

3. Layout 파일 또는 뷰에서 ViewComponent 호출

ViewComponent를 사용하는 부분에서는 다음과 같이 호출합니다.
레이아웃 파일이나 원하는 뷰 파일에 추가하면 됩니다.

@await Component.InvokeAsync("Logo")

ViewComponent가 실행되면서 현재 접속 도메인에 맞는 로고가 출력됩니다.

4. 실행 및 결과 확인

애플리케이션을 실행하여 결과를 확인합니다.

지정한 도메인에 따라 서로 다른 로고 텍스트가 출력되는 것을 확인할 수 있습니다.

요약

향후 확장 가능성

뷰 파일에서 조건문으로 분기하는 방식은 다양한 확장에 유리합니다.

• 도메인별 로고 이미지 출력
• 텍스트 외 아이콘이나 복합 HTML 요소 추가
• 도메인별 스타일이나 테마 적용
• 다국어 처리 및 국제화 적용
• 도메인과 출력값 매핑을 appsettings.json 으로 외부화하여 관리
• ViewComponent 결과를 캐싱하여 성능 최적화

마무리

ViewComponent를 사용하여 로고 출력 기능을 구현하면 뷰와 로직을 깔끔하게 분리할 수 있습니다.
이 방식은 도메인에 따라 맞춤형 콘텐츠를 제공하는 데 유연하며, 향후 유지보수나 기능 확장에도 용이합니다.
앞으로 로고에 이미지, 색상, 애니메이션 효과 등을 추가하는 작업도 같은 구조 내에서 쉽게 구현할 수 있습니다.