diff --git a/src/frontend/src/components/Sidebar/MemberList/index.tsx b/src/frontend/src/components/Sidebar/MemberList/index.tsx
deleted file mode 100644
index 5588e1ea..00000000
--- a/src/frontend/src/components/Sidebar/MemberList/index.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import { useState } from 'react';
-import { SmallProfile } from '@/components/common/SmallProfile';
-import { ProfileDetail } from '@/components/common/ProfileDetail';
-import { MemberListFooter } from '@/components/Sidebar/MemberList/MemberListFooter';
-
-import { SidebarType } from '@/types/enums/SidebarType';
-import { ProfileType } from '@/types/enums/ProfileType';
-import { UserRole } from '@/types/enums/UserRole';
-import { memberListTest } from '@/assets/data/memberListTest';
-
-import { Container, UserList, ProfileWrapper } from './index.css';
-interface IMemberListProps {
-  sidebarType: SidebarType;
-}
-
-export const MemberList = ({ sidebarType }: IMemberListProps) => {
-  const [activeProfile, setActiveProfile] = useState<number | null>(null);
-  const handleProfileClick = (id: number) => {
-    setActiveProfile(prevId => (prevId === id ? null : id));
-  };
-
-  return (
-    <Container>
-      <UserList>
-        {memberListTest
-          .sort((a, b) => a.role - b.role)
-          .map(member => (
-            <ProfileWrapper key={member.id}>
-              <div onClick={() => handleProfileClick(member.id)}>
-                <SmallProfile
-                  type={
-                    sidebarType === SidebarType.VOICECHAT
-                      ? ProfileType.VOICECHAT
-                      : ProfileType.MEMBER
-                  }
-                  role={member.role}
-                  nickname={member.nickname}
-                  imgUrl={member.profileImg}
-                />
-              </div>
-              {activeProfile === member.id ? (
-                <div className={`profile-detail ${activeProfile === member.id ? 'active' : ''}`}>
-                  <ProfileDetail
-                    userId={member.id}
-                    userRole={member.role}
-                    myRole={UserRole.CREATOR}
-                    sidebarType={sidebarType}
-                  />
-                </div>
-              ) : (
-                ''
-              )}
-            </ProfileWrapper>
-          ))}
-      </UserList>
-      <MemberListFooter sidebarType={sidebarType} />
-    </Container>
-  );
-};
diff --git a/src/frontend/src/components/Sidebar/MemberList/MemberListFooter/index.tsx b/src/frontend/src/components/Sidebar/UserList/UserListFooter/index.tsx
similarity index 82%
rename from src/frontend/src/components/Sidebar/MemberList/MemberListFooter/index.tsx
rename to src/frontend/src/components/Sidebar/UserList/UserListFooter/index.tsx
index 7c9db400..7854edbb 100644
--- a/src/frontend/src/components/Sidebar/MemberList/MemberListFooter/index.tsx
+++ b/src/frontend/src/components/Sidebar/UserList/UserListFooter/index.tsx
@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { CommonInput } from '@/components/common/Input';
-import { MemberFooter, VoiceChatFooter, ActionButton, JoinButton } from '../index.css';
+import { UserFooter, VoiceChatFooter, ActionButton, JoinButton } from '../index.css';
 
 import { SidebarType } from '@/types/enums/SidebarType';
 
@@ -10,23 +10,23 @@ import HeadphoneOn from '@/assets/img/HeadphoneOn.svg';
 import MicrophoneOffRed from '@/assets/img/MicrophoneOffRed.svg';
 import HeadphoneOffRed from '@/assets/img/HeadphoneOffRed.svg';
 
