diff --git a/packages/seal/index.html b/packages/seal/index.html
index 3464fe7..cb51faa 100644
--- a/packages/seal/index.html
+++ b/packages/seal/index.html
@@ -10,58 +10,7 @@
 </head>
 
 <body>
-  <div class="app">
-    <header>
-      <nav>
-        <!-- <div class="item">
-          <input type="radio" name="menubtn" id="profile" checked />
-          <label for="profile" data-label="profile">
-            <svg width="50" height="50" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path fill-rule="evenodd" clip-rule="evenodd"
-                d="M16 9C16 11.2091 14.2091 13 12 13C9.79086 13 8 11.2091 8 9C8 6.79086 9.79086 5 12 5C14.2091 5 16 6.79086 16 9ZM14 9C14 10.1046 13.1046 11 12 11C10.8954 11 10 10.1046 10 9C10 7.89543 10.8954 7 12 7C13.1046 7 14 7.89543 14 9Z"
-                fill="currentColor" />
-              <path fill-rule="evenodd" clip-rule="evenodd"
-                d="M12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1ZM3 12C3 14.0902 3.71255 16.014 4.90798 17.5417C6.55245 15.3889 9.14627 14 12.0645 14C14.9448 14 17.5092 15.3531 19.1565 17.4583C20.313 15.9443 21 14.0524 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12ZM12 21C9.84977 21 7.87565 20.2459 6.32767 18.9878C7.59352 17.1812 9.69106 16 12.0645 16C14.4084 16 16.4833 17.1521 17.7538 18.9209C16.1939 20.2191 14.1881 21 12 21Z"
-                fill="currentColor" />
-            </svg>
-          </label>
-        </div> -->
-
-        <div class="item">
-          <input type="radio" name="menubtn" id="explore" checked />
-          <label for="explore" data-label="explore">
-            <svg class="explore" width="50" height="50" viewBox="0 0 24 24" fill="none"
-              xmlns="http://www.w3.org/2000/svg">
-              <path d="M4 4H8V8H4V4Z" fill="currentColor" />
-              <path d="M4 10H8V14H4V10Z" fill="currentColor" />
-              <path d="M8 16H4V20H8V16Z" fill="currentColor" />
-              <path d="M10 4H14V8H10V4Z" fill="currentColor" />
-              <path d="M14 10H10V14H14V10Z" fill="currentColor" />
-              <path d="M10 16H14V20H10V16Z" fill="currentColor" />
-              <path d="M20 4H16V8H20V4Z" fill="currentColor" />
-              <path d="M16 10H20V14H16V10Z" fill="currentColor" />
-              <path d="M20 16H16V20H20V16Z" fill="currentColor" />
-            </svg>
-          </label>
-        </div>
-
-        <div class="item">
-          <input type="radio" name="menubtn" id="saved" />
-          <label for="saved" data-label="saved">
-            <svg width="50" height="50" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path fill-rule="evenodd" clip-rule="evenodd"
-                d="M19 20H17.1717L12.7072 15.5354C12.3166 15.1449 11.6835 15.1449 11.2929 15.5354L6.82843 20L5 20V7C5 5.34315 6.34315 4 8 4H16C17.6569 4 19 5.34314 19 7V20ZM17 7C17 6.44772 16.5523 6 16 6H8C7.44772 6 7 6.44772 7 7V17L9.87873 14.1212C11.0503 12.9497 12.9498 12.9497 14.1214 14.1212L17 16.9999V7Z"
-                fill="currentColor" />
-            </svg>
-          </label>
-        </div>
-      </nav>
-    </header>
-    <main>
-      <div class="container"></div>
-      <div class="loader"></div>
-    </main>
-  </div>
+  <div class="app"></div>
   <section class="loading hidden">
     <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
       xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" width="160px" height="20px" viewBox="0 0 128 16"
diff --git a/packages/seal/login.html b/packages/seal/login.html
index e9e2398..88ef6a7 100644
--- a/packages/seal/login.html
+++ b/packages/seal/login.html
@@ -1,44 +1,15 @@
 <!DOCTYPE html>
 <html lang="en">
