Creative Commons License

Microsoft .NET

닷넷!시작하기
닷넷! Ver 2.0~
닷넷!스킬업
웹개발
윈폼개발
실용모듈개발
Tip & Tech
하루 한 문법

Microsoft .NET 개발자들을 위한 공간입니다. 기초강의에서 부터 고급 기술 정보 및 팁등을 다루도록 하겠습니다.

.

닷넷!시작하기

Microsoft. NET 을 시작하는 분들을 위한 강좌입니다. 주로 기초적인 내용과 때론 기본적인 내용을 다룹니다

[C# 기초강좌] 쉬어가는코너: MS의 RIA시장 출사표-실버라이트

작성자 : 박종명
최초 작성일 : 2010-07-27 (화요일)
최종 수정일 : 2010-07-27 (화요일)
조회 수 : 9383

글 작성일: 2010.07.09  옮긴 날: 2010.07.27

“MS RIA 시장을 파고들기 위해 실버라이트를 내 놓았습니다

 

안녕하세요. 박종명입니다. 오랜만에 쉬어가는 코너 들어갑니다 ^^

근래 IT 환경이 상당히 변모하고 있으며 다양한 이슈가 발생하고 있음을 느낍니다

특히 개발자라는 직업이 발전하는 환경을 누리는 입장을 넘어 그 환경을 다룰 수 있어야 함에 더욱
민감할 수 밖에 없죠.
.. 이러한 변화가 위기인지 기회인지는…… 사람마다 상황마다 다르겠지요

 

근래 이슈 중 단연 으뜸은 모바일 인 것 같습니다.

스마트 폰의 활성화로 불거진 모바일 플랫폼에 대한 관심은 모바일 앱(App) 개발의 붐을 일으키고 있으며
이는 웹 영역까지 그 영향력을 확대하고 있습니다. 차세대 웹 표준 마크업 언어인 HTML5가 제대로 탄력을
받은 원인 중 하나이기도 한 것 같습니다

 

그리고 몇 해 전부터는 RIA 라는 용어도 심심찮게 들리고 있습니다. 지금은 모바일 이슈에 살짝 밀린 느낌이
있으나 여전히
유효한 이슈이지요. RIA를 위한 삼대 산맥이 이미 형성되어 있습니다

어도비(Adobe)의 플렉스(Flex), (Sun)의 자바FX 그리고 마이크로소프트의 실버라이트(SilverLight) 입니다

 

마이크로소프트가 RIA 시장의 쟁탈을 위해 출사표를 던졌지만 아직은 틈을 간신히 파고든 수준이랄까요?

어쨌든 이번 쉬어가는 코너에서는 마이크로소프트가 야심 차게 내 놓은 RIA 개발 플랫폼인 실버라이트에 대해
지극히
개인적인 잡설을 좀 풀어볼까 합니다. (실버라이트 기술 요소에 대해서는 다루지 않습니다)

 

 

이 카페는 특성 상 웹 개발 분야와는 살짝 거리가 있어 보입니다만 개발이 아닌 환경에 대한 이해는
나쁠 것 없어 보여
쉬어가는 코너로 살포시 다뤄보고자 합니다

 

RIA Rich Internet Application의 약자로 직역하자면 풍부한 인터넷 응용프로그램이 되겠습니다

인터넷이라고는 하지만 사실 웹(Web)에 초점이 맞춰진 어플리케이션 환경이지요

웹 브라우저에서 실행되는 어플리케이션이 매우 풍족하게 구동될 수 있는 환경이라 보시면 됩니다

 

사실 과거의 웹 페이지는 브라우저가 해석하는 HTML 덩어리였습니다

HTML 자체는 문서표현을 위해 만들어 진 마크업(Markup) 언어이기 때문에 문서 구조, 하이퍼 링크, 스타일 등을
정의하는데
만족했습니다.

그러다 더욱 긴밀한 상호작용이 필요하게 되어 ASP, PHP 와 같은 서버스크립트가 등장하게 되었구요.
그러나 ASP, PHP 는 서버기술로 최종 클라이언트 PC 입장에서는 여전히 HTML 덩어리일 뿐이었습니다.

 

결국 HTML 페이지는 실행되는 것이 아니라 해석될 뿐이었죠

 

반면 데스크탑(Desktop) 어플리케이션은 말 그대로 실행되는 프로그램입니다

프로그램을 위한 독립적인 메모리 영역을 가지고 있으며 자체 로직에 의해 프로그램이 논리적으로 실행됩니다.

그리고 사용성 측면에서 웹보다 한 수 위였죠. 따라서 과거 웹 개발자들은 자신의 웹 사이트가 데스크탑의 그것처럼

동작하기를 원한적도 있습니다. 당시 자바스크립트를 이용해 데스크탑 흉내내기도 심심찮게 볼 수 있었죠.

특히 회사내부에서 사용하는 인터라넷 응용프로그램일 경우 더 그러했습니다

 

웹 환경이 선풍적인(?) 인기를 얻고 보편화되는 과정에서 자연스레 웹이 데스크탑처럼 동작하기를 원하는 것은
물론
보다 화려하고 미려하고 풍부한 구현이 가능하기를 원했던 것입니다

 

RIA는 이러한 환경 변화, 요구사항에 부응하기 위해 탄생한 웹 구동 플랫폼의 명칭이라 할 수 있겠습니다

웹의 발전 배경과 관련한 다음 글을 참고해 주시기 바랍니다

http://www.mkex.pe.kr/kims//bbs.php?table=Tbl_SilverLight&query=view&uid=3&p=1

 

 

다양한 RIA 플랫폼

웹이 발전하고 웹에 대한 욕구가 증가하여 RIA 라는 결론에 도달했고 이 플랫폼을 위해 다양한 벤더에서

멋진 제품이 출시되기에 이릅니다

 

우선 썬 마이크로시스템즈의 자바 애플릿을 들 수 있겠습니다

웹 브라우저에서 자바 애플릿 구동을 위한 별도의 실행환경을 설치하면 웹 페이지의 특정 영역을 데스크탑
응용프로그램처럼
구현할 수 있도록 하는 기술이었습니다. 웹에서 소켓통신이 가능해 과거 많은 웹 사이트에서
채팅방 구현에 이용한 기술이기도 합니다.
썬에서는 차세대 RIA 플랫폼을 위해 자바FX를 새로이 내 놓았습니다

 

어도비의 플래시(Flash)! 멀티미디어 웹을 위한 대표적인 기술이죠. 워낙 유명한 기술이기도 하구요

멀티미디어 처리에 매우 능숙한 플랫폼으로써 현재까지도 굉장히 많이 사용되고 있는 플랫폼입니다

어도비 역시 플래시에 이은 플렉스(FLEX)를 선보이게 됩니다

 

그러면, 마이크로소프트는요? 그 유명한 액티브엑스(Active X) 아시죠?

이것 역시 일종의 RIA 라 할 수 있습니다. 그리고 스마트클라이언트(Smart Client)라는 플랫폼도 선보였습니다.

스마트클라이언트는 2000년대 초반 MS 계열에서 꽤 유명세를 탄 기술이며 많은 SI 업체에서 이 기술을 기반으로
ERP
등을
제작했습니다. 그리고 드디어 MS이 야심 찬 실버라이트가 등장합니다 
MS
RIA 기술은 드디어 실버라이트로 귀결됩니다

 

 

마이크로소프트의 RIA 시장에 대한 도전, 실버라이트(Silverlight)

현재 RIA 플랫폼 삼대 축 중 하나입니다

어도비의 플렉스, 썬의 자바FX, 그리고 마이크로소프트의 실버라이트 입니다

 

MS는 실버라이트에 굉장한 투자를 해 왔고 지금도 하고 있는 것 같습니다

사실 실버라이트는 닷넷 3.0의 초기 프로젝트명인 WinFX의 프레젠테이션 단 기술 영역인 WPF의 하위버전
격으로 출발했습니다.

 

실버라이트의 초기 명칭이 WPF/e 였던 것에서도 유추할 수 있습니다

WPF는 윈도우 응용프로그램의 프레젠테이션 단 기술이며 여기에 덧붙인 e everywhere 의 약자입니다

WPF 기술을 웹을 통해 어디에서나 실행 가능하도록 의도한 기술이며 결국 실버라이트라는 명칭으로 변경됩니다.

물론 지금은 실버라이트 자체가 4.0까지 버전 업 되었으며 웹 환경에 적합한 강력한 추가 기능들이 많이 내포되었습니다. 더 이상 WPF의 하위개념은 아닌 것이죠

 

 

디자이너와 개발자의 훌륭한 협업

초기 실버라이트를 소개하는 많은 내용 중 제가 처음 흥미를 느낀 점은 바로 디자이너와 협업에 대한 부분이었습니다. 웹 폼 컨트롤을 아실 겁니다. 웹 브라우저가 제공하는 양식 컨트롤로 직접 개발은 하지 않았어도 회원가입 같은
것에서
많이 보았을 겁니다. 텍스트 입력을 위한 input 박스, 선택을 위한 콤보박스(select 박스), 체크박스, 라디오버턴 등 매우 심플하고 딱딱한 UI 입니다. 아래에서 보는 것 처럼요

디자이너가 포토샵으로 매우 이쁜 콤보박스를 만든다고 가정해 보겠습니다. 그런데 이건 이미지일 뿐입니다
콤보박스를 감상할 일은 없죠. 콤보박스는 브라우저에서 동작을 해야 하고 개발자는 기능에 충실한 콤보박스를
만듭니다.
개발자의 손을 거친 콤보박스의 모양은 정말 단순, 딱딱 그 자체입니다. 디자이너의 미적감각은
어디론가 사라져 버린거죠.

왜냐하면 동작하는 콤보박스는 브라우저가 제공하는 기본 컨트롤 밖에 쓸 수 없기 때문이죠.
이건 개발자 탓도 아니고
디자이너의 순수한 도전(?)의식 탓도 아닌 거죠

 

위 시나리오를 다시 풀어 보겠습니다

디자이너는 콤보박스 UI를 만듭니다. 자신이 가진 최대한의 디자인 스킬을 살려 매우 이쁘게 만들어 냅니다

아래와 같이요. 그리고 이 결과물을 개발자에게 넘기고 동작하는 콤보박스를 볼 날을 기대하며 뿌듯해 합니다

개발자의 눈에는 이것은... 그냥 콤보박스입니다. 디자이너의 의도는 알 지 못합니다(사실 관심이 없을 수도 있습니다)
디자이너가 준 콤보박스는 말 그대로 목록양식으로 인식할 뿐이죠. 잘 선택되고 잘 동작하면 일단 임수 완수 입니다. 웹 페이지에 select 박스를 올려 놓고 페이지 개발을 마무리 합니다. 다음과 같이요

<- 이것도 이뿌네요. ㅋㅋ 근데 실은 이 것보다 더 밋밋하죠. 폼 컨트롤은

 

. 이제 디자이너와 개발자는 자신의 임무를 모두 완료했으며 동작하는 페이지를 보게 됩니다

페이지를 본 디자이너는 화들짝 놀랍니다. 그리고 개발자에게 따지듯 묻습니다

 

내가 만든 화려하고 미려하고 간지나는 매우 이쁜 콤보박스는 어데로 갔어요???

 

개발자는 더욱 화들짝 놀랍니다. 그리고 조금은 짜증스레 대꾸합니다

 

.... 수고는 하셨는데요. 웹 폼 select 박스는 이미지가 아닌 이상 동작하려면 저렇게 밖에 안 나오거덩요!!!

 

급기야 둘은 서로에 대해 불만을 품게 되며 내/외적으로 헐뜯게 될 수도 있습니다

 

디자이너 왈: , 저런 개발(?)이 다 있어. 기껏 고생해서 매우 이쁘게 만들었더니 저따위로 망쳐놔.. 아놔.. 열받어!!

 

개발자 왈: 이런, 웹도 모르는 디자이너를 봤나. 저런 이미지가 어떻게 동작할 거라 기대하는 거지? 아놔... 삘받어!!

 

상황이 굉장히 의도적으로 심각하죠? ㅎㅎ 많이 과장된 시추에이션 입니다만, 있을 법 하다고 봐 주세요~

 

 

실버라이트는 이에 대한 해답을 내 놓았습니다

기본 웹이야 브라우저에서 인식하는 기본 폼 양식으로 개발을 할 수 밖에 없었지만 실버라이트는 브라우저가 아닌

자체 실행엔진을 가지고 있기에 얼마든지 확장 가능합니다.

 

디자이너가 자신의 스킬을 총 동원해서 개발자에게 매우 낯선 웹 컨트롤을 만들어도 얼마던지 수용 가능하다는 거죠.

실버라이트에도 기본 제공되는 웹 컨트롤이 있지만 이를 모양과 스타일을 변경할 수 있습니다

모든 UI 요소들은 XML기반의 XAML로 표현되며 쉽게 확장하거나 변경할 수 있는 구조입니다

 

아래는 기존 환경에서는 힘들었던 부분이 XAML 이라는 선언적 UI 마크업 언어를 매개로 해서 얼마던지 적용 가능하다는 것을 나타내는 MS 공식 자료의 그림입니다.

왼쪽이 디자이너고 오른쪽이 개발자인데 사이가 좋아졌네요.. 웃는 것이... ㅋ

 

 

 

그리고 다음 그림은 실버라이트로 개발한 스크롤이 있는 텍스트박스 입니다.

옆에 있는 웹 폼에서 제공하는 기본 텍스트 박스랑은 차원이 다르죠

 


스크롤과 텍스트박스의 조합은 물론, 스크롤 위치, 색상 모양 범위 등도 얼마던지 커스터마이징이 가능합니다.

정말 놀랍군요^^; (플래시를 하셨던 분들은 별로 놀랍지 않을 수 있습니다)

 

물론 UI 부분의 이러한 이슈가 개발자인 우리들에게 그리 큰 혜택이나 관심사는 아닐 수 있습니다.

다만 제가 실버라이트를 초기에 접했을 때 느낀 흥미로운 부분이라 소개해 드렸습니다

이외에도 실버라이트의 장점의 굉장히 많습니다. 관심 있으신 분들은 관련 자료를 보시기 바랍니다

 

 

모두 플러그인(Plug In) 기술일 뿐.. 대세는 HTML5?

HTML5 라는 새로운 마크업 기술을 잠깐 살펴 보겠습니다.
현재 웹 마크업 언어로 사용되고 있는 HTML 4.01 버전 입니다.

문서 구조 정의, 하이퍼링크 탐색 등을 지원하는 웹 문서 제작 언어죠.
HTML 은 말 그대로 웹 문서 제작에 초점이 맞춰졌지만 이 웹 문서 즉 웹 페이지 라는 것이 날이 갈수록 더 동적이고 더 상호작용적이고 더 멀티미디어적인 환경이 요구되었습니다.

 

그로 인해 앞서 살펴본 플래시나 자바 애플릿 과 같은 기술이 나온 것이구요. 실버라이트 마찬가지구요

그런데 이 화려한 기술들은 웹 브라우저 자체로 실행 가능한 플랫폼이 아닙니다

 

기본적으로 웹 브라우저는 HTML을 해석하고 Javascript 를 실행하고 CSS로 스타일을 적용하는 역할을 할 뿐입니다.

플래시나 실버라이트 같은 환경이 돌아가기 위해서는 자체 런타임이 존재해야 하고 이 런타임은 웹 브라우저에 별도로 설치되는 플러그 인(Plug In) 형태로 지원하게 됩니다

결과적으로 플러그인 기반 기술들은 웹 브라우저와는 별도의 실행 환경이므로 웹의 표준이 아닌 것이죠

 

HTML5는 이러한 플러그 인 기술을 배제하고 웹 브라우저 자체에 실행 엔진을 탑재해 웹 문서가 아닌 진정한 의미의

웹 응용프로그램이 될 수 있도록 제안된 산업 표준입니다

 

HTML5에는 멀티미디어 표현을 위한 video, audio 태그를 지원하며 양방향 통신을 위한 Web Socket,

백그라운드 프로세스를 위한 Web Workder, 2D, 3D 그래픽 처리를 위한 canvas, svg, WebGL 등이 제공됩니다.

또한 지리기반 데이터 처리를 위한 Geolocation이 지원되며 메신저 알림과 같은 Notification, 객체 이동을 위한
Drag & Drop,
오프라인 웹 응용환경을 위한 Application Cache, 로컬 저장소를 지원하는 WebStorage,
표준 SQL 질의를 수행할 수 있는
Web Database 등이 지원됩니다. 더불어 웹 문서의 구조화, 조직과, 해석의
지능화를 위한 시멘틱 요소와 마이크로데이타 같은
기능 등이 대폭 추가되었습니다

 

아래 HTML5로 제작된 데모 사이트를 보시죠(구글 크롬에서 보세요)

HTML5 기반 이미지 저작 툴: http://mugtug.com/darkroom/

SVG(XML기반의 2차원 벡터 그래픽): http://raphaeljs.com/

WebGL로 제작한 퀘이크 게임 실행 동영상: http://www.youtube.com/watch?v=XhMN0wlITLk

 

그야말로 웹이 더 이상 문서표현이 아니라 응용환경으로써의 면모를 충분히 갖출 수 있는 여건이 마련된 셈이죠.

그것도 일관되고 표준적인 플랫폼으로 말이죠

 

물론 현재 HTML5는 표준안이 완성된 스펙은 아닙니다.

비디오, 오디오 코덱 문제도 남았고 스펙이 아직 진행 중인 것도 꽤 있습니다

HTML5 표준은 현재에도 진행 중이며 2012년 경에 최종 권고안이 나올 예정이라고 하더군요

 

하지만 HTML5 W3C를 주축으로 구글, 애플, 모질라, 오페라, 마이크로소프트 등 세계적 기업들이 합세해 표준안을

마련하고 있는 중입니다. 현재 표준안이 완성된 것은 아니지만 이미 사파리, 크롬, 파이어폭스, 오페라 등 브라우저에서는 HTML5 기능을 지원하고 있습니다. 마이크로소프트 역시 IE 다음버전에서 지원하기로 했구요

 

현재 가장 높은 시장 점유율과 가장 많은 개발자를 보유한 플러그인 기술은 어도비의 플래시입니다

간혹 HTML5가 플래시를 대체할 것이라는 예측도 나오고 있습니다. 물론 그렇지 않다.. 라는 의견도 있구요.

재미있는 것은 어도비에서 자사의 웹 문서 저작 도구인 드림위버 다음버전에 HTML5 를 지원하겠다고 한 것입니다.

HTML5는 플래시와 대적할 수 없으며 그런 생각도 없고 각각의 영역을 공존하자는 어도비의 의지가 아닐까 합니다.

 

그러나 아이폰 대박으로 플래시가 적지 않은 타격을 받고 있죠

애플의 스티브잡스는 공공연히 플래시를 비난하고 있으며 HTML5에 굉장히 힘을 실어 주고 있죠

애플에 따르면 다음버전 아이폰, 아이패드 등에서는 플래시 지원을 없을 거라고 하더군요

그리고 국내에서도 NHN에서 자사의 포털 서비스인 네이버에서 단계적으로 플래시를 폐지하고 HTML5로 가겠다고 하여 국내 플래시 개발자들을 화들짝 놀라게 한 적이 있죠. 구글의 유투브는 이미 HTML5 기반 동영상 서비스를
선보였구요

 

예기를 하다 보니 HTML5 신봉자 같이 되어버렸네요 네. 요즘 공부는 하고 있습니다만, 신봉자? 는 아닙니다

HTML5에 대해 제가 드리고 싶은 예기는 실버라이트와의 관계입니다

 

 

마이크로소프트, HTML5 전폭 지원?

얼마 전 마이크로소프트의 윈도우 사업부 담당자는 다음과 같은 말을 전했습니다

 

스티브 발머가 언급 한 마이크로소프트는 클라우드 컴퓨팅에 올인 중이다와 동일 선상에서

현재 우리는 Html5에 올인 중이다

http://seattletimes.nwsource.com/html/businesstechnology/2011362220_microsoftmix17.html

 

그리고 자사의 다음버전 브라우저인 IE9 에서는 HTML 를 전폭 지원한다고 하는군요

 

그런데 의아한 것은 HTML5와 실버라이트와의 관계입니다

HTML5가 기존 플러그인 기술을 대체하는데 목적이 있다면 실버라이트를 개발한 MS 입장에서는 달가울 리 없겠죠.

 

MS는 실버라이트에 아주 많은 공을 들여 왔습니다. 실버라이트의 원활한 보급을 위해 생전 하지 않던 그래픽
저작 툴도
만들었습니다. Microsoft Expression Design, Blend 라는 제품은 일러스트나 플래시 저작 툴과 유사한
기능을 제공하는,
MS가 자체적으로 개발한 그래픽 툴입니다. 벌써 버전 3까지 나왔습니다. 그리고 꽤 쓸 만 합니다

 

플래시가 독식하는 RIA 시장을 나눠먹기 위해 야심 차게 던진 카드가 바로 실버라이트이죠

그런데 실버라이트와는 살짝 어긋날 것만 같은 HTML5에 올인한다? 뭔가 이상하지 않나요?

카페 회원님들은 어떻게 생각하시나요?

 

 

MS RIA 시장만 보는 것이 아니다

사실 MS RIA 시장을 위해 많은 노력과 투자를 해 왔고 지금도 하고 있는 것이 사실이지만 MS 자체는 RIA 만을
위한
회사는 아닐 겁니다. MS OS 도 만들고 개발툴도 만들고 개발 언어도 만듭니다. 그리고 게임시장에도 진출했죠. 그리고 웹 브라우저 시장도 많이 짭짤하죠. 그리고 애저와 같은 클라우드 사업도 전개하고 있습니다

 

실버라이트는 RIA 시장을 위한 MS의 도전이기는 하지만 전부는 아니라는 뜻입니다

실버라이트가 세상에 선 보인지 수 년이 지났지만 시장 점유율에서는 플래시에 한참 못 미치고 있습니다

 

그리고 RIA 특징 상 디자이너의 흡수가 관건인데 MS는 디자이너와 별로 친분(?)이 없죠

디자인 저작 툴도 만드는 등 노력이 가상하기는 하나 기존 플래시 디자이너나 일러스트, 3D Max 디자이너들이
굳이
MS로 갈아 탈 이유를 못 느꼈을 테니깐요

 

예기가 살짝 빗나갔네요.

어쨌던 MS는 실버라이트 사업만 보자면 안 그래도 플래시에 한참 밀려 있는데 HTML5까지 나오니 달가울 리
없을 겁니다.
그러나 MS 는 웹 브라우저의 시장 점유율도 신경 써야 합니다. 그리고 모바일 플랫폼도 당연히
신경을 써야죠.
그리고 트랜드도 좀 따라 줘야죠. 산업 표준이라는데 말이죠

 

만일 MS IE에는 HTML5를 지원할 생각이 없다. 우리에겐 실버라이트가 있으니까하면 어떻게 될까요?

안 봐도 훤하죠.

 

MS가 실버라이트와 HTML5 를 경쟁대상으로 두지 않는 것은 분명하며 그렇다고 실버라이트를 배제하지도 않습니다.

MS가 다음 버전 모바일 OS인 윈도우 모바일 7 에서는 앱 개발시 실버라이트로 개발 할 수 있습니다.

심지어 7 개발 환경은 실버라이트, XNA 둘 중 하나만 선택할 수 있다고 합니다

(실버라이트 개발자들은 굉장히 쉽게 윈도우 모바일 개발자로 전향할 수 있겠네요)

 

그리고 실버라이트의 최신 버전은 4.0 입니다. 굉장히 빠른 속도로 버전 업을 하고 있습니다

또한 국내에서도 실버라이트 관련 컨퍼런스가 심심찮게 열립니다.

(들리는 설에 의하면 윈도우모바일 7에서도 플래시를 지원하지 않겠다고 하네요. .. 뭔가 MS의 숨은 노력(?)

보이지 않습니까? ㅎㅎ)

 

 

글을 마치며

지금까지 작성한 글은 순수히 제가 생각나는 대로 그리고 적고 싶은 대로 쭈~욱 써 내려간 것입니다

보통 기술 글 하나 적을 땐 검증도 많이 해 보고 신경도 많이 쓰고 하는데요.
이 글은 그런 과정 없이 적어 내려갔습니다

 

글을 보시다가 간혹 내용이 틀린다거나 동의할 수 없는 부분이 있을 수 있습니다

가벼운 의미로 쉬어가고자 적은 글이니 재미있게 읽어 주시면 감사하겠습니다

 

 

금요일이네요

한 주 마무리 잘 하시고 좋은 주말 되세요 ~

∵Commented by 마과장 at 2010-08-20 오전 11:30:24  
RIA 트랜드에 대해 개념잡기에 좋은 글이네요.
잘 읽고 갑니다~
∵Commented by 박종명 at 2010-08-20 오후 1:08:45  
도움이 되신다니, 저도 좋네요 ^
이름
비밀번호
홈페이지
EQ <- 왼쪽의 문자를 오른쪽 박스에 똑같이 입력해 주세요