-interface IMemberListFooter {
+interface IUserListFooter {
   sidebarType: SidebarType;
 }
 
-export const MemberListFooter = (props: IMemberListFooter) => {
+export const UserListFooter = (props: IUserListFooter) => {
   const [micOn, setMicOn] = useState(true);
   const [soundOn, setSoundOn] = useState(true);
 
   const handleMicrophone = () => setMicOn(!micOn);
   const handleSound = () => setSoundOn(!soundOn);
 
-  if (props.sidebarType === SidebarType.MEMBER) {
+  if (props.sidebarType === SidebarType.USERLIST) {
     return (
-      <MemberFooter>
+      <UserFooter>
         <img src={AddUserIcon} alt="Add User" />
         <CommonInput placeholder="룸 유저 검색" design={1} />
-      </MemberFooter>
+      </UserFooter>
     );
   }
 
diff --git a/src/frontend/src/components/Sidebar/UserList/index.css.ts b/src/frontend/src/components/Sidebar/UserList/index.css.ts
new file mode 100644
index 00000000..78934be7
--- /dev/null
+++ b/src/frontend/src/components/Sidebar/UserList/index.css.ts
@@ -0,0 +1,75 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+`;
+
+export const UserListContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  overflow-y: auto;
+`;
+
+export const UserFooter = styled.div`
+  width: 100%;
+  display: flex;
+  align-items: center;
+  padding: 8px 0;
+
+  border-top: 1px solid #d4d4d4;
+`;
+
+export const VoiceChatFooter = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: space-around;
+  padding: 8px 0px;
+  border-top: 1px solid #d4d4d4;
+`;
+
+export const ActionButton = styled.button`
+  border: none;
+  padding: 10px;
+  border-radius: 50%;
+  background-color: #f4f4f4;
+  cursor: pointer;
+`;
+
+export const JoinButton = styled.button`
+  width: 194px;
+  border: none;
+  background-color: #ff9100;
+  padding: 10px 20px;
+  color: white;
+  font-weight: bold;
+  border-radius: 5px;
+  cursor: pointer;
+`;
+
+export const ProfileWrapper = styled.div`
+  position: relative;
+  cursor: pointer;
+
+  & .profile-detail {
+    position: absolute;
+    top: 0px;
+    right: 60%;
+    transform: translateX(-50%);
+    opacity: 0;
+    visibility: hidden;
+    transition:
+      opacity 0.3s ease,
+      visibility 0.3s ease;
+    z-index: 10;
+  }
+
+  .profile-detail.active {
+    opacity: 1;
+    visibility: visible;
+  }
+`;
diff --git a/src/frontend/src/components/Sidebar/UserList/index.tsx b/src/frontend/src/components/Sidebar/UserList/index.tsx
new file mode 100644
index 00000000..7011120a
--- /dev/null
+++ b/src/frontend/src/components/Sidebar/UserList/index.tsx
@@ -0,0 +1,93 @@
+import { useState, useEffect, useRef } from 'react';
+import { SmallProfile } from '@/components/common/SmallProfile';
+import { ProfileDetail } from '@/components/common/ProfileDetail';
+import { UserListFooter } from '@/components/Sidebar/UserList/UserListFooter';
+import { RedBlackTree } from '@/hooks/utils/RedBlackTree';
+
+import { SidebarType } from '@/types/enums/SidebarType';
+import { ProfileType } from '@/types/enums/ProfileType';
+import { UserRole } from '@/types/enums/UserRole';
+
+import { memberListTest } from '@/assets/data/memberListTest';
+import { Container, UserListContainer, ProfileWrapper } from './index.css';
+
+interface IUser {
+  id: number;
+  role: number;
+  nickname: string;
+  profileImg: string;
+}
+
+const compareUsers = (a: IUser, b: IUser): number => {
+  if (a.role !== b.role) return a.role - b.role;
+  const nicknameCompare = a.nickname.localeCompare(b.nickname, 'ko');
+  if (nicknameCompare !== 0) return nicknameCompare;
+  return a.id - b.id;
+};
+
+export const UserList = () => {
+  const treeRef = useRef<RedBlackTree<IUser> | null>(null);
+  const [, setVersion] = useState(0);
+
+  useEffect(() => {
+    treeRef.current = new RedBlackTree<IUser>(compareUsers);
+    memberListTest.forEach(user => treeRef.current?.insert(user));
+    setVersion(v => v + 1);
+  }, []);
+
+  const addUser = (user: IUser) => {
+    if (!treeRef.current) return;
+    treeRef.current.insert(user);
+    setVersion(v => v + 1);
+  };
+
+  const getSortedUsers = (): IUser[] => {
+    return treeRef.current ? treeRef.current.inOrderTraversal() : [];
+  };
+  const [activeProfile, setActiveProfile] = useState<number | null>(null);
+
+  const handleProfileClick = (id: number) => {
+    setActiveProfile(prevId => (prevId === id ? null : id));
+  };
+
+  const handleAddUser = () => {
+    const newUser: IUser = {
+      id: Date.now(),
+      role: Math.floor(Math.random() * 3),
+      nickname: `User${Math.floor(Math.random() * 1000)}`,
+      profileImg: '',
+    };
+    addUser(newUser);
+  };
+
+  const users = getSortedUsers();
+
+  return (
+    <Container>
+      <UserListContainer>
+        {users.map(member => (
+          <ProfileWrapper key={member.id}>
+            <div onClick={() => handleProfileClick(member.id)}>
+              <SmallProfile
+                type={ProfileType.MEMBER}
+                role={member.role}
+                nickname={member.nickname}
+                imgUrl={member.profileImg}
+              />
+            </div>
+            {activeProfile === member.id && (
+              <ProfileDetail
+                userId={member.id}
+                userRole={member.role}
+                myRole={UserRole.CREATOR}
+                sidebarType={SidebarType.USERLIST}
+              />
+            )}
+          </ProfileWrapper>
+        ))}
+      </UserListContainer>
+      <button onClick={handleAddUser}>랜덤 유저 추가</button>
+      <UserListFooter sidebarType={SidebarType.USERLIST} />
+    </Container>
+  );
+};
diff --git a/src/frontend/src/components/Sidebar/MemberList/index.css.ts b/src/frontend/src/components/Sidebar/VoiceChat/index.css.ts
similarity index 98%
rename from src/frontend/src/components/Sidebar/MemberList/index.css.ts
rename to src/frontend/src/components/Sidebar/VoiceChat/index.css.ts
index 739f9a8f..2e4d881e 100644
--- a/src/frontend/src/components/Sidebar/MemberList/index.css.ts
+++ b/src/frontend/src/components/Sidebar/VoiceChat/index.css.ts
@@ -12,6 +12,7 @@ export const UserList = styled.div`
   display: flex;
   flex-direction: column;
   width: 100%;
+  overflow-y: auto;
 `;
 
 export const MemberFooter = styled.div`
diff --git a/src/frontend/src/components/Sidebar/VoiceChat/index.tsx b/src/frontend/src/components/Sidebar/VoiceChat/index.tsx
new file mode 100644
index 00000000..6cfaaaf8
--- /dev/null
+++ b/src/frontend/src/components/Sidebar/VoiceChat/index.tsx
@@ -0,0 +1,57 @@
+import { useState } from 'react';
+import { SmallProfile } from '@/components/common/SmallProfile';
+import { ProfileDetail } from '@/components/common/ProfileDetail';
+import { UserListFooter } from '@/components/Sidebar/UserList/UserListFooter';
+
+import { SidebarType } from '@/types/enums/SidebarType';
+import { ProfileType } from '@/types/enums/ProfileType';
+import { UserRole } from '@/types/enums/UserRole';
+import { memberListTest } from '@/assets/data/memberListTest';
+
+import { Container, UserList, ProfileWrapper } from './index.css';
+
+export const VoiceChat = () => {
+  const [activeProfile, setActiveProfile] = useState<number | null>(null);
+  const handleProfileClick = (id: number) => {
+    setActiveProfile(prevId => (prevId === id ? null : id));
+  };
+
+  const sortedUsers = memberListTest.sort((a, b) => {
+    if (a.role !== b.role) {
+      return a.role - b.role;
+    }
+    return a.nickname.localeCompare(b.nickname, 'ko');
+  });
+
+  return (
+    <Container>
+      <UserList>
+        {sortedUsers.map(member => (
+          <ProfileWrapper key={member.id}>
+            <div onClick={() => handleProfileClick(member.id)}>
+              <SmallProfile
+                type={ProfileType.VOICECHAT}
+                role={member.role}
+                nickname={member.nickname}
+                imgUrl={member.profileImg}
+              />
+            </div>
+            {activeProfile === member.id ? (
+              <div className={`profile-detail ${activeProfile === member.id ? 'active' : ''}`}>
+                <ProfileDetail
+                  userId={member.id}
+                  userRole={member.role}
+                  myRole={UserRole.CREATOR}
+                  sidebarType={SidebarType.VOICECHAT}
+                />
+              </div>
+            ) : (
+              ''
+            )}
+          </ProfileWrapper>
+        ))}
+      </UserList>
+      <UserListFooter sidebarType={SidebarType.VOICECHAT} />
+    </Container>
+  );
+};
diff --git a/src/frontend/src/components/Sidebar/index.tsx b/src/frontend/src/components/Sidebar/index.tsx
index d63a89b4..c1c3f708 100644
--- a/src/frontend/src/components/Sidebar/index.tsx
+++ b/src/frontend/src/components/Sidebar/index.tsx
@@ -1,7 +1,8 @@
 import { useState } from 'react';
 import { ChatBox } from './Chating';
-import { MemberList } from './MemberList';
+import { UserList } from './UserList';
 import { Playlist } from './Playlist';
+import { VoiceChat } from './VoiceChat';
 import SidebarChat from '@/assets/img/SidebarChat.svg';
 import SidebarPlaylist from '@/assets/img/SidebarPlaylist.svg';
 import SidebarVoicechat from '@/assets/img/SidebarVoicechat.svg';
@@ -12,25 +13,22 @@ import { SidebarType } from '@/types/enums/SidebarType';
 export const Sidebar = () => {
   const [interfaceType, setInterfaceType] = useState<SidebarType>(SidebarType.CHAT);
 
+  const contentComponents = {
+    [SidebarType.CHAT]: ChatBox,
+    [SidebarType.PLAYLIST]: Playlist,
+    [SidebarType.VOICECHAT]: VoiceChat,
+    [SidebarType.USERLIST]: UserList,
+  };
+
   const renderContent = () => {
-    switch (interfaceType) {
-      case SidebarType.CHAT:
-        return <ChatBox />;
-      case SidebarType.PLAYLIST:
-        return <Playlist />;
-      case SidebarType.VOICECHAT:
-        return <MemberList sidebarType={SidebarType.VOICECHAT} />;
-      case SidebarType.MEMBER:
-        return <MemberList sidebarType={SidebarType.MEMBER} />;
-      default:
-        return null;
-    }
+    const Component = contentComponents[interfaceType];
+    return Component ? <Component /> : null;
   };
 
   return (
     <Wrapper>
       <Nav>
-        {[SidebarType.CHAT, SidebarType.PLAYLIST, SidebarType.VOICECHAT, SidebarType.MEMBER].map(
+        {[SidebarType.CHAT, SidebarType.PLAYLIST, SidebarType.VOICECHAT, SidebarType.USERLIST].map(
           (type, index) => (
             <NavButton
               key={index}
diff --git a/src/frontend/src/hooks/utils/RedBlackTree.ts b/src/frontend/src/hooks/utils/RedBlackTree.ts
new file mode 100644
index 00000000..22a8991b
--- /dev/null
+++ b/src/frontend/src/hooks/utils/RedBlackTree.ts
@@ -0,0 +1,144 @@
+type Color = 'red' | 'black';
+
+class RBNode<T> {
+  data: T;
+  color: Color;
+  left: RBNode<T> | null = null;
+  right: RBNode<T> | null = null;
+  parent: RBNode<T> | null = null;
+  constructor(data: T, color: Color = 'red') {
+    this.data = data;
+    this.color = color;
+  }
+}
+
+export class RedBlackTree<T> {
+  root: RBNode<T> | null = null;
+  compare: (a: T, b: T) => number;
+
+  constructor(compare: (a: T, b: T) => number) {
+    this.compare = compare;
+  }
+
+  insert(data: T) {
+    const newNode = new RBNode(data);
+    let y: RBNode<T> | null = null;
+    let x = this.root;
+
+    while (x !== null) {
+      y = x;
+      if (this.compare(newNode.data, x.data) < 0) {
+        x = x.left;
+      } else {
+        x = x.right;
+      }
+    }
+
+    newNode.parent = y;
+    if (y === null) {
+      this.root = newNode;
+    } else if (this.compare(newNode.data, y.data) < 0) {
+      y.left = newNode;
+    } else {
+      y.right = newNode;
+    }
+
+    newNode.color = 'red';
+    this.fixInsert(newNode);
+  }
+
+  private fixInsert(z: RBNode<T>) {
+    while (z.parent && z.parent.color === 'red') {
+      if (z.parent === z.parent.parent?.left) {
+        const y = z.parent.parent.right;
+        if (y && y.color === 'red') {
+          z.parent.color = 'black';
+          y.color = 'black';
+          z.parent.parent.color = 'red';
+          z = z.parent.parent;
+        } else {
+          if (z === z.parent.right) {
+            z = z.parent;
+            this.leftRotate(z);
+          }
+          z.parent!.color = 'black';
+          if (z.parent!.parent) {
+            z.parent!.parent.color = 'red';
+            this.rightRotate(z.parent!.parent);
+          }
+        }
+      } else {
+        const y = z.parent.parent?.left;
+        if (y && y.color === 'red') {
+          z.parent.color = 'black';
+          y.color = 'black';
+          z.parent.parent!.color = 'red';
+          z = z.parent.parent!;
+        } else {
+          if (z === z.parent.left) {
+            z = z.parent;
+            this.rightRotate(z);
+          }
+          z.parent!.color = 'black';
+          if (z.parent!.parent) {
+            z.parent!.parent.color = 'red';
+            this.leftRotate(z.parent!.parent);
+          }
+        }
+      }
+    }
+    if (this.root) {
+      this.root.color = 'black';
+    }
+  }
+
+  private leftRotate(x: RBNode<T>) {
+    const y = x.right;
+    if (!y) return;
+    x.right = y.left;
+    if (y.left) {
+      y.left.parent = x;
+    }
+    y.parent = x.parent;
+    if (!x.parent) {
+      this.root = y;
+    } else if (x === x.parent.left) {
+      x.parent.left = y;
+    } else {
+      x.parent.right = y;
+    }
+    y.left = x;
+    x.parent = y;
+  }
+
+  private rightRotate(y: RBNode<T>) {
+    const x = y.left;
+    if (!x) return;
+    y.left = x.right;
+    if (x.right) {
+      x.right.parent = y;
+    }
+    x.parent = y.parent;
+    if (!y.parent) {
+      this.root = x;
+    } else if (y === y.parent.right) {
+      y.parent.right = x;
+    } else {
+      y.parent.left = x;
+    }
+    x.right = y;
+    y.parent = x;
+  }
+
+  inOrderTraversal(): T[] {
+    const result: T[] = [];
+    const traverse = (node: RBNode<T> | null) => {
+      if (!node) return;
+      traverse(node.left);
+      result.push(node.data);
+      traverse(node.right);
+    };
+    traverse(this.root);
+    return result;
+  }
+}
diff --git a/src/frontend/src/types/enums/ProfileDetailType.ts b/src/frontend/src/types/enums/ProfileDetailType.ts
deleted file mode 100644
index c2491dea..00000000
--- a/src/frontend/src/types/enums/ProfileDetailType.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { SidebarType } from "./SidebarType";
-
-export enum ProfileDetailType {
-  CHAT = SidebarType.CHAT,
-  PLAYLIST = SidebarType.PLAYLIST,
-  VOICECHAT = SidebarType.VOICECHAT,
-  MEMBER = SidebarType.MEMBER,
-  EDIT = 4,
-}
diff --git a/src/frontend/src/types/enums/SidebarType.ts b/src/frontend/src/types/enums/SidebarType.ts
index e7f602f7..8bb392f4 100644
--- a/src/frontend/src/types/enums/SidebarType.ts
+++ b/src/frontend/src/types/enums/SidebarType.ts
@@ -2,5 +2,5 @@ export enum SidebarType {
   CHAT = 0,
   PLAYLIST = 1,
   VOICECHAT = 2,
-  MEMBER = 3,
+  USERLIST = 3,
 }