[공개SW컨트리뷰톤] 기본 환경 세팅

뭐든지 처음 시작하는게 제일 어려운것 같다...

개발을 하기 위해서 처음 세팅해야할 것들이 있다. 멘토님들이 제작하신 sdk가 아직 nuget에 배포하질 않아서 수동으로 프로젝트에서 참조를 해야 한다. 그냥 시연을 한 번 보면 그 때만 아 하고 집 오면 홀랑 다 잊어버린다. 저번에도 알려주셨는데 이번에 가서 또 물어봤다... 그래서 양해를 구하고 화면 녹화를 해서 다시 돌려 보았다. ㅎㅎ 

이번 작업은 어플리케이션의 스킨을 만드는 것인데 이게 그냥 프로젝트로 생성을 해서 만들면 그냥 이대로 독자적인 프로젝트가 되는 것이다. 그래서 실행 파일이 없이 이식 가능한 파일을 만들어서 빌드 후 dll파일을 빼서 원래 프로젝트에 넣어야 한다. 

먼저 스킨 파일을 만들기 위해서 WPF 사용자 정의 컨트롤 라이브러리를 만든다. 

그리고 뒤이어서 WPF 앱 프로젝트 파일을 만든다. 실제 테스트시 구동하는 프로젝트는 이것인데 그 이유는 이식이 잘 되는지 확인하기 위해서 이다. 이 SkinTest프로젝트에서 아까 만든 Skin을 참조해서 구동하는 것이다. 깃허브에 push할때는 이 프로젝트를 빼고 올리게 된다. 

오른쪽 솔루션 탐색기에서 SkinTest에서 우 클릭 하구 참조를 들어간다. 참조를 들어가서 프로젝트를 누르고 Skin을 참조한다.

그리고 이번에는 Skin 프로젝트를 우 클릭하고 뮤직플레이어 관련 SDK를 참조한다. 마찬가지로 SKinTest에서도 해주었다.

그리고 Skin프로젝트에서 새 창을 만든다.

창을 만든 후 skinentry라는 c#파일을 하나 만든다. skin파일의 진입점을 정의해주는 것이다.

SkinEntry.cs

using Presto.Common;
using Presto.SDK;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
 
namespace Skin
{
    public class SkinEntry : PrestoSkin
    {
        protected override IPrestoWindow CreateWindow()
        {
            Console.WriteLine(PrestoSDK.PrestoService.Library.Musics.Count);
            return new SkinWindow();
        }
    }
}
 

line 11 :  PrsetoSkin을 구현하는 부분인데 wpf의 그냥 window가 아닌 이 어플리케이션에 적합한 window를 쓰기 위해서 중간다리 역할의 인터페이스를 구현한다. 

line 15 : sdk의 기능을 한 번 참조해 주기 위해서 콘솔에 하나 찍는 부분이다.

SkinWindow.xaml

<p:PrestoWindow x:Class="Skin.SkinWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Skin"
        xmlns:p="http://schemas.presto.component"
        mc:Ignorable="d"
        Title="SkinWindow" Height="450" Width="800">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="455*"/>
            <ColumnDefinition Width="337*"/>
        </Grid.ColumnDefinitions>
        <TextBlock Text="Hello Skin" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="24" Margin="341,194,3.824,193"></TextBlock>
    </Grid>
</p:PrestoWindow>

line 7 : xaml파일에 네임스페이스를 정의해주고 전체 태그를 prestowindow로 바꾼다. 

그리고 SkinTest프로젝트의 App.xaml파일에

App.xaml

<Application x:Class="SkinTest.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:SkinTest"
             xmlns:p="http://schemas.presto.component"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
        <p:PrestoTheme/>
    </Application.Resources>
</Application>
 

line 5 : 네임스페이스를 정의해주고 커스텀 테마를 하나 로드한다.

그리고 두 개의 프로젝트를 빌드해서 실행을 시켜본다.

어플리케이션에 Skin을 입히는 방법

만든 Skin폴더를 탐색기에서 열어서 bin/Debug로 들어가서 모든 파일을 복사한다.

Window + R 단축키를 사용해 appdata폴더로 들어가 presto폴더로 들어간다.

거기에 사용자 폴더를 하나 만들고 모든 파일을 복사한다. 복사하는데 Skin.dll파일의 확장자를 Skin.psm으로 변경해 준다.

어플리케이션을 실행해서 SKin을 고를 때 썸네일을 넣으려면 dll파일과 같은 이름의 이미지파일을 넣어주면 된다.

어플리케이션을 실행해서 만든 SKin을 적용해 주면 된다. 이상 기록 끝