Visual Studio Code를 사용하여 쇼핑몰 사이트를 만들어 보았습니다.
[첫 페이지]
제가 쇼핑몰을 운영할 수 있는 상품을 가지고 있지 않기 때문에 인터넷 검색을 해서 이미지를 다운 받아서 사용했습니다.
이미지 로고를 제작해서 넣었고 로그인 시스템, 챗봇, 카테고리와 Top, 고객지원 인터페이스 등을 만들어 보았습니다.
Visual Studio Code에서 폴더 및 html 파일을 만들어서 정리를 하였습니다.
CODE라는 폴더를 만들면 자동으로 바탕화면에 폴더가 생깁니다.
[전체구조]
전체 구조는 이렇습니다. 필요한 만큼 Visual Studio Code에서 html 파일을 생성하거나 폴더를 생성해서 구분할 수 있습니다.
[로고 영역]
로고 이미지를 가운데 정렬하고 위/아래 여백 설정, 마우스를 올리면 살짝 커지거나 기울어지는 hover 애니메이션 사용하였습니다.
[메인 네비게이션 바]
가운데로 정렬한 수평 네비게이션 바이면서 카테고리나 Top, 고객지원 버튼을 눌렀을 때 수직으로 항목을 보여줍니다. 기본으로는 회색 버튼이고 사용자가 예를 들어 카테고리를 누르거나 마우스를 가져다 놓는다면 인식을 할 수 있게끔 보라색으로 색상이 변경됩니다.
[드랍다운 메뉴]
스타일 부분에서 신경을 좀 써야 하는 부분이었습니다. 네비게이션 바를 누르거나 마우스를 가져다가 올려놓는 경우 항목들이 잠깐 보였다가 사라지는 경우가 있었습니다. 그래서 드랍다운을 통해서 해당 부분을 수정하였습니다.
[상품 갤러리]
display: flex + flex-wrap:wrap 부분에서는 상품을 한 줄에 나열하다가 공간이 부족하면 자동으로 줄을 바꿀 수 있도록 설정하고
상품의 개수가 정해졌다면 한 줄에 몇 개씩 상품 이미지를 넣을 수 있는 그리드 방식을 사용할 수 있지만 저희는 개수가 정해져 있지 않은 상태에서 상품을 넣는다는 가정을 했기 때문에 반응형 구조로 만들었습니다
반응형 구조에 대해서 간략하게 설명 드리자면
1.gap(상품 이미지들 사이 간격):30px, 2.width(한 상품의 이미지 너비):200px
- gap 4개 (상품 5개면 사이 공간은 4개): 30px × 4 = 120px
- 전체 폭: (200px × 5) + 120px = 1120px
즉 1120px를 넘으면 상품 5개 한 줄에 혹은 작으면 자동으로 한 줄에 3,4개로 줄어드는 것입니다.
[푸터]
푸터를 넣은 이유는 사이트 맨 아랫부분에 사이트 인스타그램, 카카오 채널, 문의하기(chat bot) 등을 넣고 싶어서 상품 이미지와 부분을 나누기 위해서 푸터를 스타일에 넣었습니다. 페이지 하단 여백을 주고, 회색 선으로 구분하였고 링크는 보라색으로 강조하였습니다.
[문의하기 (채팅 박스 chat bot)]
채팅 박스를 우측 하단에 고정을 시켜놓고 처음에는 숨겨져 있다가 문의하기를 누르면 생겨나는 형태로 만들었습니다.
채팅 박스를 나중에 좀 더 사이트를 보완할 때 사용자의 문의를 실시간으로 대화를 주고받을 수 있도록 보완하는 과정이 필요합니다.
[로고 영역]
<header class="logo-container" style="position: relative;">
<a href="first.html">
<img src="img/logo.png" alt="autumn purple logo" class="logo">
</a>
로고 이미지는 인터넷에 자동으로 만들어주는 사이트로 만들었고 img 폴더에 이미지를 다 넣었습니다.
그렇기에 경로를 img/logo.png입니다. 사이트 로고를 클릭해서 눌렀을 때 제일 첫 페이지 first.html로 넘어갈 수 있게끔 했습니다.
[로그인 인터페이스 UI]
<div id="user-interface" class="login-button">
<span id="welcome-message">로그인하세요.</span>
<a href="login/login.html" id="login-link">로그인</a>
<a href="#" id="logout-link" style="display: none;">로그아웃</a>
</div>로그인 상태일 때 사용자 이름을 표시, 로그인 페이지로 이동하는 링크, 로그아웃 버튼(처음엔 로그인을 하지 않았을 경우 로그아웃 버튼이 숨어져 있습니다.)
[로그인 상태 확인]
<script>
// 로그인 상태 확인
const user = localStorage.getItem("username");
const welcomeMessage = document.getElementById("welcome-message");
const loginLink = document.getElementById("login-link");
const logoutLink = document.getElementById("logout-link");
if (user) {
welcomeMessage.textContent = `${user}님 안녕하세요!`;
loginLink.style.display = "none";
logoutLink.style.display = "inline";
}localStorage에서 username값을 가져오고 값이 있으면 로그인된 것으로 판단
로그인 성공 시 welcome-message가 나옵니다. 예를 들어 김철수님 안녕하세요! 이런 식으로 출력됩니다.
다음으로 로그인 링크는 숨겨지고 로그아웃 링크가 보입니다.
[로그아웃 기능]
logoutLink.addEventListener("click", function (e) {
e.preventDefault();
localStorage.removeItem("username");
alert("로그아웃되었습니다.");
window.location.reload();
});
</script>
</header>localStorage에서 username없애고 페이지를 새로고침해서 로그인 UI로 복귀할 수 있습니다.
로그인 기능 코드는 style 로그인 부분과 연결 되어있습니다.
[네비게이션]
가장 경로를 잘 설정해 줘야 하는 부분입니다. 경로를 잘못 지정하였을 시 페이지 오류가 나타납니다.
<!-- 네비게이션 바 -->
<nav class="main-nav">
<div class="nav-section">
<div class="nav-title"></div>
<div class="nav-items">
<div class="item dropdown-trigger">카테고리
<div class="dropdown">
<a href="category/tops/tops.html">상의</a>
<a href="category/bottoms/bottoms.html">하의</a>
<a href="category/jackets/jackets.html">자켓</a>
<a href="category/paddings/padding.html">패딩</a>
</div>
</div>
</div>
</div>
<div class="nav-section">
<div class="nav-title"></div>
<div class="nav-items">
<div class="item dropdown-trigger">Top
<div class="dropdown">
<a href="top/top10.html">Top10</a>
<a href="top/all/all.html">All</a>
</div>
</div>
</div>
</div>
<div class="nav-section">
<div class="nav-title"></div>
<div class="nav-items">
<div class="item dropdown-trigger">고객 지원
<div class="dropdown">
<a href="support/customer.html">고객센터</a>
<a href="support/board.html">게시판</a>
<a href="support/mypage.html">MyPage</a>
<a href="support/review.html">리뷰</a>
</div>
</div>
</div>
</div>
</nav>아까 보여드렸던 root를 참고하시면 될것같습니다.
[상품 갤러리]
<section class="product-gallery">
<div class="product">
<a href="https://www.coupang.com/vp/products/8314689021?itemId=23994704435&vendorItemId=91015655389" target="_blank">
<img src="img/hood1.webp" alt="상품 1">
</a>
<div class="price">₩26,900</div>
</div>저는 상품, 상품 이미지를 가지고 있지 않기 때문에 인터넷에서 이미지를 다운로드 받아서 img폴더에 넣고 주소와 가격을 가져왔습니다. div 부분만 총 20개를 작성하여서 한 페이지에 20개의 상품 이미지를 넣었습니다.
[푸터]
<footer>
<div class="footer-line"></div>
⒲ 2025 autumn purple |
<a href="" target="_blank">인스타그램</a> |
<a href="" target="_blank">카카오채널</a> |
<a href="#" id="chatButton">문의하기</a><br>
대표: | 사업자등록번호: | Email:
</footer>빈 곳에 주소와 정보를 넣으면 푸터부분은 끝입니다.
[문의하기]
<!-- 문의하기 버튼과 채팅창 -->
<div id="chatBox" class="chat-box">
<div class="chat-header">
<span>고객지원</span>
<button id="closeChat" class="close-button">X</button>
</div>
<div class="chat-content">
<p>안녕하세요! 무엇을 도와드릴까요?</p>
</div>
<div class="chat-input">
<input type="text" placeholder="메시지를 입력하세요..." />
<button>보내기</button>
</div>
</div>
<script>
const chatButton = document.getElementById('chatButton');
const chatBox = document.getElementById('chatBox');
const closeChat = document.getElementById('closeChat');
// 문의하기 버튼 클릭 시 채팅창 열기
chatButton.addEventListener('click', (e) => {
e.preventDefault(); // 링크의 기본 동작 방지
chatBox.style.display = 'block';
});
// 닫기 버튼 클릭 시 채팅창 닫기
closeChat.addEventListener('click', () => {
chatBox.style.display = 'none';
});
</script>
</body>
</html>여기까지 first.html 코드를 설명드렸고 다른 페이지도 이 틀을 사용하여 설명 드리겠습니다.
[second.html(로그인 페이지)]
second.html은 first.html의 로그인 버튼을 눌러서 로그인 페이지로 넘어가면 이와 같은 페이지를 만드는 코드입니다.
기능적인 부분은 login.html, signup.html, forgotpassword.html,dashboard.html에서 담당을 합니다.
한마디로 second.html은 로그인 페이지의 기본적인 틀이라고 생각하시면 되겠습니다.
[login.html]
body 스타일은 화면 전체를 가운데 정렬하기 위한 Flexbox 레이아웃을 사용하였고
입력창 스타일, 로그인 버튼 스타일, 회원가입/비밀번호 찾기 링크 설정,
사용자로부터 아이디와 비밀번호를 입력받는 로그인 폼, required 속성으로 값이 비어 있으면 제출이 되지 않고
button 클릭하면 제출하게됩니다.
localStorage.setItem("username", username): 브라우저에 사용자 정보를 저장
window.location.href = "../first.html": 로그인 후 이동할 페이지 지정
[signup.html]
required 속성으로 필수로 입력값을 넣어야 하는 부분이고 즉 아이디와 이메일, 비밀번호, 비밀번호 확인의 입력 필드를 생성하고 필수적으로 사용자가 입력해야 하는 부분입니다.
const username = document.getElementById("username").value; - 입력된 값을 변수로 저장합니다.
이부분은 비밀번호를 잊어버렸을시 forgot-password.html에서 사용된 변수(정보) 입니다.
[forgot-password.html]
회원가입 시 변수로 저장된 사용자의 입력값인 이메일을 입력했을때 저장된 이메일이 일치하면 사이트 상단에 알려주고 이메일이 일치하지 않으면 입력하신 이메일로 가입된 계정을 찾을 수 없다고 뜨게 됩니다.
[dashboard.html]
결론적으로 로그인하기 위해서 회원가입과 비밀번호를 잊어버렸을 때 비밀번호 찾기를 통해서 로그인을 완료했다면 로그인이 완료되었다는 문구와 함께 로그인이 완료된 first.html로 넘어가는 코드입니다.
로그인까지 완료했습니다. 이제는 로고 이미지 밑에 카테고리, Top, 고객지원에 관해서 설명하도록 하겠습니다.
사실상 상의, 하의, 자켓, 패딩 부분의 코드는 상품갤러리 빼고 다 똑같습니다. 그렇기때문에 하의 코드만 설명 드리겠습니다.
Visual Studio code에서 보면 category 폴더 안에 tops 폴더,bottoms 폴더,paddings 폴더,jackets 폴더가 있고 설명해 드리기로한 코드인 bottoms 폴더 안에는 bottoms.html(1페이지), page2.html(2페이지), page3.html(3페이지)이 있습니다. 이 페이지는 조금 있다가 설명해 드리겠습니다. 페이지 요소는 하의뿐만 아니라 상의, 자켓, 패딩 부분도 있습니다.
[bottoms.html]
사실 bottoms.html에서는 first.html과 거의 비슷하기때문에 신경 써야 하는 부분은 경로입니다.
first.html과 틀은 비슷하므로 추가적인 요소만 설명해 드리자면 페이지 네비게이션입니다.
[스타일 부분의 페이지네비게이션]
<div class="pagination">
<a href="bottoms.html">1</a>
<a href="page2.html">2</a>
<a href="page3.html">3</a>
</div>저희가 bottoms.html에서 사용해야 할 페이지 개수가 3개이기 때문에
첫 페이지를 bottoms.html, 2페이지를 page2.html, 3페이지를 page3.html로 설정해 줍니다
그러면 page2.html과 page3.html의 코드는 bottoms.html과 똑같이 하면 됩니다.
예를 들어 all 폴더의 all.html은 총 12개의 페이지가 있습니다. 그러면 기본 틀(코드)은 유지한 채 페이지네비게이션 설정만 12개로 하시면 됩니다.
[고객지원]
고객지원 코드는 간단한 형식으로 만들었기 때문에 설명 없이 사진만 올려 드리겠습니다.
[고객센터(customer.html)]
[게시판(board.html)]
[mypage(mypage.html)]
[리뷰(review.html)]
일단 제가 쇼핑몰 사이트를 만들어 보았습니다. 미흡한 부분도 있습니다. 그런 부분은 이제 앞으로 제가 풀어나가야 할 부분입니다.
사이트를 만들면서 기능적인 부분도 복잡하다고 생각하지만, 경로 문제가 핵심 키워드인 것 같습니다. 경로만 잘 설정을 해주면 사이트가 전체적으로 다 연결될 수 있습니다. 어디에서 어디로 넘어갈 때 넘어가지 않는다면 경로 문제라고 생각하시면 될 것 같습니다.
github 주소: https://github.com/aerfdad/Internet-shopping-mall-site-implementation-code
GitHub - aerfdad/Internet-shopping-mall-site-implementation-code: my first project
my first project. Contribute to aerfdad/Internet-shopping-mall-site-implementation-code development by creating an account on GitHub.
github.com
감사합니다!
'웹 개발' 카테고리의 다른 글
| Node.js + MySQL로 게임 아이템 거래 사이트 구현하기 (0) | 2026.02.21 |
|---|---|
| 미국, 한국 주식 모의 투자 사이트 만들기 (0) | 2025.11.17 |
| 게임 아이템 거래 사이트 구현 (0) | 2025.10.24 |