-
-<head>
-  <meta charset="UTF-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Parang Cafe | Login</title>
-  <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
-</head>
-<style>
-
-</style>
-
-<body>
-  <div class="app">
-    <div class="login-wrapper">
-      <div class="login-page">
-        <div class="container">
-          <form class="forms hidden">
-            <!-- <label>이메일</label> -->
-            <input type="text" id="signup-email" placeholder="이메일" />
-            <!-- <label>비밀번호</label> -->
-            <input type="password" id="signup-password" placeholder="비밀번호" />
-            <!-- <label>비밀번호 확인</label> -->
-            <input type="password" id="signup-password-confirm" placeholder="비밀번호 확인" />
-            <button data-submit="signup">회원가입</button>
-            <p class="message">계정이 있으신가요? <a href="#">로그인하기</a></p>
-          </form>
-          <form class="forms">
-            <!-- <label>이메일</label> -->
-            <input type="text" id="login-email" placeholder="이메일" />
-            <!-- <label>비밀번호</label> -->
-            <input type="password" id="login-password" placeholder="비밀번호" />
-            <button data-submit="login">로그인</button>
-            <p class="message">계정이 없으신가요? <a href="#">회원가입하기</a></p>
-          </form>
-        </div>
-      </div>
-    </div>
-  </div>
-</body>
-
-</html>
\ No newline at end of file
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Parang Cafe | Login</title>
+    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
+  </head>
+  <style></style>
+
+  <body>
+    <div class="app"></div>
+  </body>
+</html>
diff --git a/packages/seal/signup.html b/packages/seal/signup.html
new file mode 100644
index 0000000..171f2e8
--- /dev/null
+++ b/packages/seal/signup.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Parang Cafe | Signup</title>
+    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
+  </head>
+  <style></style>
+
+  <body>
+    <div class="app"></div>
+  </body>
+</html>
diff --git a/packages/seal/src/constant/index.js b/packages/seal/src/constant/index.js
new file mode 100644
index 0000000..a4331b1
--- /dev/null
+++ b/packages/seal/src/constant/index.js
@@ -0,0 +1,29 @@
+export const BASE_URL = 'http://localhost:3000/api';
+
+export const INDEX_PAGE = 'http://localhost:5510';
+
+export const RANDOM_IMAGE_URL = 'https://randomfox.ca/images';
+
+export const LOCAL_STORAGE_KEY = {
+  USER_TOKEN: 'user_token',
+};
+
+export const ERROR_MESSAGE = {
+  WRONG_PASSWORD: '패스워드를 확인해주세요.',
+  INVALID_EMAIL_FORMAT: '옳지 않은 이메일 형식입니다.',
+};
+
+export const SUCCESS_MESSAGE = {
+  SIGNUP: '회원가입이 완료되었습니다.\n로그인해주세요.',
+};
+
+export const MAIN_VIEW_TAB = {
+  EXPLORE: 'explore',
+  SAVED: 'saved',
+};
+
+export const MAX_IMAGE_NUMBER = 123;
+
+export const INFINITE_SCROLL_Y_AXIS_LOAD_LIMIT = 0.8;
+
+export const MAIN_EXPLORE_PAGE_PER_AMOUNT = 10;
diff --git a/packages/seal/src/helper/dom.js b/packages/seal/src/helper/dom.js
index f0c07cc..217db59 100644
--- a/packages/seal/src/helper/dom.js
+++ b/packages/seal/src/helper/dom.js
@@ -3,3 +3,6 @@ export const $ = selector => document.querySelector(selector);
 export const $all = selector => document.querySelectorAll(selector);
 
 export const toggleLoading = () => $('.loading').classList.toggle('hidden');
