[Project Review] #3 V Visualizer for Blpan

안녕하세요. 이동규(@livedk) 입니다.

 

 

 

 지난 10월 30일 한국마이크로소프트(포스코빌딩 5층)에서는 블판이라는 이름의 전시회가 열렸었습니다. 이는 2010년 7월부터 시작한 Microsoft Expression Blend를 사용하는 디자이너와 개발자의 분들의 모임(블판)에서 시작한 첫번째 전시회 입니다. 위에 보이시는 블판 로고는 ‘블렌드 판을 펼치다’ 라는 의미로 블렌드의 B와 블판의 불판이란 어감의 느낌을 결합하여 B가 불타는 모양으로 디자인 되었습니다.

 

 이 전시회에서 저(이동규), 김대열, 권영철 세명이서 한팀을 이루어 작품을 내기로 하였습니다. 팀명을 Vinyl Dream Team 으로 정하게 되었는데 이는 위 세명이 같은회사(VINYL)에 다니고 같은 팀에서 일하고 있어서 정하게 되었습니다. 아래 보이시는 엽서가 우리팀에서 제작한 로고및 이미지 입니다.

 

 

 저희는 V Visualizer 라는 이름으로 작품을 제출 하였고 아이디어는 얼마전 회사내에서 창립 10주년 파티에서부터 시작 하였습니다. 타부서에서 오픈프레임워크라는 기술을 이용해 터치 미디어 테이블을 작업하는 것을 보고 영감을 받았습니다. 정해진 수의 파티클이 터치된 영역을 따라 움직이는 시스템이였는데
저희의 주기술인  WPF에서도 할 수 있다는 자신감으로 출발하여 터치가 아니라 웹캠을 이용하여 움직이는 동작에 접목하면 어떨까하는 새로운 아이디어가 떠올랐습니다. 나아가 사운드에 맞추어 약간의 동작을 추가한다면 멋진 비쥬얼라이제이션이 나올거라 생각했습니다.

 

역시 이러한 작업들은 글로써의 설명보다는 동영상을 보시면 확실히 이해하실 수 있을 것입니다.

 

(볼륨을 높여주세요)

 

앞으로도 이런 전시회를 계속 해나갈 예정입니다. 다음에는 좀더 발전된 모습으로 참가하도록 노력하겠습니다.

 

[Project Review] #2 Lotte Cinema - TBA

안녕하세요. 이동규(@LiveDK) 입니다.

 

#Review

 

 입사후 두번째로 맡은 프로젝트를  소개해드리겠습니다. Lotte Cinema 프로젝트로서 TBA 라는 이름의 대형 상영시간표입니다. 아래 그림을 보시면 어떤 느낌인지 감이 올실 것 입니다.

TBA는 DID를 총24대(3X8)를 연결하여 만든 대형 전광판이라고 말할 수 있습니다. 이처럼 큰 화면에 기존 극장에서 찾아 볼 수 없는 새로운 UI로 사용자에게 좀더 편리하면서 직관적이고 새로운 경험을 주었습니다. 기존 극장에는 단순히 영화 목록 그리고 시간만 나와 있는 반면 TBA는 기존의 정보뿐아니라 직관적으로 눈으로 느낄 수 있는 공간적(시간이 흘러가는 모습)을 추가하여 새로운 경험을 제공 하였습니다.

 롯데시네마 건대입구점을 방문해보시면 위와같은 디자인의 실제 설치된 모습을 보실 수 있습니다.

 

 

#My Works

 

 이번 프로젝트는 VS2008, .NET Framework 3.5 sp1 의 개발환경에서 WPF를 이용하여 구현된 프로그램입니다. 대부분의 비쥬얼적 요소 및 모션은 익스프레션블랜드를 통해 구현되였으며 내부 데이터(영화목록, 상영시간, 박스오피스 등등)은 C#언어의 코드를 통해 구현되었습니다. 디자인요소외 실제 개발작업은 블랜더1, 개발자1 총 2명이 작업하였습니다.

 

 

 

 

[Project Review] #1 KT Olleh Square + Technology

