diff --git a/projects/ucap-webmessenger-app/src/app/pages/template/components/template.page.component.html b/projects/ucap-webmessenger-app/src/app/pages/template/components/template.page.component.html
index cbefe8a2..37fac5cd 100644
--- a/projects/ucap-webmessenger-app/src/app/pages/template/components/template.page.component.html
+++ b/projects/ucap-webmessenger-app/src/app/pages/template/components/template.page.component.html
@@ -1,11 +1,21 @@
 <div>
   <h3>User-list-item</h3>
   <div>
-    <ucap-profile-user-list-item [userInfo]="userInfo" [profileImageRoot]="profileImageRoot" [presence]='presence'>
+    <ucap-profile-user-list-item
+      [userInfo]="userInfo"
+      [profileImageRoot]="profileImageRoot"
+      [presence]="presence"
+    ></ucap-profile-user-list-item>
+    <ucap-profile-user-list-item
+      [userInfo]="userInfo"
+      [profileImageRoot]="profileImageRoot"
+    >
     </ucap-profile-user-list-item>
-    <ucap-profile-user-list-item [userInfo]="userInfo" [profileImageRoot]="profileImageRoot">
-    </ucap-profile-user-list-item>
-    <ucap-profile-user-list-item [userInfo]="userInfo" [profileImageRoot]="profileImageRoot" [checkable]='true'>
+    <ucap-profile-user-list-item
+      [userInfo]="userInfo"
+      [profileImageRoot]="profileImageRoot"
+      [checkable]="true"
+    >
     </ucap-profile-user-list-item>
   </div>
 </div>
