쇼핑몰 웹사이트 만들어보기 - 기획과 초기 화면

토비의 스프링, 김영한님의 스프링 강의를 통해 스프링을 어느정도 배웠으니 이를 토대로 웹사이트를 하나 만들어보기로 하였다. 웹사이트를 혼자서 만들다보면 내가 모르는 것이 무엇인지 알 수 있을 것 같고, 디버깅과정에서 더더욱 성장할 수 있을 것이라 생각한다.

먼저, 쇼핑몰을 어떤 식으로 만들지 기획해보자.

(초기 기획이며, 더 많아질 수도 적어질 수도 있음! 하지만 핵심적인 기능은 모두 만들 것)

1. 회원이 존재하며, 구매한 금액에 따라 혜택을 받도록 하자. 혜택에는 특정 금액 이상 누적 구매 달성 시, 등급이 오르며 그에 따른 쿠폰을 주는 방식이 가장 보편적으로 보인다.

   구현해야할 것

   1. 회원정보
   2. 회원가입, 로그인, 로그아웃
   3. 회원정보 변경 창
   4. 등급 시스템

2. 장바구니에 물건을 담아서 한 번에 거래가 가능하도록 하자

   구현해야할 것

   1. 물건을 장바구니 담기시, 물건이 장바구니로 들어가도록 하는 기능
   2. 장바구니 아이콘을 누르면 장바구니 창으로 이동하도록하는 기능
   3. 장바구니 창에서 물건의 삭제 및 분할 구매 기능

3. 물건을 결제할 때 쿠폰을 적용되도록 하자.

   구현해야할 것

   1. 조건에 따른 쿠폰의 사용가능 여부 판별
   2. 쿠폰 적용 시, 그에 맞게 최종 결제 가격이 줄어들도록하기

4. 가능하다면 만들고 싶은 기능

   1.검색 서비스 - 물건이 많은 경우에도 빠르게 검색 가능한 서비스
   2.결제 서비스 - 결제 api를 이용해 결제 서비스 구현
   3.이벤트 - 이벤트 배너를 클릭하여 이벤트 창으로 이동 및 참여 가능

html,css,js는 능숙하게 다루지 못하기 때문에 블로그나 실제 쇼핑몰 클론코딩, chatGPT를 통해 만들 것이다. (불가피하게 해당 언어에 대한 깊은 지식이 필요하다면 배울 것) 백엔드는 스프링부트를 이용하여 진행할 것이다.

초기화면 만들기

먼저, chatGPT를 이용해 간단하게 쇼핑몰 사이트를 만들어달라고 요청해보았다.

초기화면

로그인화면

GPT를 이용해 쇼핑몰 템플릿을 얻었다. 이를 입맛에 맞게 수정하면 될 것 같다.

일단 GPT가 준 쇼핑몰은 내가 구상하던 초기화면과는 거리가 멀고 오히려 검색 시에 물건이 나오는 화면에서 사용할 수 있을 것 같다. 따라서 블로그를 통해 초기화면을 만들어보도록할 것이다.

블로그는 해당 블로그를 참고했다.

뼈대를 블로그와 GPT의 코드를 짜집기하여 대강 제작해보았다. css공부했던 것들을 까먹어서 구글링하는데에 시간이 조금 소요되었다.

쇼핑몰 로고를 넣고 위치를 조정하기 위해 home_logo <div>태그를 이용하였다.

<div id="home_logo">
	<img src="images/icons/logo.png" />
</div>

<header>태그로 상단 바를 표현하고, home_logo를 통해 로고의 위치와 크기를 조정했다.

/*상단 바*/
header {
    background-color: #333;
    color: #fff;
    height: 64px;
    display: flex;
    justify-content: center;
}

/*로고가 좌측 상단에 위치하도록 조정*/
#home_logo {
    display: flex;
    align-items: center;
    height: 100%;
    width: 100%;
}

/*선택자를 이용해 로고이미지 크기 조정*/
#home_logo > img {
    width: 100px;
    height: 100px;
}

로그인 버튼은 GPT가 만들어준 것을 약간 수정하였다.

<div id="user-menu" class="user-menu">
	<!-- User menu dropdown will be dynamically added here -->
</div>