안녕하세요. 이동규(@livedk) 입니다.

 

 바이널(VINYL)이란 곳으로 출근하게 되면서 처음 맡게된 프로젝트는 바로 광화문앞에 KT 건물 1,2층 리모델링 이였습니다. (위치는 아래 지도1 을 참고 하세요.) 이 곳에서는 다양한 IT 기기들이 설치가되었고 일련의 모든것들(IT장비, 컨텐츠)이 VINYL에서 담당하게 되었습니다. 대략 20개정도의 아이템들이 있었고 제가 만든 프로그램은 이중 4가지 이였습니다. 아래 영상1 을 보면서 현장을 느껴보시기 바랍니다.

 

2010.11.4 | 지도 크게 보기 ©  NHN Corp.

지도1. KT Olleh Square

 

영상1. Olleh Square, 바이널 제작 영상

 

#Review

 

 영상1 에서 보다시피 Olleh Square 의 1,2층 전체를 구성하는 미디어 아이템들이 있으며 이중 제가 맡은 프로젝트는 아래 목록1 과 같습니다.

 

1. 에코라운지 - 멀티프로젝션 월

2. 에코라운지 - 리어스크린

3. 쇼라운지

4. 쿡라운지

 

1. 에코라운지 - 멀티프로젝션 월

 에코라운지는 건물안에 숲을 옮겨다 놓은것과 같은 장소이며 이곳에 들어가면 허브향으로 가득 차 있습니다. 이곳에 들어간 멀티프로젝션월은 사진에서 보다시피 거대한 빔프로젝트3대를 한 화면에 투사하는 것으로 엣지블랜딩(아래설명), 동영상동기화(아래설명) 기술이 들어간 프로젝트입니다. 주위에는 테이블과 다양한 화분들이 있어 편하게 쉴 수 있는 공간이 마련되어 있습니다.

 

2. 에코라운지 - 리어스크린

 에코라운지안에 리어스크린은 멀티프로젝션 월과 연동되어 작동하는 스크린입니다. 리어스크린의 특징은 기존 빔프로젝트처럼 스크린 앞에서 비추는것이 아니라 거의 불투명한 스크린 뒤쪽에서 빛을 비춤으로서 사용자에게 표시해주는 장치입니다. 빛이 선명함이 생각보다 괜찮고(쨍하다) 일반적인 모습보다 사용자에게 조금더 특별한 경험을 주는 스크린 입니다.

 

3. 쇼라운지

 쇼라운지역시 멀티프로젝션월에 사용된 엣지블랜딩, 동영상동기화 기술이 들어간 장소이며 세계유명장소의 사진, 자연풍경 영상이 나오는 곳입니다. 이곳 역시 사용자들이 편하게 쉴수 있는 의자와 터치테이블등이 있어 재미있게 시간을 보낼 수 있습니다.

 

4. 쿡라운지

 쿡라운지는 쇼라운지와 동일한형태의 시스템이며 환경은 집과같이 편안한 인테리어로 구성되어 있습니다. 이곳의 의자들은 쇼파로 되어 있어 연인들끼리 놀러왔을경우 상당히 인기가 있는 장소입니다.

 

 위에 간단학 설명한 IT기기들 외에 굉장히 다양한 아이템들이 있으니 광화문 Olleh Square 방문하시면 즐기실 수 있을 것입니다.

 

#Technology

 

 4가지 프로그램의 공통점은 빔프로젝터를 이용하여 컨텐츠(동영상, 이미지)들을 재생하는 것이였습니다. 특히 이중에서 핵심이 되는 기술은 엣지 블랜딩(Edge Blending), 동영상 동기화 였습니다.

 

1. 엣지 블랜딩(Edge Blending) - 엣지 블랜딩이란 여러 빔프로젝트를 이용하여 하나의 대형 영상을 만들때 발생하는 문제를 해결하는 방법중 하나 입니다. 사이트를 방문하시면 쉽게 이해할 수 있으며 문제를 해결해 볼 수 도 있습니다. 바이널(VINYL)에서 한 작업들은 비슷하지만 조금더 복잡한 방법을 사용하여 엣지 문제를 해결하였습니다. (자세한 내용은 소개해드리기 어려운점 양해 바랍니다.)

 