diff --git a/projects/ucap-webmessenger-app/src/assets/scss/global/_common.scss b/projects/ucap-webmessenger-app/src/assets/scss/global/_common.scss
new file mode 100644
index 00000000..561bdc5d
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/assets/scss/global/_common.scss
@@ -0,0 +1,44 @@
+@charset 'utf-8';
+
+$listH-row3: 90px;
+$checkbox-size: 16px;
+$presence-size: 10px;
+$thumbnail-msize: 50px !global;
+$bg-list-hover: #efefef !global;
+
+@mixin ellipsis($row) {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  @if $row == 1 {
+    display: block;
+    white-space: nowrap;
+    word-wrap: normal;
+  } @else if $row >= 2 {
+    display: -webkit-box;
+    -webkit-line-clamp: $row;
+    -webkit-box-orient: vertical;
+    word-wrap: break-word;
+  }
+}
+@mixin border-radius($radius) {
+  border-radius: $radius;
+  -webkit-border-radius: $radius;
+  -moz-border-radius: $radius;
+}
+@mixin visible($sh) {
+  display: $sh;
+}
+@function position-m($h, $o, $p) {
+  @return ($h - $o - $p) / 2;
+}
+@mixin presence-status($status) {
+  @if $status == pcOn {
+    background-color: #28ad66;
+  } @else if $status == pcOut {
+    background-color: #f35b5b;
+  } @else if $status == pcOff {
+    background-color: #a29f9f;
+  } @else if $status == pcOther {
+    background-color: #f0c10a;
+  }
+}
diff --git a/projects/ucap-webmessenger-app/src/assets/scss/global/_default.scss b/projects/ucap-webmessenger-app/src/assets/scss/global/_default.scss
new file mode 100644
index 00000000..2331f4ec
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/assets/scss/global/_default.scss
@@ -0,0 +1,47 @@
+@charset 'utf-8';
+
+html {
+  height: 100%;
+  overflow-y: scroll;
+}
+body {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  margin: 0;
+  color: #333;
+  font-family: '나눔고딕', Malgun Gothic, '맑은고딕', Arial, Dotum, '돋움',
+    Gulim, '굴림';
+  font-size: 12px;
+  line-height: 18px !important;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+div,
+p,
+ol,
+ul,
+li,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+form,
+iframe,
+dl,
+dt,
+dd {
+  margin: 0;
+  padding: 0;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+ul,
+ol {
+  list-style: none;
+}
diff --git a/projects/ucap-webmessenger-app/src/assets/scss/ucap.scss b/projects/ucap-webmessenger-app/src/assets/scss/ucap.scss
index 8624180f..0a1ba1af 100644
--- a/projects/ucap-webmessenger-app/src/assets/scss/ucap.scss
+++ b/projects/ucap-webmessenger-app/src/assets/scss/ucap.scss
@@ -12,3 +12,6 @@
 @import 'partials/icons';
 @import 'partials/normalize';
 @import 'partials/scrollbars';
+
+//creative
+@import 'global/default';
diff --git a/projects/ucap-webmessenger-ui-profile/src/lib/components/user-list-item.component.html b/projects/ucap-webmessenger-ui-profile/src/lib/components/user-list-item.component.html
index 81f92bab..ec8972b1 100644
--- a/projects/ucap-webmessenger-ui-profile/src/lib/components/user-list-item.component.html
+++ b/projects/ucap-webmessenger-ui-profile/src/lib/components/user-list-item.component.html
@@ -1,12 +1,20 @@
-<div matRipple>
-  <span *ngIf='presence'>{{ presence.pcStatus }} </span>
-  <img src='{{ profileImageRoot + userInfo.profileImageFile }}'>
-  <span>
-    {{ userInfo.name }} {{ userInfo.grade }}
-  </span>
-  <span>
-    {{ userInfo.deptName }}
-  </span>
-  <span>{{ userInfo.intro }}</span>
-  <mat-checkbox *ngIf='checkable'></mat-checkbox>
+<!--체크박스 보여줄때는 <div class="list-item checkbox" matRipple>  클래스에 checkbox만 추가-->
+<div class="list-item checkbox" matRipple>
+  <!--presence-pcOn , presence-pcOut  presence-pcOff , presence-pcOther-->
+  <span class="presence-pcOn" *ngIf="presence">{{ presence.pcStatus }} </span>
+  <div class="item-default">
+    <img
+      class="thumbnail"
+      src="{{ profileImageRoot + userInfo.profileImageFile }}"
+    />
+    <ul class="info">
+      <li class="name">{{ userInfo.name }} {{ userInfo.grade }}</li>
+      <li class="dept">
+        {{ userInfo.deptName }}
+        가나다라마바사아자차카파하가나다라마바사아자차카파하
+      </li>
+      <li class="record">{{ userInfo.intro }}</li>
+    </ul>
+  </div>
+  <mat-checkbox *ngIf="checkable"></mat-checkbox>
 </div>
diff --git a/projects/ucap-webmessenger-ui-profile/src/lib/components/user-list-item.component.scss b/projects/ucap-webmessenger-ui-profile/src/lib/components/user-list-item.component.scss
index e69de29b..c1779501 100644
--- a/projects/ucap-webmessenger-ui-profile/src/lib/components/user-list-item.component.scss
+++ b/projects/ucap-webmessenger-ui-profile/src/lib/components/user-list-item.component.scss
@@ -0,0 +1,98 @@
+@charset 'utf-8';
+@import '../../../../ucap-webmessenger-app/src/assets/scss/global/common.scss';
+
+%list-item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: $listH-row3;
+  border-bottom: 1px solid #dddddd;
+  padding: 14px;
+}
+
+%presence {
+  display: inline-block;
+  width: $presence-size;
+  height: $presence-size;
+  vertical-align: middle;
+  margin-top: position-m($thumbnail-msize, $presence-size, 0) * -1;
+  text-indent: -10000000px;
+  margin-right: 10px;
+  border-radius: 100px;
+}
+
+.list-item {
+  @extend %list-item;
+  &:hover {
+    background-color: $bg-list-hover;
+  }
+  .presence {
+    &-pcOn {
+      @extend %presence;
+      @include presence-status(pcOn);
+    }
+    &-pcOut {
+      @extend %presence;
+      @include presence-status(pcOut);
+    }
+    &-pcOff {
+      @extend %presence;
+      @include presence-status(pcOff);
+    }
+    &-pcOther {
+      @extend %presence;
+      @include presence-status(pcOther);
+    }
+  }
+  .mat-checkbox {
+    padding-left: 10px;
+  }
+}
+
+.item-default {
+  display: flex;
+  width: 100%;
+  .thumbnail {
+    width: $thumbnail-msize;
+    height: $thumbnail-msize;
+    margin-right: 12px;
+    @include border-radius(100px);
+  }
+  .info {
+    display: inline-block;
+    margin: 0;
+    padding: 0;
+    width: calc(100% - 62px);
+    li {
+      margin-bottom: 4px;
+      @include ellipsis(1);
+      &.name {
+        display: block;
+        font-size: 15px;
+        font-weight: bold;
+        @include ellipsis(1);
+      }
+      &.dept {
+        display: block;
+        font-size: 13px;
+      }
+      &.record {
+        //@include visible(none);
+      }
+    }
+  }
+}
+
+.list-item {
+  span[class*='presence'] {
+    + .item-default {
+      width: calc(100% - 20px);
+    }
+  }
+  &.checkbox {
+    .item-default {
+      width: calc(100% - 30px);
+    }
+  }
+}