앞의 여러 글들에서 Firebase를 이용해, 자체적인 서버 없이 구글에서 제공하는 Firebase 내의 Firestore 서비스를 이용해 DB인 컬렉션을 만들고, 이 컬렉션에 데이터를 DB 형태로 저장하고, 불러오고, 삭제, 편집하는 기능에 해당되는 각각의 웹페이지를 만드는 과정을 소개한 바 있었다.
그런데 이렇게 만든 여러 페이지들의 기능을 사용자의 권한(가입 여부, 로그인 상태 등) 메뉴선택을 고려하여, 적절한 권한이 부여된 페이지를 효율적으로 보여주려면, 각각의 웹페이지들을 유기적으로 연결해 주는 메뉴 구성이 필요하다. 이를 위해서는 해당 웹서비스에 접속 시, 누구에게나 무조건 보여주는 첫 페이지(=Landing Page)가 필요하고, 이 초기 페이지에서 준비된 각각의 웹페이지를 연결하는 메뉴 구성체계가 필요하다.
이처럼 웹서비스 접속 시 보이는 첫 페이지인 Landing Page는 어느 웹서비스든지 필요한데, 전체 서비스를 상징하는 디자인적 요소도 필요한 특성상, 나처럼 디자인 재주가 없는 사람들에게는 이러한 Landing Page를 만드는 것이 결코 쉬운 일이 아니다. 이런 때문에, Landing Page를 쉽게 만들 수 있도록 Template들을 유료 또는 무료로 제공하는 서비스들이 많이 생겨났으며, 이러한 Template 들을 이용하면 디자인 재주가 없는 사람도 비교적 쉽고 빠르게 그런대로 쓸만한 Landing Page를 만들 수가 있다.
이러한 Template을 제공하는 사이트는 매우 많이 알려져 있으며, PIXSO, Wix, SIte123, JIMDO, Framer, 아임웹 등이 유명한 편인데, 각각 나름의 장점과 단점이 있다.
본 글에서는 이러한 Template 서비스의 일종인 startbootstrap.com의 무료 Template를 이용해 Lanidng Page를 쉽게 만드는 과정을 소개하려 하는데 개인적인 선호에 따라 자신이 원하는 Template 서비스를 이용하면 된다. 내가 이 사이트를 선호하는 이유는 비교적 간단하고, 무료로도 사용할 수 있는 템플릿들이 꽤 있고, 도메인 연결등이 자유로우며, 내가 코드를 가져다 자유롭게 연결할 수 있는 점들 때문이다.
먼저 다음과 같이 startbootstrap.com에 접속하고, Theme 탭을 살펴본다.
그러면 다음과 같이 유료 또는 무료인 여러 template들을 살펴볼 수가 있는데,
이러한 Template들 중에서 원하는 Template를 선택하여 세부 정보를 살펴본다.
여기서 반드시 확인해야 할 부분이 License인데, MIT License라고 표기되어 있어 사용상 제약이 거의 없음을 확인할 수 있다. (참고 : MIT License는 Open Source 관련된 경우에 많이 볼 수 있는 License 형태로, 거의 제약 없이 해당 자원을 사용할 수 있는 License 형태로, 자세한 내용은 https://www.olis.or.kr/license/Detailselect.do?lId=1006&mapCode=010006 참조)
해당 Template가 어느 정도 적합한 것으로 판단되어, 보다 세부적인 동작을 확인하려면 다음과 같이 Preview를 실행해 보면
실제 브라우저에서 어떻게 보이는지 미리 살펴볼 수가 있다.
또한 메뉴바 선택을 통해 연계된 화면 변화도 확인할 수가 있다.
(참고로 이 Template는 4개 화면에 해당되는 단일 페이지로, 메뉴바 선택에 따라 단일 페이지 내에서 이동하는 형태임)
이렇게 Preview를 살펴보고 해당 Template를 사용하기로 마음을 정했다면, 해당 파일을 다운로드해 준다.
그러면 압축파일의 형태로 다운로드가 이루어지는데,
이 파일의 압축을 풀면 다음과 같은 내용물이 있는 폴더가 된다.
이를 사용 중인 editor로 열면 다음과 같은 코드를 볼 수 있는데,
이제 원하는 대로 해당 코드를 원하는 부분만 남기고 편집해 주면 되는데, 만일 잘 모르는 경우라면 ..
브라우저에서 미리 보기를 해가면서, 브라우저 화면에 나타나는 단어를 코드에서 검색하는 방식으로 위치를 찾아 해당 부분을 삭제하는 방식으로 편집하면 된다. 만일 삭제를 잘못한 경우에는 에디터의 되돌리기 기능으로 되돌리면 된다. 실제로는 Template들의 경우, 편집이 용이하도록, 주요 부분마다 각주가 있어 알아보기 쉽다.
나는 아주 간단한 설명과, 연락처 정보만이 표시되는 간단한 페이지를 원하기에 (물론 사진은 대체하고, 자체 메뉴바로 교체 예정).. 화면을 보면서 다음과 같은 형태가 될 때까지
Template에 있던 코드에서 불필요한 부분들을 각주를 보면서, 그리고 중간중간 브라우저 미리 보기 화면을 보면서 삭제해 주었다. 그리고 연락처 정보는 위의 화면처럼 하나의 카드에 모아서 간략화했다.
이제 사진을 교체하기 위해 이 코드에서 jpg라는 글자를 검색해 보니, 확인이 되지 않는다.
그 대신, 부속 파일이었던 CSS 폴더 내의 css 파일을 추가로 찾아보니, 여기서 2개의 JPG 파일이 확인된다.
이 경로를 열어 해당 파일을 확인해 보니, 배경사진이 맞는 것을 알 수 있었다.
이제 내가 사용하려면 배경사진의 파일을 동일한 위치에 복사해 넣고 이름을 코드와 일치하게 변경해 주었다. (또는 style 코드에서 파일 이름을 변경해 주면 된다.)
이렇게 배경 사일 파일을 변경해 주니, 다음과 같이 의도한 대로 배경사진이 잘 반영되었다.
이제 template에 있는 text 들을 내가 필요한 대로 변경해 주기만 하면 다음과 같은 형태로 Landing 페이지가 뚝딱 만들어진다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> <title>콩이네 채소가게</title> <!-- Core theme CSS (includes Bootstrap)--> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"> <link href="css/styles.css" rel="stylesheet" /> </head> <header class="masthead"> <div class="container px-4 px-lg-5 d-flex h-100 align-items-center justify-content-center"> <div class="d-flex justify-content-center"> <div class="text-center"> <h1 class="mx-auto my-0 text-uppercase">콩이네 채소가게</h1> <h2 class="text-white-50 mx-auto mt-2 mb-2" style="font-size: 2.4em; width: 100%; text-align: justify;">늘 신선하고 건강한 채소를 전달하는 것이 우리의 기쁨입니다.</h2> </div> </div> </div> </header> <body> <!-- Contact--> <section class="contact-section bg-success mt-0"> <div class="container px-4 px-lg-5"> <div class="row gx-4 gx-lg-5"> <div class="card py-4 h-80"> <div class="card-body text-center"> <h3 class="text-uppercase m-0">Contact</h3> <div class="small text-black-50" style="font-size: 1.2em">경기도 OO시 OO동....</div> <div class="small text-black-50" style="font-size: 1.2em"><a href="#!">info@kongyivegetable.store</a></div> <div class="small text-black-50" style="font-size: 1.2em">+82 (31) xxx-xxxx</div> </div> </div> </div> </section> <!-- Footer--> <footer class="footer bg-black small text-center text-white-50"><div class="container px-4 px-lg-5">Copyright © Kongyi Vegetable Store 2024</div></footer> <!-- Bootstrap core JS--> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script> <!-- Core theme JS--> <script src="js/scripts.js"></script> <script src="https://cdn.startbootstrap.com/sb-forms-latest.js"></script> </body> </html>