2. 동영상 동기화 - 엣지 블랜딩을 하게 되면 여러 빔프로젝터를 사용하게 되고 그렇게 되면 여러 컴퓨터를 사용하게 됩니다. 하지만 이렇게 되면 동시에 같은 영상 혹은 이미지를 정확한 시간에 한 화면에 보여주기란 쉬운 일이 아니였습니다. 기존방식으론 이미지 시퀀스라는 기술이 있지만 이는 컴퓨터에 상당한 부하를 주고 음악을 기준으로 영상을 맞추는 복잡한 알고리즘이 들어가게됩니다. 또한 이미지를 만들기위해 동영상을 프레임마다 캡쳐해내는 공수가 들어갑니다. 이 해결 방법을 이전에 블로깅 하였으므로 이곳(dklee.net/82)에서 읽어보세요.

 

 

 

 

 

 

C# Create CSV File using StreamWriter

안녕하세요 이동규(LiveDK)입니다.

 

ListView에 있는 데이터를 파일로 저장하려하는중 엑셀파일을 이용하여 쓰기를 시도하였으나 이는 대상 컴퓨터에 동일한 버전의 Excel 이 설치 되어 있지 않으면 읽고 쓰기에 어려움이 있어 CSV 를 이용하여 파일 작성을 해보았습니다.

 

파일 작성을 위해 StreamWriter 를 이용해보았습니다. 상당히 간단하기 때문에 별다른 설명 없이 코드만 첨부 하겠습니다.

 

StreamWriter sw = new StreamWriter("aa.csv", false, Encoding.Unicode);

foreach (ListViewItem lvi in listView_score.Items)

{

      sw.WriteLine(lvi.Text + "\t" + lvi.SubItems[1].Text);

}

sw.Close();

(코드.1)

 

(출력.1)

 

 

+ 추가1, 각각의 칸이동은(좌우) 탭을 넣어주면됩니다(\t)

+ 추가2, 각줄의 이동은 WriteLine 을 이용하였기 때문에 자동이지요 :) (\r) 하시면 됩니다.

Linq to SQL - join Different Data Context

안녕하세요 LiveDK(이동규) 입니다.

 

Linq to SQL을 사용하는중 서로다른 Database 서버에서 DataContext를 가져와 Join 을 하게될 경우가 생겼었습니다. 기존처럼(코드.1) 단순히 Join 을 해서는 아래와 같은 에러가(에러.1) 발생을 하게됩니다.

 

DBDBDataContext DC_ONE = new DBDBDataContext();

LotteDBDataContext DC_TWO = new LotteDBDataContext();

 

var result = from A in DC_ONE.MovieStatisticsDays

            join B in DC_TWO.tbMovieInfos on A.MovieInfoCode equals B.contentsCode

            select B;

 

dataGridView1.DataSource = result;

dataGridView1.Refresh();

(코드.1)

 

한글 : 쿼리에 다른 데이터 컨텍스트에서 정의된 항목에 대한 참조가 포함되어 있습니다.

영문 : The query contains references to items defined on a different data context

(에러.1)

 

Linq 에서 서로다른 Data Context 를 함께 사용하지 못하는듯 합니다. 하지만 아래와 같이(코드.2) 처럼 각각 Data Context를 따로 실행하고 ToList() 를 사용하여 로컬 컴퓨터에서 실행하게 되면 두개의 DataContext를 사용할 수 있습니다. (성능은 장담 못드리네요ㅎ)

 

DBDBDataContext DC_ONE = new DBDBDataContext();

LotteDBDataContext DC_TWO = new LotteDBDataContext();

 

var one = (from A in DC_ONE.MovieStatisticsDays select A).ToList();

 

var two = (from B in DC_TWO.tbMovieInfos select B).ToList();

 

var result = (from A in one

              join B in two on A.MovieInfoCode equals B.contentsCode

              select B).ToList();

(코드.2)

 

 

뉴미디어 & WPF - MediaElement Sync

안녕하세요 LiveDK(이동규) 입니다.

 

