웹앱 하단 바 클릭 시 주소 이동에 관한 고민

안녕하세요. 반응형 웹을 통해서 html&CSS&JS - webView기반의 앱을 개발중인 주니어개발자입니다.

다름이 아니라 웹에서 하단 네비게이션 바를 만드는 예제들을 찾아보는 중인데, 각 메뉴 선택 시에
<a href="#" ...
와 같은 방법으로 해당 메뉴에 맞는 웹을 보여주게 되면 동시에 제가 직전까지 보고 있던 메뉴를 다시 선택하였을 때 그 화면이 다시 해당 주소를 불러오면서 "새로고침"이 될것같아서 고민이 됩니다.

혹시 어플에서의 액티비티-프래그먼트 활용처럼, 하단 네비게이션 바의 다른 메뉴를 선택했다 다시 돌아오더라도 이전에 보던 컨텐츠를 다시 볼 수 있는 방법이 있을까요?

인스타그램도 웹앱을 많이 활용하는 것으로 아는데, 바텀 메뉴를 여러번 넘어다니다 다시 돌아와도 이전 메뉴의 화면들이 그대로 남아있더라구요. 웹에서 어떻게 구현할 수 있는지 너무 궁금한데 검색을 계속 해도 아직 명확한 방법이 보이지가 않아서, 간절한 마음에 질문드리게 되었습니다.

* 아래는 제가 찾아본 web 바텀 네비게이션 예제 코드입니다.

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <style>
        .bottom_menu {
            position: fixed;
            bottom: 0px;
            left: 0px;
            width: 100%;
            height: 50px;
            z-index: 100;
            border-top: 1px solid black;
            background-color: white
        }

        .bottom_menu > div {
            float: left;
            width: 20%;
            height: 100%;
            text-align: center;
            padding-top: 13px;
        }

        body {
            margin: 0 0 55px 0;
        }

        .nav {
            position: fixed;
            bottom: 0;
            width: 100%;
            height: 55px;
            box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
            background-color: #ffffff;
            display: flex;
            overflow-x: auto;
        }

        .nav__link {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            flex-grow: 1;
            min-width: 50px;
            overflow: hidden;
            white-space: nowrap;
            font-family: sans-serif;
            font-size: 13px;
            color: #444444;
            text-decoration: none;
            -webkit-tap-highlight-color: transparent;
            transition: background-color 0.1s ease-in-out;
        }

        .nav__link:hover {
            background-color: #eeeeee;
        }

        .nav__link--active {
            color: #009578;
        }

        .nav__icon {
            font-size: 18px;
        }

    </style>
</head>
<body>
<nav class="nav">
    <a href="#" class="nav__link">
        <i class="material-icons nav__icon">dashboard</i>
        <span class="nav__text">Dashboard</span>
    </a>
    <a href="#" class="nav__link nav__link--active">
        <i class="material-icons nav__icon">person</i>
        <span class="nav__text">Profile</span>
    </a>
    <a href="#" class="nav__link">
        <i class="material-icons nav__icon">devices</i>
        <span class="nav__text">Devices</span>
    </a>
    <a href="#" class="nav__link">
        <i class="material-icons nav__icon">lock</i>
        <span class="nav__text">Privacy</span>
    </a>
    <a href="#" class="nav__link">
        <i class="material-icons nav__icon">settings</i>
        <span class="nav__text">Settings</span>
    </a>
</nav>
</body>

안녕하세요, 인프런 AI 인턴입니다.

장산님, 웹앱에서 하단 네비게이션 바를 통해 각 메뉴를 선택할 때 이전에 보던 메뉴의 상태를 유지하는 기능에 대해 문의하셨군요. 이 문제는 SPA(Single Page Application) 구현 방식으로 해결할 수 있습니다. SPA 구현은 페이지를 새로 고치지 않고도 페이지의 내용을 동적으로 업데이트할 수 있게 해줍니다.

대표적으로 사용할 수 있는 기술은 React, Vue, Angular 등이 있습니다. 이러한 프레임워크나 라이브러리를 사용하면 웹앱의 상태를 효과적으로 관리할 수 있고, 사용자가 메뉴를 이동하더라도 페이지를 새로 불러오지 않고 필요한 데이터만 갱신하여 보여줄 수 있습니다. 예를 들어, React의 경우 React Router를 사용하여 SPA를 구현할 수 있습니다.

아직 SPA에 대한 개념이나 구현 방법이 익숙하지 않다면, 초기 단계에서는 start.spring.io 와 같은 웹 사이트에서 제공하는 프로젝트 템플릿과 함께 연습해 보시는 것도 좋을 것입니다. 이는 Spring Boot 기반의 웹 어플리케이션을 빠르게 시작할 수 있게 도와줍니다.

자세한 내용은 아래 링크에서 확인할 수 있습니다. 다양한 SPA 프레임워크에 대한 공식 문서나 가이드를 찾아보시면 도움이 될 것입니다.

React 공식 문서: https://reactjs.org/
Vue 공식 문서: https://vuejs.org/
Angular 공식 문서: https://angular.io/

SPA 방식으로 웹앱을 구현하면 사용자 경험을 크게 향상시킬 수 있어 요즘 대부분의 현대 웹앱에서 선호하는 접근 방식입니다. 각 프레임워크별 특성과 제공하는 기능을 비교해보시고, 프로젝트에 가장 적합한 선택을 하시기 바랍니다.

인프런 커뮤니티 질문&답변