+
+export const setDisplay = (element, display) =>
+  (element.style.display = display);
diff --git a/packages/seal/src/helper/localstorage.js b/packages/seal/src/helper/localstorage.js
new file mode 100644
index 0000000..04ee667
--- /dev/null
+++ b/packages/seal/src/helper/localstorage.js
@@ -0,0 +1,11 @@
+export const setLocalStorage = (key, value) => {
+  localStorage.setItem(key, JSON.stringify(value));
+};
+
+export const getLocalStorage = key => {
+  const item = localStorage.getItem(key);
+
+  if (!item || item === 'undefined') return null;
+
+  return JSON.parse(item);
+};
diff --git a/packages/seal/src/helper/random.js b/packages/seal/src/helper/random.js
new file mode 100644
index 0000000..09be7fa
--- /dev/null
+++ b/packages/seal/src/helper/random.js
@@ -0,0 +1,3 @@
+export const getRandomNumber = maxNumber => {
+  return Math.floor(Math.random() * maxNumber) + 1;
+};
diff --git a/packages/seal/src/login.js b/packages/seal/src/login.js
index ca706b2..88624ae 100644
--- a/packages/seal/src/login.js
+++ b/packages/seal/src/login.js
@@ -1,48 +1,4 @@
 import '../assets/page/login.css';
-import { login, signup } from './api/index.js';
-import { $, $all } from './helper/index.js';
+import LoginView from './views/LoginView.js';
 