로그인 버튼을 꾸미는 코드는 만들어주지 않아서 새로 작성하였다.

.user-menu button {
    width: 80px;
    height: 30px;
    margin: 18px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
}

배너는 중앙에 위치하도록하고 너무 꽉차면 미관상 별로라고 생각하여 빈 공간을 주었다.

    <div id="banner_margin">
        <div id="banner">
            <img src="images/banners/banner1.jpg" />
        </div>
    </div>

/*배너 위치 조정*/
#banner_margin{
    height: 100%;
    width: 800px;
    background-color: beige;
    margin: 0 auto;
}

/*배너의 길이 조정*/
#banner {
    height: 200px;
}

/*배너이미지가 만든 크기에 맞도록 조정*/
#banner > img {
    width: 100%;
}

마지막으로 할인하는 상품들을 표시해주는 바를 GPT가 준 코드와 블로그를 참고하여 만들었다. (여기서 간격 조절하는데에 시간을 너무 많이 썼다...ㅠ)

    <article>
            <h1>할인하는 상품들</h1>
        <div id="product_list">
            <div id="products">
                <!-- Product items will be dynamically added here -->
            </div>
        </div>
    </article>

/*할인하는 상품을 표시하는 바*/
article{
    background-color: beige;
    margin: 0 auto;
}

/*상품을 article태그에 넣기위한 바*/
#product_list{
    display: flex;
}

/*상품 태그*/
.product {
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-right: 10px;
    padding: 10px;
    float: left; /*상품 가로 정렬*/
}

/*상품 이미지*/
.product img {
    max-width: 100px;
    max-height: 100px;
}

/*상품 이름*/
.product h2 {
    margin-top: 0;
}

/*장바구니 버튼*/
.product button {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
}

/*버튼이 눌릴 시 색 변화*/
.product button:hover {
    background-color: #45a049;
}

GPT가 준 js코드

document.addEventListener("DOMContentLoaded", function() {
    // Dummy product data
    const products = [
        {
            name: "상품 1",
            price: 1000,
            image: "https://via.placeholder.com/150"
        },
        {
            name: "상품 2",
            price: 1500,
            image: "https://via.placeholder.com/150"
        },
        {
            name: "상품 3",
            price: 2000,
            image: "https://via.placeholder.com/150"
        }
    ];

    const productsSection = document.getElementById("products");
    const userMenu = document.getElementById("user-menu");

    // Dummy user data (Assuming not logged in initially)
    let isLoggedIn = false;

    // Function to update user menu
    function updateUserMenu() {
        userMenu.innerHTML = "";
        if (isLoggedIn) {
            const userIcon = document.createElement("div");
            userIcon.classList.add("user-icon");
            userIcon.textContent = "User";
            userIcon.addEventListener("click", toggleUserOptions);
            userMenu.appendChild(userIcon);
        } else {
            const loginButton = document.createElement("button");
            loginButton.classList.add("login-button");
            loginButton.textContent = "로그인";
            loginButton.addEventListener("click", redirectToLoginPage);
            userMenu.appendChild(loginButton);
        }
    }

    // Function to redirect to login page
    function redirectToLoginPage() {
        window.location.href = "login.html";
    }

    // Function to toggle user options dropdown
    function toggleUserOptions() {
        const userOptions = document.getElementById("user-options");
        userOptions.classList.toggle("show");
    }

    // Render products
    products.forEach((product, index) => {
        const productElement = document.createElement("section");
        productElement.classList.add("product");
        productElement.dataset.index = index;
        productElement.innerHTML = `
      <img src="${product.image}" alt="${product.name}">
      <h2>${product.name}</h2>
      <p>${product.price}원</p>
      <button class="add-to-cart">장바구니 담기</button>
    `;
        productsSection.appendChild(productElement);
    });

최종적으로 만들어진 뼈대는 다음과 같다

다음 시간엔 초기 화면을 완성시켜보도록 하자. 완성시킨 뒤에는 스프링 프레임워크를 이용해 회원을 만들어보자.

• 전체코드는 깃허브에 업로드

도움을 받은 사이트

https://www.miricanvas.com/ - 디자인 플랫폼 사이트

https://blog.naver.com/psychozandy/222652712340 - 쇼핑몰 구현 블로그

chatGPT