(그림.1)

 

 저는 현재 뉴미디어쪽에서 새로운것을 배우고 활용하고 있는 곳에서 일을 하고 있습니다. 이 곳에서 프로젝트를 진행중에 두개의 미디어를 동시에 재생하게될 경우가 생겼었습니다. 제가 이방법을 고안하기 전까지 기존에는 이미지 시퀀스라는 방식을 사용해 왔었습니다. 이미지 시퀀스란 동영상을 프레임별로 고화질의 이미지로 저장시키고 이 이미지를 를 빠르게 순서대로 화면에 뿌리는 것입니다. 정해진 순서가 있기때문에(인덱스를 알고 있으므로) 동시에 다른곳에서도 같은 화면을 재생하는것이 쉬웠습니다. 하지만 일반 하드디스크 나아가 SSD를 사용한다 해도 버벅이는 현상을 피할 수가 없습니다. 해결방법으로는 램디스크에 이미지들을 로드하여 플레이 하는것입니다. 이러한 이미지 시퀀스를 통해 동영상의 동기화를 맞추는 방법은 화질이 좋다는 장점이 있지만 그보다 여러 세팅문제,끊김문제등으로 인해 단점이 더 크다고 볼 수 있습니다.

 이러한 문제를 인식하고 동영상 원본을 그대로 활용하여 미디어의 동기화를 맞추는 방법을 생각해 보았습니다. (그림.1)과 같이 WPF를 이용하여 두개의 MediaElement 를 띄워 같은영상을 반으로 자른 영상을 플레이 하는것입니다. 기본틀은 (코드.1)와 같이 그리드 내에 두개의 MediaElement 가 있으며 시간을 표시하기위한 TextBlock이 존재합니다.

 

(코드.1)

 

생각1. MediaElement 의 Position 속성을 이용하여 재생하기

 

동시에 영상을을 재생하기 위해 단순히 생각한 결과는? 그래 동시에 같은 위치를 맞춰주면 되겠지! 라고 생각하여 MediaElement 의 Position 속성을 이용해 보았습니다. (코드.2)와 같이 일정한간격으로 기준이 되는 영상의 현재 Position을 다른 영상에 대입함으로서 같은 재생 위치를 맞추는 것입니다.

 

(코드.2)

 

타이머를 이용하여 1초에 10번을 싱크를 맞추는 코드입니다. 기준이 되는 media_01 의 Position을 media_02에 대입하여 같은 부분을 재생해보려고 하였습니다. 하지만 결과는 굉장히 처참합니다. 오히려 안하니만 못하는 결과를 볼 수 있을 것입니다. 문제점은 바로 Position 속성입니다. 이 속성은 한번 대입하게 되면 바로 적용 되는것이 아니라 인터넷에서 동영상 Seek 하듯이 딜레이가 발생하게 되어 속도가 점점 느려저버리게 됩니다. 혹시 이런 의문이 드신다면? - 최초 한번만 맞추면 되지 않느냐? 대답은 아니요 입니다. 동시에 재생되었다고 하더라고 시간이 지나면 점점 차이가 나게 되며 컴퓨터 프그램이다 보니 플레이 재생상에 딜레이가 발생할 수 있으므로 주기적으로 맞춰줘야 처음부터 끝까지 싱크를 맞출 수 있습니다. 이 방법은 실패로 돌아 갔습니다.

 

생각2. MediaElement 의 SpeedRatio 속성을 이용하여 재생하기

 

MediaElement의 SpeedRatio 속성은 미디어의 재생 속도를 조절 할 수 있습니다. double 형의 값으로 기본값은 1입니다. 이보다 높으면 재생속도가 빨라지면 반대라면 느리게 재생이 되게 됩니다. (코드.3)과 같이 일정한 간격마다 기준영상의 시간과 상대영상의 시간을 비교하여 기준영상보다 빠르다면 SpeedRatio 를 줄여 느리게 재생하고, 기준보다 느리다면 SpeedRatio 를 증가시켜 따라 잡는 알고리즘(?) 입니다.

 

(코드.3)

 

테스트 결과 생각.1 보다 만족하는 결과을 얻을 수 있음을 볼 수 있습니다. 두개의 미디어의 차이를 조금씩 맞춰 나가게 되는데, 좀더 각격을 잘 조절하고 차이값에 따라 SpeedRatio 를 조절한다면 완벽한 미디어 동기화를 만들 수 있을 것입니다.

 

이로서 두개의 미디어 싱크를 맞추는 방법에대해서 알아 보았습니다. 이외에도 다른 방법들로 미디어의 동기화를 맞추는 프로그램이 존재하겠지만 WPF 를 사용하여 간단하게 구현 해 볼 수 있습니다.

 

아래 링크에서 프로젝트 + 샘플영상(2개) 를 받으 실 수 있습니다.

 

FlowDocumentViewer, FlowDocument

안녕하세요 LiveDK 입니다.

 

