diff --git a/widgets/newest_images/skins/cloud/css/normal.css b/widgets/newest_images/skins/cloud/css/normal.css
new file mode 100644
index 000000000..03e964fc1
--- /dev/null
+++ b/widgets/newest_images/skins/cloud/css/normal.css
@@ -0,0 +1,41 @@
+.imgcloudoutline { padding-bottom:5px; overflow:hidden; position:relative; text-align:center;}
+.imgcloudoutline h2 { text-align:left; font-size:1em; display:block; height:21px; padding:9px 0 0 9px; margin-bottom:5px; color:#000000; background:url(../images/normal/lineNotice.gif) no-repeat left bottom;}
+
+.imgcloudoutline { padding-bottom:5px; overflow:hidden; position:relative;}
+.imgcloudoutline .more { position:absolute; top:12px; right:11px; color:#000000; font:.8em Tahoma;}
+.imgcloudoutline a.more { text-decoration:none;} 
+.imgcloudoutline a.more:hover { text-decoration:underline;} 
+
+	.imgcloudoutline table {  
+		margin: 0px auto;
+		border:1px solid #ddd;
+	}
+	
+	.imgcloudoutline .imgcloud {  
+		border:1px solid #ddd;
+		padding: 1px;
+		overflow: hidden;
+	}
+
+	.imgcloudoutline .imgcloud:hover {  
+		border: 2px solid #7899AF;
+		padding: 0px;
+		overflow: hidden;
+	}
+
+	.imgcloudoutline .imgcloudbig {  
+		border:1px solid #ddd;
+		padding: 1px;
+		overflow: hidden;
+	}
+	
+	.imgcloudoutline .imgcloudbig:hover {  
+		border: 2px solid #7899AF;
+		padding: 0px;
+		overflow: hidden;
+	}
+	
+	.imgcloudoutline .cloudimg {  
+		border: 0px;
+		cursor: pointer;
+	}
\ No newline at end of file
diff --git a/widgets/newest_images/skins/cloud/images/blank.gif b/widgets/newest_images/skins/cloud/images/blank.gif
new file mode 100644
index 000000000..35d42e808
Binary files /dev/null and b/widgets/newest_images/skins/cloud/images/blank.gif differ
diff --git a/widgets/newest_images/skins/cloud/images/normal/bulletD0.gif b/widgets/newest_images/skins/cloud/images/normal/bulletD0.gif
new file mode 100644
index 000000000..e8e17d4c6
Binary files /dev/null and b/widgets/newest_images/skins/cloud/images/normal/bulletD0.gif differ
diff --git a/widgets/newest_images/skins/cloud/images/normal/lineNotice.gif b/widgets/newest_images/skins/cloud/images/normal/lineNotice.gif
new file mode 100644
index 000000000..dbf2c8220
Binary files /dev/null and b/widgets/newest_images/skins/cloud/images/normal/lineNotice.gif differ
diff --git a/widgets/newest_images/skins/cloud/list.html b/widgets/newest_images/skins/cloud/list.html
new file mode 100644
index 000000000..b96c75573
--- /dev/null
+++ b/widgets/newest_images/skins/cloud/list.html
@@ -0,0 +1,86 @@
+<!-- 설정된 컬러셋의 종류에 따라서 css파일을 import 합니다 -->
+
+<!--@if($colorset=="normal"||!$colorset)-->
+    <!--%import("css/normal.css")-->
+<!--@end-->
+
+<div class="imgcloudoutline">
+    <!--@if($widget_info->title)-->
+        <h2>{$widget_info->title}</h2>
+    <!--@end-->
+
+    <!--@if($widget_info->module_name)-->
+        <a href="{getUrl('','mid',$widget_info->module_name)}" class="more">more</a>
+    <!--@end-->
+
+    <!--@if(count($widget_info->document_list))-->
+    {@ shuffle($widget_info->document_list)}
+
+    <!--@for($i = 0; $i < 14; $i++)-->
+        {@
+            $width = $widget_info->thumbnail_width ? $widget_info->thumbnail_width : "40";
+            $height = $widget_info->thumbnail_height ? $widget_info->thumbnail_height : "40";
+            $image[$i] = ($widget_info->document_list[$i]->document_srl) ? $widget_info->document_list[$i]->getThumbnail($width*2,$height*2,$widget_info->thumbnail_type) : $tpl_path."/images/blank.gif";
+            $url[$i] = ($widget_info->document_list[$i]->document_srl) ? "href=\"".getUrl('','document_srl',$widget_info->document_list[$i]->document_srl)."\"" : "";
+        }
+    <!--@end-->
+	<table cellpadding="0" cellspacing="0" border="0">
+		<tbody>
+		<tr valign="middle">
+			<td colspan="2" rowspan="2">
+				<div class="imgcloudbig"><a {$url[0]}><img align="absmiddle" class="cloudimg" src="{$image[0]}" width="{$width*2+4}" height="{$height*2+4}" /></a></div>
+			</td>
+			<td>
+				<div class="imgcloud"><a {$url[1]}><img align="absmiddle" class="cloudimg" src="{$image[1]}" width="{$width}" height="{$height}" /></a></div>
+			</td>
+			<td>
+				<div class="imgcloud"><a {$url[2]}><img align="absmiddle" class="cloudimg" src="{$image[2]}" width="{$width}" height="{$height}" /></a></div>
+			</td>
+			<td>
+				<div class="imgcloud"><a {$url[3]}><img align="absmiddle" class="cloudimg" src="{$image[3]}" width="{$width}" height="{$height}" /></a></div>
+			</td>
+		</tr>
+
+		<tr>
+			<td>
+				<div class="imgcloud"><a {$url[4]}><img align="absmiddle" class="cloudimg" src="{$image[4]}" width="{$width}" height="{$height}" /></a></div>
+			</td>
+			<td>
+				<div class="imgcloud"><a {$url[5]}><img align="absmiddle" class="cloudimg" src="{$image[5]}" width="{$width}" height="{$height}" /></a></div>
+			</td>
+			<td>
+				<div class="imgcloud"><a {$url[6]}><img align="absmiddle" class="cloudimg" src="{$image[6]}" width="{$width}" height="{$height}" /></a></div>
+			</td>
+		</tr>
+
+		<tr valign="middle">
+			<td>
+				<div class="imgcloud"><a {$url[7]}><img align="absmiddle" class="cloudimg" src="{$image[7]}" width="{$width}" height="{$height}" /></a></div>
+			</td>
+			<td>
+				<div class="imgcloud"><a {$url[8]}><img align="absmiddle" class="cloudimg" src="{$image[8]}" width="{$width}" height="{$height}" /></a></div>
+			</td>
+			<td>
+				<div class="imgcloud"><a {$url[9]}><img align="absmiddle" class="cloudimg" src="{$image[9]}" width="{$width}" height="{$height}" /></a></div>
+			</td>
+			<td colspan="2" rowspan="2">
+				<div class="imgcloudbig"><a {$url[10]}><img align="absmiddle" class="cloudimg" src="{$image[10]}" width="{$width*2+4}" height="{$height*2+4}" /></a></div>
+			</td>
+		</tr>
+
+		<tr>
+			<td>
+				<div class="imgcloud"><a {$url[11]}><img align="absmiddle" class="cloudimg" src="{$image[11]}" width="{$width}" height="{$height}" /></a></div>
+			</td>
+			<td>
+				<div class="imgcloud"><a {$url[12]}><img align="absmiddle" class="cloudimg" src="{$image[12]}" width="{$width}" height="{$height}" /></a></div>
+			</td>
+			<td>
+				<div class="imgcloud"><a {$url[13]}><img align="absmiddle" class="cloudimg" src="{$image[13]}" width="{$width}" height="{$height}" /></a></div>
+			</td>
+		</tr>
+
+		</tbody>
+	</table>
+    <!--@end-->
+</div>
diff --git a/widgets/newest_images/skins/cloud/skin.xml b/widgets/newest_images/skins/cloud/skin.xml
new file mode 100644
index 000000000..390d65f4d
--- /dev/null
+++ b/widgets/newest_images/skins/cloud/skin.xml
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<skin>
+  <title xml:lang="ko">이미지 클라우드</title>
+  <maker email_address="simulz@simulz.com" link="http://php.simulz.com" date="2007. 9. 28">
+    <name xml:lang="ko">Simulz</name>
+    <description xml:lang="ko">올블로그 이미지 클라우드</description>
+  </maker>
+  <colorset>
+    <color name="normal">
+      <title xml:lang="ko">기본 컬러</title>
+      <title xml:lang="jp">デフォルトカラー</title>
+      <title xml:lang="zh-CN">默认颜色</title>
+      <title xml:lang="en">Default Color</title>
+    </color>
+  </colorset>
+</skin>
diff --git a/widgets/newest_images/skins/cloud_preview/css/normal.css b/widgets/newest_images/skins/cloud_preview/css/normal.css
new file mode 100644
index 000000000..409773177
--- /dev/null
+++ b/widgets/newest_images/skins/cloud_preview/css/normal.css
@@ -0,0 +1,41 @@
+.imgcloudoutline_preview { padding-bottom:5px; overflow:hidden; position:relative; text-align:center;}
+.imgcloudoutline_preview h2 { text-align:left; font-size:1em; display:block; height:21px; padding:9px 0 0 9px; margin-bottom:5px; color:#000000; background:url(../images/normal/lineNotice.gif) no-repeat left bottom;}
+
+.imgcloudoutline_preview { padding-bottom:5px; overflow:hidden; position:relative;}
+.imgcloudoutline_preview .more { position:absolute; top:12px; right:11px; color:#000000; font:.8em Tahoma;}
+.imgcloudoutline_preview a.more { text-decoration:none;} 
+.imgcloudoutline_preview a.more:hover { text-decoration:underline;} 
+
+	.imgcloudoutline_preview table {  
+		margin: 0px auto;
+		border:1px solid #ddd;
+	}
+	
+	.imgcloudoutline_preview .imgcloud {  
+		border:1px solid #ddd;
+		padding: 1px;
+		overflow: hidden;
+	}
+
+	.imgcloudoutline_preview .imgcloud:hover {  
+		border: 2px solid #7899AF;
+		padding: 0px;
+		overflow: hidden;
+	}
+
+	.imgcloudoutline_preview .imgcloudbig {  
+		border:1px solid #ddd;
+		padding: 1px;
+		overflow: hidden;
+	}
+	
+	.imgcloudoutline_preview .imgcloudbig:hover {  
+		border: 2px solid #7899AF;
+		padding: 0px;
+		overflow: hidden;
+	}
+	
+	.imgcloudoutline_preview .cloudimg {  
+		border: 0px;
+		cursor: pointer;
+	}
\ No newline at end of file
diff --git a/widgets/newest_images/skins/cloud_preview/images/blank.gif b/widgets/newest_images/skins/cloud_preview/images/blank.gif
new file mode 100644
index 000000000..35d42e808
Binary files /dev/null and b/widgets/newest_images/skins/cloud_preview/images/blank.gif differ
diff --git a/widgets/newest_images/skins/cloud_preview/images/normal/bulletD0.gif b/widgets/newest_images/skins/cloud_preview/images/normal/bulletD0.gif
new file mode 100644
index 000000000..e8e17d4c6
Binary files /dev/null and b/widgets/newest_images/skins/cloud_preview/images/normal/bulletD0.gif differ
diff --git a/widgets/newest_images/skins/cloud_preview/images/normal/lineNotice.gif b/widgets/newest_images/skins/cloud_preview/images/normal/lineNotice.gif
new file mode 100644
index 000000000..dbf2c8220
Binary files /dev/null and b/widgets/newest_images/skins/cloud_preview/images/normal/lineNotice.gif differ
diff --git a/widgets/newest_images/skins/cloud_preview/list.html b/widgets/newest_images/skins/cloud_preview/list.html
new file mode 100644
index 000000000..e82f6e303
--- /dev/null
+++ b/widgets/newest_images/skins/cloud_preview/list.html
@@ -0,0 +1,87 @@
+<!-- 설정된 컬러셋의 종류에 따라서 css파일을 import 합니다 -->
+
+<!--@if($colorset=="normal"||!$colorset)-->
+    <!--%import("css/normal.css")-->
+<!--@end-->
+
+<div class="imgcloudoutline_preview">
+    <!--@if($widget_info->title)-->
+        <h2>{$widget_info->title}</h2>
+    <!--@end-->
+
+    <!--@if($widget_info->module_name)-->
+        <a href="{getUrl('','mid',$widget_info->module_name)}" class="more">more</a>
+    <!--@end-->
+
+    <!--@if(count($widget_info->document_list))-->
+    {@ shuffle($widget_info->document_list)}
+
+    <!--@for($i = 0; $i < 14; $i++)-->
+        {@
+            $width = $widget_info->thumbnail_width ? $widget_info->thumbnail_width : "40";
+            $height = $widget_info->thumbnail_height ? $widget_info->thumbnail_height : "40";
+            $ratio = $width / $height;
+
+            $image[$i] = ($widget_info->document_list[$i]->document_srl) ? $widget_info->document_list[$i]->getThumbnail(200*$ratio,200,$widget_info->thumbnail_type) : $tpl_path."/images/blank.gif";
+        }
+    <!--@end-->
+	<table cellpadding="0" cellspacing="0" border="0">
+		<tbody>
+		<tr valign="middle">
+			<td colspan="2" rowspan="2">
+				<div class="imgcloudbig"><img align="absmiddle" class="cloudimg" src="{$image[0]}" width="{$width*2+4}" height="{$height*2+4}" /></a></div>
+			</td>
+			<td>
+				<div class="imgcloud"><img align="absmiddle" class="cloudimg" src="{$image[1]}" width="{$width}" height="{$height}" /></div>
+			</td>
+			<td>
+				<div class="imgcloud"><img align="absmiddle" class="cloudimg" src="{$image[2]}" width="{$width}" height="{$height}" /></div>
+			</td>
+			<td>
+				<div class="imgcloud"><img align="absmiddle" class="cloudimg" src="{$image[3]}" width="{$width}" height="{$height}" /></div>
+			</td>
+		</tr>
+
+		<tr>
+			<td>
+				<div class="imgcloud"><img align="absmiddle" class="cloudimg" src="{$image[4]}" width="{$width}" height="{$height}" /></div>
+			</td>
+			<td>
+				<div class="imgcloud"><img align="absmiddle" class="cloudimg" src="{$image[5]}" width="{$width}" height="{$height}" /></div>
+			</td>
+			<td>
+				<div class="imgcloud"><img align="absmiddle" class="cloudimg" src="{$image[6]}" width="{$width}" height="{$height}" /></div>
+			</td>
+		</tr>
+
+		<tr valign="middle">
+			<td>
+				<div class="imgcloud"><img align="absmiddle" class="cloudimg" src="{$image[7]}" width="{$width}" height="{$height}" /></div>
+			</td>
+			<td>
+				<div class="imgcloud"><img align="absmiddle" class="cloudimg" src="{$image[8]}" width="{$width}" height="{$height}" /></div>
+			</td>
+			<td>
+				<div class="imgcloud"><img align="absmiddle" class="cloudimg" src="{$image[9]}" width="{$width}" height="{$height}" /></div>
+			</td>
+			<td colspan="2" rowspan="2">
+				<div class="imgcloudbig"><img align="absmiddle" class="cloudimg" src="{$image[10]}" width="{$width*2+4}" height="{$height*2+4}" /></div>
+			</td>
+		</tr>
+
+		<tr>
+			<td>
+				<div class="imgcloud"><img align="absmiddle" class="cloudimg" src="{$image[11]}" width="{$width}" height="{$height}" /></div>
+			</td>
+			<td>
+				<div class="imgcloud"><img align="absmiddle" class="cloudimg" src="{$image[12]}" width="{$width}" height="{$height}" /></div>
+			</td>
+			<td>
+				<div class="imgcloud"><img align="absmiddle" class="cloudimg" src="{$image[13]}" width="{$width}" height="{$height}" /></div>
+			</td>
+		</tr>
+
+		</tbody>
+	</table>
+    <!--@end-->
+</div>
diff --git a/widgets/newest_images/skins/cloud_preview/skin.xml b/widgets/newest_images/skins/cloud_preview/skin.xml
new file mode 100644
index 000000000..1d895f046
--- /dev/null
+++ b/widgets/newest_images/skins/cloud_preview/skin.xml
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<skin>
+  <title xml:lang="ko">이미지 클라우드 (팝업)</title>
+  <maker email_address="simulz@simulz.com" link="http://php.simulz.com" date="2007. 9. 28">
+    <name xml:lang="ko">Simulz</name>
+    <description xml:lang="ko">올블로그 이미지 클라우드 (미리보기 팝업 창을 띄웁니다)</description>
+  </maker>
+  <colorset>
+    <color name="normal">
+      <title xml:lang="ko">기본 컬러</title>
+      <title xml:lang="jp">デフォルトカラー</title>
+      <title xml:lang="zh-CN">默认颜色</title>
+      <title xml:lang="en">Default Color</title>
+    </color>
+  </colorset>
+</skin>