(9) Razor 강좌 - Helper 소개(이미지, 비디오)
안녕하세요. 김대우 입니다.
코난이와 함께하는 Razor & WebMatrix 시리즈 강좌리스트
(1) WebMatrix와 Razor! 이제 시작합니다.
(2) WebMatrix 설치부터 Hello World까지
(9) Razor 강좌 - Helper 소개(이미지, 비디오) - (지금 보고 계신 내용)
(10) Razor 강좌 - 디버깅
(11) Razor 강좌 - 캐시 처리
지난 시간에는 “(8) Razor 강좌 - 데이터베이스 처리” 강좌를 진행 했습니다.
이번 시간에는 바로 이어서, “ (9) Razor 강좌 - Helper 소개(이미지, 비디오)” 강좌를 진행 하도록 하겠습니다.
Razor와 WebMatrix에서 Helper는 무엇인가요?
넵. 지난 강좌에서도 몇 번 소개해 드렸습니다만, Helper는 웹에서 사용되는 여러 기능들을 손쉽게 이용 가능하도록 구조화시킨 모듈입니다. 즉, 다양하고, 복잡한 웹의 기능을 개발자가 쉽게 이용 가능하도록 돕는 부품이지요.
그렇다면, Helper는 어떤 종류가 있나요?
Razor는 이러한 Helper를 기본적으로 포함하고 있으며, 사용자가 직접 만들어 사용할 수 있도록 역시 돕고 있습니다. 기본적으로 현재 WebMatrix Beta1에 포함된 Helper들의 리스트를 보여 드리자면 아래와 같아요.
WebMatrix Helpers 종류 - 영문
위의 링크를 통해 대략 이런 종류의 다양한 Helper들이 Beta1에서 기본 제공되고 있구나~ 정도만 보셔도 좋을 것 같습니다. Beta1에서 이 정도로 많고 앞으로 공개 예정인 녀석들 등도 많이 있으니 정식 버전에서는 엄청나겠지요? ^_^ 기대됩니다.
이번 강좌에서는 이러한 Helper들 중에서 종종 사용 하시게 될 Image처리, Video 처리, 두개 정도의 기본 Helper를 상세히 살펴봐서 어떻게 Helper를 이용하는지, 또한 Helper가 얼마나 우리의 웹 개발 닭질을 줄여 줄지 기대해보는 시간을 가지도록 하겠습니다.
참조 : 사용자가 직접 Helper를 만들고 사용하는 방법 – 영문
Image 처리 Helper – WebImage
소개해 드릴 녀석은 WebImage Helper 입니다. 이 녀석으로 어떤걸 할 수 있냐고요?
- 웹 서버 경로의 이미지 로드
- 사용자에 의해 업로드 된 이미지 로드
- 이미지 파일을 웹 서버 특정 경로에 저장
- 이미지에 워터마크(텍스트 또는 이미지) 추가 표시
- 이미지 Flip이나 회전
- 이미지 크기조절(Resize를 이용한 섬네일 표시)
와 같은 웹 개발에서 종종 사용하게 될 기능을 제공합니다.
그럼 요 기능들 중에서 섬네일로 사용하기 위한 크기조절(Resize) 처리와 텍스트 워터마크 기능을 살펴 보도록 하겠습니다.
아! 제 강좌는 수많은, 모든 Helper들의 기능이나 사용 예를 보여드리는 게 아니에요. 제가 보여드릴 소개 샘플들을 봐 보시면서 Helper란 이런 것이고, 이런 목적으로 Helper를 사용하고, 이렇게 Helper 이용 가능하구나 부분에 초점을 맞추셔야, 앞으로도 쏟아져 나오게 될 수많은 Helper 들 중에 원하시는 Helper를 직접 찾아 사용 가능하실 겁니다. 막상 이용 방법 설명이라고 해 봐야 코드 한 줄 정도에 파라미터 값들 넣는 게 다네요.(쿨럭) 워낙 쉬워서 사용 방법 설명이라고 하기도 좀 거시기 합니다. ^_^;;; 그럼 시작해 볼게요~
WebImage – 섬네일 이미지 표시(Resize)
예제 실행을 위해 WebMatrix로 “WebImage” 폴더를 만들고, 그 하위에 “images”, 또 그 하위에 “tumbs” 폴더를 미리 생성합니다.
@{
WebImage photo = null;
var newFileName = "";
var imagePath = "";
var imageThumbPath = "";
if(IsPost){
photo = WebImage.GetImageFromRequest();
if(photo != null){
newFileName = Guid.NewGuid().ToString() + "_" +
Path.GetFileName(photo.FileName);
imagePath = @"images\" + newFileName;
photo.Save(@"~\WebImage\" + imagePath);
imageThumbPath = @"images\thumbs\" + newFileName;
photo.Resize(
width: 60,
height: 60,
preserveAspectRatio: true,
preventEnlarge: true
);
photo.Save(@"~\WebImage\" + imageThumbPath);
}
}
}
<!DOCTYPE html>
<html>
<head>
<title>이미지 리사이징</title>
</head>
<body>
<h1>섬네일 이미지 자동 추출</h1>
<form action="" method="post" enctype="multipart/form-data">
<fieldset>
<legend> 섬네일 이미지 생성 </legend>
<label for="Image">이미지</label>
<input type="file" name="Image" />
<br/>
<input type="submit" value="Submit" />
</fieldset>
</form>
@if(imagePath != ""){
<div class="result">
<img src="@imageThumbPath" alt="Thumbnail image" />
<a href="@Html.AttributeEncode(imagePath" target="_Self">
실제이미지 보기
</a>
</div>
}
</body>
</html>
WebImage 폴더에 ResizeImage.cshtml 파일로 저장하시고 실행하세요.
아무 사진이나 업로드를 하시면 됩니다.코드를 통해 처리되는 내용을 설명 드리면,
- 이미지를 form으로 업로드 받고
- WebImage 개체인 photo에 GetImageFromRequest로 이미지가 로드 됩니다.
- Save를 통해 업로드 된 이미지를 저장하고,
- 이어서 WebImage.Resize로 이미지 크기를 줄여
- Thumbnail 이미지를 한번 더 Save하게 되지요.
WebImage Helper - 이미지에 워터마크(Watermark) 표시
다음으로 워터마크(Watermark) 처리를 확인해 보도록 할게요. 이미지 소스에 대한 보호, 불법적인 이미지 도용 방지 등의 목적으로 보통 이 워터마크 방식을 이용하게 됩니다. 예제를 보면서 설명 드리도록 하겠습니다.
@{
var imagePath= "";
WebImage photo = new WebImage("images/photo.jpg");
if(photo != null){
imagePath = "images/photo.jpg";
photo.AddTextWatermark("Photo by https://www.sqler.com - 워터마크", fontColor:"Yellow", fontFamily:"Arial");
photo.Save(imagePath);
}
}
<!DOCTYPE html>
<html>
<head>
<title> 워터마크 이미지 처리 </title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
</head>
<body>
<h1>이미지에 워터마크를 텍스트를 추가합니다.</h1>
@if(imagePath != ""){
<div class="result">
<img src="@imagePath" alt="Image" />
</div>
}
</body>
</html>
WebImages 폴더 하위에 watermark.cshtml로 저장하세요. 실행을 위해선 WebImages 폴더 아래 images 폴더에 jpg 파일을 두세요. 저는 위의코드처럼 photo.jpg 파일로 두었습니다. 이 파일에 대해 워터마크를 찍는 처리 입니다.
코드 진행에 대해선 설명이 많이 필요하지 않으실 듯 합니다. 이렇게 “WebImage.AddTextWatermark”를 호출해 텍스트기반 워터마크 추가가 가능합니다. 또한, “WebImage.AddImagesWatermark”를 이용하면 이미지를 이용해 워터마크 처리가 가능해 집니다. 이렇게, Razor는 즉각적인 이미지 처리가 가능한 Helper등을 통해, 손쉬운 이미지 기반 처리를 가능하게 개발자 편의성을 제공하고 있어요. - 생유생유~
실행 결과는 아래 처럼 보이실 겁니다.
아래쪽에 이렇게 아래쪽에 Watermark 텍스트가 찍히실 거에요. (오늘도 자식 자랑 성공~ 아자~ 텨텨텨~)
이렇게 간단히 이미지 Resize, 워터마크 처리에 대해서 알아 보았습니다.
다음으로는 웹에서 실행 가능한 Video 처리에 대해서 소개해 드리도록 하겠습니다.
WebMatrix & Razor에서 Video helper로 Flash, Silverlight, WMV 비디오나 어플리케이션 실행
느끼시는 것처럼, Razor에서는 Adboe Flash 비디오와 WMV 비디오 파일(스트리밍도) 플레이도 가능하며 Microsoft Silverlight파일인 xap 파일도 처리가 가능합니다. 이번 소개에서는 간단히 Silverlight를 실행해 보도록 하겠습니다..
<!DOCTYPE html>
<html>
<head>
<title>Silverlight Video 실행</title>
</head>
<body>
@Video.Silverlight(
path: " https://www.sqler.com/lab/sl_install/publish/ClientBin/SLTest01.xap" ,
width: "300",
height: "200",
bgColor: "Black",
autoUpgrade: true
)
<p> Silverlight 실행 </p>
</body>
</html>
웹사이트 상위에 Video 폴더를 만들고, 여기에 Silverlight.cshtml 파일로 저장 했습니다.
정확히 Flash나 Silverlight, 미디어 플레이어와 같은 처리에 사용되는 조금은 복잡한 HTML인 <OBJECT> 태그를 자동으로 생성해주는 처리라고 보시면 됩니다. 위와 같이 Video를 실행하면 실버라이트를 HTML에서 수행토록 하는 아래 코드가 생성되지요.
<object width="300" height="200" type="application/x-silverlight-2" data="data:application/x-silverlight-2," >
<param name="source" value=" https://www.sqler.com/lab/sl_install/publish/ClientBin/SLTest01.xap " />
<param name="background" value="Black" />
<a href="https://go.microsoft.com/fwlink/?LinkID=149156" style="text-decoration:none">
<img src="https://go.microsoft.com/fwlink?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style:none"/>
</a>
</object>
예상대로(?)시죠? 복잡한 HTML 코드 등을 자동으로 캡슐화해 생성해 줍니다. - 개발자는 여러 종속성이나 복잡성 등을 고민할 필요 없이 개발 작업간 코드를 표준화, 캡슐화 키셔서 손쉽게 개발에 적용은 가능할 것 같아요.
video helper의 경우 Adobe Flash는 swf 파일, Silverlight은 xap 파일만 처리가 가능합니다. 아울러, 꼭 Video 플레이어일 필요는 없습니다. swf파일이나 xap 파일이면(어플리케이션도) 됩니다. WMV는 자동으로 미디어 플레이어가 붙게 됩니다.
자~ 이렇게 해서 Helper들에 대해서 알아 보았습니다. Helper에 대해서 정리해 보자면,
- Helper는 웹에서 사용되는 여러 기능들을 손쉽게 이용 가능하도록 구조화시킨 모듈입니다.
- 다양하고, 복잡한 웹의 기능을 개발자가 쉽게 이용 가능하도록 돕는 부품이지요.
이번 강좌를 통해 Image 처리 등을 보시고 아마 그렇게 느끼셨을 거에요. Razor님은 분명 웹 개발자의 편의성을 위해 신경 좀 써 주신 듯 하네요. ^_^ 앞으로 WebMatrix와 Razor가 발전하면서 계속 다양하고 훌륭한 Helper들이 많이 나오게 될 예정이라고 합니다. 이번 강좌 내용으로 다양한 Helper를 사용하는 방법이 도움 되셨길 바랍니다.
그럼 다음 강좌인 (10) Razor 강좌 – 디버깅 에서 뵙도록 하겠습니다. 감사합니다. ^_^
참고자료 :
(1) WebMatrix와 Razor! 이제 시작합니다.
(2) WebMatrix 설치부터 Hello World까지
(3) Razor 강좌 - 기본 구문 및 주석 처리
(4) Razor 강좌 - 코드 블록과 POST 처리
(5) Razor 강좌 - 재사용 가능한 코드 생성
(6) Razor 강좌 - 레이아웃 페이지 구조 처리
(7) Razor 강좌 - 파일처리, 파일 업로드
(8) Razor 강좌 - 데이터베이스 처리
[동영상 강좌] (1) WebMatrix 첫 실행 & Hello World까지 달려요~
[동영상 강좌] (2) WebMatrix 5분 리뷰~
[동영상 강좌] (3) Razor 강좌 - 기본 구문 및 주석 처리
[동영상 강좌] (4) Razor 강좌 - 코드 블록과 POST 처리
사용자가 직접 Helper를 만들고 사용하는 방법