-$all('.message a').forEach(tag => {
-  tag.addEventListener('click', () => {
-    $all('.forms').forEach(form => {
-      form.classList.toggle('hidden');
-    });
-  });
-});
-
-$('button[data-submit="signup"]').addEventListener('click', async event => {
-  event.preventDefault();
-
-  const email = $('#signup-email').value;
-  const password = $('#signup-password').value;
-  const passwordConfirm = $('#signup-password-confirm').value;
-
-  if (password !== passwordConfirm) return alert('패스워드를 확인해주세요.');
-  const regEmail =
-    /^[0-9a-zA-Z]([-_\\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i;
-  if (!regEmail.test(email)) return alert('옳지 않은 이메일 형식입니다.');
-
-  await signup('http://localhost:3000/api/user', {
-    email,
-    password,
-    status: 0,
-  });
-
-  alert('회원가입이 완료되었습니다.\n로그인해주세요.');
-});
-
-$('button[data-submit="login"]').addEventListener('click', async event => {
-  event.preventDefault();
-
-  const email = $('#login-email').value;
-  const password = $('#login-password').value;
-
-  const data = await login('http://localhost:3000/api/user/login', {
-    email,
-    password,
-  });
-  const { _id, email: userEmail } = data[0];
-  alert(`환영합니다, ${userEmail}님!`);
-  localStorage.setItem('user_token', _id);
-  location.replace('http://localhost:5510/');
-});
+new LoginView();
diff --git a/packages/seal/src/main.js b/packages/seal/src/main.js
index 994d518..f21e417 100644
--- a/packages/seal/src/main.js
+++ b/packages/seal/src/main.js
@@ -1,110 +1,4 @@
 import '../assets/index.css';
-import { addBookmark, getBookmarkList } from './api';
-import { $, toggleLoading, debounce } from './helper/index.js';
+import MainView from './views/MainView';
 
-(() => {
-  const isLogin = localStorage.getItem('user_token');
-  if (isLogin !== null) return;
-
-  location.replace('./login.html');
-})();
-
-let globalIndex = 0;
-
-const createPin = () => {
-  toggleLoading();
-  const pin = document.createElement('div');
-  const buttonWrapper = document.createElement('div');
-  const image = document.createElement('img');
-  const random = Math.floor(Math.random() * 123) + 1;
-  image.src = `https://randomfox.ca/images/${random}.jpg`;
-  buttonWrapper.setAttribute('class', 'button-wrapper');
-  buttonWrapper.innerHTML = `
-  <div class="anim-icon anim-icon-md heart">
-    <input type="checkbox" id="heart${globalIndex}" />
-    <label for="heart${globalIndex}" key=${random}></label>
-  </div>
-  `;
-  pin.classList.add('pin');
-  pin.appendChild(buttonWrapper);
-  pin.appendChild(image);
-  toggleLoading();
-  return pin;
-};
-
-const loadMore = debounce(() => {
-  const container = $('.container');
-  const pinList = [];
-  for (let i = 10; i > 0; i--) {
-    pinList.push(createPin(++globalIndex));
-  }
-  container.append(...pinList);
-}, 500);
-
-loadMore();
-
-window.addEventListener('scroll', () => {
-  const loader = $('.loader');
-  if (loader === null) return;
-  if (loader.getBoundingClientRect().top > window.innerHeight) return;
-  loadMore();
-});
-
-$('nav').addEventListener('click', async event => {
-  event.stopPropagation();
-  if (!event.target.matches('input')) return;
-
-  const $main = $('main');
-  $main.innerHTML = '';
-
-  if (event.target.matches('#explore')) {
-    $main.classList.remove('saved');
-    $main.innerHTML = `
-      <div class="container"></div>
-      <div class="loader"></div>
-    `;
-
-    globalIndex = 0;
-    loadMore();
-  }
-
-  if (event.target.matches('#saved')) {
-    $main.classList.add('saved');
-    const _id = localStorage.getItem('user_token');
-    const result = await getBookmarkList(
-      'http://localhost:3000/api/user/bookmark',
-      { _id },
-    );
-    const $content = `
-    <div class="container">
-    ${result
-      .map(
-        ({ _id, url }, index) => `
-      <div class="pin">
-        <div class="button-wrapper">
-          <div class="anim-icon anim-icon-md heart">
-            <input type="checkbox" id="heart${index}" checked>
-            <label for="heart${index}" key=${_id}></label>
-          </div>
-        </div><img src="https://randomfox.ca/images/${url}.jpg">
-      </div>`,
-      )
-      .join('')}
-    </div>
-    `;
-
-    $main.innerHTML = $content;
-  }
-});
-
-$('main').addEventListener('click', async event => {
-  if (!event.target.matches('label[for^="heart"]')) return;
-  const _id = localStorage.getItem('user_token');
-  await addBookmark(
-    `http://localhost:3000/api/user/bookmark/${event.target.getAttribute(
-      'key',
-    )}`,
-    { _id },
-  );
-  console.log('북마크에 저장되었습니다.');
-});
+new MainView();
diff --git a/packages/seal/src/signup.js b/packages/seal/src/signup.js
new file mode 100644
index 0000000..91106f9
--- /dev/null
+++ b/packages/seal/src/signup.js
@@ -0,0 +1,4 @@
+import '../assets/page/login.css';
+import SignupView from './views/SignupView';
+
+new SignupView();
diff --git a/packages/seal/src/views/LoginView.js b/packages/seal/src/views/LoginView.js
new file mode 100644
index 0000000..5c810a9
--- /dev/null
+++ b/packages/seal/src/views/LoginView.js
@@ -0,0 +1,59 @@
+import { $ } from '../helper/dom.js';
+import { login } from '../api/index.js';
+import { BASE_URL, INDEX_PAGE, LOCAL_STORAGE_KEY } from '../constant/index.js';
+import { setLocalStorage } from '../helper/localstorage.js';
+
+export default class LoginView {
+  constructor(template = new Template()) {
+    this.element = $('.app');
+    this.template = template;
+    this.element.innerHTML = this.template.initialize();
+    this.bindEvents();
+  }
+
+  bindEvents() {
+    $('button[data-submit="login"]').addEventListener(
+      'click',
+      this.handleClickLoginButton.bind(this),
+    );
+  }
+
+  async handleClickLoginButton(event) {
+    event.preventDefault();
+
+    const { value: email } = $('#login-email');
+    const { value: password } = $('#login-password');
+
+    const data = await login(`${BASE_URL}/user/login`, {
+      email,
+      password,
+    });
+
+    const { _id, email: userEmail } = data[0];
+
+    alert(`환영합니다, ${userEmail}님!`);
+    setLocalStorage(LOCAL_STORAGE_KEY.USER_TOKEN, _id);
+    location.replace(`${INDEX_PAGE}/`);
+  }
+}
+
+class Template {
+  initialize() {
+    return `
+      <div class="login-wrapper">
+        <div class="login-page">
+          <div class="container">
+            <form class="forms">
+              <!-- <label>이메일</label> -->
+              <input type="text" id="login-email" placeholder="이메일" />
+              <!-- <label>비밀번호</label> -->
+              <input type="password" id="login-password" placeholder="비밀번호" />
+              <button data-submit="login">로그인</button>
+              <p class="message">계정이 없으신가요? <a href="/signup.html">회원가입하기</a></p>
+            </form>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+}
diff --git a/packages/seal/src/views/MainView.js b/packages/seal/src/views/MainView.js
new file mode 100644
index 0000000..dd6452c
--- /dev/null
+++ b/packages/seal/src/views/MainView.js
@@ -0,0 +1,210 @@
+import { addBookmark, getBookmarkList } from '../api';
+import {
+  BASE_URL,
+  INFINITE_SCROLL_Y_AXIS_LOAD_LIMIT,
+  LOCAL_STORAGE_KEY,
+  MAIN_EXPLORE_PAGE_PER_AMOUNT,
+  MAIN_VIEW_TAB,
+  MAX_IMAGE_NUMBER,
+  RANDOM_IMAGE_URL,
+} from '../constant';
+import { debounce } from '../helper';
+import { $, toggleLoading, setDisplay } from '../helper/dom';
+import { getLocalStorage } from '../helper/localstorage';
+import { getRandomNumber } from '../helper/random';
+
+export default class MainView {
+  constructor(template = new Template()) {
+    this.element = $('.app');
+    this.checkLogin();
+    this.loadMore = this.loadMoreWithDebounce();
+    this.template = template;
+    this.initializeTemplate();
+
+    this._id = getLocalStorage(LOCAL_STORAGE_KEY.USER_TOKEN);
+
+    this.globalIndex = 0;
+
+    this.bindEvents();
+  }
+
+  bindEvents() {
+    $('main').addEventListener('click', this.handleClickBookmark.bind(this));
+    window.addEventListener('scroll', this.handleWindowScroll.bind(this));
+    $('nav').addEventListener('click', this.handleClickTab.bind(this));
+  }
+
+  initializeTemplate() {
+    this.element.innerHTML = this.template.initialize();
+    this.loadMore();
+    setDisplay($('.saved'), 'none');
+  }
+
+  checkLogin() {
+    if (this._id !== null) return;
+
+    location.replace('./login.html');
+  }
+
+  createPin() {
+    toggleLoading();
+
+    const random = getRandomNumber(MAX_IMAGE_NUMBER);
+
+    const pin = this.template.getPin(this.globalIndex, random);
+
+    toggleLoading();
+
+    return pin;
+  }
+
+  loadMoreWithDebounce() {
+    return debounce(() => {
+      const container = $('.container');
+      const pinList = [];
+      for (let i = MAIN_EXPLORE_PAGE_PER_AMOUNT; i > 0; i--) {
+        pinList.push(this.createPin());
+      }
+      container.innerHTML += pinList.join('');
+    }, 500);
+  }
+
+  async renderBookmark() {
+    const saved = $('.saved');
+
+    const userBookmarks = await getBookmarkList(`${BASE_URL}/user/bookmark`, {
+      _id: this._id,
+    });
+    const $content = this.template.getBookmarkTab(userBookmarks);
+
+    saved.innerHTML = $content;
+  }
+
+  async handleClickTab(event) {
+    event.stopPropagation();
+    const saved = $('.saved');
+    const container = $('.container');
+    if (!event.target.matches('input')) return;
+
+    const tab = event.target.id;
+
+    switch (tab) {
+      case MAIN_VIEW_TAB.SAVED: {
+        setDisplay(saved, 'block');
+        setDisplay(container, 'none');
+
+        this.renderBookmark();
+        break;
+      }
+      case MAIN_VIEW_TAB.EXPLORE: {
+        setDisplay(saved, 'none');
+        setDisplay(container, 'block');
+
+        this.globalIndex = 0;
+        this.loadMore();
+        break;
+      }
+    }
+  }
+
+  handleWindowScroll() {
+    const loader = $('.loader');
+
+    if (loader === null) return;
+
+    const { y, height } = loader.getBoundingClientRect();
+
+    if (-y < height * INFINITE_SCROLL_Y_AXIS_LOAD_LIMIT) return;
+
+    this.loadMore();
+  }
+
+  async handleClickBookmark(event) {
+    if (!event.target.matches('label[for^="heart"]')) return;
+    await addBookmark(
+      `${BASE_URL}/user/bookmark/${event.target.getAttribute('key')}`,
+      { _id: this._id },
+    );
+    console.log('북마크에 저장되었습니다.');
+  }
+}
+
+class Template {
+  initialize() {
+    return `
+      <header>
+        <nav>
+          <div class="item">
+            <input type="radio" name="menubtn" id="explore" checked />
+            <label for="explore" data-label="explore">
+              <svg class="explore" width="50" height="50" viewBox="0 0 24 24" fill="none"
+                xmlns="http://www.w3.org/2000/svg">
+                <path d="M4 4H8V8H4V4Z" fill="currentColor" />
+                <path d="M4 10H8V14H4V10Z" fill="currentColor" />
+                <path d="M8 16H4V20H8V16Z" fill="currentColor" />
+                <path d="M10 4H14V8H10V4Z" fill="currentColor" />
+                <path d="M14 10H10V14H14V10Z" fill="currentColor" />
+                <path d="M10 16H14V20H10V16Z" fill="currentColor" />
+                <path d="M20 4H16V8H20V4Z" fill="currentColor" />
+                <path d="M16 10H20V14H16V10Z" fill="currentColor" />
+                <path d="M20 16H16V20H20V16Z" fill="currentColor" />
+              </svg>
+            </label>
+          </div>
+
+          <div class="item">
+            <input type="radio" name="menubtn" id="saved" />
+            <label for="saved" data-label="saved">
+              <svg width="50" height="50" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path fill-rule="evenodd" clip-rule="evenodd"
+                  d="M19 20H17.1717L12.7072 15.5354C12.3166 15.1449 11.6835 15.1449 11.2929 15.5354L6.82843 20L5 20V7C5 5.34315 6.34315 4 8 4H16C17.6569 4 19 5.34314 19 7V20ZM17 7C17 6.44772 16.5523 6 16 6H8C7.44772 6 7 6.44772 7 7V17L9.87873 14.1212C11.0503 12.9497 12.9498 12.9497 14.1214 14.1212L17 16.9999V7Z"
+                  fill="currentColor" />
+              </svg>
+            </label>
+          </div>
+        </nav>
+      </header>
+      <main>
+        <div class="container"></div>
+        <div class="saved"></div>
+        <div class="loader"></div>
+      </main>
+    `;
+  }
+
+  getPin(index, random) {
+    const imageSrc = `${RANDOM_IMAGE_URL}/${random}.jpg`;
+
+    return `
+      <div class="pin">
+        <div class="button-wrapper">
+          <div class="anim-icon anim-icon-md heart">
+            <input type="checkbox" id="heart${index}" />
+            <label for="heart${index}" key=${random}></label>
+          </div>
+        </div>
+        <img src="${imageSrc}" />
+      </div>
+    `;
+  }
+
+  getBookmarkTab(userBookmarks) {
+    return `
+      <div class="container">
+      ${userBookmarks
+        .map(
+          ({ _id, url }, index) => `
+        <div class="pin">
+          <div class="button-wrapper">
+            <div class="anim-icon anim-icon-md heart">
+              <input type="checkbox" id="heart${index}" checked>
+              <label for="heart${index}" key=${_id}></label>
+            </div>
+          </div><img src="${RANDOM_IMAGE_URL}/${url}.jpg">
+        </div>`,
+        )
+        .join('')}
+      </div>
+    `;
+  }
+}
diff --git a/packages/seal/src/views/SignupView.js b/packages/seal/src/views/SignupView.js
new file mode 100644
index 0000000..c1252bd
--- /dev/null
+++ b/packages/seal/src/views/SignupView.js
@@ -0,0 +1,77 @@
+import { $ } from '../helper/dom.js';
+import { signup } from '../api/index.js';
+import {
+  BASE_URL,
+  ERROR_MESSAGE,
+  INDEX_PAGE,
+  SUCCESS_MESSAGE,
+} from '../constant/index.js';
+
+export default class SignupView {
+  constructor(template = new Template()) {
+    this.element = $('.app');
+    this.template = template;
+    this.element.innerHTML = this.template.initialize();
+    this.bindEvents();
+  }
+
+  bindEvents() {
+    $('button[data-submit="signup"]').addEventListener(
+      'click',
+      this.handleClickSignupButton.bind(this),
+    );
+  }
+
+  async handleClickSignupButton(event) {
+    event.preventDefault();
+
+    const email = $('#signup-email').value;
+    const password = $('#signup-password').value;
+    const passwordConfirm = $('#signup-password-confirm').value;
+
+    if (password !== passwordConfirm)
+      return alert(ERROR_MESSAGE.WRONG_PASSWORD);
+
+    if (this.checkEmailFormat(email))
+      return alert(ERROR_MESSAGE.INVALID_EMAIL_FORMAT);
+
+    await signup(`${BASE_URL}/user`, {
+      email,
+      password,
+      status: 0, // TODO: status 상수화
+    });
+
+    alert(SUCCESS_MESSAGE.SIGNUP);
+    location.replace(`${INDEX_PAGE}/login.html`);
+  }
+
+  checkEmailFormat(email) {
+    const regEmail =
+      /^[0-9a-zA-Z]([-_\\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i;
+
+    return !regEmail.test(email);
+  }
+}
+
+class Template {
+  initialize() {
+    return `
+      <div class="login-wrapper">
+        <div class="login-page">
+          <div class="container">
+            <form class="forms">
+              <!-- <label>이메일</label> -->
+              <input type="text" id="signup-email" placeholder="이메일" />
+              <!-- <label>비밀번호</label> -->
+              <input type="password" id="signup-password" placeholder="비밀번호" />
+              <!-- <label>비밀번호 확인</label> -->
+              <input type="password" id="signup-password-confirm" placeholder="비밀번호 확인" />
+              <button data-submit="signup">회원가입</button>
+              <p class="message">계정이 있으신가요? <a href="/login.html">로그인하기</a></p>
+            </form>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+}
diff --git a/packages/seal/webpack.config.js b/packages/seal/webpack.config.js
index 71bd288..680237e 100644
--- a/packages/seal/webpack.config.js
+++ b/packages/seal/webpack.config.js
@@ -19,6 +19,7 @@ module.exports = {
     // 각 html에 필요한 entry 파일
     index: './src/main.js',
     login: './src/login.js',
+    signup: './src/signup.js',
   },
   output: {
     path: path.resolve(__dirname, 'public'),
@@ -33,7 +34,7 @@ module.exports = {
     new HTMLWebpackPlugin({
       hash: true,
       filename: 'index.html',
-      excludeChunks: ['login'], // entry에서 해당 리스트를 제외한 나머지
+      chunks: ['index'], // entry에서 해당 리스트를 제외한 나머지
       template: path.resolve(__dirname, 'index.html'),
       favicon: './favicon.ico',
     }),
@@ -44,6 +45,13 @@ module.exports = {
       template: path.resolve(__dirname, 'login.html'),
       favicon: './favicon.ico',
     }),
+    new HTMLWebpackPlugin({
+      hash: true,
+      filename: 'signup.html',
+      chunks: ['signup'], // entry에서 해당 리스트만 포함
+      template: path.resolve(__dirname, 'signup.html'),
+      favicon: './favicon.ico',
+    }),
     new webpack.HotModuleReplacementPlugin(),
   ],
   module: {