오랜만의 포스팅입니다. 훈스닷넷 WPF 시삽을 활동하면서 QnA쪽을 살피고 답을하는 과정에서 필요한부분은 블로깅을 통해서도 남겨야 할듯하여 이렇게 남깁니다.(기억력이 부족한 저에겐...ㅎ)

 

질문은

WPF에서 FlowDocument를 만들긴 하였지만 이를 실질적으로 화면에 뿌리기 위해서 어떻게 해야하는것입니다. (실제질문)

 

(FlowDocument 란? 참고 - http://msdn.microsoft.com/ko-kr/library/system.windows.documents.flowdocument.aspx)

 

pic.1 FlowDocument 생성

 

 

pic.1 처럼 자신의 프로젝트에 FlowDocument를 생성하고 위에 링크에서 FlowDocument를 미리 작성한 예제가 있으니 복사하셔서 테스트 해보시면됩니다. 이렇게 생성된 xaml 파일을 원하는곳에서 불러 FlowDocumentViewer 로 보여주기 위해선 아래와 같이 작업을 해주어야합니다. 단순히 대입연산자를 통해 쉽게 나오지 않습니다.(훈스닷넷 게시판에 질문올린 내용도 그러합니다.)

 

[code csharp] FileStream xamlFile = new FileStream(@"C:\Data\FlowDocument1.xaml", FileMode.Open, FileAccess.Read); FlowDocument content = XamlReader.Load(xamlFile) as FlowDocument; flow_viewer.Document = content; [/code]

 

간단하게 자신이 만든 FlowDocument 를 FlowDocumentViewer의 Document 로 지정하는 방법을 알아보았습니다. 오랜만의 포시팅이라 역시 자연스럽지 못하네요ㅎ 감사합니다.

 

Tokujin Yoshioka_SPECTRUM 展, 도쿠진 요시오카_스펙트럼 展

닷넷개발자컨퍼런스

(출처: 훈스닷넷)

Mind the Gap

 

 

 

 

 

개인 웹서버 설정을 위한 팁 #5 – 접속 문제; 포트

안녕하세요 DKLEE(이동규) 입니다.

 

개인 웹서버를 구축하였다면 테스트해볼 사항이 있습니다. 그것은 바로 외부로부터 자신의 웹서버로 정상적으로 접근이 되는지 입니다. 만약 ISP 업체에서 외부에서 접속할 수 있는 포트(80)를 막아 놓았다면 힘들게 구축한 웹서버가 무용지물이 될 수 있습니다. 이러한 문제를 해결하기 위해서는 막아 놓지 않은 포트를 이용하여 접속을 해야합니다. 예를 들어 자신의 웹서버 IP주소 http://xxx.xxx.xxx.xxx/ 으로 접속이 막혔다면 http://xxx.xxx.xxx.xxx:8080/ 처럼 포트를 명시적으로 적어주어 접속을 하는것입니다. 하지만 이렇게 되면 눈으로 보기도 지저분하고 포트번호까지 외어야 하는 불상사가 생기가 됩니다. 이번 내용에서는 이런 문제를 포워딩을 통해서 해결해 보는 과정을 진행해 보겠습니다. (포트가 열려있는지 혹은 닫혀있는지 확인후, DNSEver 를 통해 해결하는 방법을 설명하겠습니다.)

 

 

1. 포트 확인하기(http://www.whatsmyip.org/)
   • 사이트 접속
   • 포트 스캔하기
   • 결과보기

      

2. DNSEver의 활용
   • DNSEver 웹 포워딩
   • 포워딩 설정하기(고정IP 경우)
   • 포워딩 설정하기(유동IP 경우)

 

 

                                                                                                                                                

 

1. 포트 확인하기(http://www.whatsmyip.org/)
   • 사이트 접속

     

   • 포트 스캔하기

     

   • 결과보기

     

2. DNSEver의 활용
   • DNSEver 웹 포워딩

     

   • 포워딩 설정하기(고정IP 경우)

     

   • 포워딩 설정하기(유동IP 경우)
     • 유동IP 를 사용하시는경우 no-ip등 과 같은 DDNS를 이용하여 설정을 해주면 됩니다. 만약 no-ip의 DDNS를 사용중이라면 2-B 에서의 '연결할 홈페이지 주소'를 no-ip 에서 할당한 도메인주소에 포트를 추가해서 작성해주면 됩니다.(no-ip 사용법: http://dklee.net/74)

     

MSP 4기를 모집합니다.

안녕하세요 DKLEE(이동규) 입니다.

 

 

드디어 MSP(Microsoft Student Partners) 모집을 오는 3월 29일 부터 시작하네요. 아래 선발 안내와 준비해야할 내용들이 나와 있습니다.

 

1. 제4기 Microsoft Student Partners 선발안내

2. MSP 4기 지원방법 및 과제

 

더욱더 자세한 내용이 궁금하신 분은 Microsoft Academic Initiative 에 방문하셔서 MSP 부분을 찾아 보시면 됩니다.

개인 웹서버 설정을 위한 팁 #4 – no-ip

안녕하세요 DKLEE(이동규) 입니다.

 

개인 웹서버가 유동IP 환경이라면 고정IP 처럼 사용할 수 있는 다른 설정을 추가해야합니다. 이는 www.no-ip.com에서 제공하는 서비스를 통해서 해결 할 수 있습니다. 아래의 일련의 과정을 통해 알아보겠습니다.

[그림 1]

 

[그림 1]에서 처럼 No-IP Free 를 통해 등록과 회원 가입을 완료하고 로그인을 해보겠습니다.. 'Add a Host'를 통하여 다음 사항으로 진행해 보겠습니다.

[그림 2]

 

[그림 3]

 

[그림 3]을 통해서 간단히 무료도메인과 IP주소를 설정해보았습니다. 이렇게 설정했다면 웹서버에 [그림 4]처럼 각 운영체제에 맞는 소프트웨어를 웹서버에 설치하여 실시간으로 유동IP를 업데이트하여 마치 고정IP 효과를 줄 수 있습니다.

[그림 4]

 

설치를 완료하게되면 [그림 5]와 같이 로그인창이 보이면 웹에서와 같이 로그인해주시면됩니다. 이후 [그림 6]처럼 자신이 만든 도메인에 체크표시만 해주면 자동으로 웹서버의 유동IP가 실시간으로 업데이트 됩니다.

[그림 5]

 

[그림 6]

 

 

개인 웹서버 설정을 위한 팁 #3 - ZoneEdit

안녕하세요 DKLEE(이동규) 입니다.

 

지난번 소개했던

개인 웹서버 설정을 위한 팁 #1 - DDNS & DNSEver 사용법 

개인 웹서버 설정을 위한 팁 #2 - DDNS & DynDNS 사용법

에 이어 제 3탄 ZoneEdit 에 대해 포스팅 해보겠습니다.

 

이번에는 ZoneEdit 를 사용하여 자신이 가지고있는 유료 도메인을 자신이 만든 서버에 연결해보는 방법을 설명하겠습니다. http://zoneedit.com/ 에 접속하여 회원가입과 로그인을 마치게 되면 [그림 1]과 같은 첫 화면을 볼 수있습니다.

 

[그림 1]

 

[그림 1]의 Add Zones를 통해 자신의 도메인을 추가해보겠습니다. [그림 2]와 같이 추가해주시면 됩니다.

[그림 2]

 

정상적으로 추가가 되었다면 중요한 설정인 네임서버를 변경 해주셔야합니다. 이는 자신이 유료도메인을 구입한 업체에서 변경해주셔야 합니다. 보통의 경우는 사용자가 변경이 가능합니다만 불가능 하다면 고객센터에 문의하여 변경해주셔야 합니다. [그림 3]에 나온 설정으로 변경하여야 합니다.

[그림 3]

 

네임서버 변경에는 약간의 시간이 소요됩니다. 대략 몇시간에서 하루정도 까지 걸리는 것으로 알고 있습니다. 따라서 ZoneEdit에서 설정이 안된다면 조금더 기다려 보는것이 해결책이라고 할 수 있습니다.

[그림 4]

 

다음은 IP Addresses 설정을 통해 자신의 웹서버 IP주소를 입력해야합니다. [그림 5]와 같이 IP주소를 추가해주게면 됩니다. [그림 6]에서는 dklee.net / www.dklee.net 둘다를 연결 할것인지 물어보는 부분입니다.

[그림 5]

 

[그림 6]

 

다음과 같이 간단하게 설정만 해주게 되면 자신의 도메인을 통해 자신의 웹서버로 접속을 연결 할 수 있습니다.