스프링으로 웹페이지 만들기 - 5. 부트스트랩 무료템플릿 사용하기

이번 포스팅엔 나의 허접한 UI를 아름답게 바꿔줄 부트스트랩 템플릿을 사용할 예정이다.

여기서 부트스트랩이란? 

 

프론트엔드 영역의 웹개발을 빠르고 쉽게 만들어 주기 위한 템플릿 오픈소스이며,

간단하게 템플릿을 다운받아 자신의 프로젝트에 넣어주면 적용되는 나같은 백엔드 개발자에게 아주 고마운 오픈소스 플랫폼이다.

 

아래 URL로 들어가보면 

 

https://startbootstrap.com/

Free Bootstrap Themes, Templates, Snippets, and Guides - Start Bootstrap

 

 

- Start Bootstrap 화면

출처 Start Bootstrap

 

 

이렇게나 많은 템플릿을 제공한다.

자신의 프로젝트의 방향성에 맞게 카테고리를 선택하여 원하는 템플릿을 적용하면 된다.

 

나같은 경우는 로또 번호 무료 추첨 및 로또 번호 분석등 메인페이지에 많은 정보를 한눈에 볼 수 있게끔 대쉬보드형으로 찾아보았다.

 

 

- 템플릿 다운로드

출처 Start Bootstrap

 

 

이런 대쉬보드 형 템플릿으로 금주 로또 당첨 번호 확인, 1~45번까지의 노출 번호 추이 등 

로또에 관련된 많은 정보를 한눈에 쉽게 볼 수 있을거 같아 이녀석으로 정하였다. 

템플릿을 선정했으면 오른쪽에 Free Download 버튼을 눌러 소스를 다운받는다.

 

 

 

- 템플릿 적용

 

 

이렇게 다운을 완료하여 확인하면 에러 css, js, 그리고 에러 페이지에 관한 HTML  까지 제공한다.

지금 당장 전부다 사용할 필요는 없어 상위폴더 3개와 index.html 을 본인 workspace 에 넣어주자

단순 복사 붙여넣기 후 이클립스 내에 프로젝트를 refresh 해주면 잘 들어간걸 확인할 수 있다.

 

 

 

 

 

이렇게 잘 들어온걸 확인한 후 index.html 의 내용을 그대로 긁어 board.jsp 에 붙여넣기 한다.

기존에 사용하던 board.jsp 의 내용은 그닥 필요 없는 내용이며 테스트 페이지정도로만 봐서 소스를 전부 싹 복붙해준다.

나중에 정말 필요하면 이클립스의  Show Local History 기능을 통해 복원가능하니 걱정은 안해도 된다.

 

변경전

 

 

여기서 중요한 js 및 css 의 경로를 바꿔주어야 하는데 현재 특정 인터넷 URL 연결로 받는 애들은 제외하고 본인소스가 들어있는 경로만 바꿔주면 된다.

 

변경후

 

 

이렇게 보기좋게 특정 URL 로 받는 애들은 위로 내 워크스페이스에 존재하는 파일을 찾는 경로는 저런식으로 수정해주면된다. 

그러고 다시 localhost:8080/board 로 들어가보면!!

 

 

- 템플릿 적용 확인

 

 

성공적으로 내 페이지에 부트스트랩 템플릿이 적용된걸 확인할 수 있다.

아직 버튼 별 이벤트도 없고 빈 깡통이지만 나만의 프로젝트를 꾸며나갈 생각에 설랜다.

 

마냥 템플릿만 받고 진행하기엔 막막할 수 있으니

앞으로의 진로를 위해 카카오오븐이라는 툴을 사용하여 내 페이지의 좀 더 구체적인 UI/UX 를 정의하고 구성해보도록 하겠다.

 

 

카카오오븐을 사용한 UI구성

 

 

카카오 오븐은 사용법은 다음 포스팅에서 구체적으로 다루겠다!

 

 

 

카카오 오븐 사용은 Tool 카테고리에서 작성한 내용이므로

 

https://biesil.tistory.com/10

스프링으로 웹페이지 만들기 - 6. 카카오오븐 사용하여 UI UX 정의하기

 

해당 URL로 확인해주시면 감사하겠습니다!